数组迭代

127 阅读4分钟

1.forEach(callback)

这个方法没有返回值,操作原数组

<script>
        var arr = ['html','css','js','jquery'];
        // for (let i = 0; i < arr.length; i++) {
        //     console.log(`第${i}个元素是:${arr[i]}`);
        // }
        arr.forEach(function(element,index,oldarr){
            console.log(`第${index}个元素是:${element}`);
            // console.log(oldarr);
        });
    </script>

2.map()

返回一个符合条件的新数组(结果)

    <script>
        var nums = [1,3,5,6,8];

        // 把数组中每个元素 乘以2
        // for (let i = 0; i < nums.length; i++) {
        //    nums[i] =  nums[i] * 2; // nums[0] = nums[0]*2 => nums[0] = 1*2
        // }    
        // console.log(nums);

        // var newNums = nums.map(function(item){
        //     return item * 2;
        // });

        // 用 es6箭头函数写:
        var newNums = nums.map( x => x * 2 );
        console.log(newNums); // [2, 6, 10, 12, 16]

        var strs = ['html','css','js','jquery'];
        var newStrs = strs.map( x => x.length > 3);
        console.log(newStrs); // ?
    </script>

3.filter()

返回让回调函数为true的元素组成的数组

    <script>
        var nums = [1,3,5,6,8];
        var strs = ['html','css','js','jquery'];
        var newStrs = strs.filter( x => x.length > 3);
        console.log(newStrs); // ["html""jquery"]
    </script>

4.every()

有一个元素让条件为false,则返回false, 且剩余元素不会再进行检测

    <script>
        function isBelow(item) {
            return item < 40;
        }    
        var arr = [1,30,39,10,13];
        console.log(arr.every(isBelow)); // true

        var arr2 = [12,5,8,130,44]
        var newArr2 = arr2.every( x => x >= 10);
        console.log(newArr2); // false
    </script>

5.some()

有一个元素让条件为true,则返回true, 且剩余元素不会再进行检测

    <script>
        function isBelow(item) {
            return item < 40;
        }    
        var arr = [1,30,39,10,13];
        console.log(arr.some(isBelow)); // true

        var arr2 = [12,5,8,130,44]
        var newArr2 = arr2.some( x => x >= 10);
        console.log(newArr2); //  true
    </script>

6.find()

返回符合条件的第一个元素

7.reduce()和from()

reduce()
接收一个函数作为累加器,数组中的每个值(从左到右)开始缩减,最终计算为一个值。
<script>      
 let arr = [
            {
                name: "aaa",
                age: 20 
           },
            {
                name: "bbb",
                age: 30
            },
            {
                name: "ccc",
                age: 40 
           },
        ] 
       console.log(arr.reduce((total, current) => total + current.age, 0));  //90
    </script>
from()
通过拥有length 属性的对象或可迭代的对象来返回一个数组。如果对象是数组返回true,否则返回 false。
<script>
        var arr = Array.from([1, 2, 3], x => x * 10);
        console.log(arr); //[10,20,30]
</script>
 <script>
        let arr = Array.from({
            length: 30
        }).map((r, i) => ({
            id: i + 1,
            name: '用户' + i,
            age: Math.floor(Math.random() * 50),
            gender: Math.round(Math.random()) ? "男" : "女"
        }))
        console.log(arr);//0: {id: 1, name: "用户i+1", age: 38, gender: "女"} ...共30个age和gender为随机的数组
</script>

8.findIndex()

返回符合条件的第一个元素的索引值

    <script>
        var arr = [1,30,39,10,13];
        var arr2 = arr.find( x => x > 10);
        console.log(arr2); // 30

        var arr3 = arr.findIndex( x => x > 10);
        console.log(arr3); // 1

        var arr4 = arr.findIndex( x => x > 100);
        console.log(arr4); // -1
    </script>