JavaScript的数组常用的方法下

33次阅读

共计 7583 个字符，预计需要花费 19 分钟才能阅读完成。

不会改变自身的方法有 9 种：

1.concat()：合并两个或多个数组。不会改变原数组，返回一个新数组
2.includes()：判断当前数组是否包含某指定的值，如果是返回 true，否则返回 false
3.join()：连接所有数组元素组成一个字符串
4.slice()：抽取当前数组中的一段元素组成一个新数组
5.toString()：返回一个有数组元素组合而成的字符串
6.toLocaleString()：返回一个有数组元素组合而成的本地化后的字符串
7.indexOf()：返回数组中第一个与指定值相等的元素的索引，如果找不到这样的元素，则返回 -1
8.lastIndexOf()：返回数组中最后一个（从右边数第一个）与指定值相等的元素的索引，如果找不到这样的元素，则返回 -1

1.concat()：合并两个或多个数组。不会改变原数组，返回一个新数组

 /**
    * 方法：concat
    * 作用：合并两个或多个数组。不会改变原数组，返回一个新数组
    * 语法：var new_arrary = old_array.concat(value1,[, value2[,...[, valueN]]])
    * 参数：valueN 
    *     将数组和或值连接成新数组。*     如果省略了 valueN 的参数，则 concat 返回一个她所调用的已存在的数组的浅拷贝 
    * 返回值：新的数组
    * 描述：数组 / 数值在连接是保持不变。此外，对于数组的任何操作（仅当元素不是对象引用时，）都不会对原始数组产生影响，反之亦然。*/ 

    // 连接 2 个数组
    var alhpa = ['a','b','c']
    var numeric = [1,2,3]
    var newArray = alhpa.concat(numeric)
    console.log(newArray)
    // ['a', 'b', 'c', 1, 2, 3]

    // 连接 3 个数组
    var num1 = [1, 2, 3],
        num2 = [4, 5, 6],
        num3 = [7, 8, 9];
    var newArray = num1.concat(num2, num3)
    console.log(newArray)
    // [1, 2, 3, 4, 5, 6, 7, 8, 9]

    // 将值链接到数组
    var alhpa = ['a','b','c']
    var newArray = alhpa.concat(1, [1,2,3])
    console.log(newArray)
    // ['a', 'b', 'c', 1, 2, 3]

    // 合并嵌套数组
    var num1 = [1, 2, 3],
        num2 = [4, [5, 6]],
        num3 = [7, [8, 9]];
    var newArray_1 = num1.concat(num2)
    console.log(newArray_1)
    var newArray_2 = num1.concat(4, num3)
    console.log(newArray_2)
    num2[1].push('arr')
    console.log(newArray_1)
    // [1, 2, 3, 4, [5, 6]]
    // [1, 2, 3, 4, 7, [8, 0]]
    // [1, 2, 3, 4, [5, 6, arr]]

2.includes()：判断当前数组是否包含某指定的值，如果是返回 true，否则返回 false

   /**
    * 方法：includes
    * 作用：判断当前数组是否包含某指定的值，如果是返回 true，否则返回 false
    * 语法：arr.includes(valueToFind[, fromIndex])
    * 参数：valueToFind 可选 
    *     使用 includes()比较字符串和字符时是区分大小写
    *     fromIndex 可选
    *     从 formIndex 索引出开始查找 valueToFind。*     如果是负值，则按升序从 array.length + fromIndex 的索引开始搜。默认值为 0
    * 返回值：返回一个布尔值
    */
        
        // 计算出来的 fromIndex 小于 0
    // 如果 fromIndex 为负值，则计算出的索引将作为开始搜索元素的位置
    // 如果索引小于 0，则整个数组都会被搜索
    // array length is 3
    // fromIndex is -100
    // computed index is 3 + (-100) = -97
    var arr = ['a','b','c']
    var return_1 = arr.includes('a',-100)
    var return_2 = arr.includes('b',-100)
    var return_3 = arr.includes('c',-100)
    // // 3 +（-2）= 1 
    // // 从索引 1 开始搜索
    var return_4 = arr.includes('a',-2)
    console.log(return_1)
    console.log(return_2)
    console.log(return_3)
    console.log(return_4)
    // true
    // false
    // true
    // false

