ECMAScript5新特性总结

虽然ECMAScript5早就成为标准推出来了，但之前因为一直用的是ECMAScript3,并且工作中总是要求兼容IE的低版本，所以用的比较少。如今市场上大多数浏览器都能兼容ECMAScript5(IE8除外)，逐渐的就用的比较多了。今天主要是把ECMAScript5中新增奶的特性及方法总结一下，已备需要时方便查询。

ECMAScript5的兼容性可参见http://kangax.github.io/compat-table/es5/

严格模式（Strict Mode）是ECMAScript 5的新特性，它允许你把整个程序，或者某个函数，放置在“严格”的操作语境中。这种严格的语境会防止某些特定的操作并抛出更多的异常。严格模式下主要变化有：

未使用var创建的变量会报错
函数顶层的this不在指向window，而是undefined
强制为eval创建新作用域
禁止用delete删除变量
禁止使用arguments,callee,caller属性
禁止使用width语句
禁止函数参数重名
禁止对象属性重名
禁止使用八进制数字
不允许在非函数的代码块内声明函数。
新增保留字：implements, interface, let, package, private, protected, public, static, yield。

Object新增方法：

Object.create()

创建一个具有指定原型且可选择性地包含指定属性的对象

Object.create(proto, [ propertiesObject ])

proto:一个对象，作为新创建对象的原型。或者为 null。
propertiesObject:可选。该参数对象是一组属性与值，该对象的属性名称将是新创建的对象的属性名称，值是属性描述符。注意：该参数对象不能是 undefined，另外只有该对象中自身拥有的可枚举的属性才有效，也就是说该对象的原型链上属性是无效的。
示例：

//Shape - superclass
function Shape() {
  this.x = 0;
  this.y = 0;
}

Shape.prototype.move = function(x, y) {
    this.x += x;
    this.y += y;
    console.info("Shape moved.");
};

// Rectangle - subclass
function Rectangle() {
  Shape.call(this); //call super constructor.
}

Rectangle.prototype = Object.create(Shape.prototype);

var rect = new Rectangle();
rect instanceof Rectangle //true.
rect instanceof Shape //true.
rect.move(1, 1); //Outputs, "Shape moved."

Object.getPrototypeOf()

返回该对象的原型(也就是该对象内部属性[[prototype]]的值)

Object.getPrototypeOf(object)

在 ES5 中，如果参数不是一个对象类型，将抛出一个 TypeError 异常。在ES6中，参数被强制转换为Object。
示例：

var proto = {};
var obj = Object.create(proto);
Object.getPrototypeOf(obj) === proto; // true

Object.getOwnPropertyNames()

返回一个由指定对象的所有自身属性的属性名（包括不可枚举属性）组成的数组。

Object.getOwnPropertyNames(obj)

obj:一个对象，其自身的可枚举和不可枚举属性的名称被返回。
示例：

var arr = ["a", "b", "c"];
console.log(Object.getOwnPropertyNames(arr).sort()); // ["0", "1", "2", "length"]

Object.defineProperty()

直接在一个对象上定义一个新属性，或者修改一个已经存在的属性，并返回这个对象。

Object.defineProperty(obj, prop, descriptor)

obj:需要定义属性的对象。
prop:需定义或修改的属性的名字。
descriptor:将被定义或修改的属性的描述符。
示例：

Object.defineProperty(obj, "key", {
  enumerable: false,
  configurable: false,
  writable: false,
  value: "static"
});

Object.defineProperties()

在一个对象上添加或修改一个或者多个自有属性，并返回该对象。

Object.defineProperties(obj, props)

obj:将要被添加属性或修改属性的对象
props:该对象的一个或多个键值对定义了将要为对象添加或修改的属性的具体配置
示例：

var obj = {};
Object.defineProperties(obj, {
  "property1": {
    value: true,
    writable: true
  },
  "property2": {
    value: "Hello",
    writable: false
  }
});
console.log(obj) //{property1:true,property2:"Hello"}

