javaScript常用数组方法
序号 | 方法名 | 功能 | 返回 | 是否会改变原数组 | 版本 |
---|---|---|---|---|---|
1 | push() | (在结尾)向数组添加一个或多个元素 | 返回新数组长度 | Y | ES5 |
2 | unshift() | (在开头)向数组添加一个或多个元素 | 返回新数组长度 | Y | ES5 |
3 | pop() | 删除数组最后一位元素 | 返回被删除的数据 | Y | ES5 |
4 | shift() | 删除数组第一项 | 返回被删除的数据 | Y | ES5 |
5 | reverse() | 反转数组中的元素 | 返回反转后的数组 | Y | ES5 |
6 | sort() | 排序 | 返回排序后的新数组 | Y | ES5 |
7 | splice() | 删除现有元素和/或添加新元素来更改数组内容 | 返回删除的数据 | Y | ES5 |
8 | slice() | 截取指定位置的元素 | 返回被截取的元素形成的新数组 | N | ES5 |
9 | join() | 用特定的字符,将数组拼接成字符串,默认(“ , ”) | 返回拼接后的字符串 | N | ES5 |
10 | concat() | 数组连接(合并) | 返回合并之后的数组 | N | ES5 |
11 | toString() | 将数组转换为字符串 | 返回新数组 | N | ES5 |
12 | valueOf() | 查询数组原始值 | 数组的原始值 | N | ES5 |
13 | indexOf() | 查询某个元素在数组中第一次出现的位置 | 存在该元素,返回下标,不存在 返回 -1 | N | ES5 |
14 | lastIdexOf() | 反向查询数组某个元素在数组中第一次出现的位置 | 存在该元素,返回下标,不存在 返回 -1 | N | ES5 |
15 | forEach() | (迭代) 遍历数组,每次循环中执行传入的回调函数 | 无/(undefined) | N | ES5 |
16 | map() | (迭代) 遍历数组, 每次循环时执行传入的回调函数,根据回调函数的返回值,生成一个新的数组 | 有/自定义 | N | ES5 |
17 | filter() | 过滤数组 | 满足条件的元素组成的新数组 | N | ES5 |
18 | every() | (迭代) 判断数组中所有的元素是否满足某个条件 | 全部满足返回true,只要有一个不满足就返回false | N | ES5 |
19 | some() | (迭代) 判断数组中是否存在,满足某个条件的元素 | 只要有一个元素满足条件就返回true,都不满足返回false | N | ES5- |
20 | reduce() | (归并)遍历数组, 每次循环时执行传入的回调函数,回调函数会返回一个值,将该值作为初始值prev,传入到下一次函数中,我一般用于计算价格 购物车全选 反选 | 最终操作的结果 | N | ES5- |
21 | includes() | 判断一个数组是否包含一个指定的值. | 是返回 true,否则false | N | ES6 |
22 | Array.from() | 接收伪数组,返回对应的真数组,我一般用于去重Array.from(new Set(arr)) | 对应的真数组 | N | ES6 |
23 | find() | 返回满足条件的第一个元素,不存在返回undefined | 满足条件第一个元素/否则返回undefined | N | ES6 |
24 | findIndex() | 返回满足条件的第一个元素下标,不存在返回-1 | 满足条件第一个元素下标,不存在返回-1 | N | ES6 |
25 | fill() | 用给定值填充一个数组 | 新数组 | N | ES6 |
26 | flat() | 用于将嵌套的数组“拉平”,变成一维的数组。 | 返回一个新数组 | N | ES6 |
27 | … |
1、arr.length : 获取数组长度
let arr = [1, 2, 3, [4, 5]];
console.log(arr.length); //4
2、str.split() : 字符串转数组,语法:split(‘字符串的分隔符’)
var str = '啊,吧,c' //字符串
var arr66 = str.split(",") //字符串转数组方法括号里面是 分隔符
console.log(arr66); //数组
3、arr.join() : 将数组转字符串,语法:join(‘要拼接的字符’)
let arr1 = [1, 2, 3, 4, 5, 6];
console.log(arr1.join("-")); //1-2-3-4-5-6
4、arr.push(): 在数组末尾追加元素,返回的是追加后数组元素长度个数
let arr2 = ["a", "b", "c", "d"];
console.log(arr2.push("e", "f")); //6
5、arr.unshift() : 在数组头部追加,返回的是追加后数组元素个数
let arr4 = ["a", "b", "c", "d"];
console.log(arr4.unshift("aa")); //5
6、arr.pop() : 删除数组最后一个元素,返回值是被删除的元素
let arr3 = ["a", "b", "c", "d"];
console.log(arr3.pop()); //d
7、arr.shift() : 删除数组的第一个元素,返回值是被删除的元素
let arr5 = ["a", "b", "c", "d"];
console.log(arr5.shift()); //a
8、arr.sort() : 数组排序,要用retrun返回出来
let arr6 = [1, 59, 6, 9, 2, 4];
//1,2,4,6,9,59 箭头函数可以省略return只有一行语句时 a-b升序 b-a倒序
console.log(arr6.sort((a, b) => a - b));
9、arr.reverse() : 数组反转
let arr7 = ["a", "b", "c", "d"];
console.log(arr7.reverse()); //d c b a
//数组方法可以串联例如, 也可以在data中定义,
//在vue中复杂过重的模板建议写在computed中
computed: {
xx.split('').reverse().join('')
}
10、arr.slice() :
-
可以提取数组中指定元素
-
该方法不会改变原数组,而是将截取的元素封装到一个新数组返回;
参数:
- 截取开始位置的索引,包含开始索引;
- 截取结束位置的索引,不包含结束索引;
- 第二个参数可以省略不写,此时会截取从开始索引往后的所有元素;
- 索引可以传递一个负值,如果传递一个负值,则从后往前计算
- -1 : 倒数第一个
- -2 : 倒数第二个
let arr8 = ["a", "b", "c", "d", "e", "f"];
console.log(arr8.slice(3)); //d e f 一个参数是删除几个
//b c d 两个参数是从开始下标到结束下标之间组成新数组包头不包尾
//括号里默认不写就是从头到尾
console.log(arr8.slice(1, 4));
console.log(arr8); //(6) ['a', 'b', 'c', 'd', 'e', 'f'] 特点不会改变原数组
11、arr.splice() :
- 用于删除数组中的指定元素;
- 使用splice() 会影响到原数组,会将指定元素从原数组中删除,并将被删除的元素作为返回值返回;
- 参数 :
- 第一个表示开始位置索引;
- 第二个表示删除的数量,
- 第三个及以后,可以传递一些新的元素,这些元素将会自动插入到开始位置索引前边;
// arr.splice(从下标那个位置删除,删除几个元素包含当前元素)
// 会改变原数组
var arr = ['a', 'b', 'c', 'd']
arr.splice(1, 2) //删除 b c
console.log(arr); //打印 a d
12、arr.filter() : 过滤数组,要用return返回出来
let arr10 = [1, 2, 4, 5, 6, 7, 8, 9]
let arr11 = arr10.filter(item => {
return item > 5
});
console.log(arr11); // 6 7 8 9
13、arr.forEach() : 数组遍历 可以传三个参 item index array (每一项,下标,原数组)
let arr12 = [1, 2, 3, 4, 5, 6, 7, 8, 9];
arr12.forEach((item, index, array) => {
console.log(item); //每一项
console.log(index); //0 1 2 3 4 5 6 7 8 下标
console.log(array); //9个数组,每一数组有1 2 3 4 5 6 7 8 9
})
14、 set : 数组去重
var arr14 = [1, 2, 1, 2, 3];
console.log(new Set(arr14)); // 1 2 3
15 、取出数组中的一种类型,将数组中的字符串提取出来
let arr15 = [1, 2, 3, 4, 5, 'a', 'b', 'c'];
let newArr1 = [];
for (i = 0; i < arr15.length; i++) {
// 不是必要循环的内容不要放在for里 定义的新数组不要放在for循环里
// var newArr1 = []; 错误 定义
if (typeof arr15[i] == "string") {
newArr1.push(arr15[i])
}
};
console.log(newArr1); // 'a' 'b' 'c'
16 、 数组去空
let arr16 = [1, 2, , , 3];
let newArr2 = [];
for (i = 0; i < arr16.length; i++) {
//空就是undefined 所以将不是空的拿出来,逆向思维
if (typeof arr16[i] != "undefined") {
newArr2.push(arr16[i]) //不等于空追加到新数组
}
};
console.log(arr16); //[1, 2, empty × 2, 3]
console.log(newArr2); // 1 2 3
17、arr.concat(n, n) : 合并数组
var arr1 = [1, 2, 3];
var arr2 = ["a", "b", "c"];
var arr3 = ["A", "B", "C"];
var rel = arr1.concat(arr2, arr3);
console.log(arr1); //原数组
console.log(rel); //新数组
18 、 arr.join() : 将数组转字符串
var list = ["a", "b", "c", "d"]; // "a-b-c-d"
var result = list.join("-"); //"a-b-c-d"
var result1 = list.join("/"); //"a/b/c/d"
var result2 = list.join(""); //"abcd"
var result3 = list.join(); // a,b,c,d 默认不写就是逗号
console.log(result,result1 ,result2 ,result3 );
19、 arr.toString() : 将数组转为字符串类型
var list = ["a", "b", "c", "d"];
var rel = list.toString();
console.log(rel); // a,b,c,d (字符串类型)
20 、 arr.valueOf() : 返回数组的原始值(一般情况下其实就是数组自身)
var list = [1, 2, 3, 4];
var rel = list.valueOf();
console.log(list); // [1, 2, 3, 4]
console.log(rel); // [1, 2, 3, 4]
21 、 arr.indexOf() : 查询某个元素在数组中第一次出现的位置 存在该元素,返回下标,不存在 返回 -1
var list = [1, 2, 3, 4];
var index = list.indexOf(4); //3
var index = list.indexOf("4"); //-1
console.log(index);
21、arr.map() : 同forEach() 方法,但是map()方法有返回值,可以return出来;
var list = [32, 93, 77, 53, 38, 87];
var res = list.map(function (item, index, array) {
return item + 10;
});
console.log("原数组", list);
console.log("新数组", res);
22 、 arr.find() :返回满足条件的第一个元素,不存在则返回undefined
var list = [505, 686, 77, 48, 99, 100];
var index = list.find(function(item, index, array) {
console.log(item, index, array);
return item > 800;
});
console.log(index); //undefined 找到返回元素,找不到返回undefined
23 、 arr.fill() : 语法:xx.fill(‘要填充的值’,从下标哪里开始,到下标那里结束)
var result = ["a", "b", "c"]
var rel = result.fill("填充", 0, 2);
console.log(rel);
23 、 arr.flat(n/Infinity);
- 用于将嵌套的数组"拉平",变成一维的数组。该方法返回一个新数组,对原数据没有影响。
2. 注意 默认拉平一次 如果想自定义拉平此处 需要手动传参 ,如果想全都拉平 传 Infinity
var list = [1, 2, [3, 4, [5], 6, [7, 8, [66, 77]]]];
var arr = list.flat(); // 默认拉平一次
console.log("拉平一次", arr);
var arr = list.flat(2); // 拉平2次
console.log("拉平两次", arr);
// 小括号里写几拉平几次,infinity全部拉平
var arr = list.flat(Infinity); // 拉平2次
console.log("全部拉平", arr);