ES6对象及数组扩展

数组扩展

一、创建数组

ES 6 之前：
1、通过数组字面量创建： let arr = ['a', 'b'];
2、通过构造函数创建：let arr = new Array();

let arr = new Array(2);   （含义：创建一个长度为2的空数组）
console.log(arr.length);  // 3
console.log(arr[0]); //   undefined
console.log(arr[1]); //   undefined

let arr = new Array('2');  （含义：创建只有一个元素为 '2' 的数组）
console.log(arr.length);  // 1 
console.log(arr[0]);  // '2' 

ES 6:
Array.of() 与Array 构造函数的工作机智类似，只是不存在单一数值型参数值的特例。无论有多少参数，无论参数是什么类型的， Array.of() 方法总会创建一个包含所有参数的数组。

let arr = Array.of(2);
console.log(arr.length);  // 1
console.log(arr[0]);   // 2 

let arr = Array.of('2');
console.log(arr.length);  // 1
console.log(arr[0]);   // '2'

eg:

function createArray (arrayCreator, value) {
    return arrayCreator(value);
}
let arr = createArray(Array.of, value);
function createArray (arrayCreator, value) {
    return arrayCreator(value);
}
let val = ['z','d','c'];
let arr = createArray(Array.of, val.toString());
console.log(arr); // ["z,d,c"]

二、Array.from() 方法可以接受 可迭代对象 或 类数组对象 作为第一个参数，返回值为一个新数组。

function doSomething () {
     var args = Array.from(arguments); // 类数组对象转化为准数组
}
/* Array.form() 方法也是通过this来确定返回数组的类型的 */

1、Array.from(arg, fun, obj)

{可迭代对象 | 类数组对象} arg
{Function} fun (可选)
{this} obj (可选，表示映射函数的this值)

function translate () {
    return Array.from(arguments, (value => value + 1))
}

let nums = translate(1,2,3,4);
console.log(nums); // [2, 3, 4, 5]
let helper = {
     diff: 'a',
     add (value) {
          return value + this.diff;   
     }
}
function translate () {
    return Array.from(arguments, helper.add, helper);   
}
let nums = translate(1, 2, 3, 4); // ["1a", "2a", "3a", "4a"]

/* 示例 translate 方法内传入 helper.add 作为转换用的映射函数，由于该方法使用来this.diff属性，因此需要为Array.from()方法提供第三个参数来指定this的值，从而无须通过调用bind()方法或其他方式来指定this的值了。 */

let helper = {
     diff: 'a',
     add (value) {
          return value + this.diff;   
     }
}
function translate () {
    return Array.from(arguments, helper.add);  // 如果没有映射函数的对象，会报下面的  [NaN, NaN, NaN, NaN]
}

let nums = translate(1, 2, 3, 4); // [NaN, NaN, NaN, NaN]

用 Array.from() 转换可迭代对象

let numbers = {
    *[Symbol.iterator]() {
        yield 1;
        yield 2;
        yield 3;
    }
}
let newNums = Array.from(numbers, (value) => value + 1);
console.log(newNums);  // 2, 3, 4

###三、find() 方法 和 findIndex() 方法 VS indexOf() 方法和lastIndexOf()方法

以上两个方法都接受两个参数：
1、一个是回调函数；
执行回调函数时可以传人 3 个参数。与传人 map() 和 forEach() 方法的参数相同。回调函数应返回 true，一旦回调函数返回true，find() 方法和 findIndex() 方法都会立即停止搜索数组剩余的部分。
a、数组中的某个元素
b、该元素在数组的索引index
c、数组本身
2、另一个是可选参数，用于指定回调函数中的 this 的值。

let arr = [2, 4, 6, 8, 10];
console.log(arr.find(value => value > 6))
console.log(arr.findIndex((value, index) => value > 2 && index > 2))  // index 为遍历到当前值的索引

四、fill() 方法

fill(val, startIndex, endIndex)
{value} val (必选，要填充的值)
{Number} startIndex (可选，开始索引)
{Number} endIndex (可选，结束索引，但不包括结束索引的值)

fill() 方法可以用指定的值填充一至多个数组元素。
1、fill(val) 当传人一个值时，fill() 方法会用这个值重写数组中的所有值。
2、fill(val, startIndex, endIndex)
1、eg:

let arr = [2, 4, 6, 8, 10];
arr.fill(1);
console.log(arr); // [1, 1, 1, 1, 1]
arr.fill('a');
console.log(arr); // ["a", "a", "a", "a", "a"]

2、eg:

let arr = [2, 4, 6, 8, 10];
arr.fill('q', 2);
console.log(arr); // [2, 4, "q", "q", "q"]
arr.fill('aa', 3, 4);
console.log(arr); // [2, 4, "q", "aa", "q"]

