JS【详解】数组（数组的本质、创建数组、常用数组操作API汇总对比和实战范例、数组的遍历、复制、去重等）

朝阳39

已于 2024-07-15 17:34:15 修改

阅读量545

点赞数 17

分类专栏： # JavaScript 文章标签： javascript

于 2024-07-15 17:28:42 首次发布

本文链接：https://blog.csdn.net/weixin_41192489/article/details/140430116

版权

JavaScript 专栏收录该内容

142 篇文章 21 订阅

订阅专栏

数组用于存储多个有序的数据

数组本质上是以数字为键（从0开始，依次递增），并外加一个会自动增长的 length 属性的对象。

创建数组

方式 1 - 通过字面量创建

// 空数组
let arr1 = [];
let arr2 = [1,2,3];

方式 2 - 使用构造函数 new Array()

let arr1 = new Array(); // 参数为空,得到一个空数组 []
let arr2 = new Array(4); // 参数为一个数值时表示数组的长度，得到  [undefined,undefined,undefined,undefined]
let arr3 = new Array(15, 16, 17); // 参数为多个数值时表示数组中的元素，得到[15,16,17]

方式 3 - Array.of()

ES6 新增语法

let arr = Array.of(1, 'abc', true);

当只有一个参数时，构造函数 Array 会将其作为数组的长度，而不是元素，这很容易造成歧义（因为其他参数数量时，参数都是数组的元素，而不是数组的长度），因此，ES6 新增了 Array.of() 语法来避免这种歧义。

let arr1 = Array.of(2) //[2]
let arr2 = Array.of("2") //["2"]
let arr3 = Array.of(1,"2",{obj: "3"}) //[1,"2",{obj: "3"}]

方式 4 - Array().fill()

用于创建指定数量，元素相同的数组

Array 的参数为数字
fill 的参数为元素

Array(9).fill('1')

得到

["1", "1", "1", "1", "1", "1", "1", "1", "1"]

常用的数组操作

数组的API	功能	入参	返回值	是否改变原数组
unshift	在数组头部追加元素	新元素	数组的新长度	改变
push	在数组尾部追加元素	新元素	数组的新长度	改变
shift	移除数组的第一项	无	被移除的元素	改变
pop	移除数组最后一项	无	被移除的元素	改变
sort	数组排序	排序规则函数	排序后的数组	改变
reverse	数组反转	无	反转后的数组	改变
fill	数组覆写	新元素,起始下标,终点下标	覆写后的数组	改变
splice	拼接数组	下标，删除数量，新元素	移除元素的数组	改变
slice	数组截取	起始下标,终点下标	截取的数组	不改变
filter	数组过滤	过滤规则函数	过滤后的数组	不改变
reduce	数组缩减	缩减规则函数	计算结果	不改变
toString	数组转字符串	无	字符串	不改变
join	拼接元素	拼接符	字符串	不改变

判断是否为数组 Array.isArray()

let list = [1, 2, 3];
let a = 1;

let result1 = Array.isArray(list); // true
let result2 = Array.isArray(a); // false

获取数组的长度 length

let list = [1, 2, 3];
let result = list.length; // 3

修改数组的长度

如果新长度 > 原长度，多出的部分会填充 null。

let arr2 = [21, 22, 23];
arr2.length = 5;  // [21,22,23,null,null]

如果新长度 < 原长度，多出的元素会被删除

let arr1 = [11, 12, 13];
arr1.length = 1;  // [11]

访问元素 []

通过数组的下标访问

let list = [1, 2, 3];

// 访问数组第一个元素
console.log(list[0]); // 打印结果：1

// 访问数组最后一个元素
console.log(list[list.length - 1]); // 打印结果：3

// 访问数组不存在的下标
console.log(list[5]); // 打印结果：undefined

搜索元素

查找目标元素的下标 indexOf()

从前往后查找，若数组中存在目标元素，则返回目标元素在数组中的第一个下标，如数组中不存在目标元素，则返回 -1

let list = [1, 2, 3];

let index1 = list.indexOf(1); // 结果为 0
let index2 = list.indexOf(4); // 结果为 -1

lastIndexOf() 功能类似，但是从后往前查找

let list = [1, 2, 3, 1];

let index = list.lastIndexOf(1); // 结果为 3

判断数组是否包含目标元素