Object.getOwnPropertyDescriptor()

指定对象上一个自有属性对应的属性描述符（自有属性指的是直接赋予该对象的属性，不需要从原型链上进行查找的属性）。如果指定的属性存在于对象上，则返回其属性描述符（property descriptor），否则返回 undefined。

Object.getOwnPropertyDescriptor(obj, prop)

obj:在该对象上查看属性
prop:一个属性名称，该属性的属性描述符将被返回
示例：

var o, d;
o = { bar: 42 };
d = Object.getOwnPropertyDescriptor(o, "bar");
console.log(d);//{ configurable: true, enumerable: true, value: 42, writable: true }

Object.seal()

可以让一个对象密封，并返回被密封后的对象。密封对象是指那些不能添加新的属性，不能删除已有属性，以及不能修改已有属性的可枚举性、可配置性、可写性，但可能可以修改已有属性的值的对象。

Object.seal(obj)

Object.freeze()

可以冻结一个对象，冻结指的是不能向这个对象添加新的属性，不能修改其已有属性的值，不能删除已有属性，以及不能修改该对象已有属性的可枚举性、可配置性、可写性。也就是说，这个对象永远是不可变的。该方法返回被冻结的对象。

Object.freeze(obj)

Object.preventExtensions()

让一个对象变的不可扩展，也就是永远不能再添加新的属性。

Object.preventExtensions(obj)

Object.isExtrensible()

判断一个对象是否是可扩展的（是否可以在它上面添加新的属性）。

Object.isExtensible(obj)

示例：

// 新对象默认是可扩展的.
var empty = {};
Object.isExtensible(empty); // === true
// ...可以变的不可扩展.
Object.preventExtensions(empty);
Object.isExtensible(empty); // === false

Object.isSealed()

判断一个对象是否是密封的（sealed）。

Object.isSealed(obj)

示例：

// 新建的对象默认不是密封的.
var empty = {};
Object.isSealed(empty); // === false

// 如果你把一个空对象变的不可扩展,则它同时也会变成个密封对象.
Object.preventExtensions(empty);
Object.isSealed(empty); // === true

Object.isFrozen()

判断一个对象是否被冻结（frozen）。

Object.isFrozen(obj)

Object.keys()

返回一个由给定对象的自身可枚举属性组成的数组，数组中属性名的排列顺序和使用 for...in 循环遍历该对象时返回的顺序一致（两者的主要区别是一个 for-in 循环还会枚举其原型链上的属性）。

Object.keys(obj)

示例：

var arr = ["a", "b", "c"];
console.log(Object.keys(arr));// [ '0', '1', '2' ]

Object.prototype新增方法

Object.prototype.isPrototypeOf()

用于测试一个对象是否存在于另一个对象的原型链上。

Obj.prototype.isPrototypeOf(object)

object:在该对象的原型链上搜寻
示例：

var arr = [];
console.log(arr instanceof Array);//true
console.log(Array.prototype.isPrototypeOf(arr));//true

isPrototypeOf 和 instanceof operator 是不一样的。在表达式 object instanceof AFunction 中，检测的是 AFunction.prototype 是否在object 的原型链中，而不是检测 AFunction 自身。

Object.prototype.propertyIsEnumerable()

返回一个布尔值，表明指定的属性名是否是当前对象可枚举的自身属性。

obj.propertyIsEnumerable(prop)

示例：

var o = {};
o.prop = 'is enumerable';
o.propertyIsEnumerable('prop');   //  返回 true

Function.prototype新增方法

Function.prototype.bind()

bind()方法会创建一个新函数。当这个新函数被调用时，bind()的第一个参数将作为它运行时的 this, 之后的一序列参数将会在传递的实参前传入作为它的参数。

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

