ES5_6_7——ES5

Posted 2020-08-26

1. ECMA简述

ECMA是脚本语言规范，是由ECMA国际组织制定和发布的脚本语言规范。而 javascript 就是其规范的一种实现。当然了，类似的还有其它脚本语言。但习惯性的把术语 ECMAScript 和 JavaScript 表达为同一意思。

2. ECMA5

ECMA5的兼容性对于各个常用浏览器都是兼容的，除了最恶心的IE浏览器。

IE8： 只支持defineProperty,getOwnPropertyDescriptor部分特性及JSON新特性

IE9： 不支持严格模式，其余都可以

IE10：IE10和其它主流浏览器均支持

总结：PC端开发需要注意IE9以下的兼容，但移动端开发时不需要

2.1 严格模式（strict mode）

顾名思义 ：使得 JavaScript 在更严格的语法条件下运行。

目的/作用：

消除JavaScript语法的一些不合理、不严谨之处，减少怪异行为

消除代码运行的一些不安全之处，保证代码运行的安全

为未来新版本 JavaScript 做好铺垫

使用：在全局或函数的第一条语句定义为 ‘use strict‘; 如果浏览器不支持，只简析为一条简单的语句，没有任何副作用

全局使用：

‘use scrict‘; // code... function scrict() {     ‘use scrict‘;      // code... }

语法和行为改变：

1. 变量的生命必须使用 var 关键字

2. 创建 eval 函数作用域

3. 禁止 this 执行 window 对象

4. 对象不能用重复属性

5. 函数不能有重名的形参

2.2 JSON对象扩展

JSON对象：JSON对象或数组是一个字符串，console.info（json）会打印出字符串

JS对象：JS对象是Object或Array，console.info（obj/arr）会打印出 > Object/Array[]

JSON对象：

JSON.stringify(obj/arr): js对象(或数组)转换为json对象(或数组)

JSON.parse(json): json对象(或数组)转换为js对象(或数组)

2.3 Object对象扩展

ES5给Object扩展了好几个方一些静态方法，举例两个：

Object.create(prototype[, descriptors])：创建一个新对象

1. 以指定对象为原型创建新的对象

2. 指定新的属性，并对属性进行描述

    value: 指定值

    writable: 标识当前属性是否可修改，默认 true

    set: 监视设置当前属性值变化的回调

    get: 监视获取当前属性值的回调

var obj = {name: ‘Tom‘, setName: function(name) { this.name = name; }}; var new = Object.create(obj, {     age: {         value: 12,         writable: false,         set: function() { //... },         get: function() { //... }     } });

Object.defineProperty(object, descriptors)：为指定对象定义扩展多个属性

2.4 Array对象扩展

ES5给Array扩展了好几个常用又便捷的方法，常用的有5个：

1. Array.prototype.indexOf(value): 得到值在数组中的第一个下标

2. Array.prototype.lastIndexOf(value): 得到值在数组中的最后一个下标

3. Array.prototype.forEach(function(item, index) {}): 数组遍历

4. Array.prototype.map(function(item, index) {}): 遍历数组，返回一个新的数组

5. Array.prototype.filter(function() {}): 遍历过滤出一个新的子数组

6. Array.prototype.reduce(function() {}[, initialVal]): 将数组的每个值（从左到右）将其降低到一个值

场景： 统计一个数组中有多少个不重复的单词 Reduce方法之前： var arr = ["apple","orange","apple","orange","pear","orange"];  function getWordCnt(){     var obj = {};     for(var i= 0, l = arr.length; i< l; i++){         var item = arr[i];         obj[item] = (obj[item] +1 ) || 1;     }     return obj; } console.log(getWordCnt()); Reduce方法之后： var arr = ["apple","orange","apple","orange","pear","orange"]; function getWordCnt(){     return arr.reduce(function(prev,next){         prev[next] = (prev[next] + 1) || 1;         return prev;     },{}); } console.log(getWordCnt());

2.5 函数扩展

Function.prototype.bind(obj): 将函数内的 this 绑定为 obj，并将函数返回。

场景： 统计一个数组中有多少个不重复的单词 var name = ‘Window‘; var obj = {name: ‘Tom‘}; setTimeout(function() {     console.info(this.name); // Window }, 100); setTimeout(function() {     console.info(this.name); // Tom }.bind(obj), 100);