方式一：includes(）【推荐】

目标数组.includes(目标元素)

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

// 第二个参数表示搜索的起始位置，默认为 0 。如果第二个参数为负数，则表示倒数的位置，如果这时它大于数组长度（比如第二个参数为 -4 ，但数组长度为 3 ），则会重置为从 0 开始。
[1, 2, 3].includes(3, 3); // false

方式二：indexOf(）

let list = [1, 2, 3];

if (list.indexOf(4) === -1) {
  console.log("list 数组中没有元素 4");
}

查找第一个符合条件的元素 find()

目标数组.find(返回搜索条件的函数)

let list = [1, 2, 3, 3];

// 搜索到符合条件的元素，返回该元素
let result1 = list.find((item) => item > 2); // 得到 3

// 若无符合条件的元素，返回 undefined
let result2 = list.find((item) => item > 4); // 得到 undefined

查找第一个符合条件的元素的下标 findIndex()

目标数组.findIndex(返回搜索条件的函数)

let list = [1, 2, 3, 3];

// 搜索到符合条件的元素，返回该元素的下标
let result1 = list.findIndex((item) => item > 2); // 得到 2

// 若无符合条件的元素，返回 -1
let result2 = list.findIndex((item) => item > 4); // 得到 -1

修改元素

目标数组[目标位置的下标] = 新的值

let list = [1, 2, 3];

list[1] = 4; // list 变为 [ 1, 4, 3 ]

添加元素

在目标位置添加元素

方式1：splice 【推荐】

目标数组.splice(目标位置的下标, 删除元素的数量, 新元素);

返回值为被删除元素组成的数组

let list = [1, 2, 3];

// 在下标为 1 的地方添加元素 4
let result = list.splice(1, 0, 4); // list 变为 [ 1, 4, 2, 3 ] ， result 的值为 []

方式2：下标赋值

目标数组[目标位置的下标] = 新元素

若目标位置的下标 < 数组长度，则是修改元素
若目标位置的下标 = 数组长度，则是在数组尾部添加新元素
若目标位置的下标 > 数组长度，则 arr.length -1至 index-1之间为空属性，用下标访问时，得到 undefined

在数组头部添加元素 unshift()

即左侧，添加一个或多个元素，返回数组的新长度

let list = [1, 2, 3];

//  list 变为 [ 0, 0.1, 1, 2, 3 ]， result 的值为 5
let result = list.unshift(0, 0.1);

在数组尾部添加元素 push()

即右侧，添加一个或多个元素，返回数组的新长度

let list = [1, 2, 3];

//  list 变为 [ 1, 2, 3, 4, 5 ]， result 的值为 5
let result = list.push(4, 5);

删除元素

删除指定下标的元素 splice

目标数组.splice(指定下标, 1);

let list = [1, 2, 3];

//  list 变为 [ 1, 3 ]， result 的值为 [ 2 ]
let result = list.splice(1, 1);

不推荐使用 delete

let list = [1, 2, 3];

// list 变为 [ 1, undefined , 3 ]
delete list[1];

目标下标的元素会变为 undefined
数组的长度不会发生改变！

删除第一个元素 shift

返回被删除的元素

let list = [1, 2, 3];

// list 变为  [ 2, 3 ] ， result 的值为 1
let result = list.shift();

删除最后一个元素 pop

返回被删除的元素

let list = [1, 2, 3];

// list 变为 [ 1, 2 ] ， result 的值为 3
let result = list.pop();

删除指定元素

https://blog.csdn.net/weixin_41192489/article/details/126179580

删除所有元素——清空数组

let list = [1, 2, 3];

//方式1
list = [];      

//方式2
list.length = 0; 

//方式3
list.splice(0);

拼接元素

用 `,` 拼接 toString()

let list = [1, 2, 3];

let result = list.toString(); // 结果为 1,2,3

效果与 join() 和 join(',') 相同

用目标字符拼接 join()

目标数组.join(目标字符)

因默认的拼接符为 , ，所以 join() ， join(',') 和 toString() 的效果相同。

let list = [1, 2, 3];
// 用 - 进行拼接
let result = list.join("-"); // 结果为 1-2-3

数组排序 sort()

https://blog.csdn.net/weixin_41192489/article/details/116696303

对象数组排序
https://blog.csdn.net/weixin_41192489/article/details/111400551

数组过滤 filter()

let list1 = [1, 2, 3];
// 过滤掉数组中小于 1 的元素
let list2 = list1.filter((item) => item > 1); // list2 为 [ 2, 3 ]，不会改变 list1

数组反转 reverse()

let list1 = [1, 2, 3];

let list2 = list1.reverse(); // list1 和 list2 都为 [ 3, 2, 1 ]

手写数组反转
https://blog.csdn.net/weixin_41192489/article/details/116695073

数组合并 concat()

let list1 = [1, 2];
let list2 = [3, 4];

let list3 = list1.concat(list2); // list3 为 [ 1, 2, 3, 4 ]，list1 和 list2 不变

let list4 = [5, 6];

// 可同时合并多个数组
let list5 = list1.concat(list2, list4); // list5 为 [ 1, 2, 3, 4, 5, 6 ]

用 push 也可实现数组合并

let list1 = [1, 2];
let list2 = [3, 4];
let list3 = []
list3.push(...list1,...list2); // list3 为 [ 1, 2, 3, 4 ]

数组覆写 fill()

第一个参数为填充的内容
第二个参数为填充的起始下标（含头）
第三个参数为填充的终止下标（不含尾）

let arr = ['a', 'b', 'c'];
// 若只有第一个参数，则所有元素都覆写为第一个参数
arr.fill(7)
//[ 7, 7, 7 ]

['a', 'b', 'c'].fill(7, 1, 2)
//[ 'a', 7, 'c' ]

会改变原数组

let list = [1, 2];

let result = list.fill(9); // result 和 list 都为 [ 9, 9 ]

数组截取 slice()

不会改变原数组

新数组 = 原数组.slice(开始位置的索引, 结束位置的索引); //注意：包含开始索引，不包含结束索引

slice() 是浅拷贝，对于引用类型的元素，拷贝的是地址，原数组改变时，会改变新数组

let list = [1, 2, 3];

// 从下标 2 开始截取，直到数组末尾
let result1 = list.slice(2); // 结果为 [ 3 ]

// 截取最后两个元素
let result2 = list.slice(-2); // 结果为 [ 2, 3 ]

// 从下标 1 开始截取（含头），在下标 2 处停止截取（去尾）
let result3 = list.slice(1, 2); // 结果为 [ 2 ]

// 起始下标 > 终点下标 时，无法截取到元素
let result4 = list.slice(4, 2); // 结果为 [ ]

数组拼接 splice()

https://blog.csdn.net/weixin_41192489/article/details/116694667

数组缩减 reduce()

可用于数据累积计算（如求和），数据统计，数组降维，数组去重等，详见 https://blog.csdn.net/weixin_41192489/article/details/116661854

数组的遍历

https://blog.csdn.net/weixin_41192489/article/details/140170995

数组的复制

浅拷贝

let list1 = [1, 2, 3];

// 浅拷贝 -- 将 list1 中的数组地址，复制到 list2 中
let list2 = list1;

// list1 改变时 ，list2 也会同步改变
list1[0] = 4;

console.log(list2); // 结果为  [ 4, 2, 3 ]

深拷贝

函数封装 extend

function getType(o) {
  var _t;
  return ((_t = typeof o) == "object"
    ? (o == null && "null") || Object.prototype.toString.call(o).slice(8, -1)
    : _t
  ).toLowerCase();
}

function extend(destination, source) {
  for (var p in source) {
    if (getType(source[p]) == "array" || getType(source[p]) == "object") {
      destination[p] = getType(source[p]) == "array" ? [] : {};
      arguments.callee(destination[p], source[p]);
    } else {
      destination[p] = source[p];
    }
  }
}

使用

let list1 = [1, 2, 3];

let list2 = [];

// 深拷贝 -- 将 list1 中的数组复制一份，将复制后的数组的地址，存入 list2 中
extend(list2, list1);

// list1 改变时 ，list2 不会发生改变
list1[0] = 4;

console.log(list2); // 结果为 [ 1, 2, 3 ]

lodash 中的 cloneDeep 可轻松完成深拷贝

let list2 = _.cloneDeep(list1);

以下方式，可对简易数组（无嵌套，元素无正则，undefined，函数等）实现深拷贝：

let arr1 = [1, 2, 3]
// 仅深拷贝第一层，若存在嵌套则不适用
let arr2 = [...arr1]

let arr1 = [1, 2, 3];
let arr2 = [];
for (let i = 0; i < arr1.length; i++) {
 // 仅深拷贝第一层，若存在嵌套则不适用
 arr2.push(arr1[i]);
}

// 若元素存在正则，undefined，函数等则不适用
let arr2 = JSON.parse(JSON.stringify(arr1))

数组的去重

https://blog.csdn.net/weixin_41192489/article/details/125988156

数组的交集、差集、补集、并集

https://blog.csdn.net/weixin_41192489/article/details/139855697

伪数组/类数组

https://blog.csdn.net/weixin_41192489/article/details/116642962

【实战】对象数组的分类统计

let Data = [
    {
        "province": "四川",
        "boy": 8,
        "girl": 10
    },
    {
        "province": "湖北",
        "boy": 2,
        "girl": 8
    },
    {
        "province": "四川",
        "boy": 9,
        "girl": 6
    },
    {
        "province": "湖北",
        "boy": 4,
        "girl": 7
    }
]

let dataObj = {}
//遍历数组，item为数组的每一个对象
Data.forEach((item, index) => {

        //第一次添加该省时，初始化boy和girl的值为0
        if (dataObj[item.province] == undefined) {
            dataObj[item.province] = {
                boy: 0,
                girl: 0
            }
        }

        // 倘若boy或girl的值为null或undefined,则初始化为0
        item.boy = item.boy ? item.boy : 0
        item.girl = item.girl ? item.girl : 0

        // 按省进行累加统计
        dataObj[item.province] = {
            boy: dataObj[item.province].boy + item.boy,
            girl: dataObj[item.province].girl + item.girl
        }
    }
)

console.log(dataObj)

此时dataObj的值为

{
    '四川': {
        boy: 17,
        girl: 16
    },
    '湖北': {
        boy: 6,
        girl: 15
    }
}