JavaScript数组常用方法

JavaScript数组常用方法

一、不改变原数组

1.contanct() 合并数组

concat() 方法通过合并（连接）现有数组来创建一个新数组

let arr = [1,2,3,3,2,1];
newarr = arr.concat(4, "Picese", 5,6);
console.log(arr);
console.log(newarr);

arr: [ 1, 2, 3, 3, 2, 1 ]
newarr: [ 1, 2, 3, 3, 2, 1, 4, 'Picese', 5, 6 ]

2.slice() 裁剪数组

slice() 方法用数组的某个片段切出新数组。

let arr = [1, 2, 3, 4, 5, 6];
newarr = arr.slice(1,4)
console.log("arr:",arr);
console.log("newarr:",newarr);

arr: [ 1, 2, 3, 4, 5, 6 ]
newarr: [ 2, 3, 4 ]

3.join() 数组转字符串

join() 把一个数组转成字符串，返回转好的字符串。

let arr = [1, 2, 3, 4, 5, 6];
newarr = arr.join("+")
console.log("arr:",arr);
console.log("newarr:",newarr);

arr: [ 1, 2, 3, 4, 5, 6 ]
newarr: 1+2+3+4+5+6

4.indexOf() 在数组中搜索指定元素（从头到尾）

indexOf() 方法在数组中搜索指定元素，并返回其位置。如果未找到该元素，则 indexOf() 返回 -1。如果该元素出现多次，则 indexOf() 方法返回第一次出现的位置。

语法array.indexOf(item, start) item为要查的元素，start为开始索引

let arr = [1, 2, 3, 4, 2, 5, 6, 2];
// 下标     0  1  2  3  4  5  6  7
res1 = arr.indexOf(2);
res2 = arr.indexOf(2, 3); // 从下标3开始查找到第一个符合的元素
res3 = arr.indexOf(7);
console.log("arr:", arr);
console.log("res1:", res1);
console.log("res2:", res2);
console.log("res3:", res3);

arr: [1, 2, 3, 4, 2, 5, 6, 2]
res1: 1
res2: 4
res3: -1

5.lastIndexOf() 在数组中搜索指定元素（从尾到头）

lastIndexOf() 方法在数组中搜索指定元素，并返回其位置。搜索将从指定位置开始，如果未指定开始位置，则从末尾开始，并在数组的开头结束搜索。如果未找到该元素，则 lastIndexOf() 方法返回 -1。如果要搜索的元素不止一次出现，lastIndexOf() 方法将返回最后一次出现的位置。

语法array.lastIndexOf(item, start) item为要查的元素，start为开始索引

let arr = [1, 2, 3, 4, 2, 5, 6, 2];
// 下标     0  1  2  3  4  5  6  7
res1 = arr.lastIndexOf(2);
res2 = arr.lastIndexOf(2, 6); // 从下标6开始从尾到头查找到第一个符合的元素
res3 = arr.lastIndexOf(7);
console.log("arr:", arr);
console.log("res1:", res1);
console.log("res2:", res2);
console.log("res3:", res3);

arr: [1, 2, 3, 4, 2, 5, 6, 2]
res1: 7
res2: 4
res3: -1

二、改变原数组的方法

1.push() 数组末尾添加新元素

push() 方法向数原组末尾添加新元素，并返回新长度。

let arr = [1, 2, 3, 4, 5, 6];
res = arr.push(100);
console.log("arr:", arr);
console.log("res:", res);

arr: [1, 2, 3, 4, 5, 6, 100]
res: 7

2.pop() 数组末尾添加新元素

pop() 方法移除原数组的最后一个元素，并返回该元素。

let arr = [1, 2, 3, 4, 5, 6];
res =arr.pop()
console.log("arr:", arr);
console.log("res:", res);

arr: [ 1, 2, 3, 4, 5 ]
res: 6

3.unshift() 数组开头添加新元素

unshift() 方法将新元素添加到原数组的开头，并返回新的长度。

let arr = [1, 2, 3, 4, 5, 6];
res = arr.unshift(100);
console.log("arr:", arr);
console.log("res:", res);

arr: [100, 1, 2, 3, 4, 5, 6]
res: 7

