最新公告
  • 欢迎您光临起源地模板网,本站秉承服务宗旨 履行“站长”责任,销售只是起点 服务永无止境!立即加入钻石VIP
  • js中的数组方法

    正文概述 掘金(辉会飞)   2021-03-20   546

    1、map

    数组格式化。数组中的每个元素调用传参的函数,将结果作为新的数组返回,不改变原数组

        let arr = [1, 2, 3, 4, 5]
        let newarr = arr.map((item, index, array) => {
          //参数 1 - item  数组里每个元素
          //参数 2 - index 每个元素对应的下标
          //参数 3 - array 数组本身
          return item * 2
        });
        console.log(arr)     // [1, 2, 3, 4, 5]
        console.log(newarr)  // [2, 4, 6, 8, 10]
    

    注意:如果return后面是条件表达式,则会返回布尔值 比如:

        let arr = [1, 2, 3, 4, 5]
        let newarr = arr.map((item, index) => {
          return index > 2
        });
        console.log(newarr) // [false, false, false, true, true]
    

    2、forEach

    数组遍历。数组中的每个元素调用传参的函数,没有返回值,直接改变原数组

        let arr = [1, 2, 3, 4]
        arr.forEach((item, index, array) => {
          item ++
        });
        console.log(arr) // [1, 2, 3, 4]
    

    奇怪的是原数组没有发生改变,没有达到预期的效果 这里要注意的是:如果数组元素是数字、字符串、布尔值、null和undefined,原数组不会发生改变,但我们可以这样:

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

    假如数组元素是对象(键值对形式),则不需要考虑这种情况

         let arr = [
            { num: 1, age: 18 },
            { num: 1, age: 19 },
            { num: 1, age: 20 }
          ];
          arr.forEach(item => {
            item.num++;
            item.age = 30;
          });
          console.log(arr);
          // [{ num: 2, age: 30 },{ num: 2, age: 30 },{ num: 2, age: 30}]
    

    3、filter

    数组过滤。对数组中所有元素进行判断,将符合条件的元素作为一个新数组返回

        let arr = [1, 2, 3, 4, 5]
        let newarr = arr.filter((item, index, array) => {
          return item > 2
        });
        console.log(newarr) // [3, 4, 5]
    

    4、push

    数组后增。在数组末尾添加一个或者多个元素,同时改变数组的长度

        let arr = [1, 2, 3, 4]
        arr.push(5)
        console.log(arr) // [1, 2, 3, 4, 5]
        
        let arr2 = [1, 2, 3, 4]
        arr2.push(5, 6)
        console.log(arr2) // [1, 2, 3, 4, 5, 6]
    

    5、pop

    数组后删。删除并返回数组最后一个元素,同时改变数组的长度

        let arr = [1, 2, 3, 4]
        let arrLast = arr.pop()
        console.log(arrLast) // 4
        console.log(arr)     // [1, 2, 3]
    

    6、shift

    数组前删。删除并返回数组的第一个元素,同时改变数组的长度

        let arr = [1, 2, 3, 4]
        let arrFirst = arr.shift()
        console.log(arrFirst) // 1
        console.log(arr)     // [2, 3, 4]
    

    7、unshift

    数组前增。在数组开头添加一个或者多个元素,同时改变数组的长度

        let arr = [1, 2, 3, 4]
        arr.unshift(6)
        console.log(arr)  // [6, 1, 2, 3, 4]
        
        let arr2 = [1, 2, 3, 4]
        arr2.unshift(6, 7)
        console.log(arr2)  // [6, 7, 1, 2, 3, 4]
    

    8、splice

    数组的万能方法,可以实现增删改,不仅会改变原数组,而且将删除的元素作为一个新数组返回 splice(开始的位置, 删除的个数, 添加或替换的元素)

        let arr1 = [1, 2, 3, 4]
        // 删除 3
        let delarr1 = arr1.splice(2, 1)
        console.log(delarr1) // [3]
        console.log(arr1)    // [1, 2, 4]
    
        let arr2 = [1, 2, 3, 4]
        // 将 2,3 替换成 “666”
        let delarr2 = arr2.splice(1, 2, "666")
        console.log(delarr2)  // [2, 3]
        console.log(arr2)     // [1, "666", 4]
    
        let arr3 = [1, 2, 3, 4]
        // 在 2 前面新增 "666",“777”
        let delarr3 = arr3.splice(1, 0, "666", "777")
        console.log(delarr3)  // []
        console.log(arr3)     // [1, "666", "777", 2, 3, 4]
    

    9、sort

    数组排序。对数组中的元素进行排序,直接改变原数组,参数必须是规定元素排序顺序的函数

        let arr1 = [4, 65, 3, 48, 29]
        // 升序
        const rule = (a, b) => a - b
        arr1.sort(rule)
        console.log(arr1)  // [3, 4, 29, 48, 65]
        
        let arr2 = [4, 65, 3, 48, 29]
        // 降序
        arr2.sort((a, b) => {
          return b - a
        })
        console.log(arr2) // [65, 48, 29, 4, 3]
    

    10、concat

    数组拼接。将两个或多个数组拼接成一个数组,不会改变现有数组,只会返回一个拼接后的新数组

        let arr0 = [0, 0, 0]
        let arr1 = [1, 2, 3]
        let arr2 = [4, 5, 6]
    
        let arr3 = arr0.concat()
        console.log(arr3)  //  [0, 0, 0]
    
        let arr4 = arr1.concat(arr2)
        console.log(arr4)  // [1, 2, 3, 4, 5, 6]
    
        let arr5 = arr0.concat(arr1, arr2)
        console.log(arr5)  // [0, 0, 0, 1, 2, 3, 4, 5, 6]
    

    11、toString

    将数组转化为字符串,且元素之间通过逗号分隔

        let arr = [1,2,"hello",4]
        let str = arr.toString()
        console.log(str)  // 1,2,hello,4
    

    12、join

    将数组转化为字符串,且元素通过指定的分隔符分隔,默认使用逗号分隔

        let arr = [1, 2, "hello", 3]
        console.log(arr.join())    // 1,2,hello,3
        console.log(arr.join(""))  // 12hello3
        console.log(arr.join("-")) // 1-2-hello-3
        console.log(arr.join(99))  // 199299hello993
    

    13、reverse

    反转数组。颠倒数组中元素的顺序

        let arr = ["h","e","l","l","0"]
        console.log(arr.reverse())  // ["0", "l", "l", "e", "h"]
    

    14、indexOf

    返回指定元素在数组中第一次出现的位置,从前往后找,假如指定元素没有出现,则返回 -1

        let arr = ["h","e","l","l","0"]
        console.log(arr.indexOf("l"))  // 2
        console.log(arr.indexOf("q"))  // -1
    

    15、lastIndexOf

    用法和indexOf一样,不同点:lastIndexOf是从后往前找

        let arr = ["h","e","l","l","0"]
        console.log(arr.lastIndexOf("l"))  // 3
        console.log(arr.lastIndexOf("q"))  // -1
    

    16、every

    对数组中所有元素进行判断并返回一个布尔值,假如所有元素都符合判断条件,则返回true,否则为false

        let arr = [12, 12, 13, 18]
        
        let arrflag1 = arr.every((item, index, array) => {
          return item < 20
        })
        console.log(arrflag1)  // true
    
        let arrflag2 = arr.every(item => {
          return item < 15
        })
        console.log(arrflag2)  // false
    

    17、some

    对数组中所有元素进行判断并返回一个布尔值,假如存在元素符合判断条件,则返回true,假如都不符合则为false。注意和every区分

        let arr = [12, 12, 13, 18]
    
        let arrflag1 = arr.some((item, index, array) => {
          return item < 10
        })
        console.log(arrflag1)  // flase
    
        let arrflag2 = arr.some(item => {
          return item < 15
        })
        console.log(arrflag2)  // true
    

    18、reduce

    数组中所有元素调用传参函数,返回值为最后的结果,传入的参数必须是函数

        let arr = [1, 2, 3, 4, 5, 6]
        const add = (a, b) => a + b
        let sum = arr.reduce(add)
        console.log(sum)  // 21    
    

    es6新增

    19、copyWithin

    将数组中指定位置的元素复制到另一个指定位置中,直接改变原数组 copyWithin(指定目标位置, 元素复制开始位置, 元素复制结束位置 )

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

    20、fill

    将固定的值替换数组中指定位置的元素,直接改变原数组 fill(替换的值, 元素替换开始位置, 元素替换结束位置)

        let arr = [1, 2, 3, 4, 5, 6]
        arr.fill(0, 2, 4)
        console.log(arr) // [1, 2, 0, 0, 5, 6]
    

    21、find

    对数组中所有元素进行判断,返回第一个符合条件的元素,不会改变原数组

        let arr = [1, 2, 3, 4, 5, 6]
        let arrFind = arr.find((item, index, array) => {
          return item > 2
        })
        console.log(arrFind) // 3
    

    22、findIndex

    用法和find一样,不同点:findIndex返回的是元素下标

        let arr = [1, 2, 3, 4, 5, 6]
        let arrFindIndex = arr.findIndex((item, index, array) => {
          return item > 2
        })
        console.log(arrFindIndex) // 2
    

    23、includes

    判断一个指定的值是否在数组中,假如是返回 true,否则false

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

    24、keys

    返回一个包含数组键(元素下标)的可迭代对象

        let arr = ["h", "e", "l", "l", "o"]
        console.log(arr.keys()) // Array Iterator {}
        for (let i of arr.keys()) {
          console.log(i)    // 0 1 2 3 4
        }
    

    25、values

    返回一个包含数组值(元素)的可迭代对象

        let arr = ["h", "e", "l", "l", "o"]
        console.log(arr.values()) // Array Iterator {}
        for (let i of arr.values()) {
          console.log(i)         // h e l l o
        }
    

    26、entries

    返回一个数组的可迭代对象,该对象包含数组的键值对

        let arr = ["h", "e", "l", "l", "o"]
        console.log(arr.entries()) // Array Iterator {}
        for (let i of arr.entries()) {
          console.log(i)   // [0, "h"]  [1, "e"]  [2, "l"]  [3, "l"]  [4, "o"]
        }
    

    起源地下载网 » js中的数组方法

    常见问题FAQ

    免费下载或者VIP会员专享资源能否直接商用?
    本站所有资源版权均属于原作者所有,这里所提供资源均只能用于参考学习用,请勿直接商用。若由于商用引起版权纠纷,一切责任均由使用者承担。更多说明请参考 VIP介绍。
    提示下载完但解压或打开不了?
    最常见的情况是下载不完整: 可对比下载完压缩包的与网盘上的容量,若小于网盘提示的容量则是这个原因。这是浏览器下载的bug,建议用百度网盘软件或迅雷下载。若排除这种情况,可在对应资源底部留言,或 联络我们.。
    找不到素材资源介绍文章里的示例图片?
    对于PPT,KEY,Mockups,APP,网页模版等类型的素材,文章内用于介绍的图片通常并不包含在对应可供下载素材包内。这些相关商业图片需另外购买,且本站不负责(也没有办法)找到出处。 同样地一些字体文件也是这种情况,但部分素材会在素材包内有一份字体下载链接清单。
    模板不会安装或需要功能定制以及二次开发?
    请QQ联系我们

    发表评论

    还没有评论,快来抢沙发吧!

    如需帝国cms功能定制以及二次开发请联系我们

    联系作者

    请选择支付方式

    ×
    迅虎支付宝
    迅虎微信
    支付宝当面付
    余额支付
    ×
    微信扫码支付 0 元