js

ECMAScript5 特性

ECMAScript5 特性

Posted by 刘一凡 on November 8, 2016

ES5特性

ECMAScript5 特性

将简单列举ES5的核心特性。ES5多半是扩展原生对象的功能,让Object、Array、Function更加强大。其他的特性包括strict mode和一下期待已久的工具方法(例如JSON.parse等).

ES5的大部分特性都在主流浏览器(IE9+)中支持了。而且大部分特性,都可以通过JavaScript垫片(pollyfill)在运行时环境实现。

Object


所有对象中, 如果 o 不是 Object 类型, 将会抛出一个 TypeError 异常.

Object.getPrototypeOf(o)
返回指定对象的原型.(也就是该对象内部属性[Prototype]的值)

Object.getOwnPropertyDescriptor(o,p)
返回指定对象上一个自有属性对应的属性描述符. (自有属性指的是直接赋予该对象的属性, 不需要从原型链上进行查找的属性)

Object.getOwnPropertyNames(o)
返回一个由指定对象的所有自身属性的属性名(包括不可枚举属性)组成的数组.

Object.create(o,p)
以给定对象 o 为 prototype 创建一个新的对象并返回. 该方法创建一个拥有指定原型和若干个指定属性的对象.

例子: 使用 Object.create 实现类式继承

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

Shape.prototype.move = function (x, y) {
  this.x += x;
  this.y += y;
  console.log('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);  // "Shape moved"

Object.defineProperty(o,p,attrs))
该方法会直接在一个对象上定义一个新属性, 或者修改一个已经存在的属性, 并返回这个对象.

Object.defineProperties(o,props))
该方法在一个对象上添加或者修改多个自有属性, 并返回该对象.

Object.seal(o)
该方法可以让一个对象密封, 并返回被密封后的对象. 密封对象是指那些不能添加新的属性, 不能删除已有属性, 以及不能删除已有属性的可枚举性, 可配置性, 可写性, 但可能修改已有属性的值的对象.

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

Object.preventExtensions(o)
该方法让一个对象变的不可扩展,也就是永远不能再添加新的属性.

Object.isSealed(o)
该方法判断一个对象是否是密封的.

Object.isFrozen(o)
该方法判断一个对象是否被冻结.

Object.keys(o)
该方法会返回一个由给定对象的所有枚举自身属性的属性名组成的数组, 数组中属性名的排序和使用 for-in 循环遍历该对象时返回的顺序一致(两者主要区别是 for-in 还会遍历出一个对象从其原型链上继承到的枚举属性).

例子:

var arr = ["a", "b", "c"]
alert(Object.keys(arr))   // 弹出 "0,1,2"

// 类数组对象
var obj = { 0 : "a", 1 : "b", 2 : "c"};
alert(Object.keys(obj)); // 弹出"0,1,2"

//具有随机键排序的数组类对象
var an_obj = { 100: 'a', 2: 'b', 7: 'c' };
console.log(Object.keys(an_obj)); // console: ['2', '7', '100']

Object.prototype.isPrototypeOf(v)
该方法用于测试一个对象是否存在于另一个对象的原型链上.

Object.prototype.propertyIsEnumerable(p)
该方法返回一个布尔值, 表明指定的属性名是否是当前对象的可枚举的自身属性.

Array


Array.isArray(a)
该方法用来判断某个值是否为 Array, 如果是, 则返回 true, 否则返回 false.

Array.prototype.indexOf(e,i)
该方法返回给定元素能找在数组中找到的第一个索引值,否则返回-1.

例子1: 使用 indexOf

var array = [2, 5, 9];
array.indexOf(2);     // 0
array.indexOf(7);     // -1
array.indexOf(9, 2);  // 2
array.indexOf(2, -1); // -1
array.indexOf(2, -3); // 0

例子2: 找出指定元素出现的所有位置

var indices = []
var array = ['a', 'b', 'a', 'c', 'a', 'd'];
var element = 'a';
var idx = arr.indexOf(element)
while (idx != -1) {
  indices.push(idx)
  idx = array.indexOf(element, idx + 1)
}
console.log(indices)

