JS笔记《数组扩展》

市民钟先生
112 阅读5分钟

扩展运算符

  • 好比rest参数的逆运算，将一个数组转为用逗号分隔的参数序列。
console.log(...[1, 2, 3])
// 1 2 3

console.log(1, ...[2, 3, 4], 5)
// 1 2 3 4 5
  • 主要用于函数调用。
function add(x, y) {
  return x + y;
}

const numbers = [4, 38];
add(...numbers) // 42
  • 只有函数调用时作为参数，扩展运算符才可以放在圆括号中，否则报错。
(...[1, 2])  // Uncaught SyntaxError: Unexpected number

console.log((...[1, 2]))  // Uncaught SyntaxError: Unexpected number 两层圆括号，里层不表示函数参数

console.log(...[1, 2]) // 1 2
  • 如果将扩展运算符用于数组赋值，只能放在参数的最后一位，否则会报错。
const [...butLast, last] = [1, 2, 3, 4, 5];  // SyntaxError: Rest element must be last element

const [first, ...butLast] = [1, 2, 3, 4, 5];
first  // 1
butLast  // [2, 3, 4, 5]

替代函数的apply()

function f(x, y, z) {}
var args = [0, 1, 2];

// ES5 的写法
f.apply(null, args);

// ES6 的写法
f(...args);
  • 使用Math.max求最大值。
let arr = [1,2,3,4,5];

// ES5写法
Math.max.apply(null, arr);  // 5

// ES6写法
Math.max(...arr);   // 5

复制数组

let arr = [1,2,3];
let arr2;

// ES5写法
arr2 = arr.concat();

// ES6写法
arr2 = [...arr];

合并数组

const arr1 = ['a', 'b'];
const arr2 = ['c'];
const arr3 = ['d', 'e'];

// ES5写法
const arr4 = arr.concat(arr2, arr3)

// ES6写法
const arr4 = [...arr1, ...arr2, ...arr3];

与解构赋值结合

let list = [1,2,3,4,5];  // 要求获取数组中第一个值与剩余的值

// ES5写法
let a = list[0];
let b = list.slice(1);

// ES6写法
let [a, ...rest] = list;

字符串转数组

[...'hello']  // [ "h", "e", "l", "l", "o" ]
  • 正确的求出字符串的长度
'z\uD83D\uDE80z'.length      // 4  超出了\u0000~\uFFFF 码点的字符会使用两个字节表示
[...'z\uD83D\uDE80z'].length // 3 正确

实现Iterator接口

  • 只要实现了Iterator接口的对象，都可以使用扩展运算符转为数组。
let nodeList = document.querySelectorAll('div');  // 返回的是NodeList类数组
let array = [...nodeList];

静态方法

Array.from()

  • 将类数组和实现了Iterator接口对象转为真正的数组。
let arrayLike = {
    '0': 'a',
    '1': 'b',
    '2': 'c',
    length: 3
};

let arr2 = Array.from(arrayLike); // ['a', 'b', 'c']
  • 第二个参数作用类似于数组的map()方法，用来对每个元素进行处理。
Array.from([1, 2, 3], (x) => x * x)  //  [1, 4, 9]

Array.of()

  • 将一组值转为数组。
Array.of(3, 11, 8)   // [3,11,8]

实例方法

copyWithin()

  • 在当前数组内部，将指定位置的成员复制到其他位置（覆盖原成员），然后返回当前数组（修改原数组）。
  • 参数一（必需）：从该位置开始替换数据。如果为负值，表示倒数。
  • 参数二（可选）：从该位置开始读取数据，默认为 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]
// 从下标3开始到下标4（不包含）进行复制，并从0位置开始替换

find()

  • 用于找出第一个符合条件的数组成员。参数为一个回调函数，所有成员依次执行，知道找出第一个返回值为true的成员，然后返回该成员。未找到返回undefined。
[1, 5, 10, 15].find((value, index, arr) => {
  return value > 9;
}) 
// 10

findIndex()

  • 与find几乎一致，区别是此方法返回第一个符合条件的成员的下标，未找到返回-1。

findLast()

  • 与find几乎一致，区别是此方法从后往前寻找。
[1,2,3,4,5].findLast(item => item > 1) // 5

findLastIndex()

  • 与findIndex几乎一致，区别是此方法从后往前查找。
[1,2,3,4,5].findLastIndex(item => item > 1)   // 4

fill()

  • 使用给定值填充一个数组。参数二和参数三表示填充的起始位置和结束位置。
['a', 'b', 'c'].fill(7, 1, 2)  // ['a', 7, 'c']

entries()

  • 用于遍历数组的键值对，返回一个遍历器对象。可以用for of循环。如果不使用for of，可以使用遍历器的next()进行遍历。
let entries = ['bob', 'jay', 'kitty'].entries()  // Array Iterator {}

for(let entry of entries){
    console.log(entry)
}
// [0, 'bob']
// [1, 'jay']
// [2, 'kitty']

keys()

  • 用于遍历数组的键名，返回一个遍历器对象。可以用for of循环。如果不使用for of，可以使用遍历器的next()进行遍历。
let keys = ['bob', 'jay', 'kitty'].keys()  // Array Iterator {}

for(let key of keys){
    console.log(key)
}
// 0
// 1
// 2

values()

  • 用于遍历数组的键值，返回一个遍历器对象。可以用for of循环。如果不使用for of，可以使用遍历器的next()进行遍历。
let values = ['bob', 'jay', 'kitty'].values()  // Array Iterator {}

for(let value of values){
    console.log(value)
}
// bob
// jay
// kitty

includes()

  • 返回一个布尔值，表示数组是否包含给定的值。
[1, 2, 3].includes(2)     // true
[1, 2, NaN].includes(NaN) // true

[1, 2, NaN].indexOf(NaN) // -1  indexOf会对NaN误判

flat()

  • 用于将嵌套的数组拉平，变成一维数组。返回一个新数组。默认只会拉平一层。参数表示需要拉平的层数。
[1,2,3, [1,2]].flat()     // [1, 2, 3, 1, 2]
[1,2,3, [1,[2]]].flat(2)  // [1, 2, 3, 1, 2]

// Infinity表示无论多少层都会拉平成一层
[1, [2, [3]]].flat(Infinity)  // [1, 2, 3]

flatMap()

  • 对原数组的每个成员执行一个函数（相当于map()），然后对返回值组成的数组执行flat()方法。返回一个新数组。只能展开一层。
[2, 3, 4].flatMap((x) => [x, x * 2])  // [2, 4, 3, 6, 4, 8]
// 相当于 [[2, 4], [3, 6], [4, 8]].flat()

at()

  • 接受一个整数作为参数，返回对应位置的成员，并支持负索引。此方法也可用于字符串和类数组
const arr = [5, 12, 8, 130, 44];
arr.at(2)   // 8
arr.at(-2)  // 130
avatar
文章
阅读
粉丝