JavaScript的数组常用的方法下

6次阅读

共计 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
正文完
 0