3.join()：连接所有数组元素组成一个字符串

    /**
    * 方法：join
    * 作用：连接所有数组元素组成一个字符串
    * 语法：arr.join([separator])
    * 参数：separator 可选 
    *     指定一个字符串类分隔数组的每个元素
    *     如果需要，将分隔父转换为字符串
    *     如果缺省改值，数组元素用逗号 (,) 分隔。*     如果 separator 是空字符串("")，则所有元素之间都没有任何字符
    * 返回值：返回一个所有数组元素连接的字符串
    *       如果 arr.length 为 0，则返回空字符串
    * 描述：所有的数组元素被转换成字符串，再用一个分隔符将这些字符串连接起来
    *     如果一个元素为 undefined 或 null，它会被转换为空字符串
    */ 

    var arr = ['Wind', 'Rain', 'Fire']
    var newVar_1 = arr.join()
    var newVar_2 = arr.join(',')
    var newVar_3 = arr.join('+')
    var newVar_4 = arr.join('-')
    console.log(newVar_1)
    console.log(newVar_2)
    console.log(newVar_3)
    console.log(newVar_4)
    // Wind,Rain,Fire
    // Wind,Rain,Fire
    // Wind+Rain+Fire
    // Wind-Rain-Fire

    // 连接类数组对象
    // 通过 Array.prototype.join 上调用 Function.prototype.call
    function f(a,b,c){var s= Array.prototype.join.call(arguments)
      console.log(s)
    }
    f(1,'a',true)
    // 1,a,true

4.slice()：抽取当前数组中的一段元素组成一个新数组

 /**
    * 方法：slice
    * 作用：抽取当前数组中的一段元素组成一个新数组
    * 语法：arr.slice([begin[,end]])
    * 参数：begin 可选 
    *     提取起始处的索引（从 0 开始），从索引开始提取原数组元素
    *     如果参数为负数，则表示从原数组中的倒数第几个元素开始提取
    *     slice(-2)表示提取原数组的倒数第二个元素到最后一个元素（包括最后一个元素）*     如果省略 begin，则 slice 从索引 0 开始
    *     如果 begin 大于原数组的长度，则会返回空数组
    *     end 可选
    *     提前终止的索引（从 0 开始），在该索引出结束提取原数组元素。slice 会提取原数组中
    *     索引从 begin 到 end 的所有元素（包含 begin，但不包含 end）*     slice(1,4)会提取原数组中从第二个元素开始一直到第四个元素的所有元素（索引为 1，2，3 的元素）*     如果 end 被省略，则 slice 会一直提取到原数组末尾
    *     如果 end 大于数组的长度，slice 会一直提取到原数组末尾
    * 返回值：返回一个含有被提取元素的新数组
    * 描述：slice 不会修改原数组，只会返回一个浅复制了原数组中的元素的一个新数组。*     原数组的元素按照如下规则拷贝：*         1. 如果该元素是个对象引用（不是实际的对象），slice 会拷贝这个对象引用到新的数组里
    *         两个对象引用都引用了同一个对象。如果被引用的对象发生了改变，则新的和原来的数组中
    *         的这个元素也会发生改变
    *         2. 对于字符串、数字机布尔值来说（不是 String、Number 或者 Boolean 对象）*         slice 会拷贝这些到新的数组里。在别的数组里修改这些字符串或数字或布尔值，将不会影响另一个数组
    *     如果向两个数组任一中添加新元素，则另一个不会受到影响
    */ 

    var fruits = ['Banana', 'Orange', 'Lemon', 'Apple', 'Mango']
    var citrus = fruits.slice(1, 3)
    console.log(fruits)
    console.log(citrus)
    // ['Banana', 'Orange', 'Lemon', 'Apple', 'Mango']
    // ['Orange', 'Lemon']


    // slice 从 myCar 中创建了一个数组 newCar。// 两个数组都包含了一个 myHonda 的对象引用。// 当 myHonda 的 color 属性改变的 purple，则两个数组的对应溯源都会随之改变
    var myHonda = {color: 'red', wheels: 4, engine: { cylinders: 4, size: 2.2} }
    var myCar = [myHonda, 2, "cherry condition", "purchased 1997"]
    var newCar = myCar.slice(0, 2)

    
    // slice 从 myCar 中创建了一个数组 newCar。// 两个数组都包含了一个 myHonda 的对象引用。// 当 myHonda 的 color 属性改变的 purple，则两个数组的对应溯源都会随之改变
    var myHonda = {color: 'red', wheels: 4, engine: { cylinders: 4, size: 2.2} }
    var myCar = [myHonda, 2, "cherry condition", "purchased 1997"]
    var newCar = myCar.slice(0, 2)

    // 输出 myCar newCar 以及各自 myHonda 对象引用的 color 属性
    console.log('myCar =' + JSON.stringify(myCar))
    console.log('newCar =' + JSON.stringify(newCar))
    console.log('myCar[0].color =' + JSON.stringify(myCar[0].color));
    console.log('newCar[0].color =' + JSON.stringify(newCar[0].color));
    // 改变 myHonda 对象的 color 属性
    myHonda.color = 'purple'
    // 输出 myCar、newCar 中各自的 myHonda 对象引用的 color 属性
    console.log('The new color of my Honda is' + myHonda.color);
    console.log('myCar[0].color =' + JSON.stringify(myCar[0].color));
    console.log('newCar[0].color =' + JSON.stringify(newCar[0].color));
    // The new color of my Honda is purple
    // myCar[0].color = "purple"
    // newCar[0].color = "purple"

