ES6 数组的扩展

扩展运算符

扩展运算符(spread)就是三个点(...)。

console.log(...['a','b','c']) // a b c 

扩展运算符与正常的函数参数可以结合使用,非常灵活。

function arrAdd(arr, ...items){
  arr.push(...items);
};
let numList = [1,2,3,4,5];
arrAdd([0],...numList) // [0,1,2,3,4,5]

复制数组

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

合并数组

新的数组都是由原数组成员引用而成,这是浅拷贝。如果修改了引用指向的值,会同步反映到新数组

const a = [1,1,1];
const b = [2,2,2];
const c = [3,3];

[...a,...b,...c]; // [1,1,1,2,2,2,3,3]

a[0] = 4;
b[1] = 3;
a // [4,1,1]
b // [2,3,2]
[...a,...b,...c]; // [4,1,1,2,3,2,3,3]

与解构赋值结合

const [item1,...items] = [1,2,3,4,5];
item1 // 1
items // [2,3,4,5]

const [item1, ...items] = [];
item1 // undefined
items // []

const [item1,...items,item2] = [1,2,3,4,5];
// 报错

字符串

扩展运算符还可以将字符串转为真正的数组。

[...'hello world'] // ["h", "e", "l", "l", "o", " ", "w", "o", "r", "l", "d"]

Array.form()

将类似数组的对象和可遍历(iterable)的对象转为数组

let  obj = {
  '0': 1,
  '1': 2,
  '2': 3,
  length:3
};
let arr = Array.from(obj) // [1,2,3]

Array.from还可以接受第二个参数,用来对每个元素进行处理,将处理后的值放入返回的数组。

Array.from(obj,x => x * x);

Array.of()

将一组值,转换为数组。参数个数的不同,会导致Array()的行为有差异。

Array() // []
Array(3) // [, , ,]
Array(4, 41, 84) // [4, 41, 84]

copyWithin()

当前数组内部,将指定位置的成员复制到其他位置(会覆盖原有成员),然后返回当前数组

  • target(必需):从该位置开始替换数据。如果为负值,表示倒数。
  • start(可选):从该位置开始读取数据,默认为 0。如果为负值,表示从末尾开始计算。
  • end(可选):到该位置前停止读取数据,默认等于数组长度。如果为负值,表示从末尾开始计算。
// 从 3 号位直到数组结束的成员,复制到从 0 号位开始的位置
[1, 2, 3, 4, 5].copyWithin(0, 3)
// [4, 5, 3, 4, 5]

// 将3号位复制到0号位
[1, 2, 3, 4, 5].copyWithin(0, 3, 4)
// [4, 2, 3, 4, 5]

// -2相当于3号位,-1相当于4号位
[1, 2, 3, 4, 5].copyWithin(0, -2, -1)
// [4, 2, 3, 4, 5]

find() 和 findIndex()

find 方法是找出第一个符合条件的数组成员。它的参数是一个回调函数,所有数组成员依次执行该回调函数,直到找出第一个返回值为true的成员,然后返回该成员。

// 回调函数可以接受三个参数,依次为当前的值、当前的位置和原数组。
[11, 15, 110, 151].find(function(value, index, arr) {
  return value > 19;
}) // 110

findIndex方法返回第一个符合条件的数组成员的位置,如果所有成员都不符合条件,则返回-1

[11, 15, 110, 151].find(function(value, index, arr) {
  return value > 19;
}) // 2

fill()

给定值,填充一个数组

[1,2,'b','s','3'].fill('a') // ['a','a','a','a','a']

可以接受第二个和第三个参数,用于指定填充的起始位置和结束位置。

[1,2,'b','s','3'].fill('a',2,3) // [1,2,'a','s','3']

entries(),keys() 和 values()

entries()是对键值对的遍历,keys()是对键名的遍历、values()是对键值的遍历。

for (let item of [1,2].keys()){
  console.log(item);
} // 0 1

for (let val of [1,2].values()){
  console.log(val);
} // 'a' 'b'

for (let [item,val] of [1,2].entries()){
  console.log(item,val);
} // 0 'a' 1 'b'

includes()

某个数组是否包含给定的值,返回一个布尔值。

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

该方法的第二个参数表示搜索的起始位置,默认为0

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

flat(),flatMap()

将嵌套数组转变成一个数组,返回新数组。对原数组没有影响

[[1,2],3[4,5]].flat() // [1,2,3,4,5]

flat()中的参数表示转换的嵌套层数。默认为1,

[[[1,2],3],4,5].flat() // [[1,2],3,4,5][[[1,2],3],4,5].flat(2) // [1,2,3,4,5]

Array.prototype.sort() 的排序稳定性

排序稳定性(stable sorting)是排序算法的重要属性,指的是排序关键字相同的项目,排序前后的顺序不变。

// 需要排序的数组
const arr = [
  'peach',
  'straw',
  'apple',
  'spork'
];
// 定义的排序函数
const stableSorting = (s1, s2) => {
  if (s1[0] < s2[0]) return -1;
  return 1;
};
// 调用方法处理数组
arr.sort(stableSorting)
// ["apple", "peach", "straw", "spork"]

参考文献

阮一峰老师的 ECMAScript 6 入门


点赞 评论 收藏 ~~ 今天的学习记录暂时到这... ~~ 点赞 评论 收藏

你可能感兴趣的:(ES6,学习笔记,es6)