ES6小实验-数组的扩展

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了ES6小实验-数组的扩展相关的知识,希望对你有一定的参考价值。

数组方法已经很多,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

 










以上是关于ES6小实验-数组的扩展的主要内容,如果未能解决你的问题,请参考以下文章

ES6小实验-字符串的扩展

ES6小实验-复习数组

ES6解构赋值

ES6小实验-复习正则表达式

ES6解构

es6数组的扩展