1、不改变原数组的方法
方法 | 描述 |
合并两个或多个数组,返回一个新数组,原数组不变。 | |
slice() | 从已有的数组中返回选定的元素,返回一个新数组,原数组不变。 |
为每个数组元素调用一次函数;不会改变原数组,但函数内部对元素的修改会影响原数组。 | |
创建一个新数组,其结果是原数组中的每个元素调用一次提供的函数后的返回值。 | |
创建一个新数组,包含通过测试的所有元素的新数组。 | |
返回数组中满足提供的测试函数的第一个元素的值,如果没有找到符合条件的元素,则返回 | |
返回数组中满足提供的测试函数的第一个元素的索引,如果没有找到符合条件的元素,则返回 | |
测试数组中是不是至少有一个元素通过了被提供的函数测试,如果是返回 | |
测试数组的所有元素是否都通过了提供的函数的测试,如果是返回 | |
判断数组是否包含特定的值,如果是则返回 | |
返回数组中元素第一次出现的索引,如果没有找到则返回 | |
返回一个包含数组所有键(索引)的迭代器,不会改变原数组。 | |
将数组中的所有元素连接成一个字符串,并返回,不会改变原数组。 | |
判断一个值是否是一个数组,不会改变原数组。 | |
返回数组的原始值,通常与 | |
返回数组的字符串表示,不会改变原数组。 | |
返回一个包含数组中每个索引的键/值对的迭代器,不会改变原数组。 | |
对数组中的每个元素执行一个由你提供的reducer函数(升序或降序),将其结果汇总为单个返回值。 | |
2、改变原数组的方法
方法 | 描述 |
将一个或多个元素添加到数组的末尾,并返回新的长度。 | |
移除数组的最后一个元素,并返回被移除的元素。 | |
移除数组的第一个元素,并返回被移除的元素。 | |
将一个或多个元素添加到数组的开头,并返回新的长度。 | |
可用于向数组添加新元素,删除数组中的元素,或替换数组中的元素。 | |
虽然通常用于创建数组的浅拷贝,但如果使用它作为数组的 setter(例如,赋值给数组自身的一部分),它可以改变原数组。 | |
对数组元素进行排序,并返回数组,原数组的顺序会被改变。 | |
将数组中的元素顺序颠倒,并返回该数组。 | |
用一个固定值填充数组的所有元素,从开始到结束(或不包括结束)位置。 | |
将数组的一部分复制到数组的另一个位置。 | |
slice()
、flat()
和 flatMap()
通常不会直接改变原数组,但如果你使用它们的返回结果去重新赋值原数组的一部分,那么原数组会被改变。
目录
一:不改变原数组的方法
1、concat() 合并数组(尾部插入)
- 合并两个或多个数组,返回一个新数组,原数组不变。
array.concat(array1, array2, ..., arrayZ)
let arr = [1, 2, 3];
// 尾部插入 4
arr.concat(4); // 返回:[1,2,3,4]
// 尾部插入 5,6
arr.concat(5, 6); // 返回:[1,2,3,5,6]
// 尾部插入 7,8
arr.concat([7, 8]); // 返回:[1,2,3,7,8]
//数组合并
var fruits = ["Apple", "Mango", "Banana"];
var numbers = [5, 10, 12, 98, 3];
var arr = fruits.concat(numbers); //返回 ["Apple", "Mango", "Banana",5, 10, 12, 98, 3]
2、slice() 提取数组
- 从已有的数组中返回选定的元素,返回一个新数组,原数组不变。
- slice()方法提取数组的一部分元素,并返回一个新的数组。
- slice()方法提取的元素开始在给定的start参数,并在给定的端部end参数(end不包括)。原始数组不被会更改。
slice(start?, end?),start:开始下标,end:结束下标。
结束下标大于开始下标,裁切值不包括结束下标的值。
总结: silce()
1、下标从1开始,负数为倒数,-1代表最后一个
2、无参数 返回所有
3、有开始无结束,下标从1开始,到最后
4、有开始有结束,从开始下标到结束下标(不包括结束下标) [1,10)
let arr = [1, 2, 3, 4, 5, 6];
// 全部裁切
arr.slice(); // 返回:[1,2,3,4,5,6]
// 从下标 1 开始,裁切到尾部
arr.slice(1); // 返回 [2,3,4,5,6]
// 从下标 1 开始,裁切到下标 2
arr.slice(1, 2); // 返回 [2]
// 从数组倒数第 1 开始,裁切到尾部
arr.slice(-1); // 返回 [6]
// 从数组倒数第 2 开始,裁切到数组倒数第 1 位
arr.slice(-2, -1); // 返回 [5]
3、forEach() 遍历,无返回
- 为每个数组元素调用一次函数;不会改变原数组,但函数内部对元素的修改会影响原数组。
forEach(callback(curValue, curIndex?, arr?))curValue 当前值,curIndex 当前下标,arr 原数组。
let arr = [1, 2, 3];
arr.forEach(item => {
// TODO
})
4、map() 遍历,返回新数组
- 创建一个新数组,其结果是原数组中的每个元素调用一次提供的函数后的返回值。
map(callback(curValue, curIndex?, arr?)),curValue 当前值,curIndex 当前下标,arr 原数组
let arr = [1, 2, 3];
arr.map((item) => item + 1); // 返回:[2,3,4]
5、filter() 筛选
- 创建一个新数组,包含通过测试的所有元素的新数组。
filter(callback(curValue, curIndex?, arr?)),curValue 当前值,curIndex 当前下标,arr 原数组。
满足筛选条件,callback 内返回 true,filter 返回满足条件元素组成的数组。
let arr = [1, 2, 3];
arr.filter((item) => item > 1); // 返回:[2,3]
6、find()
- 返回数组中满足提供的测试函数的第一个元素的值,如果没有找到符合条件的元素,则返回undefined。
array.find(callback, thisArg)
var num = [1, 30, 39, 29, 10, 13];
var val = num.find(item=> item>=18 ); //返回 30 (只返回满足的第一项)
7、findIndex()
- 返回数组中满足提供的测试函数的第一个元素的索引,如果没有找到符合条件的元素,则返回-1。
- findIndex() 对于空数组,函数是不会执行的。
array.findIndex(callback, thisArg)
array.findIndex(function(element, index, arr), thisArg)
var num = [1, 30, 39, 29, 10, 13];
var val = num.findIndex(item=> item>=18 ); //返回 1 (只返回满足的第一项)
8、some() 判断任意一个通过
- 测试数组中是不是至少有一个元素通过了被提供的函数测试,如果是返回true,否则返回false。
some(callback(curValue, curIndex?, arr?)),curValue 当前值,curIndex 当前下标,arr 原数组。
判断数组元素是否有一个满足规定条件,都不满足返回 false,有满足返回 true
let arr = [1, 2, 3];
arr.some((item) => item > 1); // 返回:true
9、every() 判断全通过
- 测试数组的所有元素是否都通过了提供的函数的测试,如果是返回true,否则返回false。
every(callback(curValue, curIndex?, arr?)),curValue 当前值,curIndex 当前下标,arr 原数组。
判断所用数组元素满足规定条件,满足返回 true,有一个不满足返回 false
let arr = [1, 2, 3];
arr.every((item) => item > 1); // 返回:false
10、includes()
- 判断数组是否包含特定的值,如果是则返回true,否则返回false,不会改变原数组。
array.includes(element, start)
--element(必需)要搜索的元素
--start (可选)此数组中开始搜索元素的位置。 默认值为0
var fruits = ['Banana', 'Mango', 'Apple', 'Orange'];
fruits.includes('Apple'); //返回true
var fruits = ['Banana', 'Mango', 'Apple', 'Orange'];
fruits.includes('Banana', 1); //返回false
11、indexOf()
- 返回数组中元素第一次出现的索引,如果没有找到则返回-1,不会改变原数组。
- indexOf()方法返回可以在数组中找到给定元素的第一个索引。
- 如果该元素存在多次,它将返回第一次出现的位置。
- 如果找不到该元素,它将返回 -1。
- 如果要从尾向前开始搜索,请使用lastIndexOf()方法。
- indexOf(item, start?),item:查找项,start:从哪个下标开始,如果找到返回元素所在下标
- 下标从 1 开始
----------- indexOf 查找 -------------
indexOf(item, start?),item:查找项,start:从哪个下标开始,如果找到返回元素所在下标
let arr = [1, 2, 3, 1];
// 从头开始查找元素 1 所在下标
arr.indexOf(1); // 返回:0
// 从下标为 1 开始查找元素 1 所在下标
arr.indexOf(1, 1); // 返回:3
// 从最后一项开始查找元素为 1 所在下标
arr.indexOf(1, -1); // 返回:3
----------- lastIndexOf 查找 ( 从数组尾部往头部查找 ) -------------
lastIndexOf(item, start?),item:查找项,start:从哪个下标开始,如果找到返回元素所在下标
let arr = [1, 2, 3, 1];
// 从尾开始查找元素 1 所在下标
arr.lastIndexOf(1); // 返回:3
// 从尾部开始第 2 项开始查找元素 1 所在下标
arr.lastIndexOf(1, 1); // 返回:0
// 从下标为 1 开始查找元素 1 所在下标
arr.lastIndexOf(1, -1); // 返回:3
12、keys()
- 返回一个包含数组所有键(索引)的迭代器,不会改变原数组。
array.keys() //无参数值
13、join() 数组转字符串
- 将数组中的所有元素连接成一个字符串,并返回,不会改变原数组。
- 指定的分隔符分隔。默认的分隔符是逗号(,)。
let arr = [1, 2, 3];
// 默认拼接
arr.join(""); // 默认 ',' 拼接,返回:'1,2,3'
// 使用 - 拼接
arr.join("-"); // 返回:'1-2-3'
14、isArray() 数组校验
- 判断一个值是否是一个数组,不会改变原数组。
如果值是数组,则此方法返回true,否则返回false。
let fruits = ["Apple", "Mango", "Banana", "Orange"];
Array.isArray(fruits); // 返回true
Array.isArray(110085); //返回false
15、valueOf() 数组转字符串
- 返回数组的原始值,通常与toString()相同,不会改变原数组。
array.valueOf()
var months = ['Jan', 'Feb', 'Mar', 'Apr', 'May'];
months.valueOf(); //返回 Jan, Feb, Mar, Apr, May
16、toString() 数组转字符串
- 返回数组的字符串表示,不会改变原数组。
array.toString()
var months = ["Jan", "Feb", "Mar", "Apr", "May"];
months.toString(); //返回 Jan, Feb, Mar, Apr, May
17、entries() 键值对
- 返回一个包含数组中每个索引的键/值对的迭代器,不会改变原数组。
- 相关文档:JavaScript Array entries() 方法
-
-
var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.entries();
var a = ['a', 'b', 'c'];
var iterator = a.entries();
console.log(iterator.next().value); // [0, 'a']
console.log(iterator.next().value); // [1, 'b']
console.log(iterator.next().value); // [2, 'c']
18、reduce() 与 reduceRight()
- 对数组中的每个元素执行一个由你提供的reducer函数(升序或降序),将其结果汇总为单个返回值。
------------reduce 高阶函数-------------------
reduce(callback(total, curValue, curIndex?, arr?), initValue?)
callback:叠加器,
参数:
total 叠加值,
curValue 当前值
curIndex 当前下标
arr 原数组
initValue:初始值。 当没有 initValue 是,total 的初始值为 arr[0]
1、数组求和 -------------------------------
let arr = [1, 2, 3];
arr.reduce((total, curValue) => total + curValue); // 返回:6
2、初始值 10,数组求和 -------------------------
let arr = [1, 2, 3];
arr.reduce((total, curValue) => total + curValue, 10); // 返回:16
3、数组去重 -------------------------
let arr = [
{ id: 1, name: "小明" },
{ id: 2, name: "小红" },
{ id: 1, name: "小明" },
{ id: 2, name: "小红" },
];
arr.reduce((total, curValue) => {
const has = total.filter((item) => item.id == curValue.id);
if (!has.length) {
total.push(curValue);
}
return total;
}, []); // 返回:[{ id: 1, name: "小明" },{ id: 2, name: "小红" }]
4、二维转一维 -------------------------
let arr = [1, [2, 3], [4, 5, 6]];
arr.reduce((total, curValue) => total.concat(curValue), []);
// 返回: [1, 2, 3, 4, 5, 6]
5、多维转一维 -------------------------
let arr = [1, [2, 3], [4, [5, 6]]];
const flatArr = (arr) => {
return arr.reduce((total, curValue) => {
return total.concat(Array.isArray(curValue) ? flatArr(curValue) : curValue);
}, []);
};
flatArr(arr); // 返回:[1, 2, 3, 4, 5, 6]
二:改变原数组的方法
1、push() 尾部插入
- 将一个或多个元素添加到数组的末尾,并返回新的长度。
let arr = [1, 2, 3];
// 尾部插入 4
arr.push(4); // arr:[1,2,3,4] 返回:数组长度 4
// 尾部依次插入 5,6
arr.push(5, 6); // arr:[1,2,3,4,5,6] 返回:数组长度 6
2、pop() 尾部移除
- 移除数组的最后一个元素,并返回被移除的元素。
let arr = [1, 2, 3];
arr.pop(); // arr:[1,2] 返回:移除项 3
3、shift() 头部移除
- 移除数组的第一个元素,并返回被移除的元素。
let arr = [1, 2, 3];
arr.shift(); // arr:[2,3] 返回:移除项 1
4、unshift() 头部插入
- 将一个或多个元素添加到数组的开头,并返回新的长度。
let arr = [1, 2, 3];
// 从头部插入 0
arr.unshift(0); // arr:[0,1,2,3] 返回:数组长度 4
// 从头部插入 -1,-2
arr.unshift(-2, -1); // arr:[-2,-1,0,1,2,3] 返回:数组长度 6
5、splice() 删除,添加,替换
- 可用于向数组添加新元素,删除数组中的元素,或替换数组中的元素。
5.1 删除 -------------------------------------------
splice(start?, num?),start:开始下标,num:删除长度
// 从下标 0 开始,删除 1 位
let arr = [1, 2, 3];
arr.splice(0, 1); // arr:[2,3] 返回:[1]
// 从下标 0 开始,删除到数组尾部
let arr = [1, 2, 3];
arr.splice(0); // arr:[] 返回:[1,2,3]
// 从数组最后一位,删除到数组尾部
let arr = [1, 2, 3];
arr.splice(-1); // arr: [1,2] 返回:[3]
5.2 添加 -------------------------------------------
splice(start, 0, arg\*?),start:开始下标,0:删除 0 长度,arg:插入项
// 从下标 0 开始,插入 4
let arr = [1, 2, 3];
splice(0, 0, 4); // arr:[4,1,2,3] 返回:[]
// 从下标 2 开始,依次插入 4,5,6
let arr = [1, 2, 3];
splice(2, 0, 4, 5, 6); // arr:[1,2,3,4,5,6] 返回:[]
5.3 替换 -------------------------------------------
splice(start, num, arg\*?),start:开始下标,num:替换长度,arg:替换项
注意:num 替换长度和替换项数目最好一致。
// 将 2,3 替换成 4,5
let arr = [1, 2, 3];
arr.splice(1, 2, 4, 5); // arr:[1,4,5] 返回:[2,3]
6、slice()
- 虽然通常用于创建数组的浅拷贝,但如果使用它作为数组的 setter(例如,赋值给数组自身的一部分),它可以改变原数组。
- slice()方法提取数组的一部分元素,并返回一个新的数组。
- slice()方法提取的元素开始在给定的start参数,并在给定的端部end参数(end不包括)。原始数组不被会更改。
slice(start?, end?),start:开始下标,end:结束下标。
结束下标大于开始下标,裁切值不包括结束下标的值。
总结: silce()
1、下标从1开始,负数为倒数,-1代表最后一个
2、无参数 返回所有
3、有开始无结束,下标从1开始,到最后
4、有开始有结束,从开始下标到结束下标(不包括结束下标) [1,10)
let arr = [1, 2, 3, 4, 5, 6];
// 全部裁切
arr.slice(); // 返回:[1,2,3,4,5,6]
// 从下标 1 开始,裁切到尾部
arr.slice(1); // 返回 [2,3,4,5,6]
// 从下标 1 开始,裁切到下标 2
arr.slice(1, 2); // 返回 [2]
// 从数组倒数第 1 开始,裁切到尾部
arr.slice(-1); // 返回 [6]
// 从数组倒数第 2 开始,裁切到数组倒数第 1 位
arr.slice(-2, -1); // 返回 [5]
7、sort() 排序
- 对数组元素进行排序,并返回数组,原数组的顺序会被改变。
sort(fn?),fn:可选参数,规定排序顺序,必须是函数。
--可用于对数字,字母进行排序,数字优先级高于字母。
--如果需要按照其他规则排序,需要提供函数,函数一般有两个参数:a,b。
--数组中 a 的下标小于 b。比较两个参数,如果需要换位置则返回大于 0 的值。
总结: a-b 小到大 b-a 大到小
7.1 默认排序,不会区分各十百位 --------------------------
let arr = [2, 1, 21, 11, 4, 31, 3];
arr.sort(); // arr:[1,11,2,21,3,32,4] 返回:[1,11,2,21,3,32,4]
7.2 从小到大排序 --------------------------
let arr = [2, 1, 21, 11, 4, 31, 3];
arr.sort((a, b) => a - b); // arr:[1,2,3,4,11,21,31] 返回:[1,2,3,4,11,21,31]
7.3 从大到小排序 --------------------------
let arr = [2, 1, 21, 11, 4, 31, 3];
arr.sort((a, b) => b - a); // arr:[31,21,11,4,3,2,1] 返回:[31,21,11,4,3,2,1]
7.4 按 sort 从小到大排序 --------------------------
let arr = [
{ name: "小明", sort: 10 },
{ name: "小红", sort: 1 },
{ name: "小李", sort: 21 },
];
arr.sort((a, b) => a.sort - b.sort);
// arr:[{name: "小红",sort: 1},{name: "小明",sort: 10},{name: "小李",sort: 21}] 返回:[{name: "小红",sort: 1},{name: "小明",sort: 10},{name: "小李",sort: 21}]
8、reverse() 倒序
- 将数组中的元素顺序颠倒,并返回该数组。
let arr = [1, 2, 3];
arr.reverse(); // arr:[3,2,1] 返回:[3,2,1]
9、fill() 填充
- 用一个固定值填充数组的所有元素,从开始到结束(或不包括结束)位置。
array.fill(value, start, end)
var nums = [1, 2, 3, 4];
nums.fill(17); // 返回 [17,17,17,17]
//从位置2到位置4填充0:
var nums = [1, 2, 3, 4];
nums.fill(0, 2, 4); // 返回 [1,2,0,0]
// 从位置1填充7:
var nums = [1, 2, 3, 4];
nums.fill(7, 1); // 返回 [1,7,7,7]
10、copyWithin()
- 将数组的一部分复制到数组的另一个位置。