数组常用方法总结以及伪数组转真数组的方法
###数组常用方法总结以及伪数组转真数组的方法
##1.数组的操作方法
*1. arrayObject.concat(arrayX,…,arrayX)
用于连接两个或多个数组,基于当前数组,创建一个新的数组,并返回这个新数组,不会改变原数组。
代码示例:
var color1 = ["red","green","blue"];
var color2 = color1.concat("yellow",["black","brown"]);
console.log(color2);//打印的值为 ["red","green","blue","yellow","black","brown"]
注意点:
该数组是通过把所有 arrayX 参数添加到 arrayObject 中生成的。
如果要进行 concat() 操作的参数是数组,那么添加的是数组中的元素,而不是数组。
*2. arrayObject.slice(startIndex,endIndex)
获取数组的一个片段或者子数组返回,不会影响原数组。
1)参数为一个整数,代表切割的起始位置,返回从该位置到数组末尾的所有元素的数组
如果第一个参数为负数,从右往左计算开始位置(从-1开始),从该位置截取到数组的末尾。
2)参数为两个整数,获取从第一个参数开始,到第二个参数位置但是不包括第二个参数位置上的值。
如果第一个参数为负数,从右往左计算开始位置(从-1开始),从该位置截取到第二个参数计算的结束位置。
代码示例:
var arr = ["aa","bb","cc","dd"];
1.接受一个参数时
var arr_new = arr.slice(1);// arr_new = ["bb", "cc", "dd"],arr 不改变
2.接受两个参数时
var arr_new = arr.slice(1,2); // arr_new = ["bb"]; arr不改变
*3. arrayObject.splice(startIndex,count,ele1,ele2…)
在原数组上进行插入或者删除数组元素,会影响原来的数组。
1)1个参数,从该参数指定的位置开始删除,直到数组的末尾。
2)2个参数,第一个参数表示删除的起始位置,第二个参数删除的个数
3)2个以上,第一个参数表示删除的起始位置,第二个参数删除的个数,第三个元素以及之后元素表示插入的值
返回值:删除的元素组成的新数组
代码示例:
var arr = ["aa","bb","cc","dd"];
1.删除
var arr1 = arr.splice(1,2);
// arr = ["aa","dd"]; 在原数组进行了删除操作
// arr1 = ["bb","cc"];返回删除的元素数组
2.插入
var arr2 = arr.splice(1,0,"ee","ff");
// arr = ["aa", "ee", "ff", "bb", "cc", "dd"] 将指定项插入到1位置处
// arr2 = [], 返回空数组
3.替换
var arr3 = arr.splice(1,2,"ee","ff");
// arr = ["aa", "ee", "ff", "dd"] 将"bb","cc" 替换成了"ee","ff"
// arr3 = ["bb", "cc"], 返回删除的元素数组
*4. indexOf()和lastIndexOf()。
这两个方法都接受两个参数:1.查询元素 2.开始查询元素的起始索引,使用全等操作符 ===,找不到该元素返回-1。
indexOf()从数组的开头开始向后查找
lastIndexOf()从数组的末尾开始向前查找。
代码示例:
var arr = [2, 9, 9];
arr.indexOf(2); // 0
arr.indexOf(7); // -1
if (arr.indexOf(7) === -1) {
console.log("元素未找到");
}
*5. join()将数组中的所有元素连接成字符串,接受一个参数作为连接符号,默认是逗号,返回的结果是字符串。
代码示例:
var arr = ['Wind', 'Rain', 'Fire'];
arr.join(); // 'Wind,Rain,Fire'
//如果写的是空字符串的话,那么就是中间什么符号都没有。
arr.join("") // 'WindRainFire'
arr.join('-'); // 'Wind-Rain-Fire'
*6. sort()对数组中的元素进行排序
*7.reverse()反转数组中的元素顺序
##2.数组的迭代方法:
Es5为数组定义了5个迭代方法,这些方法都不会修改数组中包含的值。
每个方法接受两个参数,1.在每一项上运行的回调函数fn 2.运行回调函数时回调函数的this指向的对象,这个参数可以省略。
回调函数中会接收三个参数: 1.数组项的值 2.该项在数组中的位置 3.数组对象本身(item,index,array)。
*1.every();对数组中的每一运行给定的函数,如果该函数对每一项都返回true,则返回true。
代码示例:
var arr = [11,5,23,7,4,1,9,1];
var result = arr.every(function(item,index,arr){
return item >2;
});
console.log(result); //false
*2.some();对数组中的每一运行给定的函数,如果该函数对任意一项都返回true,则返回true。
代码示例:
var result = arr.some(function(item,index,arr){
return item > 2;
});
console.log(result); //true
*3.filter();对数组中的每一运行给定的函数,会返回满足该函数的项组成的数组。
代码示例:
var result = arr.filter(function(item,index,arr){
return item >2;
});
console.log(result); // [11, 5, 23, 7, 4, 9]
*4.map();对数组中的每一运行给定的函数,返回每次函数调用的结果组成的数组。
代码示例:
var result = arr.map(function(item,index,arr){
return item * 2;
});
console.log(result); // [22, 10, 46, 14, 8, 2, 18, 2]
*5.forEach();对数组中的每一运行给定的函数,没有返回值,常用来遍历元素
代码示例:
var result = arr.forEach(function(item,index,arr){
console.log(item);
});
*6.reduce() x 是上一次计算过的值, 第一次循环的时候是数组中的第1个元素
y 是数组中的每个元素, 第一次循环的时候是数组的第2个元素
代码示例:
let array = [1, 2, 3, 4];
let temp = array.reduce((x, y) => {
console.log("x": x);
console.log("y": y);
return x + y;
});
console.log(temp); // 10
console.log(array); // [1, 2, 3, 4]
对迭代方法的总结:
以上6个方法IE9及以上才支持。
以上均不改变原数组。
some、every返回true、false。
map、filter返回一个新数组。
reduce让数组的前后两项进行某种计算,返回最终操作的结果。
forEach 无返回值。
##3.检测是否是数组 Array.isArray(数组名称)
代码示例:
var arr = [1,2];
console.log(Array.isArray(arr));//打印的值为 true
##4.
push() 可接受任意类型的参数,将它们逐个添加到数组的末尾,并返回数组的长度
pop() 从数组的末尾移除最后一项,减少数组的length值,返回移除的项
shift() 移除数组中的第一个项并且返回该项,同时将数组的长度减一。
unshift() 在数组的前端添加任意个项,并返回新数组的长度。
##5伪数组转化成真数组
ES6 :Array.from(lis)
原生:Array.protoType.slice.call(lis)
slice是数组的截取子数组的方法,上面相当于lis.slice(),不传参数时相当于返回真数组,内容不变。但是伪数组不存在slice方法,所以通过方法.call的形式传给lis
上一篇: MacOS Big Sur 11.3网页怎么设置时间限制?
下一篇: jQuery 对象及伪数组