[Javascript 进阶]-数组

生成数组

Array()

js 复制代码

// Array(arrayLength), 0 <= arrayLength <= 2^32 - 1
// 生成长度为arrayLength的空数组，其中的每一项为undefined
const arr = new Array(4);
console.log(arr);
console.log(arr[0]);
// [,,,]
// undefined

// Array(element0,element1,...elementN)
// 生成由括号内组成的数组
const arr = new Array('a', 'b', 3, '4', true);
// ["a","b",3,"4",true]

Array.from()

接受两个参数，第一个参数是可迭代的对象，第二个参数是一个函数，用于对每一个迭代对象进行操作可迭代的对象包含

数组
类数组
字符串
Set
Map

js 复制代码

// 1. 数组
const arr = Array.from([1,2,3])
// [1,2,3]

// 2. 类数组
const imageElements = document.querySelectorAll('img');
const imageSrcs = Array.from(imageElements, (image) => image.src);

// 3. 字符串
const arr = Array.from('array');
// ["a","r","r","a","y"]

// 4. Set
const set = new Set(["foo", "bar", "baz", "foo"]);
Array.from(set);
// [ "foo", "bar", "baz" ]

// 5. Map
const map = new Map([
  [1, 2],
  [2, 4],
  [4, 8],
]);
Array.from(map);
// [[1, 2], [2, 4], [4, 8]]

Array.of()

js 复制代码

// Array.of(ele0,ele1,...,eleN)，生成括号内元素对应的数组
const arr = Array.of('a', 'b', 3, '4', true);
// ["a","b",3,"4",true]

判断是否是数组

js 复制代码

const arr = Array.of('a', 'b', 3, '4', true);
console.log(arr instanceof Array) // true
console.log(Array.isArray(arr)) // true

操作数组，返回新数组，不对原有数组产生影响

Array.prototype.map((element, index, thisArray) => ())

传入参数为一个函数，对数组进行遍历，每次遍历可以使用函数将数组的每个元素进行修改

js 复制代码

const users = [{
    name: 'user1',
    isVip: true,
    title: '一般用户'
    }, {
    name: 'user1',
    isVip: true,
    title: '一般用户'
    }, {
    name: 'user1',
    isVip: false,
    title: '一般用户'
    }];
const newUsers = users.map((user) => {
    if (user.isVip) {
        return {
            ...user,
            title: 'Vip用户'
        }
    }
    
    return user;
});
/*
    [{
      "name": "user1",
      "isVip": true,
      "title": "Vip用户"
    },
    {
      "name": "user2",
      "isVip": true,
      "title": "Vip用户"
    },
    {
      "name": "user3",
      "isVip": false,
      "title": "一般用户"
    }] 
*/

Array.prototype.filter((element, index, thisArray) => ())

使用传入函数对已有数组进行筛选操作，返回结果为true的元素

js 复制代码

const users = [{
    name: 'user1',
    isVip: true,
    title: '一般用户'
    }, {
    name: 'user2',
    isVip: true,
    title: '一般用户'
    }, {
    name: 'user3',
    isVip: false,
    title: '一般用户'
    }];
const newUsers = users.fillter((user) => user.isVip);
/*
    [
        {
          "name": "user1",
          "isVip": true,
          "title": "一般用户"
        },
        {
          "name": "user2",
          "isVip": true,
          "title": "一般用户"
        }
    ] 
*/

Array.prototype.flat(depth)

创建一个新的数组，并根据指定深度递归地将所有子数组元素拼接到新的数组中

js 复制代码

const arr1 = [0, 1, 2, [3, 4]];
arr1.flat();
// [0,1,2,3,4]
const arr2 = [0, 1, [2, [3, [4, 5]]]];
arr2.flat();
// [0, 1, 2, [3, [4, 5]]]
arr2.flat(2);
// [0, 1, 2, 3, [4, 5]]
arr2.flat(Infinity);
// [0, 1, 2, 3, 4, 5]

Array.prototype.concat(element1,element2,...elementN)

合并两个或多个数组。此方法不会更改现有数组，而是返回一个新数组。

js 复制代码

// 传入单个数组
const array1 = ['a', 'b', 'c'];
const array2 = ['d', 'e', 'f'];
const array3 = array1.concat(array2);
// array3 => ["a", "b", "c", "d", "e", "f"]

// 传入多个数组
const num1 = [1, 2, 3];
const num2 = [4, 5, 6];
const num3 = [7, 8, 9];
const numbers = num1.concat(num2, num3);
// numbers => [1, 2, 3, 4, 5, 6, 7, 8, 9]

// 传入组合
const letters = ["a", "b", "c"];
const alphaNumeric = letters.concat(1, [2, 3]);
// alphaNumeric => ['a', 'b', 'c', 1, 2, 3]

// concat是浅拷贝，所以会保留引用
const num1 = [[1]];
const num2 = [2, [3]];

const numbers = num1.concat(num2);
// numbers => [[1], 2, [3]]

// 修改 num1 的第一个元素
num1[0].push(4);
// numbers => [[1, 4], 2, [3]]

Array.prototype.slice(startIndex, endIndex)

js 复制代码

const animals = ['ant', 'bison', 'camel', 'duck', 'elephant'];
// 只写起始位置，会从起始位置截断至最后
console.log(animals.slice(2));
// Expected output: Array ["camel", "duck", "elephant"]

// 写上起始和结束位置
console.log(animals.slice(2, 4));
// Expected output: Array ["camel", "duck"]

// 位置为负数，会从后往前计算
console.log(animals.slice(-2));
// Expected output: Array ["duck", "elephant"]

// 这样就能够获取正数和倒数之间的数据
console.log(animals.slice(2, -1));
// Expected output: Array ["camel", "duck"]

数组的查找

Array.prototype.at(index)

返回该索引对应的元素，允许正数和负数。负整数从数组中的最后一个元素开始倒数。

js 复制代码

const array1 = [5, 12, 8, 130, 44];
array1.at(2) // 8
array1.at(-2) // 130

Array.prototype.includes(element, startIndex)

判断一个数组是否包含一个指定的值，根据情况，如果包含则返回 true，否则返回 false。

js 复制代码

const pets = ['cat', 'dog', 'bat'];

console.log(pets.includes('cat'));
// Expected output: true

console.log(pets.includes('at'));
// Expected output: false

// startIndex 可以控制查找的起始位置，若超出数组长度直接返回false
console.log(pets.includes('cat', 1));
// Expected output: false
// 如果 `fromIndex` 为负值，计算出的索引将作为开始搜索 `searchElement` 的位置。如果计算出的索引小于 `0`，则整个数组都会被搜索。

const arr = ["a", "b", "c"];
// 数组长度为 3
// fromIndex 为 -100
// 计算出的索引为 3 + (-100) = -97

arr.includes("a", -100); // true
arr.includes("b", -100); // true
arr.includes("c", -100); // true
arr.includes("a", -2); // false

未完待续...

参考文档：

developer.mozilla.org/zh-CN/docs/...