首页 > 代码库 > ES5_6_7(1)——ES5

ES5_6_7(1)——ES5

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);

ES5_6_7(1)——ES5