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

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接口

对象构造器说明
ObjectgetPrototypeOf返回对象的原型
ObjectgetOwnPropertyDescriptor返回对象自有属性的属性描述符
ObjectgetOwnPropertyNames返回一个数组包括对象所有自有属性名称集合包括不可枚举的属性
Objectcreate创建一个拥有置顶原型和若干个指定属性的对象
ObjectdefineProperty给对象定义一个新属性或者修改已有的属性并返回
ObjectdefineProperties在一个对象上添加或修改一个或者多个自有属性并返回该对象
Objectseal锁定对象。阻止修改现有属性的特性并阻止添加新属性。但是可以修改已有属性的值。
Objectfreeze冻结对象阻止对对象的一切操作。冻结对象将永远不可变。
ObjectpreventExtensions让一个对象变的不可扩展也就是永远不能再添加新的属性。
ObjectisSealed判断对象是否被锁定
ObjectisFrozen判断对象是否被冻结
ObjectisExtensible判断对象是否可以被扩展
Objectkeys返回一个由给定对象的所有可枚举自身属性的属性名组成的数组

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

  • Object.create

  • Object.defineProperties

  • Object.keys


4、新增Array接口

对象构造器说明
Array.prototypeindexOf返回根据给定元素找到的第一个索引值否则返回-1
Array.prototypelastIndexOf方法返回指定元素在数组中的最后一个的索引如果不存在则返回 -1
Array.prototypeevery测试数组的所有元素是否都通过了指定函数的测试
Array.prototypesome测试数组中的某些元素是否通过了指定函数的测试
Array.prototypeforEach让数组的每一项都执行一次给定的函数
Array.prototypemap返回一个由原数组中的每个元素调用一个指定方法后的返回值组成的新数组
Array.prototypefilter利用所有通过指定函数测试的元素创建一个新的数组并返回
Array.prototypereduce

接收一个函数作为累加器数组中的每个值从左到右开始缩减最终为一个值


array1.reduce(callbackfn[, initialValue])

参数:

参数            定义

array1          必需。一个数组对象。

callbackfn    必需。一个接受最多四个参数的函数。对于数组中的每个元素,reduce 方法都会调用 callbackfn 函数一次。

initialValue   可选。如果指定 initialValue,则它将用作初始值来启动累积。第一次调用 callbackfn 函数会将此值作为参数而非数组值提供。


返回值

通过最后一次调用回调函数获得的累积结果。


eg:

var a = [1,2,3,4,5];
var sum = a.reduce((x, y) => (x+y));
var sum2 = a.reduce((x, y) => (x+y),1);
var prod = a.reduce((x, y) => (x*y));
var prod2 = a.reduce((x, y) => (x*y),2);
var max = a.reduce((x,y) => (x>y)?x:y);
console.log(sum, sum2, prod,prod2,max)

执行结果:15 16 120 240 5


注:

在空数组上,不带初始值参数调用reduce()将导致类型错误异常。若调用它的时候只有一个值——数组只有一个元素并且没有指定初始值,或者有一个空数组并且指定一个初始值——reduce只是简单地返回那个值而不会调用化简函数。


Array.prototypereduceRight接受一个函数作为累加器让每个值从右到左亦即从尾到头缩减为一个值

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

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

  • every()和some()

every()和some()方法是数组的逻辑判定它们对数组元素应用指定的函数进行判定返回true或false.

every()方法相当于“&&”:当且仅当数组中的所有元素都符合判定条件时才返回true,不然就返回false;

some()方法相当于“||”:只要有其中一个元素符合条件就返回true,全部不符合返回false。

every()和some()一旦确认应返回什么值就停止遍历直接返回。

当every方法找到第一个不符合的元素就返回false,停止遍历

当some()方法找到第一个符合的元素就返回true,停止遍历。

空数组上调用时every()返回true——因为没有找到不符合的元素some返回false——因为没有找到符合的元素。

var arr = [1, 2, 3];
console.log(arr.some(v => v>2));//true
console.log(arr.every(v => v>2));//false

console.log([].some(v => v>2));//false
console.log([].every(v => v>2));//true



参考链接


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变量的语法糖还有callapply。不过bind显然与它们有着明显的不同。bind将会返回一个新的函数而call或者apply并不会返回一个新的函数它们将会使用新的this指针直接进行函数调用。



發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章