数组经常使用方法补充

PS：

本文属于纯新手向的文章，目的在于帮助本身加深记忆以及帮助小白同窗整理JS中经常使用的一些字符串和数组的方法，因此望大佬勿喷。

前文写了些字符串和数组一些基础的api，本文写一些数组的功能更强大的api，没有看过前文的，能够点击如下连接：

字符串和数组经常使用方法整理

字符串还有一些结合正则表达式使用的很是棒的方法，之后单独和正则表达式一块儿讲解。

下面进入正题。

1. Array.from()

传入一个类数组或可迭代对象（一般是字符串），返回一个新数组

/*加入页面有10个li标签*/
let aLi = document.getElementsByTagName("li");
console.log(aLi);//aLi 是一个类数组
aLi.forEach((item,idx)=>{//forEach()用于遍历数组 后面讲解
    item.onclick = ()=>{
        console.log(idx);
    }
});
复制代码

forEach()只能遍历数组， aLi不是数组，因此会报错。

使用Array.from()建立一个新数组后，报错消失

Array.from(aLi).forEach((item,idx)=>{
    item.onclick = ()=>{
        console.log(idx);
    }
});
复制代码

固然使用ES6的...运算符，能够更方便地达到这一效果

[...aLi].forEach((item,idx)=>{
    item.onclick = ()=>{
        console.log(idx);
    }
});
复制代码

也能够传入字符串返回一个新数组

let str = "文体两开花";
console.log(Array.from(str));
console.log(str.split(""));
复制代码

如下方法都不改变原数组且它们参数传递方式都相同，以下面的形式：

array.xxxx( function(currentValue,index,arr ) )

• currentValue当前元素的值
• index 当前元素的索引值 (可选)
• arr 调用该方法的数组对象(可选，基本不用)

2. Array.find()

返回第一个return值为true的元素，没有则返回undefined

let arr = [1,6,7,8];
console.log(arr.find(item => item > 5));//6
console.log(arr.find((item, idx) => {
    return arr[idx] < 0;
}));//undefined
复制代码

3. Array.forEach()

用于遍历数组，不返回任何值

let arr = [1,2,3,4,5,6,7];
let arr1 = [];
arr.forEach(val=>{
    arr1.push(val*2);
})
console.log(arr1);
复制代码

4. Array.map()

该方法也能够遍历数组，可是它和forEach()不一样的是，它返回一个数组，数组接收的是每次循环的返回值

let arr = [1,2,3,4,5,6,7];
console.log(arr.map(val => {
    return val*2
}));
复制代码

5. Array.filter()

用于筛选数据，当return返回值为true时，将该元素放入新数组中，最后返回新数组

let arr = [1,2,3,4,5,6,7];
console.log(arr.filter(val => val % 2));
复制代码

6. Array.every()

该方法用于测试，数组的每一项元素是否符合条件，当有任意一项不符合要求时（即返回值为false），当即返回false,只有全部元素都经过检测时，才返回true

let arr = [1,2,3,4,5,6,7];
console.log(arr.every(val => val % 2));//false
console.log(arr.every(val => val > 0));//true
复制代码

7. Array.some()

该方法和Array.every()相对，该方法只要有一项元素符合要求（回调函数返回值为true），便当即返回true;

let arr = [1,2,3,4,5,6,7];
console.log(arr.some(val => val % 2));//true
console.log(arr.some(val => val < 0));//false
复制代码

8. for...in和for...of

两种方法均可以遍历数组，它们的区别：

• for...in还能够遍历对象，for...of不行
• for...in遍历的键名，for...of遍历的是键值
• for...in遍历的效能极差，由于它还会去遍历原型链

具体使用：

let arr = [1,2,3,4,5];

for(let key in arr){
    console.log(arr[key]);
}
for(let key of arr){
    console.log(key);
}
复制代码

使用for...in遍历对象

let obj = {
    name: "品如",
    age: 18,
    height: 170,
}

for (let key in obj) {
    console.log(obj[key]);
}
复制代码