总结一波数组操作的相关方法
数据声明如下
let arr = [1, 2, 3, '天元', { name: 'ydj', age: 18 }, 4, 89],
len = 0,
item = '',
newArr = [];
1.push()修改原数组 往数组最后面添加数组项 返回新数组的长度 可以一次添加多个
len = arr.push({
name: '张三',
age: 20
}, 100);
console.log(len); // 9
2. pop()修改原数组 删除数组中最后一条数组项 返回移除的数组项 不需要传参
item = arr.pop();
console.log(item); // 100
3. unshift() 修改原数组 往数组最前面添加数组项 返回新数组的长度 可以一次添加多个
len = arr.unshift({
name: "lisi",
score: 90
},100);
console.log(len);//10
console.log(arr);//[{…}, 100, 1, 2, 3, "天元", {…}, 4, 89, {…}]
4. shift() 修改原数组 删除数组中最前面一条数组项 返回移除的数组项 不需要传参
item = arr.shift();
console.log(item);//{name: "lisi", score: 90}
5.slice() 不修改原数组 通过下标切割数组 (参数1 开始位置,参数2 结束位置)左开右闭 返回一个新数组
不写参数时或者参数为0时,可以复制数组 只写一个参数时 ,从此处开始一直到结束
newArr = arr.slice(1,3);
console.log(arr);//[100, 1, 2, 3, "天元", {…}, 4, 89, {…}]
console.log(newArr);//[1, 2]
6. splice() 数组替换 修改原数组 返回新数组为替换的子项组成的数组 参数1 开始替换的下标,参数2 替换的个数 参数3 替换的内容,可以不写
newArr = arr.splice(0,2,'wp10');
console.log(arr);["wp10", 2, 3, "天元", {…}, 4, 89, {…}]
console.log(newArr);// [100, 1]
7.concat() 数组拼接 可一次拼接多个参数 主项调用方法 参数为要拼接的项目
返回新数组,不改变原数组(参数可以是数组、单独项)无参可以复制数组
let arr1 = ['我','爱','你'];
newArr = arr.concat(1,2,arr1);
console.log(arr);//["wp10", 2, 3, "天元", {…}, 4, 89, {…}]
console.log(newArr);// ["wp10", 2, 3, "天元", {…}, 4, 89, {…}, 1, 2, "我", "爱", "你"]
8. join() 数组变为字符串 参数 替换数组中间的逗号 不写参数时不替换
let arr = [1, 2, 3, '天元', { name: 'ydj', age: 18 }, 4, 89];
let str = arr.join();
console.log(str);//1,2,3,天元,[object Object],4,89
str = arr.join("");
console,log(str);//123天元[object Object]489
str = arr.join("-");
console.log(str);//1-2-3-天元-[object Object]-4-89
9. sort() 数组排序操作 改变原数组 返回新数组===改变后的原数组
arr = [1, 2, 3, '天元', { name: 'ydj', age: 18 }, 4, 89];
newArr = arr.sort((a, b) => a - b);
console.log(arr);//[1, 2, 3, "天元", {…}, 4, 89]
console.log(newArr);//[1, 2, 3, "天元", {…}, 4, 89]
newArr = arr.sort((a, b) => b - a);
console.log(arr);//[3, 2, 1, "天元", {…}, 89, 4]
console.log(newArr);//[3, 2, 1, "天元", {…}, 89, 4]
10. reverse() 数组反转 改变原数组 返回新数组===改变后的原数组
arr = [1, 2, 3, '天元', { name: 'ydj', age: 18 }, 4, 89];
newArr = arr.reverse();
console.log(arr);//[89, 4, {…}, "天元", 3, 2, 1]
console.log(newArr);//[89, 4, {…}, "天元", 3, 2, 1]
11. forEach() 遍历数组 不改变原数组 不返回数据
参1 callback ---》 参数1 ele 数组项
参数2 index 索引
参数3 arr 原数组
参2 【可选】改变回调函数的this指向,注意不能是箭头函数 默认不写参数时 this指向window
arr = [1, 2, 3, '天元', { name: 'ydj', age: 18 }, 4, 89];
newArr = arr.forEach(function(ele,index,arr){
/* console.log(ele);
console.log(index);
console.log(arr); */
console.log(this);//[1, 2, 3, "天元", {…}, 4, 89]
},arr);
console.log("newArr = ",newArr);//undefined
12.map() 遍历数组 映射方法 类似forEach() 不修改原数组 返回一个新数组 参数为回调函数
对参数不操作时 可以起到复制数组的作用
可以对参数进行 加 减 乘 除等操作
arr = [1, 2, 3, '天元', { name: 'ydj', age: 18 }, 4, 89];
newArr = arr.map(value => value);
console.log(arr);//[1, 2, 3, "天元", {…}, 4, 89]
console.log(newArr);//[1, 2, 3, "天元", {…}, 4, 89]
13. filter() 数组过滤 不改变原数组 返回新数组 callback return ture; 返回满足条件的值
arr = [1, 2, 3, '天元', { name: 'ydj', age: 18 }, 4, 89];
newArr = arr.filter((ele) => ele > 0);
console.log(arr);//[1, 2, 3, "天元", {…}, 4, 89]
console.log(newArr);//[1, 2, 3, 4, 89]
14. forin() 只能获取对象的键名或者索引 不能直接获取值 typeof key 得到的是字符串类型的。
arr = [1, 2, 3];
for (let key in arr) {
console.log(key + ':' + arr[key],typeof key);//0:1 string 1:2 string 2:3 string
}
15. forof() 遍历获取值
arr = [1, 2, 3,'mm'];
for(let key of arr){
console.log(key);// 1 2 3 mm
newArr.push(key);
}
16. every() 判断数组 对每个项进行逐项进行判断 全部满足返回true 否则返回false
参数为回调函数callback
every() 方法用于检测数组所有元素是否都符合指定条件(通过函数提供)。
every() 方法使用指定函数检测数组中的所有元素:
如果数组中检测到有一个元素不满足,则整个表达式返回 false ,且剩余的元素不会再进行检测。
如果所有元素都满足条件,则返回 true。
注意: every() 不会对空数组进行检测。
注意: every() 不会改变原始数组。
arr = [1, 2, 3];
let bl = arr.every(value => value > 0);
console.log(bl);//true
17. some() 同上 有一个满足条件就返回true ,都不满足条件返回false
some() 方法用于检测数组中的元素是否满足指定条件(函数提供)。
some() 方法会依次执行数组的每个元素:
如果有一个元素满足条件,则表达式返回true , 剩余的元素不会再执行检测。
如果没有满足条件的元素,则返回false。
注意: some() 不会对空数组进行检测。
注意: some() 不会改变原始数组。
arr = [1, 2, 3,-1];
let bl = arr.every(value => value > 0);
console.log(bl);//true
18. arr.reduce(callback,[initialValue])
callback (执行数组中每个值的函数,包含四个参数)
previousValue (上一次调用回调返回的值,或者是提供的初始值(initialValue))
currentValue (数组中当前被处理的元素)
index (当前元素在数组中的索引)
array (调用 reduce 的数组)
initialValue (作为第一次调用 callback 的第一个参数。)
reduce()方法接收一个函数作为累加器(accumulator),数组中的每个值(从左到右) 开始缩减,最终为一个值。
reduce 为数组中的每一个元素依次执行回调函数,不包括数组中被删除或从未被赋值的元素,接受四个参数:初始值(或者上一次回调函数的返回值),当前元素值,当前索引,调用 reduce 的数组。