ES6面试题考点(二）--数组新增扩展

Alo365
671 阅读7分钟

1.扩展运算符

扩展运算符...将一个数组转为用逗号分隔的参数序列

console.log(...[11,22,33,44]);
console.log(1,2,...[3,4,5],6,7)

image.png

主要用途

...主要用于函数调用的时候，将一个数组变为参数序列

例子：

function push(array, ...item) {
  array.push(...item)
}

function add(x,y) {
  return x + y
}

const numbers = [1, 2]

add(...numbers)

image.png

数组复制

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

image.png

数组合并

var  arr1 = ['a','b']
var  arr2 = ['c']
var arr3 = ['d','e']
console.log([...arr1,...arr2,...arr3]);

image.png

通过扩展运算符实现的是浅拷贝，修改了引用指向的值，会同步反映到新数组，来看下面这个例子

const arr1 = ['a','b',['J','S']];
const arr2 = ['c'];
const arr3 = [...arr1,...arr2]
arr1[2][0] = 'T'
console.log(arr3);

image.png

生成数组

const [first,second,...rest] = [1,2,3,4,5]

console.log(first);
console.log(second);
console.log(rest);

image.png

注意：如果将扩展运算符用于数组赋值，只能放在参数的最后一位，否则会报错

image.png

image.png

字符串转数组

console.log([...'hello']);

image.png

2.构造函数新增的方法

2.1 Array.from()

将两类对象转为真正的数组：类似数组的对象和可遍历的对象

let arrayLike={
  '0':'a',
  '1':'b',
  '2':'c',
  length:3
}

let arr2 = Array.from(arrayLike)

console.log(arr2);

image.png

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

let arr = Array.from([1,2,3],(x)=>x+1000)
console.log(arr);

image.png

2.2 Array.of()

Array.of用于将一组值，转换为数组

let a =Array.of('j','u','e','j','i','n')
console.log( a);

image.png

注意：

  1. 没有参数的时候会返回一个空数组；
  2. 当参数只有一个的时候，这个参数会被当做数组的长度
  3. 参数个数不少于2个时，Array()才会返回由参数组成的新数组

3. 实例对象新增的方法

3.1 copyWithin()

将指定位置的元素复制到其他位置（会覆盖原来的元素），然后返回当前数组

用法如下：

array.copyWithin(target, start, end)

  • target: 复制的目标位置的起始索引。如果是负数，则从数组末尾开始计算。

  • start: （可选）要复制的元素序列的起始位置索引，默认是 0。如果是负数，则从数组末尾开始计算。

  • end: （可选）要复制的元素序列的结束位置索引（不包括end）。默认是 array.length。如果是负数，则从数组末尾开始计算。

示例

let arr = [1, 2, 3, 4, 5];

// 将索引为3及以后的元素复制到索引为0的位置
arr.copyWithin(0, 3);
// 结果：[4, 5, 3, 4, 5]

let arr2 = [1, 2, 3, 4, 5];

// 将索引为1到3的元素复制到索引为2的位置
arr2.copyWithin(2, 1, 3);
// 结果：[1, 2, 2, 3, 5]

3.2 find()、findIndex()

find()用于找出第一符合条件的数组成员 参数是一个回调函数，接受三个参数依次为当前的值、当前的位置和原数组

[1, 4, 3, 20, 66, 32].find(function (value, index, arr) {
  return value > 9
})

find() 方法会从数组的第一个元素开始，直到找到第一个符合条件的元素。在这个例子中，第一个大于 9 的元素是 20，所以 find() 方法返回 20。

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

如果采用findIndex，上面那段代码返回的就是20的下标3

这两个方法都可以接受第二个参数，用来绑定回调函数的this对象

function f(v) {
  return v > this.age
}
let person = { name: 'John', age: 20 }
[11,21,31,41].find(f,person) //  输出：21

3.3 fill()

使用给定值，填充一个数组

全部填充：

let arr = [1, 2, 3, 4];
arr.fill(0); // 输出: [0, 0, 0, 0]
let arr = [1, 2, 3, 4];
arr.fill(0); // 输出: [0, 0, 0, 0]

部分填充：

let arr = [1, 2, 3, 4];
arr.fill(5, 1, 3);//5:用'5'进行填充 ， 1：从索引1开始 ， 3：填充到索引3结束
console.log(arr); // 输出: [1, 5, 5, 4]

注意： 如果填充的类型为对象，则为浅拷贝

3.4 keys(),values(),entires()

keys():对键名的遍历

values():对键值进行遍历

entries():对键值对进行遍历

let arr = ['a', 'b', 'c'];
let keys = arr.keys();

for (let key of keys) {
  console.log(key); // 输出: 0, 1, 2
}


let arr = ['a', 'b', 'c'];
let values = arr.values();

for (let value of values) {
  console.log(value); // 输出: 'a', 'b', 'c'
}


let arr = ['a', 'b', 'c'];
let entries = arr.entries();

for (let [key, value] of entries) {
  console.log(key, value); // 输出: 0 'a', 1 'b', 2 'c'
}

3.5 includes()

用于判断数组是否包含给定的值,如果包含该值，则返回 true，否则返回 false。

语法

arr.includes(valueToFind, fromIndex)
  • valueToFind：要查找的值。
  • fromIndex（可选）：从数组的哪个索引开始查找，默认是 0。如果是负数，则从数组末尾倒数开始计算。
let arr = [1, 2, 3, 4, 5];
console.log(arr.includes(3)); // 输出: true
console.log(arr.includes(6)); // 输出: false

指定开始索引：

let arr = [1, 2, 3, 4, 5];
console.log(arr.includes(3, 3)); // 输出: false (从索引 3 开始找，没有找到 3)

处理负数索引：

let arr = [1, 2, 3, 4, 5];
console.log(arr.includes(4, -2)); // 输出: true (从倒数第二个元素开始查找，找到 4)

3.6 flat(),flatMap()

将数组扁平化处理，返回一个新数组，不对原数组产生影响。

flat() 方法用于将嵌套的数组 "扁平化"，即将多维数组转换为一维数组。你可以指定扁平化的深度。

arr.flat(depth)
  • depth（可选）：指定要提取嵌套数组的深度，默认值是 1。

默认扁平化一级嵌套：

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

指定扁平化深度：

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

完全扁平化数组：

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

flatMap() 方法首先对数组中的每个元素执行一个映射函数，然后将结果扁平化，深度为 1。它结合了 map() 和 flat() 的功能，但效率更高。

arr.flatMap(callback)
  • callback：一个函数，用于对数组的每个元素进行处理。

基本用法：

let arr = [1, 2, 3, 4];
console.log(arr.flatMap(x => [x * 2])); // 输出: [2, 4, 6, 8]

与 map() 的对比：

let arr = [1, 2, 3, 4];
console.log(arr.map(x => [x * 2])); // 输出: [[2], [4], [6], [8]]
console.log(arr.flatMap(x => [x * 2])); // 输出: [2, 4, 6, 8]

处理嵌套数组：

let arr = [1, 2, 3];
console.log(arr.flatMap(x => [x, x * 2])); // 输出: [1, 2, 2, 4, 3, 6]

小结

  • flat() 用于将嵌套数组扁平化到指定深度。
  • flatMap() 先对数组的每个元素进行操作，然后将结果扁平化一级。

3.7 数组的空位

在 JavaScript 中，数组的空位指的是数组中没有被定义的元素。这些空位可能是由于某些操作（如用 delete 删除数组元素）或者创建数组时没有指定所有的元素。

示例

  1. 创建数组时留下空位：
let arr = [1, , 3]; // 第二个元素为空位
console.log(arr[1]); // 输出: undefined

在这个例子中，数组 `[1, , 3]` 的第二个元素是一个空位，它没有定义具体的值。你无法通过普通的索引访问到这个空位，直接访问 `arr[1]` 会返回 `undefined`。
  1. 用 delete 删除元素：
let arr = [1, 2, 3];
delete arr[1]; // 删除索引为 1 的元素
console.log(arr); // 输出: [1, <1 empty item>, 3]
console.log(arr[1]); // 输出: undefined

使用 `delete` 操作符会留下一个空位而不是将元素值设置为 `undefined`。这样，`arr[1]` 仍然会返回 `undefined`，但数组的长度不会改变。

  1. 空位与 undefined 的区别：

    • 空位与 undefined 不同，空位是数组中根本不存在的元素，而 undefined 是一个值，表示该位置的值未被定义。
let arr1 = [1, , 3]; // 空位
let arr2 = [1, undefined, 3]; // 有明确的 `undefined` 值

console.log(arr1[1]); // 输出: undefined
console.log(arr2[1]); // 输出: undefined

虽然在访问时 `arr1[1]` 和 `arr2[1]` 都返回 `undefined`，但它们在内部表示上是不同的。`arr1[1]` 是一个空位，而 `arr2[1]` 是一个明确的 `undefined` 值。

处理空位

  • forEach() ：不会遍历空位。
let arr = [1, , 3];
arr.forEach(value => console.log(value)); // 输出: 1, 3
  • map() ：空位会被跳过。
let arr = [1, , 3];
console.log(arr.map(value => value)); // 输出: [1, <1 empty item>, 3]
  • filter() ：空位会被跳过。
let arr = [1, , 3];
console.log(arr.filter(value => value !== undefined)); // 输出: [1, 3]
  • find() 和 findIndex() ：会跳过空位。
let arr = [1, , 3];
console.log(arr.find(value => value === 3)); // 输出: 3
avatar
文章
阅读
粉丝