ECMAScript 5 - JavaScript 5

缺乏、安全感 2022-10-07 11:47 212阅读 0赞

# 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 代码应该在“严格模式”下执行。

严格模式请参考阅读[这里][Link 1]。

## 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 属性。

## 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, "

设置属性不可被被枚举：

设置 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. 浏览器支持 ##

<table> 
 <thead> 
  <tr> 
   <th></th> 
   <th>Chrome</th> 
   <th>IE</th> 
   <th>Firefox</th> 
   <th>Safari</th> 
   <th>Opera</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>完全支持的版本</td> 
   <td>Chrome 23</td> 
   <td>IE10 / Edge</td> 
   <td>Firefox 21</td> 
   <td>Safari 6</td> 
   <td>Opera 15</td> 
  </tr> 
  <tr> 
   <td>时间</td> 
   <td>Sep 2012</td> 
   <td>Sep 2012</td> 
   <td>Apr 2013</td> 
   <td>Jul 2012</td> 
   <td>Jul 2013</td> 
  </tr> 
 </tbody> 
</table>

## 26. 参考 ##

[w3schools][]

[Link 1]: https://www.w3schools.com/js/js_strict.asp
[w3schools]: https://www.w3schools.com/js/js_es5.asp