JavaScript数组(Array)方法整理(中篇)

18 篇文章 1 订阅
4 篇文章 0 订阅

1. includes()

方法用来判断一个数组是否包含一个指定的值,如果是返回 true,否则false。

    // arr.includes(searchElement)
    // arr.includes(searchElement, fromIndex)

    /*
        searchElement	必须。需要查找的元素值。
        fromIndex	可选。从该索引处开始查找 searchElement。如果为负值,则按升序从 array.length +fromIndex 的索引开始搜索。默认为 0。


        注意:
            如果fromIndex 大于等于数组长度 ,则返回 false 。该数组不会被搜索;
            如果 fromIndex 为负值,计算出的索引将作为开始搜索searchElement的位置。如果计算出的索引小于 0,则整个数组都会被搜索。
    */
    
      let colors = ["red", "pink", "blue", "skyblue"];

      //   查看数组是否包含pink
      let flag1 = colors.includes("pink");

      //   检测数组中是否包含orange
      let flag2 = colors.includes("orange");

      console.log(flag1); // true
      console.log(flag2); // false

2. indexOf()

方法可返回数组中某个指定的元素位置。

     // array.indexOf(item,start)

      /* 
            item	必须。查找的元素。
            start	可选的整数参数。规定在数组中开始检索的位置。它的合法取值是 0 到 stringObject.length - 1。
                    如省略该参数,则将从字符串的首字符开始检索。
      */
    
         let colors = ["red", "pink", "blue", "skyblue"];

         // 查找colors数组中“pink”元素的位置
         let pink = colors.indexOf("pink"); 

         console.log(pink); // 1

         // 查找colors数组中"skyblue"的位置,从索引2的位置开始查找
         let skyblue = colors.indexOf("skyblue", 2);

         console.log(skyblue); // 3

3. Array.isArray()

方法用于判断一个对象是否为数组。 如果对象是数组返回 true,否则返回 false。

    // Array.isArray(obj)
        // obj	必需,要判断的对象。

    let arr=[];
    
    // 判断是否是数组
    console.log(Array.isArray(arr)) // true

4. join()

方法用于把数组中的所有元素转换成一个字符串。

元素是通过指定的分隔符进行分隔的。

    // array.join(separator)
    /*
        separator:	可选。指定要使用的分隔符。如果省略该参数,则使用逗号作为分隔符。


         返回值: 返回一个字符串。该字符串是通过把 arrayObject 的每个元素转换为字符串,然后把这些字符串连接起来,在两个元素之间插入 separator 字符串而生成的。
    */
    
    let colors = ["red", "pink", "blue", "skyblue"];

    // 默认连接colors的数组元素
    console.log(colors.join()); // red,pink,blue,skyblue

    // 利用“and” 连接colors数组元素
    console.log(colors.join(" and ")); //  and pink and blue and skyblue

5. keys() 

方法用于从数组创建一个包含数组键的可迭代对象。包含原始数组的键(key)

如果对象是数组返回true,否则返回false。

    // array.keys()  没有参数
    
    let colors = ["red", "pink", "blue", "skyblue"];
    
    // 创建迭代对象
    let colorkey = colors.keys();

    console.log(colorkey); // Array Iterator{}

    // 利用 for...of 迭代出创建的迭代对象的键

    for (let item of colorkey) {
      console.log(item); // 键
    }

6. lastIndexOf()

方法可返回一个指定的元素在数组中最后出现的位置,从该字符串的后面向前查找。

如果要检索的元素没有出现,则该方法返回-1。

提示:如果你想查找数组首次出现的位置,请使用indexOf()方法

    // array.lastIndexOf(item,start)
    /*
        item	必需。规定需检索的字符串值。
        start	可选的整数参数。规定在字符串中开始检索的位置。它的合法取值是 0 到 stringObject.length - 1。如省略该参数,则将从字符串的最后一个字符处开始检索。
    
        开始检索的位置在数组的 start 处或数组的结尾(没有指定 start 参数时)。如果找到一个 item,则返回 item 从尾向前检索第一个次出现在数组的位置。数组的索引开始位置是从 0 开始的。

        返回值:Nubmer类型,如果在 stringObject 中的 fromindex 位置之前存在 searchvalue,则返回的是出现的最后一个 searchvalue 的位置。
    */
    
     let colors = ["red", "pink", "blue", "skyblue", "red", "orange"];
    
     // 查找colors数组中 red最后出现的索引
     console.log(colors.lastIndexOf("red")); // 4

     // 从索引3位置开始查找red元素
     console.log(colors.lastIndexOf("red", 2)); // 0 从索引2处,从后往前检索,所以输出是0

7. map()

方法返回一个新数组,数组中的元素为原始数组元素调用函数处理后的值。

map() 方法按照原始数组元素顺序依次处理元素。

注意:map() 不会对空数组进行检测。

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

    // array.map(function(currentValue,index,arr), thisValue)
    /*
        function(currentValue, index,arr)	必须。函数,数组中的每个元素都会执行这个函数
            
            currentValue	必须。当前元素的值
            index	        可选。当前元素的索引值
            arr	            可选。当前元素属于的数组对象

         thisValue: 可选。对象作为该执行回调时使用,传递给函数,用作“this”的值。
                       如果省略了thisValue,或者传入null,undefined,那么回调函数的this为全局对象。
    */

    let numbers = [1, 2, 3, 4];

    let newNums = numbers.map(function (currentValue, index, arr) {
        // 返回数组元素*2后的新数组
        return currentValue * 2;
    });

    console.log(newNums); // [2, 4, 6, 8]

8. pop()

方法用于删除数组的最后一个元素并返回删除的元素。

注意:此方法改变数组的长度!

提示:移除数组第一个元素,请使用shift()方法。

    // array.pop()  返回删除的元素
    
    let colors = ["red", "pink", "blue", "skyblue","red","orange"];

    // 移除colors数组最后一位
    let popArr = colors.pop();

    console.log(popArr); // orange

9. push()

方法可想数组的末尾添加一个或多个元素,并返回新的长度。

注意:新元素将添加在数组的末尾。

注意:此方法改变数组的长度。

提示:在数组起始位置添加元素请使用unshift()方法。

    // array.push(item1, item2, ..., itemX)
    /*
        item1,item2,...,itemX  必须。要添加到数组的元素
    */

    let colors = ["red", "pink", "blue", "skyblue"];

     // 向colors数组添加一个 orange 元素
     colors.push("orange");

     console.log(colors); // ["red", "pink", "blue", "skyblue","orange"]

10. reduce()

方法接收一个函数作为累加器,数组中的每个值(从左到右)开始缩减,最终计算为一个值。

reduce() 可以作为一个高阶函数,用于函数的compose。

注意:reduce() 对于空数组是不会执行回调函数的。

    // array.reduce(function(total, currentValue, currentIndex, arr), initialValue)
    /*
        function(total,currentValue, index,arr)	必需。用于执行每个数组元素的函数。
            total	        必需。初始值, 或者计算结束后的返回值。
            currentValue	必需。当前元素
            currentIndex	可选。当前元素的索引
            arr	            选。当前元素所属的数组对象。

         initiaValue   可选。传递给函数的初始值。
    */


    let numbers = [25, 36, 45, 25, 39];

      // 计算numbers数组元素的总和
      let result = numbers.reduce(function (total,currentValue,cuurentIndex,arr) {
         return total + currentValue;
      },0);

      console.log(result); // 170

注意:出于对JavaScript的再学习,我整理了一下JavaScript数组方法,文章根据《菜鸟教程》整理所得,如有不当之处,欢迎指正。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

听北风

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值