乐趣区

关于javascript:ES6数组的扩展

扩大运算符的应用

扩大运算符是由三个点组成 ...,能够用于将一个数组转为逗号分隔的一个参数序列。次要作用就是开展以后数组,个别用于复制数组,合并数组,解构,拆分字符串和转换 Iterator 接口的对象。

复制数组

数组是复合的数据类型,如果咱们间接复制一个数组,只是复制了指向底层数据结构的指针,而不是克隆一个全新的数组。

示例:

ES5 中,咱们只能通过办法来复制数组,如下所示:

const a = [1, 2, 3];
const b = a.concat();
console.log(b); // 输入:[1, 2, 3]

b[0] = 10;
console.log(b); // 输入:[10, 2, 3]

ES6 中不须要应用办法,间接通过扩大运算符,就能够复制数组,如下所示:

const a = [1, 2, 3];
const b = [...a];
console.log(b);  // 输入:[1, 2, 3]

上述代码还有一种写法,如下所示:

const a = [1, 2, 3];
const [...b] = a;
console.log(b); // 输入:[1, 2, 3]

这两种写法其实是一样,b 都是 a 的克隆。

合并数组

扩大运算符除了能够让咱们更不便的复制数组,还提供了数组合并的新写法。

示例:

如果咱们在 ES5 中合并数组,能够像上面这样写,须要用到一个 concat() 办法:

const arr1 = ['xkd'];
const arr2 = ['mark'];
const arr3 = ['summer', 'sun'];

console.log(arr1.concat(arr2, arr3));  // 输入:['xkd', 'mark', 'summer', 'sun']

而在 ES6 中合并数组能够应用扩大运算符:

const arr1 = ['xkd'];
const arr2 = ['mark'];
const arr3 = ['summer', 'sun'];

console.log([...arr1, ...arr2, ...arr3]); // 输入:['xkd', 'mark', 'summer', 'sun']

解构

扩大运算符能够与解构赋值联合起来,用于生成数组。

示例:

将数组解形成两局部:

const [x, ...y] = [1, 2, 3, 4, 5];
console.log(x);  // 输入:1
console.log(y);  // 输入:[2, 3, 4, 5]

拆分字符串

扩大运算符还能够拆分字符串,将字符串转为真正的数组。

示例:
console.log([...'hello']);  // 输入:['h', 'e', 'l', 'l', 'o']
console.log([...'xkd']);    // 输入:['x', 'k', 'd']

Array.form() 办法

Array.form() 办法用于将两类对象转为真正的数组,两类对象就是:相似数组的对象(array-like object)和可遍历的的对象。

示例:

例如将一个相似数组的对象转为真正的数组:

let arr1 = {
    '0': 'x',
    '1': 'k',
    '2': 'd',
    length: 3   
};

console.log(Array.from(arr1));  // 输入:['x', 'k', 'd']

Array.of() 办法

Array.of() 办法用于将一组值,转换为数组。

示例:
console.log(Array.of(1, 6, 9));   // 输入:[1, 6, 9]
console.log(Array.of('xkd', 'summer').length)  // 输入:2

这个办法的次要目标,是补救数组构造函数 Array() 的有余。因为参数个数的不同,会导致 Array() 的行为有差别。

示例:

如下所示,只有当参数个数不少于 2 个时,Array() 才会返回由参数组成的新数组:

console.log(Array());  // 输入:[]
console.log(Array(2)); // 输入:[, ,]
console.log(Array(1, 4, 7)); // 输入:[1, 4, 7]

copyWithin()

copyWithin() 办法用于将指定地位的成员复制到其余地位,也就是批改以后数组外面它会把指定地位的元素或者复制到其余中央,它会批改以后数组。

语法:

Array.prototype.copyWithin(target, start = 0, end = this.length);
  • target:必须参数,从该地位开始替换数据,负值示意倒数。
  • start:必须参数,从该地位开始读取数据,默认为 0,负值示意从开端开始计算。
  • end:可选参数,到该地位前进行读取数据,默认数组长度,负值示意从开端开始计算。
示例:

从下标为 0 的数字 1 开始替换数据,而后从下标为 3 的数字 4 开始读取数据:

let arr = [1, 2, 3, 4, 5];
console.log(arr.copyWithin(3, 4)); // 输入:[1, 2, 3, 5, 5] 

console.log(arr.copyWithin(1, 4)); // 输入:[1, 5, 3, 4, 5]

console.log(arr.copyWithin(0, 2, 4)); // 输入:[3, 4, 3, 4, 5]

数组查找办法

  • find() 办法:查找数组中符合条件的元素, 若有多个符合条件的元素,则返回第一个元素。
示例:
let arr = Array.of(1, 2, 3, 4);
console.log(arr.find(item => item > 1)); // 输入:2
  • findIndex() 办法:查找数组中符合条件的元素索引,若有多个符合条件的元素,则返回第一个元素索引。
示例:
let arr = Array.of(1, 2, 3);
console.log(arr.findIndex(item => item = 1));  // 输入:0
console.log([, 1].findIndex(n => true));       // 输入:0

数组填充办法

fill() 办法用于将肯定范畴索引的数组元素内容填充为单个指定的值。办法中第一个参数为用来填充的值,第二个参数为被填充的起始索引,第三个参数为填充的完结索引,默认为数组开端。

示例:
let arr = Array.of(1, 2, 3, 4, 5);
console.log(arr.fill(0, 1, 2)); // 输入:[1, 0, 3, 4, 5]
console.log(arr.fill(0, 3));    // 输入:[1, 0, 3, 0, 0]

遍历数组

  • entries() 办法:遍历键值对。
示例:
for(let [key, value] of ['xkd', 'summer'].entries()) {console.log(key, value);
}

输入:

0 xkd
1 summer
  • keys() 办法:遍历键名。
示例:
for(let key of ['a', 'b', 'c'].keys()) {console.log(key);
}

输入:

0
1
2
  • values() 办法:遍历键值。
示例:
for(let value of ['a', 'b', 'c'].values()) {console.log(value)
}

输入:

a
b
c
退出移动版