5.toString()：返回一个有数组元素组合而成的字符串

/**
    * 方法：toString
    * 作用：返回一个有数组元素组合而成的字符串。屏蔽了原型上的 Object.prototype.toString()方法
    * 语法：arr.toString()
    * 参数：不需要传参
    * 返回值：返回一个表示指定的数组及其元素的字符串
    * 描述：*     Array 对象覆盖 Object 的 toString 方法。*     对于数组对象，toString 方法连接数组并返回一个字符串，其中包含用逗号分隔的每个数组元素
    *     当一个数组被作为文本值或者进行字符串连接操作时，将会自动调用期 toString 方法
    */ 
    const arr = [1, 2, 'a', '1a']
    const arrStr = arr.toString()
    console.log(arrStr)
    // 1,2,a,1a

6.toLocaleString()：返回一个有数组元素组合而成的本地化后的字符串

    /**
    * 方法：toLocaleString
    * 作用：返回一个有数组元素组合而成的本地化后的字符串。屏蔽了原型上的 Object.prototype.toLocaleString()方法
    * 语法：arr.toLocaleString([locals[],options])
    * 参数：*     locals 可选
    *     带有 BCP 47 标记的字符串或字符串数组
    *     options 可选
    *     一个可配置属性的对象
    *     对于数字：Number.prototype.toLocalString()
    *     对于日期：Date.prototype.toLocalString()
    * 返回值：返回一个数组元素的字符串
    */ 

    /**
    * 数组中的元素将会使用各自的 toLocalString 方法：* Object:Object.prototype.toLocaleString()
    * Number: Number.prototype.toLocaleString()
    * Date: Date.prototype.toLocaleString()
    * 总是在 prices 数组中显示字符串和数字的货币符号
    */ 


    const arr = [1,'a',new Date()]
    const arrStr = arr.toLocaleString('en', {timeZone:'UTC'})
    console.log(arrStr)
    // 1,a,5/21/2020, 6:40:12 AM 

    var prices = ['￥7', 500, 8123, 12]
    var pricesStr = prices.toLocaleString('ja-JP',{style:'currency',currency:'JPY'})
    console.log(pricesStr)
    // ￥7,￥500,￥8,123,￥12

