ECMAScript 5 - JavaScript 5

2022-11-28 08:36:39

ECMAScript 5 - JavaScript 5

1. ECMAScript 5 是什么

ECMAScript 5 也被称为 ES5 和 ECMAScript 2009。

本章介绍 ES5 的一些最重要的特性。

2. ECMAScript 5 的新特性

  • “use strict” 指令
  • String.prototype.trim()
  • Array.isArray()
  • Array.prototype.forEach()
  • Array.prototype.map()
  • Array.prototype.filter()
  • Array.prototype.reduce()
  • Array.prototype.reduceRight()
  • Array.prototype.every()
  • Array.prototype.some()
  • Array.prototype.indexOf()
  • Array.prototype.lastIndexOf()
  • JSON.parse()
  • JSON.stringify()
  • Date.now()
  • getter 和 setter 属性
  • 新的 Object 属性方法：Object.defineProperty()

3. ECMAScript 5 语法变化

  • 在字符串上使用属性访问器[ ]
  • 数组的最后一个元素 以及 对象的最后一个属性 后面可以使用,
  • 多行字符串文字
  • 保留字可作为属性名

4. “use strict” 指令

“use strict” 定义 JavaScript 代码应该在“严格模式”下执行。

严格模式请参考阅读这里。

5. String.trim()

移除字符串首尾的空格（whitespace）。

示例：

var str = "       Hello World!        ";
str.trim(); //=> "Hello World!"

6. Array.isArray()

判断一个对象是否是数组

示例：

Array.isArray([1,2]); //=> true

// 类数组对象 不是 数组
Array.isArray(document.getElementsByTagName('a')); //=> false

7. Array.prototype.forEach()

遍历数组元素。

forEach() 方法为每个数组元素调用一次函数。

var nums = [1, 2, 3];

nums.forEach(function(value, index, array) {
  console.log(value, index, array);
});

8. Array.prototype.map()

映射出一个新数组。

通过 map() 传递映射关系函数，在每个元素行执行映射关系函数，执行映射关系函数的返回值的集合为新数组。

示例：

var nums1 = [1, 2, 3];
var nums2 = nums1.map(function(value, index, array) {
  return value * 2;
});
nums1; //=> [1, 2, 3]
nums2; //=> [2, 4, 6]

9. Array.prototype.filter()

过滤出一个新的数组。

通过 filter() 传递测试函数，在每个元素上执行测试函数，测试函数的返回值为 true 的元素的集合为新数组。

示例：

var nums1 = [1, 2, 3];
var nums2 = nums1.filter(function(value, index, array) {
  return value > 1;
});
nums1; //=> [1, 2, 3]
nums2; //=> [2, 3]

10. Array.prototype.reduce()

reduce() 方法将数组元素（从左到右）的值累积为单个变量。

示例：

var nums1 = [1, 2, 3];
var sum = nums1.reduce(function(total, value, index, array) {
  return total + value;
});
nums1; //=> [1, 2, 3]
sum; //=> 6

11. Array.prototype.reduceRight()

reduceRight() 方法将数组元素（从右往左）的值累积为单个变量。

12. Array.prototype.every()

every() 方法判断是否所有数组元素都符合要求。

var nums1 = [11, 22, 33];
var allOver18 = nums1.every(function(value, index, array) {
  return value > 18;
});
allOver18; //=> false

13. Array.prototype.some()

some() 方法判断是否存符合要求的数组元素。

示例：

var nums1 = [11, 22, 33];
var someOver18 = nums1.some(function(value, index, array) {
  return value > 18;
});
someOver18; //=> true

14. Array.prototype.indexOf()

搜索指定元素的首次出现的位置。未找到则返回 -1。

示例：

[11, 22, 33].indexOf(22); //=> 1
[11, 22, 33].indexOf(2); //=> -1

15. Array.prototype.lastIndexOf()

搜索指定元素的最后出现的位置。未找到则返回 -1。

示例：

[11, 22, 22].lastIndexOf(22); //=> 2
[11, 22, 33].lastIndexOf(2); //=> -1

16. JSON.parse()

将 json 字符串文本解析为 JavaScript 对象。

示例：

var serializedJson = '{"name":"John", "age":30, "city":"New York"}';
JSON.parse(serializedJson); //=> {name: "John", age: 30, city: "New York"}

17. JSON.stringify()

将 JavaScript 对象序列化为 json 字符串文本。

18. Date.now()

获取当前时间的毫秒数，等价于 new Data().getTime()。

示例：

Date.now(); //=> 1534327926795

19. getter 和 setter

通过语法来设置对象的 setter 和 getter 属性。

var person = {
    firstName: "John",
    lastName : "Doe",
    language : "NO",
    get lang() {
        return this.language;
    },
    set lang(value) {
        this.language = value;
    }
};
// Set an object property using a setter:
person.lang = "en";

person.language; //=> "en"

20. 新的对象属性方法

Object.defineProperty() 是新的对象方法，可以定义对象的属性、改变属性的值或元数据。

示例：

// Create an Object:
var person = {
    firstName: "John",
    lastName : "Doe",
    language : "NO", 
};
// Change a Property:
Object.defineProperty(person, "language", {
    value: "EN",
    writable : true,
    enumerable : true,
    configurable : true
});
// Enumerate Properties
var txt = "";
for (var x in person) {
    txt += person[x] + ", ";
}

txt; //=> "John, Doe, EN, "

设置属性不可被被枚举：

var person = {
    firstName: "John",
    lastName : "Doe",
    language : "NO", 
};
// Change a Property:
Object.defineProperty(person, "language", {
    value: "EN",
    writable : true,
    enumerable : false,
    configurable : true
});
// Enumerate Properties
var txt = "";
for (var x in person) {
    txt += person[x] + ", ";
}

txt; //=> "John, Doe, "

设置 getter setter：

// Create an Object:
var person = {
    firstName: "John",
    lastName : "Doe",
    language : "NO"
};
// Change a Property:
Object.defineProperty(person, "language", {
get : function() { return language },
set : function(value) { language = value.toUpperCase()}
});
// Change Language
person.language = "en";

person.language; //=> "EN"

21. 访问字符串的字符

21.1. String.prototype.charAt()

返回指定索引的字符。

var str = "HELLO WORLD";
str.charAt(0); //=> "H"

21.2. 属性访问器

var str = "HELLO WORLD";
str[0]; //=> "H"

22. 尾部逗号

定义对象或数组时，允许逗号出现在最后一个 属性/元素 后面

var person = {
  firstName: "John",
  lastName:" Doe",
  age:46,
}

var points = [
  1,
  5,
  10,
  25,
  40,
  100,
];

注意：

  • IE8 不支持
  • JSON 不支持

23. 多行字符串

使用反斜线（\）可以使字符串文本跨多行。

var st = "Hello \
world!";
st; //=> "Hello world!"

24. 保留字作为属性名

ES5 允许保留字作为属性名

var obj = {name: "John", new: "yes"}

25. 浏览器支持

Chrome IE Firefox Safari Opera
完全支持的版本 Chrome 23 IE10 / Edge Firefox 21 Safari 6 Opera 15
时间 Sep 2012 Sep 2012 Apr 2013 Jul 2012 Jul 2013

26. 参考

w3schools

上一篇：2021-04-14


下一篇：SQL分类