ES6小实验-数组的扩展

Posted 2020-09-08

数组方法已经很多，ES6给数组又增加了不少方法：

1.Array.from():用于将两类对象转为真正的数组，类似数组的对象(array-like object) 和可遍历(iterable)的对象(包括ES6新增的数据结构Set和Map)

let arrayLike = {
    ‘0‘: ‘a‘,
    ‘1‘: ‘b‘,
    ‘2‘: ‘c‘,
    length:3
}
let arr = Array.from(arrayLike)
console.log(arr)//["a", "b", "c"]

如果把上面的length:3去掉，那么转化就失败，因为没有length属性，它就不是一个类似数组的对象了。Array.from()还可以接受第二个参数，作用类似于数组的map方法，用来对每个元素进行处理，将处理后的值放入返回的数组

var arrayLike = {
    ‘0‘: 1,
    ‘1‘: 2,
    ‘2‘: 3,
    length: 3
};
var arr = Array.from(arrayLike, function (x) {
    return x * x;
});
console.log(arr);//[1, 4, 9]

2.Array.of():用于将一组值，转换为数组

let arr = Array.of(1,2,3)
console.log(arr)//[1, 2, 3]

3.Array.prototype.copyWithin():数组实例的copyWithin方法，在当前数组内部，将指定位置的成员复制到其他位置（会覆盖其他位置的原有成员），然后返回当前数组　　　　　　

　　　　　　Array.prototype.copyWithin(target,start = 0,end=this.length)

　　它接受三个参数(1)target(必须)：从该位置开始替换数据

　　　　　　　　　(2)start(可选)：从该位置开始读取数据，默认为0

　　　　　　　　   (3)end(可选)：到该位置前停止读取数据，默认等于数组长度

var arr = [5,4,3,2,1].copyWithin(0,3)
console.log(arr)//[2, 1, 3, 2, 1]

上面0是target，3是起始位置，end默认为数组长度

4.find():用于找出第一个符合条件的数组成员，它的参数是一个回调函数

var arr = [5, 4, 3, 2, 1].find(function (value, index, arr) {
  return value > 3;
});
console.log(arr); //5

5.findIndex(): 返回第一个符合条件的数组成员的位置

var arr = [5, 4, 3, 2, 1].findIndex(function (n) {
  return n > 3;
});
console.log(arr); //0

6.fill(): 使用定值，填充一个数组，可以接收第二个和第三个参数，用于指定填充的起始位置和结束位置,感觉ES6所加的方法比较适合数组的大规模改变，如果是少量的变动，用ES5的方法一样可以做到

var arr = [‘a‘,‘b‘,‘c‘].fill(7,1,2)
console.log(arr)//["a", 7, "c"]

7.entries(),keys(),values() :用于遍历数组，它们都返回一个遍历器对象，keys是对键名的遍历，values()是对键值的遍历，entries()是对键值对的遍历,实验了下却发现chrome并不认识values()这个方法，其他两个都认识

for(let index of [‘a‘,‘b‘].keys()) {
    console.log(index)
}
//0
//1
 for(let elem of [‘a‘,‘b‘].values()) {
    console.log(elem)
}
//?
for(let [index, elem] of [‘a‘, ‘b‘].entries()) {
    console.log(index, elem)
}
//0 "a"
//1 "b"

8.includes() 返回一个布尔值，表示某个数组是否包含给定的值,它可以接受第二个参数表示搜索的起始位置，默认为0

console.log([1,2,3].includes(2))//true
console.log([1,2,3].includes(4))//false