ES6

ES6深入浅出之新增的API（上）

Posted by weite122 on 2019-01-25

Object.assign()

  • Object.assign() 方法用于将所有可枚举属性的值从一个或多个源对象复制到目标对象。它将返回目标对象。这是一个浅拷贝，浅拷贝就-只复制对象的基本类型,对象类型,仍属于原来的引用。深拷贝是不仅复制对象的基本类型,同时也复制原对象中的对象.就是说完全是新对象产生的.

    1
    2
    3
    4
    const object1 = {a: 1,b: 2,c: 3};
    const object2 = {c: 4, d: 5}
    Object.assign(object2, object1);
    console.log(object2);//Object { c: 3, d: 5, a: 1, b: 2 }

  • 如果目标对象中的属性具有相同的键，则属性将被源中的属性覆盖。后来的源的属性将类似地覆盖早先的属性。

  • Object.assign 方法只会拷贝源对象自身的并且可枚举的属性到目标对象。该方法使用源对象的[[Get]]和目标对象的[[Set]]，所以它会调用相关 getter 和 setter。因此，它分配属性，而不仅仅是复制或定义新的属性。如果合并源包含getter，这可能使其不适合将新属性合并到原型中。为了将属性定义（包括其可枚举性）复制到原型，应使用Object.getOwnPropertyDescriptor()和Object.defineProperty() 。

  • String类型和 Symbol 类型的属性都会被拷贝。

  • 在出现错误的情况下，例如，如果属性不可写，会引发TypeError，如果在引发错误之前添加了任何属性，则可以更改target对象。

  • 注意，Object.assign 不会跳过那些值为 null 或 undefined 的源对象

Array.from()

  • Array.from() 方法从一个类似数组或可迭代对象中创建一个新的数组实例。

  • 创建一个长度为n的数组：

    1
    2
    3
    Array.from({length: 5})
    Array.apply(null, {length: 5})
    //结果是：(5) [undefined, undefined, undefined, undefined, undefined]

  • 创建一个长度为n，值为n的数组

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    ES6:
    function x(n,v){
        var array = Array.from({length: n})
        return array.map(i => v)
    }
    console.log(x(6,6)) //[6, 6, 6, 6, 6, 6]
    ES5:
    function x(n,v){
        return new Array(n+1).join(v).split('')
    }
    console.log(x(6,6))//["6", "6", "6", "6", "6", "6"]

Array.of()

  • Array.of() 方法创建一个具有可变数量参数的新数组实例，而不考虑参数的数量或类型。
  • Array.of() 和 Array 构造函数之间的区别在于处理整数参数：Array.of(7) 创建一个具有单个元素 7 的数组，而 Array(7) 创建一个长度为7的空数组（注意：这是指一个有7个空位的数组，而不是由7个undefined组成的数组）。

Array.fill()

  • fill() 方法用一个固定值填充一个数组中从起始索引到终止索引内的全部元素。不包括终止索引。 
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    var array1 = [1, 2, 3, 4];

    // fill with 0 from position 2 until position 4
    console.log(array1.fill(0, 2, 4));
    // expected output: [1, 2, 0, 0]

    // fill with 5 from position 1
    console.log(array1.fill(5, 1));
    // expected output: [1, 5, 5, 5]

    console.log(array1.fill(6));
    // expected output: [6, 6, 6, 6]

Array.find()

  • find() 方法返回数组中满足提供的测试函数的第一个元素的值。否则返回 undefined。filter()是找到多个元素。 
    1
    2
    3
    4
    5
    6
    7
    8
    var array1 = [5, 12, 8, 130, 44];

    var found = array1.find(function(element) {
    return element > 10;
    });

    console.log(found);
    // expected output: 12

Array.prototype.findIndex()

  • findIndex()方法返回数组中满足提供的测试函数的第一个元素的索引。否则返回-1。 
    1
    2
    3
    4
    5
    6
    7
    8
    var array1 = [5, 12, 8, 130, 44];

    function isLargeNumber(element) {
    return element > 13;
    }

    console.log(array1.findIndex(isLargeNumber));
    // expected output: 3

Array.prototype.copyWithin()

  • copyWithin() 方法浅复制数组的一部分到同一数组中的另一个位置，并返回它，而不修改其大小。 
    1
    2
    3
    4
    5
    6
    7
    8
    9
    var array1 = ['a', 'b', 'c', 'd', 'e'];

    // copy to index 0 the element at index 3
    console.log(array1.copyWithin(0, 3, 4));
    // expected output: Array ["d", "b", "c", "d", "e"]

    // copy to index 1 all elements from index 3 to the end
    console.log(array1.copyWithin(1, 3));
    // expected output: Array ["d", "d", "e", "d", "e"]

Array.prototype.entries()

  • entries() 方法返回一个新的Array Iterator对象，该对象包含数组中每个索引的键/值对。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    var array1 = ['a', 'b', 'c'];

    var iterator1 = array1.entries();

    console.log(iterator1.next().value);
    // expected output: Array [0, "a"]

    console.log(iterator1.next().value);
    // expected output: Array [1, "b"]

Array.prototype.keys()

  • keys() 方法返回一个包含数组中每个索引键的Array Iterator对象。

    1
    2
    3
    4
    5
    6
    var array1 = ['a', 'b', 'c'];
    var iterator = array1.keys(); 

    for (let key of iterator) {
    console.log(key); // expected output: 0 1 2
    }

Array.prototype.values()

  • values() 方法返回一个新的 Array Iterator 对象，该对象包含数组每个索引的值。 
    1
    2
    3
    4
    5
    6
    const array1 = ['a', 'b', 'c'];
    const iterator = array1.values();

    for (const value of iterator) {
    console.log(value); // expected output: "a" "b" "c"
    }
FEATURED TAGS
ES6
FRIENDS