ES6新增API

1.Object.assign(a,b，c)

a、b均为对象，意思是把b对象的属性添加到a上面去。如果a中已经定义了某个属性，b也定义了的话就会覆盖a的，就是后面覆盖前面的，后面生命的有效。是 一种浅拷贝的方法。

 

image.png

2.Array.from

1、将类数组对象转换为真正数组：

1 2 3 4 5 6 7 8 9

let arrayLike = {     0: 'tom',      1: '65',     2: '男',     3: ['jane','john','Mary'],     'length': 4 } let arr = Array.from(arrayLike) console.log(arr) // ['tom','65','男',['jane','john','Mary']]

　　

　　那么，如果将上面代码中length属性去掉呢？实践证明，答案会是一个长度为0的空数组。

　　这里将代码再改一下，就是具有length属性，但是对象的属性名不再是数字类型的，而是其他字符串型的，代码如下：

1 2 3 4 5 6 7 8 9

let arrayLike = {     'name': 'tom',      'age': '65',     'sex': '男',     'friends': ['jane','john','Mary'],     length: 4 } let arr = Array.from(arrayLike) console.log(arr)  // [ undefined, undefined, undefined, undefined ]

　　会发现结果是长度为4，元素均为undefined的数组

　　由此可见，要将一个类数组对象转换为一个真正的数组，必须具备以下条件：

　　1、该类数组对象必须具有length属性，用于指定数组的长度。如果没有length属性，那么转换后的数组是一个空数组。

　　2、该类数组对象的属性名必须为数值型或字符串型的数字

　　ps: 该类数组对象的属性名可以加引号，也可以不加引号

　　2、将Set结构的数据转换为真正的数组：　

1 2 3

let arr = [12,45,97,9797,564,134,45642] let set = new Set(arr) console.log(Array.from(set))  // [ 12, 45, 97, 9797, 564, 134, 45642 ]

　　

　　Array.from还可以接受第二个参数，作用类似于数组的map方法，用来对每个元素进行处理，将处理后的值放入返回的数组。如下：

1 2 3

let arr = [12,45,97,9797,564,134,45642] let set = new Set(arr) console.log(Array.from(set, item => item + 1)) // [ 13, 46, 98, 9798, 565, 135, 45643 ]

　　

　　3、将字符串转换为数组：

1 2	let  str = 'hello world!'; console.log(Array.from(str)) // ["h", "e", "l", "l", "o", " ", "w", "o", "r", "l", "d", "!"]

 

 

3.Array.of()

1. Array.of(3, 11, 8) // [3,11,8]
2. Array.of(3) // [3]
3. Array.of(3).length // 1

这个方法的主要目的，是弥补数组构造函数Array()的不足。因为参数个数的不同，会导致Array()的行为有差异。

1. Array() // []
2. Array(3) // [, , ,]
3. Array(3, 11, 8) // [3, 11, 8]

 

4.Array.prototype.fill()

第一个参数value是用来填充数组元素的值；第二个参数start是起始索引，默认是0；第三个参数end是结束索引，默认是this.length。

返回值是修改后的数组。

如果start和end是负数，会被计算成this.length + start和this.length + end。

this也可以是对象类型。

[1, 2, 3].fill(4);               // [4, 4, 4]
[1, 2, 3].fill(4, 1);            // [1, 4, 4]
[1, 2, 3].fill(4, 1, 2);         // [1, 4, 3]
[1, 2, 3].fill(4, 1, 1);         // [1, 2, 3]
[1, 2, 3].fill(4, 3, 3);         // [1, 2, 3]
[1, 2, 3].fill(4, -3, -2);       // [4, 2, 3]
[1, 2, 3].fill(4, NaN, NaN);     // [1, 2, 3]
[1, 2, 3].fill(4, 3, 5);         // [1, 2, 3]
Array(3).fill(4);                // [4, 4, 4]
[].fill.call({ length: 3 }, 4);  // {0: 4, 1: 4, 2: 4, length: 3}

// Objects by reference.
var arr = Array(3).fill({}) // [{}, {}, {}];
arr[0].hi = "hi"; // [{ hi: "hi" }, { hi: "hi" }, { hi: "hi" }]

 

5.Array.prototype.find

find()方法会返回满足条件的第一个元素，如果没有，则返回undefined

var arr = [1, 2, 3, 4, 5];
var above5 = arr.find(ele => ele > 5);
var below5 = arr.find(ele => ele < 5);
console.log(above5); // undefined
console.log(below5); // 1

假设根据用户名查找某一个用户

let input_user_name = "tom" // 假设用户在输入框中输入的用户名

const users = [ // 假设后端返回的所有数据
  { id: 123, name: "dave", age: 23 },
  { id: 456, name: "chris", age: 22 },
  { id: 789, name: "bob", age: 21 },
  { id: 101, name: "tom", age: 25 },
  { id: 102, name: "tim", age: 20 }
]

我之前的写法是:

let userSearched 

users.forEach(user => {
  if (user.name === input_user_name) {
    userSearched = user
  }
})

在了解了ES6中的Array.prototype.find()之后，我重写了之前的代码：

let userSearched = users.find(user => user.name === input_user_name)

 

6.Array,prototype.findIndex

findIndex()方法返回数组中满足提供的测试函数的第一个元素的索引。否则返回-1。方法同上！