thisArg:当绑定函数被调用时，该参数会作为原函数运行时的 this 指向。当使用new 操作符调用绑定函数时，该参数无效。
arg1, arg2, ...:当绑定函数被调用时，这些参数将置于实参之前传递给被绑定的方法。

示例：

this.x = 9; 
var module = {
  x: 81,
  getX: function() { return this.x; }
};
module.getX(); // 返回 81
var retrieveX = module.getX;
retrieveX(); // 返回 9, 在这种情况下，"this"指向全局作用域
// 创建一个新函数，将"this"绑定到module对象
// 新手可能会被全局的x变量和module里的属性x所迷惑
var boundGetX = retrieveX.bind(module);
boundGetX(); // 返回 81

Array新增方法：

Array.isArray()

该方法适用于确定传递的值是否为Array。

Array.isArray(obj)

示例：

Array.isArray([1, 2, 3]);  // true
Array.isArray({foo: 123}); // false
Array.isArray("foobar");   // false
Array.isArray(undefined);  // false

位置方法：

Array.prototype.indexOf()

返回在数组中可以找到给定元素的第一个索引，如果不存在，则返回-1。

arr.indexOf(searchElement)

示例：

var a = [2, 9, 9]; 
a.indexOf(2); // 0

Array.prototype.lastIndexOf()

返回指定元素（也即有效的 JavaScript 值或变量）在数组中的最后一个的索引，如果不存在则返回 -1。从数组的后面向前查找，从 fromIndex 处开始。

arr.lastIndexOf(searchElement[, fromIndex = arr.length - 1])

searchElement:被查找的元素。
fromIndex:从此位置开始逆向查找。默认为数组的长度减 1，即整个数组都被查找。如果该值大于或等于数组的长度，则整个数组会被查找。如果为负值，将其视为从数组末尾向前的偏移。即使该值为负，数组仍然会被从后向前查找。如果该值为负时，其绝对值大于数组长度，则方法返回 -1，即数组不会被查找。

示例：

var array = [2, 5, 9, 2];
var index = array.lastIndexOf(2);//3

迭代方法：

Array.prototype.every()

测试数组的所有元素是否都通过了指定函数的测试。
every 方法为数组中的每个元素执行一次 callback 函数，直到它找到一个使 callback 返回 false（表示可转换为布尔值 false 的值）的元素。如果发现了一个这样的元素，every 方法将会立即返回 false。否则，callback 为每一个元素返回 true，every 就会返回 true。

arr.every(callback[, thisArg])

callback:用来测试每个元素的函数。
thisArg:执行 callback 时使用的 this 值。

示例：

function isBigEnough(element, index, array) {
  return (element >= 10);
}
var passed = [12, 5, 8, 130, 44].every(isBigEnough);// false
passed = [12, 54, 18, 130, 44].every(isBigEnough);// true

Array.prototype.some()

测试数组中的某些元素是否通过了指定函数的测试。
some 为数组中的每一个元素执行一次 callback 函数，直到找到一个使得 callback 返回一个“真值”（即可转换为布尔值 true 的值）。如果找到了这样一个值，some 将会立即返回 true。否则，some 返回 false。

arr.some(callback[, thisArg])

示例：

function isBigEnough(element, index, array) {
  return (element >= 10);
}
var passed = [2, 5, 8, 1, 4].some(isBigEnough);
// passed is false
passed = [12, 5, 8, 1, 4].some(isBigEnough);
// passed is true

Array.prototype.filter()

使用指定的函数测试所有元素，并创建一个包含所有通过测试的元素的新数组。
filter 为数组中的每个元素调用一次 callback 函数，并利用所有使得 callback 返回 true 或等价于 true 的值的元素创建一个新数组。

var new_arrary = arr.filter(callback[, thisArg])

示例：

function isBigEnough(value) {
  return value >= 10;
}

var filtered = [12, 5, 8, 130, 44].filter(isBigEnough);//[12, 130, 44]

Array.prototype.forEach()

方法对数组的每个元素执行一次提供的函数。

