数组的迭代方法

171 阅读2分钟

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>

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>

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>

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>

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>

find()

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

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>

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>