3、eg:

let arr = [2, 4, 6, 8, 10];
arr.fill('ccc', -3, -1);
console.log(arr); [2, 4, "ccc", "ccc", 10]
/* 如果startIndex 或者 endIndex为负值， 那么这些值会与数组的length属性 相加 来作为最终的索引位置。
   eg: 如果 startIndex 为 -1，那么索引的值实际为 arr.length-1。 */

五、copyWithin() 方法，从数组中复制元素的值。可以同时改变数组中的多个元素。

copyWithin(startFillIndex, startCopyIndex, stopCopyIndex)
{ Number } startPasteIndex (必选，开始填充的索引)
{Number} startCopyIndex (可选，开始复制的索引)
{Number} endCopyIndex (可选，停止复制的索引，但不包括结束索引的值)

1、eg:

let arr = ['aa', 'bb', 'cc', 'dd', 'ee'];
arr.copyWithin(1);
console.log(arr);  // ["aa", "aa", "bb", "cc", "dd"]

2、eg:

let arr = ['aa', 'bb', 'cc', 'dd', 'ee'];
arr.copyWithin(1, 2);
console.log(arr); // ["aa", "cc", "dd", "ee", "ee"]

3、eg:

let arr = ['aa', 'bb', 'cc', 'dd', 'ee'];
arr.copyWithin(1, 2, 4);
console.log(arr); // ["aa", "cc", "dd", "dd", "ee"]

4、eg:

let arr = ['aa', 'bb', 'cc', 'dd', 'ee'];
arr.copyWithin(1, -3, -1);
console.log(arr); // ["aa", "cc", "dd", "dd", "ee"]
/* 如果startCopyIndex 或者 endCopyIndex为负值， 那么这些值会与数组的length属性 相加 来作为最终的索引位置。eg: 如果 startCopyIndex 为 -1，那么索引的值实际为 arr.length-1。 */

对象扩展

对象的类别：
1、普通对象 具有JavaScript对象所有的默认内部行为
2、特异对象 具有某些与默认行为不符的内部行为
3、标准对象 Array、Date等。标准对象既可以是普通对象，也可以是特异对象。
4、内建对象 脚本开始执行时存在于JavaScript执行环境中的对象，所有标准对象都是内建对象

对象属性的简写：
ECMAScript 5 及更早的版本

function creatPerson (name, sex) {
    return {
       name: name,
        sex: sex
    }
}

ECMAScript 6 版本

function creatPerson (name, sex) {
    return {
       name，
        sex
    }
}

一、可计算属性名

let name = 'name'
let obj = {

    ['first' + name]: '郭',
    ['last' + name]: '志鹏'   
}
console.log(obj.firstname) // 郭
console.log(obj['first'+name]) // 郭

对象方法的简写：
ECMAScript 5 及更早的版本
（字面量对象写法）

let person = {
    name: '悟空',
    say: function () {
        console.log('打妖精！')
    }
}

ECMAScript 6
（字面量对象写法）

let person = {
    name: '悟空',
    say () {
        console.log('打妖精！')
    }
}

二、Object.is() 方法来弥补全等运算符的不准确运算。这个方法接受两个参数，如果这两个参数类型相同且具有相同的值，则返回true。

相等操作符（==）、不相等操作符（!=） 这两个操作符都会先转换操作数（称为 强制转型），然后再比较他们的相等性。
转换不同的数据类型时规则：

a、如果有一个操作数为 布尔值，比较前先将 布尔值 转换为 数值： false —> 0； true —> 1；
eg: false == 0; // true true == 1; // true true == 2; // false

b、如果有一个操作数为 字符串，另一个操作数为 数值，比较前先将 字符串—>数值。
eg: ‘2’ == 2; // true
c、如果有一个操作数为 对象，另一个操作数不是，则调用对象的 valueOf() 方法，用得到的基本类型值按照前面的规则进行比较。

d、null 和 undefined 是相等的。（要比较相等性之前，不能将 null 和 undefined 转换成其他的任何值）
eg: null == undefined; // true
e、如果有一个操作数是NaN，则相等操作符返回 false，不相等操作符返回 true。
eg: 5 == NaN; // false 5 != NaN; // true
f、即使两个操作数都是NaN，相等操作符返回 false。
eg: NaN == NaN // false NaN != NaN; // true ‘NaN’ == NaN; // false
g、如果两个操作数都是 对象，则比较他们是不是同一个对象。如果两个操作数都指向同一个对象，则相等操作符返回 true；否则返回 false。

全等操作符（=）、不全等操作符（!） 不会进行转换操作数（称为 强制转型）后，再比较相等。

console.log(+0 == -0); // true  
console.log(+0 === -0); // true
console.log(Object.is(+0, -0)); // false