array.forEach(callback[, thisArg])

示例：

var a = ['a', 'b', 'c'];

a.forEach(function(element) {
    console.log(element);
});
// a
// b
// c

forEach() 为每个数组元素执行callback函数；不像map() 或者reduce() ，它总是返回 undefined值，并且不可链式调用。

Array.prototype.map()

创建一个新数组，其结果是该数组中的每个元素调用一个提供的函数。
map 方法会给原数组中的每个元素都按顺序调用一次 callback 函数。callback 每次执行后的返回值（包括 undefined）组合起来形成一个新数组。

var new_array = arr.map(callback[, thisArg])

示例：

var numbers = [1, 5, 10, 15];
var roots = numbers.map(function(x) {
    return x * 2;
});
// roots is now [2, 10, 20, 30]
// numbers is still [1, 5, 10, 15]

归并方法：

Array.prototype.reduce()

对累加器和数组的每个值 (从左到右)应用一个函数，以将其减少为单个值。

arr.reduce(callback,[initialValue])

callback:执行数组中每个值的函数，包含四个参数
accumulator:上一次调用回调返回的值，或者是提供的初始值（initialValue）
currentValue:数组中正在处理的元素
currentIndex:数据中正在处理的元素索引，如果提供了 initialValue ，从0开始；否则从1开始
array:调用 reduce 的数组
initialValue:可选项，其值用于第一次调用 callback 的第一个参数。

示例：

var sum = [0, 1, 2, 3].reduce(function(acc, val) {
  return acc + val;
}, 0);

console.log(sum);// 6

Array.prototype.reduceRight();

reduceRight() 方法接受一个函数作为累加器（accumulator），让每个值（从右到左，亦即从尾到头）缩减为一个值。（与 reduce() 的执行方向相反）

arr.reduceRight(callback[, initialValue])

示例：

var flattened = [[0, 1], [2, 3], [4, 5]].reduceRight(function(a, b) {
    return a.concat(b);
}, []);
// flattened is [4, 5, 2, 3, 0, 1]

String

String.trim()

会删除一个字符串两端的空白字符。

var newStr = str.trim()

示例：

var orig = '   foo  ';
console.log(orig.trim()); // 'foo'

Date

Date.now()

返回自1970年1月1日 00:00:00 UTC到当前时间的毫秒数。

var timeInMs = Date.now();

IE8及以下可以用以下代码来兼容：

if (!Date.now) {
  Date.now = function now() {
    return new Date().getTime();
  };
}

Date.prototype.toISOString()

返回一个 ISO（ISO 8601 Extended Format）格式的字符串： YYYY-MM-DDTHH:mm:ss.sssZ。时区总是UTC（协调世界时），加一个后缀“Z”标识。

dateObj.toISOString()

示例：

var today = new Date("05 October 2011 14:48 UTC");
console.log(today.toISOString()); // 返回2011-10-05T14:48:00.000Z

JSON

JSON.parse()

解析一个JSON字符串，构造由字符串描述的JavaScript值或对象。可以提供可选的reviver函数以在返回之前对所得到的对象执行变换。

JSON.parse(text[, reviver])

text:要被解析成JavaSctipt值的字符串，查看 JSON 对象学习的JSON 语法的说明。
reviver: 可选,如果是一个函数，则规定了原始值如何被解析改造，在被返回之前。

示例：

JSON.parse('{"name" : "jesse","age":25 }');//{ name: 'jesse', age: 25 }

JSON.stringfy()

JSON.stringify() 方法将JavaScript值转换为JSON字符串

JSON.stringify(value[, replacer [, space]])

示例：

JSON.stringify({ name: 'jesse', age: 25 });//{"name":"jesse","age":25}

posted @ 2017-03-04 16:39 Jesse131 阅读(7207) 评论(2) 编辑收藏举报

会员力量，点亮园子希望

刷新页面返回顶部

大前端之路

专注前端开发，记录自己的前端历程