4.shift() 移除数组的第一个元素

shift() 方法移除数组的第一个元素，返回被移除的元素。

let arr = [1, 2, 3, 4, 5, 6];
res = arr.shift();
console.log("arr:", arr);
console.log("res:", res);

arr: [ 2, 3, 4, 5, 6 ]
res: 1

5.reverse() 翻转数组

reverse() 方法反转数组中元素的顺序。

let arr = [1, 2, 3, 4, 5, 6];
res = arr.reverse();
console.log("arr:", arr);
console.log("res:", res);

arr: [ 6, 5, 4, 3, 2, 1 ]
res: [ 6, 5, 4, 3, 2, 1 ]

6.sort() 排序

sort() 方法对数组的元素s进行排序。排序顺序可以是按字母或数字，也可以是升序（向上）或降序（向下）。默认情况下，sort() 方法将按字母和升序将值作为字符串进行排序。

语法一: 数组名.sort() 按字母和升序将值作为字符串进行排序。

语法二: 数组名.sort(function (a,b) {return a-b}) 升序排列

语法三: 数组名.sort(function (a,b) {return b-a}) 降序排列

let arr = [5, 39, 632, 6534, 3, 99, 100, 23, 45]
arr.sort()
console.log(arr);
arr.sort(function(a,b){return(a-b)})
console.log(arr);
arr.sort(function(a,b){return(b-a)})
console.log(arr);

[100, 23, 3, 39, 45, 5, 632, 6534, 99]
[3, 5, 23, 39, 45, 99, 100, 632, 6534]
[6534, 632, 100, 99, 45, 39, 23, 5, 3]

7.splice() 截取数组

splice() 方法向/从数组添加/删除元素，并返回删除的元素。

let arr = [5, 39 , 3, 99, 100, 23, 45]
res1 = arr.splice(2,3)
res2 = arr.splice(0,1,110,119) // 删除第一个元素（从下标0开始删除1个元素，并添加110和119）
console.log("arr:", arr);
console.log("res1:", res1);
console.log("res2:", res2);
console.log("arr:", arr);

arr: [ 110, 119, 39, 23, 45 ]
res1: [ 3, 99, 100 ]
res2: [ 5 ]
arr: [ 110, 119, 39, 23, 45 ]

三、ES6新增的数组方法

1. forEach() 数组遍历

forEach() 方法按顺序为数组中的每个元素调用一次函数

语法: 数组名.forEach(function (item,index,arr) {})

• item : 表示数组中的每一项
• index : 表示每一项对应的索引
• arr : 表示原数组

let arr = [1, 2, 3, 4, 5, 6];
console.log("原数组: ", arr);
let res = arr.forEach(function (item, index, arr) {
  console.log("索引: ", index, "元素: ", item, "数组:", arr);
});

原数组:  [ 1, 2, 3, 4, 5, 6 ]
索引:  0 元素:  1 数组: [ 1, 2, 3, 4, 5, 6 ]
索引:  1 元素:  2 数组: [ 1, 2, 3, 4, 5, 6 ]
索引:  2 元素:  3 数组: [ 1, 2, 3, 4, 5, 6 ]
索引:  3 元素:  4 数组: [ 1, 2, 3, 4, 5, 6 ]
索引:  4 元素:  5 数组: [ 1, 2, 3, 4, 5, 6 ]
索引:  5 元素:  6 数组: [ 1, 2, 3, 4, 5, 6 ]

2.map() 数组映射

map() 方法使用为每个数组元素调用函数的结果创建新数组，按顺序为数组中的每个元素调用一次提供的函数。

语法: 数组名.map(function (item,index,arr) {})

• item : 表示数组中的每一项
• index : 表示每一项对应的索引
• arr : 表示原数组

返回数组 一个映射完毕的数组。

let arr = [1, 2, 3, 4, 5, 6];
console.log("原始数组 : ", arr);
let res = arr.map(function (item) {
  return item * 100;
});
console.log("映射后数组 : ", res);

原始数组 :  [ 1, 2, 3, 4, 5, 6 ]
映射后数组 :  [ 100, 200, 300, 400, 500, 600 ]

3.filter() 数组过滤

