当前位置：首页 > news >正文

数组扩展【ES6】

news 来源：原创 2025/6/18 21:59:32

迈克尔·德尔：“困难只是暂时的,放弃则是永恒的。坚持下去,你会找到解决的办法。”

数组扩展：

扩展运算符：

能够快速的进行数组的复制、数组的合并、与解构进行结合。

数组的复制：

let arr1 = [1, 2, 3];
let arr2 = arr1.concat();
console.log(arr2.pop());// 3
console.log(arr1);  // [1, 2, 3] 因为concat()方法复制的不会之后的操作不会改变原数组

let arr1 = [1, 2, 3];
let arr2 = [...arr1];
arr2.pop();
console.log(arr2); //[1, 2]
console.log(arr1); //[1, 2, 3]

数组的合并：

let arr1 = [1, 2, 3];
let arr2 = arr1.concat(4, 5, 6);
console.log(arr2); // [1, 2, 3, 4, 5, 6]
console.log(arr1); // [1, 2, 3]

let arr1 = [1, 2, 3];
let arr2 = [4, 5, 6];
console.log(...arr1, ...arr2); // 1 2 3 4 5 6

与解构进行结合：

let myarr = [1, 2, 3, 4, 5, 6, 7, 8];
let [a, b, ...c] = myarr;
console.log(a); // 1
console.log(b); // 2
console.log(c); // [3, 4, 5, 6, 7, 8]

Array.from():

我们之前经常用 arguments 获取函数被调用时传入的所有参数。arguments 对象不是真正的数组，但它具有类似数组的属性和方法，如 length 属性和通过索引访问元素的能力。然而，它不支持数组的其他方法，如 push、pop、slice 等。

function myFunction () {
      console.log(arguments); // Arguments(3) [1, 2, 3, callee: ƒ, Symbol(Symbol.iterator): ƒ]
      console.log(arguments[0]); // 1
}
 myFunction(1, 2, 3);

而我们的Array.from可以将类似数组的东西转化为真正的数组。

function myFunction () {
      console.log(Array.from(arguments));// [1, 2, 3]
}
myFunction(1, 2, 3);

<ul>
    <li>111111111111</li>
    <li>111111111111</li>
    <li>111111111111</li>
  </ul>
 <script>
    let olis = document.querySelectorAll('li');
    console.log(Array.from(olis));
 </script>

Array.of():

将一组值转化为数组，即新建数组。弥补 Array 创建数组只传一个参数的时候的短板，Array 传一个参数的时候，你会创建一个具有指定长度但元素均为 undefined 的新数组。这个参数定义了数组的长度属性。

let arr = [1, 2, 3];
let arr1 = Array(5, 6, 7);
let arr2 = Array(3); // 传一个参数的时候，你会创建一个具有指定长度但元素均为 undefined 的新数组。这个参数定义了数组的长度属性
let arr3 = Array.of(8, 9, 10);
let arr4 = Array.of(1);

console.log(arr); // [1, 2, 3]
console.log(arr1); // [5, 6, 7]
console.log(arr2); // [empty × 3]
console.log(arr3); // [8, 9, 10]
console.log(arr4); // [1] 就算传一个参数也可以创建成数组

find：

返回满足条件的第一个元素。

let arr = [11, 12, 13, 14, 15];
let res = arr.find((item) => {
      return item > 13
})
console.log(res); //14

findIndex：

返回第一个满足条件元素的索引值。

let arr = [11, 12, 13, 14, 15];
let res = arr.findIndex((item) => {
      return item > 13
})
console.log(res); //3

与find相对比的findLast【ES13】:

从后往前找，返回后面第一个满足条件的元素。

let arr = [11, 12, 13, 14, 15];
let res = arr.findLast((item) => {
      return item > 13
})
console.log(res); //15

与findIndex相对比的findLastIndex【ES13】:

从后往前找，返回后面第一个满足条件元素的索引值。

let arr = [11, 12, 13, 14, 15];
let res = arr.findLastIndex((item) => {
      return item > 13
)
console.log(res); //4

fill:

可以充当填充的作用！

let arr = new Array(3).fill('kitty');
console.log(arr);// ['kitty', 'kitty', 'kitty']

可以用来替换元素（可以全部替换也可以选择起始位置和结束为止来进行替换元素）：

let arr = [11, 22, 33];
let arr1 = [11, 22, 33];
console.log(arr.fill('Alice')); // ['Alice', 'Alice', 'Alice']
console.log(arr1.fill('Alice', 1, 2)); //[11, 'Alice', 33]

flat：

flat 方法用于将嵌套数组“展平”成一个新数组，即移除数组的嵌套层级。它接受一个可选的深度参数，表示要展平的嵌套层数。如果未指定深度，则默认为 1，意味着它只会展平一层嵌套的数组。

let arr = [1, 2, 3, [4, 5, 6]]
console.log(arr.flat());// [1, 2, 3, 4, 5, 6]
console.log(arr);// [1, 2, 3, [4, 5, 6]] flat不会改变原数组

let arr = [
      ['安庆', '安阳', '鞍山'],
      ['北京', '保定', '包头']
    ]
console.log(arr.flat()); // ['安庆', '安阳', '鞍山', '北京', '保定', '包头']

flatMap：

flatMap 方法首先使用提供的映射函数对数组中的每个元素进行映射，然后将结果展平到一个新数组中。与 map 方法不同，flatMap 会将映射函数返回的每个数组展平，而不是保留它们作为嵌套数组。这使得 flatMap 特别适合于处理嵌套数组，并且想要将嵌套的元素映射到一个单一的数组中的情况。

let arr = [
      {
        name: "A",
        list: ['安庆', '安阳', '鞍山']
      }, {
        name: "B",
        list: ['北京', '保定', '包头']
      }
    ]
let res = arr.flatMap(function (item) {
      return item.list
 })

console.log(res); //  ['安庆', '安阳', '鞍山', '北京', '保定', '包头']