美文网首页ECMAScript
ES5新增数组方法

ES5新增数组方法

作者: 璃安_ | 来源:发表于2022-09-11 00:00 被阅读0次

    ES5新增数组方法

    一,静态方法

    1.isArray()

    -用于确定传递的值是否是一个Array.
    -如果值是Array,则为true ;否则为false

    //语法格式
    Array.isArray(value)
    //value为需要检测的值。
    
    // 下面的函数调用都返回 true
    Array.isArray([]);
    Array.isArray([1]);
    Array.isArray(new Array());
    
    // 下面的函数调用都返回 false
    Array.isArray();
    Array.isArray({});
    Array.isArray(null);
    Array.isArray(undefined);
    Array.isArray(17);
    

    二,原型(实例)方法

    -以下方法参数都是回调函数,回调函数有三个参数(element, index, array)
    -element:值,index: 索引,array: 数组本身,用不到的形参可省略

    1.forEach()

    -遍历数组,为每个数组元素调用函数,有多少个元素,就执行多少次操作
    -不会改变原数组,返回值undefined
    -没办法中止或跳出forEachO) 循环。如需中止或跳出循环,forEach() 方法不是应当使用的工具

     // forEach 迭代(遍历)数组
            var arr = [1,2,3]
            var sum = 0
            arr.forEach(function(value,index,array){
                console.log('每个数组元素',+value);
                console.log('每个数组元素的索引号'+index);
                console.log('数组本身'+array);
                sum+=value
            })
            console.log(sum);     //6
    
    image.png
    2.some()

    -不会改变原数组,返回布尔值
    -查找满足条件的元素是否存在,如找到第一个满足条件的元素就终 止循环
    -数组中是否有满足条件的元素,只要有一-个元素满足,就返回true。 无满足条件的,返回false

     // some   查找数组中是否有满足条件的元素   true/false   找到第一个满足条件的就不往后查找了,终止循环
            var  arr  =  [10,30,4]
            var flag =   arr.some(function(value,index,array){
                // return   value>=20    //true
                return   value<3     //false
            })
            console.log(flag);
    
            var  arr1  =  ['pink','skyblue','red']
            var flag1= arr1.some(function(value,index,array){
                return   value=='red'   //true
            })
            console.log(flag1);
    
    image.png
    3.every()

    -遍历数组,不会改变原数组,返回布尔值
    -当数组所有元素都满足测试条件,才返回true,只要有一项不满足就返回false

        <script>
            var arr = [1000, 2000,3000 ]
            var flag = arr. every(function (a,b,c) {
                console.log(a +"==="+ b +"==="+c)//1000===0====1000, 2000, 3000
                return a > 2000;//数组中的每 个元素的值都要大于2000的情况,最后才返回true
            })
            console.log(flag) //false
        </script>
    
    image.png
    4.filter()

    -过滤数组,将满足条件的元素过滤出来,组成新数组并返回它
    -如没有任何数组元素通过测试,则返回空数组

    // filter  筛选数组
            var  arr =  [12,66,4,88,15]
            var newArr = arr.filter(function(value,index,array){
                return value%2===0    //筛选数组里面为偶数的值
                // return value>=60    //返回的是一个新数组,所有满足条件的都会返回到这个新数组,所以需要一个东西接收
            })
            console.log(newArr);
    
    image.png
    5.reduce()
    array.reduce(function(preval, item, index, arr), arr1)
    

    preval 必需。初始值, 或者计算结束后的返回值。
    item 必需。当前元素
    index 可选。当前元素的索引
    arr 可选。当前元素所属的数组对象。
    arr1 可选。传递给函数的初始值

    -不会改变原数组
    -返回值:使用"reducer"回调函数遍历整个数组后的结果

    var arr = [10, 20, 30, 40]
        var newArr = arr.reduce(function(preval, item, index, arr) {
            console.log(preval, item, index, arr)
            return preval + item
        })
        console.log(newArr)
    
    image.png
    6.map()

    map() 方法使用为每个数组元素调用函数的结果创建新数组。

    map() 方法按顺序为数组中的每个元素调用一次提供的函数。

    map() 对没有值的数组元素不执行函数。

    map() 不会改变原始数组。

    var  arr=[1,2,3,4,5,6,7]
        var  a = arr.map(value => {
        return value * 2
        })
        console.log(a);//[2, 4, 6, 8, 10, 12, 14]
    
    image.png

    相关文章

      网友评论

        本文标题:ES5新增数组方法

        本文链接:https://www.haomeiwen.com/subject/vqxfortx.html