filter() 方法创建数组，其中填充了所有通过测试的数组元素（作为函数提供）。不会改变原数组

语法: 数组名.filter(function (item,index,arr) {})

• item : 表示数组中的每一项
• index : 表示每一项对应的索引
• arr : 表示原数组

返回过滤(筛选)出来的数据保存在一个数组中。

let arr = [1, 2, 3, 4, 5, 6];
console.log("原数组: ", arr);
let res = arr.filter(function (item) {
  return item >= 3;
});
console.log("过滤后数组: ", res);

原数组:  [ 1, 2, 3, 4, 5, 6 ]
过滤后数组:  [ 3, 4, 5, 6 ]

4.every() 检查数组中的所有元素是否满足条件

every() 方法检查数组中的所有元素是否都通过了测试（被作为函数提供）。

语法: 数组名.every(function (item,index,arr) {})

• item : 表示数组中的每一项
• index : 表示每一项对应的索引
• arr : 表示原数组

返回一个布尔值

• 如果找到函数返回 false 值的数组元素，every() 返回 false（并且不检查剩余值）
• 如果没有出现 false，every() 返回 true

let arr = [1, 2, 3, 4, 5, 6];
console.log('原数组 : ', arr);
let res = arr.every(function (item) {
    return item > 0
})
console.log("检查结果: ", res);

原数组 :  [ 1, 2, 3, 4, 5 ]
检查结果:  true

5.some() 检查数组中有没有元素是否满足条件

some() 方法检查数组中的任何元素是否通过测试（作为函数提供）。

语法: 数组名.some(function (item,index,arr) {})

• item : 表示数组中的每一项
• index : 表示每一项对应的索引
• arr : 表示原数组

返回布尔值

• 如果找到函数返回真值的数组元素，some() 返回真（并且不检查剩余值）
• 否则返回 false

let arr = [1, 2, 3, 4, 5, 6];
console.log('原数组 : ', arr);
let res = arr.some(function (item) {
    return item > 10
})
console.log("检查结果: ", res);

原数组 :  [ 1, 2, 3, 4, 5, 6 ]
检查结果:  false

6.find() 获取数组中满足条件的第一个数据

find() 方法返回数组中第一个通过测试的元素的值（作为函数提供）。

语法: 数组名.find(function (item,index,arr) {})

• item : 表示数组中的每一项
• index : 表示每一项对应的索引
• arr : 表示原数组

返回满足条件的第一个数据

• 如果找到函数返回 true 值的数组元素，则 find() 返回该数组元素的值（并且不检查剩余值）
• 否则返回 undefined

let arr = [1, 2, 3, 4, 5, 6];
console.log('原数组 : ', arr);
let res = arr.find(function (item) {
    return item > 3
})
console.log("获取结果: ", res);

原数组 :  [ 1, 2, 3, 4, 5, 6 ]
检查结果:  4

7.reduce() 累加数组元素

reduce() 方法将数组缩减为单个值，为数组的每个值（从左到右）执行提供的函数。

语法: 数组名.reduce(function (prev,item,index,arr) {},初始值)

• prev :一开始为初始值，当第一次有了结果以后，值就为第一次的结果（即前一次执行的结果）
• item : 表示数组中的每一项
• index : 表示每一项对应的索引
• arr : 表示原数组

返回累加后的结果

函数的返回值存储在累加器中（结果/总计）。

let arr = [1, 2, 3, 4, 5, 6];
let res = arr.reduce(function (prev, item) {
  console.log(prev);
  return (prev *= item);
}, 1);
console.log("执行结果:", res);

1
1
2
6
24
120
执行结果: 720

8.includes() 确定数组是否包含指定的元素

includes() 方法确定数组是否包含指定的元素。

返回布尔值

如果数组包含元素，则此方法返回 true，否则返回 false。

let arr = [1, 2, 3, 4, 5, 6];
let res = arr.includes(5)
console.log("执行结果:", res);

执行结果: true

没有该方法之前，我们通常使用数组的indexOf方法，检查是否包含某个值。

返回元素所在位置

let arr = [1, 2, 3, 4, 5, 6];
let res = arr.indexOf(5)
console.log("执行结果:", res);

执行结果: 4