JavaScript数组整理

forEach、filter(过滤)、map(映射)、some、every、reduce、includes、find

for

let arr= [1,2,3,4,5];
for (let i =0;i<arr.length;i++){
    console.log(arr[i]);
}

for..in

for...in 可以遍历数组的私有属性,比如我们给数组添加一个私有属性,然后通过for的方式进行获取

let arr= [1,2,3,4,5];
arr.n = 6;
for (let i =0;i<arr.length;i++){
    console.log(arr[i]);
}

最终的结果是不会显示私有属性的

然后我们通过for..in的方式进行循环


let arr= [1,2,3,4,5];
arr.n = 6;
// for (let i =0;i<arr.length;i++){
//     console.log(arr\[i\]);
// }
for (let key in arr){ // 此时的key会变为字符串类型
    console.log(key);
}

可以看到私有属性是可以被获取的

for..of

既可以遍历出值又可能进行return,但是不能遍历对象

let arr= [1,2,3,4,5];
for (let val of arr){
    console.log(val);
}

forEach

对于for的循环可以用forEach进行简化,需要注意的是,forEach不支持return

let arr= [1,2,3,4,5]
arr.forEach(function (item,index) {
    console.log(item);
})

foreach也是不支持读取私有属性的

let arr= [1,2,3,4,5];
arr.n = 6;
arr.forEach(function (item,index) {
    console.log(item);
})

filter

如果想要得到数组中符合要求的数据,可以使用filter进行过滤获取。比如这里我想获取大于1小于5的数据。

filter不会改变原数组,会生成一个过滤后的新的数组。

let arr = [1, 2, 3, 4, 5];
let new_arr = arr.filter(function (item) {
    return item > 1 && item < 5;
});
console.log(new_arr);

Map

map不会操作原数组,返回一个新的数组,返回值是什么,就显示什么。

let arr = [1, 2, 3, 4, 5];
let new_arr = arr.map(function (item) {
    return `<li>${item}</li>`
});
console.log(new_arr);
console.log(new_arr.join(' '));

includes

存在就返回真

let arr = [1, 2, 3, 4, 5];
console.log(arr.includes(1));
console.log(arr.includes(6));

find

找到具体的某一项

let arr = [5, 4, 3, 2, 1];
let result = arr.find(function (item, index) {
    return item.toString().indexOf('5') > -1
});
console.log(result);

some

找到true后停止,并返回true

every

找到false后停止,并返回false

reduce

收敛函数,求和使用。

let arr = [1, 2, 3, 4, 5];
let result = arr.reduce(function (prev, next, index, item) {
    return prev + next
});
console.log(result);

let obj_arr = [
    {
        price: 30,
        count: 1
    },
    {
        price: 20,
        count: 2
    },
    {
        price: 10,
        count: 3
    },
];
let obj_result = obj_arr.reduce(function (prev, next, index, item) {
    return prev + next.price * next.count
}, 0);
console.log(obj_result);

标签: JavaScript, 数组