console.log(NaN == NaN); // false
console.log(NaN === NaN); // false
console.log(Object.is(NaN, NaN)); // true

console.log(4 == 4); // true
console.log(4 === 4); // true
console.log(Object.is(4, 4)); // true

console.log(4 == '4'); // true
console.log(4 === '4'); // flase
console.log(Object.is(4, '4')); // false

三、Object.assign() 方法，一个对象接收来自另一个对象的属性和方法。 接受任意数量的对象，并按指定的顺序将 属性 复制到接收对象中。如果多个源对象有同名属性，则排位靠后的源对象会覆盖靠前的对象。

1、eg:

let receiver = {};
Object.assign(receiver, {
    type: 'js',
    name: 'javascript.js'
}, {
    type: 'java'
})
console.log(receiver.type); // java

2-1、eg:

let receiver = {
    age: 10
};
let obj = {
    type: 'as',
    name: 'action script'
}
Object.assign(receiver, obj)
console.log(receiver.type); // as
receiver.type = 'test';
console.log(obj.type); // "as"
console.log(receiver.type); // "test"

2-2、

let receiver = {
    age: 10
};
let obj = {
    type: 'as',
    name: 'action script'
}
let newObj = Object.assign({}, receiver, obj); /* 以空对象{}开头，可以避免更改 receiver 对象。 */
console.log(newObj);  // {age: 10, type: "as", name: "action script"}
console.log(receiver.type); // undefined
receiver.type = 'test';
console.log(obj.type); // "as"
console.log(receiver.type); // "test"

3、eg:

let obj = Object.assign({}, (function () { return {name: 'aaa', age: 34}} ()) );
console.log(obj);  //  {name: "aaa", age: 34}

4、eg:

let arr1 = [1, 2, 3]
let arr2 = ['name', 'age']
let obj = Object.assign([], arr1, arr2)
console.log(obj) // ["name", "age", 3]

5、eg:

let arr1 = [1, 2, 3]
let arr2 = ['name', 'age']
let obj = Object.assign({}, arr1, arr2)
console.log(obj) // {0: "name", 1: "age", 2: 3}

6、eg:

let obj1 = {name: 'admin', age: 13}
let obj2 = {name: 'zhangsan', sex: '男'}
let obj = Object.assign([], obj1, obj2)
console.log(obj) // [name: "zhangsan", age: 13, sex: "男"]
console.log(obj.length) // 0
obj.forEach(item => {
  console.log(item.name)  // 无法遍历出来
})

四、自有属性枚举顺序。ES 6 严格规定来对象的自有属性被枚举时的返回顺序，这会影响到 Object.getOwnPropertyNames() 方法及 Reflect.ownKeys 返回属性的方式，Object.assign() 方法处理属性的顺序也将随之改变。

自有属性枚举顺序的基本规则
    1、所有数字键按升序排序。
    2、所有字符串键按照他们被加入对象的顺序排序。
    3、所有 symbol 键按照他们被加入对象的顺序排序。

let obj = {

    a: 1,
    0: 1,
    c: 1,
    2: 1,
    b: 1,
    1: 1
};
​
obj.d = 1;
console.log(Object.getOwnPropertyNames(obj));  // ["0", "1", "2", "a", "c", "b", "d"]
console.log(Object.getOwnPropertyNames(obj).join('')); // 012acbd        (字符串)

提示：for-in 、 Object.keys() 方法和 JSON.stringify() 方法枚举的顺序是无序的。

五、增强对象原型

原型在对象创建时被指定的两种方法：（对象原型在实例化后保持不变）
1、通过构造函数创建对象
2、通过Object.create() 方法创建对象
ES 5：Object.getPrototypeOf() 方法来返回任意指定对象的原型，但缺少对象在实例化后改变原型的标准方法。
ES 6: Object.setPrototypeOf(objA, objB) 方法可以改变任意指定对象的原型。
objA: 被改变原型的对象
objB：替代第一个参数（objA）原型的对象

let person = {
    getGreeting () {
        return 'hello';
    }   
};
let dog = {
    getGreeting () {
        return 'this is a dog';
    }
}
// 以 person 对象为原型
let friend = Object.create(person);
console.log(friend.getGreeting()); // hello
console.log(Object.getPrototypeOf(friend) === person); // true

// 原型设置为 dog
Object.setPrototypeOf(friend, dog); /* friend: 被改变原型的对象     dog: 替代第一个参数（objA）原型的对象 */
console.log(friend.getGreeting()); // this is a dog
console.log(Object.getPrototypeOf(friend) === dog); // true

六、简化原型访问的 Super 引用：可以更便捷地访问 对象原型。

使用环境：既想重写 对象实例的方法，又需要调用与该对象实例方法同名的原型方法。