温故知新——JS_ ES5新特性简介

Posted 2020-10-05

ES5浏览器支持情况：

一般来说，除了针对个别特性的特殊说明，各大主流浏览器都支持es5，包括

• Chrome 13+

• Firefox 4+

• Safari 5.1*

• IE 9*

其中IE9不支持es的严格模式，从IE10开始支持。Safari 5.1不支持Function.prototype.bind。

1、Strict Mode, 即所谓的严格模式。

    在一个文件、项目或函数的开头加上"use strict";即开启严格模式。

   详细内容参考：参考链接1；

                       参考连接2；

                       参考链接3——阮一峰。

2、JSON对象

ES5提供一个内置的（全局）JSON对象，可用来序列化（JSON.stringfy）和反序列化（parse）对象为JSON格式。

其一般性用法如下，

var test = {
    "name": "gejiawen",
    "age": 22
};
console.log(JSON.strinfy(test)); // ‘{"name": "gejiawen", "age": 22}‘
console.log(JSON.parse(‘{"name": "larry"}‘)); // Object {name: "larry"}

JSON对象提供的parse方法还提供第二个参数，用于对具体的反序列化操作做处理。比如，

JSON.parse(‘{"name": "gejiawen", "age": 22, "lucky": "13"}‘, function(key, value) {
    return typeof value === ‘string‘ ? parseInt(value) : value;
});

这里我们在回调函数中对解析的每一对键值对作处理，如果其是一个数字字符串，我们则对其进行parseInt操作，确保返回的value必定是数值型的。

JSON对象提供的stringify方法也会提供第二个参数，用于解析的预处理，同时也会提供第三个参数，用于格式化json字符串。

比如，

var o = {
    name: ‘gejiawen‘,
    age: 22,
    lucky: ‘13‘    
};
var ret = JSON.stringify(o, function(key, value) {
    return typeof value === ‘string‘ ? undefined : value;
}, 4);
console.log(ret);

上面代码在输出时，得到的字符串将不会再呈现一行输出，而是正常的格式化输出，并采用4个space进行格式化。

另外，如果预处理函数的返回值为undefined，则此键值对将不会包含在最终的JSON字符串中。所以上面代码最终的结果是，

"{
    "age": 22
}"

3、新增Object接口

对象	构造器	说明
Object	getPrototypeOf	返回对象的原型
Object	getOwnPropertyDescriptor	返回对象自有属性的属性描述符
Object	getOwnPropertyNames	返回一个数组，包括对象所有自有属性名称集合（包括不可枚举的属性）
Object	create	创建一个拥有置顶原型和若干个指定属性的对象
Object	defineProperty	给对象定义一个新属性，或者修改已有的属性，并返回
Object	defineProperties	在一个对象上添加或修改一个或者多个自有属性，并返回该对象
Object	seal	锁定对象。阻止修改现有属性的特性，并阻止添加新属性。但是可以修改已有属性的值。
Object	freeze	冻结对象，阻止对对象的一切操作。冻结对象将永远不可变。
Object	preventExtensions	让一个对象变的不可扩展，也就是永远不能再添加新的属性。
Object	isSealed	判断对象是否被锁定
Object	isFrozen	判断对象是否被冻结
Object	isExtensible	判断对象是否可以被扩展
Object	keys	返回一个由给定对象的所有可枚举自身属性的属性名组成的数组

这里不打算对每个新增接口作详细描述，不过比较常用的有如下几个，

• Object.create

• Object.defineProperties

• Object.keys

4、新增Array接口

对象	构造器	说明
Array.prototype	indexOf	返回根据给定元素找到的第一个索引值，否则返回-1
Array.prototype	lastIndexOf	方法返回指定元素在数组中的最后一个的索引，如果不存在则返回 -1
Array.prototype	every	测试数组的所有元素是否都通过了指定函数的测试
Array.prototype	some	测试数组中的某些元素是否通过了指定函数的测试
Array.prototype	forEach	让数组的每一项都执行一次给定的函数
Array.prototype	map	返回一个由原数组中的每个元素调用一个指定方法后的返回值组成的新数组
Array.prototype	filter	利用所有通过指定函数测试的元素创建一个新的数组，并返回
Array.prototype	reduce	接收一个函数作为累加器，数组中的每个值（从左到右）开始缩减，最终为一个值
Array.prototype	reduceRight	接受一个函数作为累加器，让每个值（从右到左，亦即从尾到头）缩减为一个值

新增的数组接口中，基本都是比较有用的接口。需要注意的一点是，有的数组方法是不返回新数组的，有的接口是返回一个新数组，就是说使用这些新接口时，需要注意一下方法的返回值。

另外Array还有一个新增的接口，Array.isArray。显然此新增接口并不是实例方案，而是类似“静态方法”一样的存在。其作用很简单，就是判断某一对象是否为数组。

参考链接

5、Function.prototype.bind

bind()方法会创建一个新函数,称为绑定函数.当调用这个绑定函数时,绑定函数会以创建它时传入 bind()方法的第一个参数作为 this,传入 bind() 方法的第二个以及以后的参数加上绑定函数运行时本身的参数按照顺序作为原函数的参数来调用原函数。

此方法的用法如下，

fun.bind(thisArg[, arg1[, arg2[, ...]]])

使用bind可以为函数自定义this指针。它的常见使用场景如下，

this.x = 9; 
var module = {
    x: 81,
    getX: function() {
        return this.x;
    }
};
module.getX(); // 81
var getX = module.getX;
getX(); // 9, 因为在这个例子中，"this"指向全局对象
// 创建一个‘this‘绑定到module的函数
var boundGetX = getX.bind(module);
boundGetX(); // 81

javascript中重新绑定this变量的语法糖还有call和apply。不过bind显然与它们有着明显的不同。bind将会返回一个新的函数，而call或者apply并不会返回一个新的函数，它们将会使用新的this指针直接进行函数调用。

本文出自 “木香蔷薇” 博客，请务必保留此出处http://muxiangqiangwei.blog.51cto.com/3832230/1961954