例子3: 判断一个元素是否在数组里, 不在则更新数组

function updateVegetablesCollection (veggies, veggie) {
    if (veggies.indexOf(veggie) === -1) {
        veggies.push(veggie);
        console.log('New veggies collection is : ' + veggies);
    } else if (veggies.indexOf(veggie) > -1) {
        console.log(veggie + ' already exists in the veggies collection.');
    }
}

var veggies = ['potato', 'tomato', 'chillies', 'green-pepper'];

// New veggies collection is : potato,tomato,chillies,green-papper,spinach
updateVegetablesCollection(veggies, 'spinach');
// spinach already exists in the veggies collection.
updateVegetablesCollection(veggies, 'spinach');

Array.prototype.lastIndexOf(e,i)
该方法返回指定元素(也即有效的 JavaScript 值或变量)在数组中的最后一个的索引, 如果不存在则返回 -1. 从数组的后面向前查找, 从 fromIndex 处开始.

例子1: 使用 lastIndexOf

var array = [2, 5, 9, 2];
var index = array.lastIndexOf(2);
// index is 3
index = array.lastIndexOf(7);
// index is -1
index = array.lastIndexOf(2, 3);
// index is 3
index = array.lastIndexOf(2, 2);
// index is 0
index = array.lastIndexOf(2, -2);
// index is 0
index = array.lastIndexOf(2, -1);
// index is 3

例子2: 查找所有元素

var indices = [];
var array = ['a', 'b', 'a', 'c', 'a', 'd'];
var element = 'a';
var idx = array.lastIndexOf(element);

while (idx != -1) {
  indices.push(idx);
  idx = (idx > 0 ? array.lastIndexOf(element, idx - 1) : -1);
}

console.log(indices);
// [4, 2, 0];

Array.prototype.every(t,c)
该方法测试数组的所有元素是否都通过了指定函数的测试. callback 被调用时传入三个参数: 元素值, 元素索引, 原数组

例子: 检测所有数组元素的大小

function isBigEnough (element, index, array) {
  return (element >= 10)
}

var passed = [12, 5, 8, 130, 44].every(isBigEnough)
// passed is false

passed = [12, 54, 18, 130, 44].every(isBigEnough)
// passed is true

Array.prototype.some(t,c)
该方法测试数组中的某些元素是否通过了指定函数的测试. callback 被调用时传入三个参数: 元素的值,元素的索引,被遍历的数组.

例子: 测试数组元素的值

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.forEach(f,c)
该方法对数组的每个元素执行一次提供的函数(回调函数). callback 函数会被依次传入三个参数: 数组当前项的值, 数组当前项的索引, 数组对象本身.

Array.prototype.map(f,c)
该方法返回一个由原数组中的每个元素调用一个指定方法后的返回值组成的新数组. callback 函数会被依次传入三个参数: 数组当前项的值, 数组当前项的索引, 数组对象本身.

Array.prototype.filter(f,c)
该方法使用指定的函数测试所有元素,并创建一个包含所有通过测试的元素的新数组. callback 函数会被依次传入三个参数: 数组当前项的值, 数组当前项的索引, 数组对象本身.

Array.prototype.reduce(r,v)
该方法接收一个函数作为累加器 (accumulator),数组中的每个值(从左到右)开始合并,最终为一个值. callback 函数会被依次传入四个参数: 上一次调用回调返回的值,数组中当前被处理的元素, 当前元素在数组中的索引, 调用 reduce 的数组.

Array.prototype.reduceRight(r,v)
该方法接受一个函数作为累加器(accumulator), 让每个值(从右到左,亦即从尾到头)缩减为一个值。(与 reduce() 的执行方向相反).

String


String.prototpye.trim
方法会删除一个字符串两端的空白字符. 在这个字符串里的空格包括所有的空格字符 (space, tab, no-break space 等)以及所有的行结束符.