7.indexOf()：返回数组中第一个与指定值相等的元素的索引，如果找不到这样的元素，则返回 -1

    /**
    * 方法：indexOf
    * 作用：返回数组中第一个与指定值相等的元素的索引，如果找不到这样的元素，则返回 -1
    * 语法：arr.indexOf(searchElement[, formIndex])
    * 参数：*     searchElement 要查找的元素
    *     formIndex 可选
    *     开始找的位置
    *     如果该索引值大于或等于数组长度，意味着不会在数组里查找，返回 -1
    *     如果参数中提供的索引值是一个负值，则将其作为数组末尾的一个抵消，即 - 1 表示从最后一个元素开始查找
    *     - 2 表示从倒数第二个元素开始查找。从此类推。注意：如果参数中提供的索引值是一个负值，并不改变查找顺序
    *     查找顺序仍然是从前往后查询数组。如果抵消后的索引值仍小于，则整个数组都将会被查询。其默认值为 0
    * 返回值：首个被找到的元素在数组中的索引位置；如果没有找到则返回 -1
    */ 

    const beats =  ['ant', 'bison', 'camel', 'duck', 'bison'];
    // 返回第一个 bison 的索引值 1
    // 返回第二个 bison 的索引值 4
    // 找不到 bi2son 这个元素，返回 -1
    console.log(beats.indexOf('bison'))
    console.log(beats.indexOf('bison',2))
    console.log(beats.indexOf('bi2son'))
    // 1
    // 4
    // -1

8.lastIndexOf()：返回数组中最后一个（从右边数第一个）与指定值相等的元素的索引，如果找不到这样的元素，则返回 -1

    /**
    * 方法：lastIndexOf
    * 作用：返回数组中最后一个（从右边数第一个）与指定值相等的元素的索引，如果找不到这样的元素，则返回 -1
    * 语法：arr.lastIndexOf(searchElement[, formIndex])
    * 参数：*     searchElement 要查找的元素
    *     formIndex 可选
    *     从这个位置逆向查找
    *     默认为数组长度减 1(arr.length - 1)，即整个数组都被查找
    *     如果该值大于或等于数组的长度，则整个数组会被查找
    *     如果为负值，将其视为从数组末尾向前的偏移。即使该值为负，数组仍然会被从后向前查找
    *     如果该值为负时，其绝对值大于数组长度，则方法返回 -1. 则数组不会被查找
    * 返回值：返回数组中该元素最后一次出现的索引，如果未找到则返回 -1
    */ 

    const animals = ['Dodo', 'Tiger', 'Penguin', 'Dodo'];
    console.log(animals.lastIndexOf('Dodo'))
    console.log(animals.lastIndexOf('Penguin'))
    console.log(animals.lastIndexOf('Tiger'))
    // 3
    // 2
    // 1

    var arr = [2,5,9,2]
    var index = arr.lastIndexOf(2)
    console.log(index)
    var index = arr.lastIndexOf(7)
    console.log(index)
    var index = arr.lastIndexOf(2,3)
    console.log(index)
    var index = arr.lastIndexOf(2,2)
    console.log(index)
    var index = arr.lastIndexOf(2,-2)
    console.log(index)
    var index = arr.lastIndexOf(2,-1)
    console.log(index)
    // 3
    // -1
    // 3
    // 0
    // 0
    // 3

    // 查找所有元素
    // 使用 lastIndexOf 查找到一个元素在数组中所有的索引（下标），并使用 push 将所有添加到另一个数组中
    var indices = [];
    var arr = ['a', 'b', 'a', 'c', 'a', 'd'];
    var element = 'a';
    var idx = arr.lastIndexOf(element);
    while (idx != -1) {indices.push(idx);
      idx = (idx > 0 ? arr.lastIndexOf(element,idx -1) : -1);
    }
    console.log(indices);
    // 4, 2, 0

正文完
javascript
发表至： javascript
2020-06-03
 0
变量、作用域和内存问题
web前端面试题移动开发篇持续更新
录屏与重放你的页面
嘿，我造了个代码高亮的插件