网络知识 娱乐 JS数组常用方法整理（14种常用方法）

JS数组常用方法整理（14种常用方法）

发布: 2023年2月14日 10:17:50

目录

1.增

1.1 push():

1.2 unshift():

2.删

2.1 pop():

 2.2 shift()

3.改（增、删）：

3.1 splice()

4.查

4.1 slice()

 5.将数组转换为字符串：

5.1 toString()

5.2 join()

6.数组拼接 

6.1concat()

7.检测数组中是否包含某一项

7.1 indexOf()

7.2 lastIndexOf()

7.3 includes()

8.数组排序

8.1 reverse()

8.2 sort()

 1.增

1.1 push():

push方法会改变原数组

/*
    数组.push():向数组的末尾添加元素
    @params:多个任意类型值
    @return:新增后的数组长度
*/
let arr = [0,1,2,3],
    newArr = arr.push(4);
console.log('newArr:', newArr, "|", "arr:", arr)//=> 5,[0,1,2,3,4,5]

结果为：  

1.2 unshift():

unshift方法会改变原数组

/*
    数组.unshift():向数组开头添加元素
    @params:多个任意类型值
    @return:新增后的数组长度
*/
let arr = [1,2,3],
    newArr = arr.unshift(0);
console.log('newArr:', newArr, "|", "arr:", arr)

结果为：

2.删

2.1 pop():

pop方法会改变原数组

/*
    数组.pop():删除数组中最后的那项
    @params:
    @return:被删除的那项
*/

let arr = [0,1,2,3,4,5],
    newArr = arr.pop();
console.log('newArr:', newArr, "|", "arr:", arr)

结果为：

 2.2 shift()

shift方法会改变原数组

/*
    数组.shift():删除数组中开头的那项元素
    @params:
    @return:被删除的那项
*/

let arr = [0,1,2,3,4],
    newArr = arr.shift()
console.log('newArr:', newArr, "|", "arr:", arr)

结果为：

3.改（增、删）：

3.1 splice()

splice方法会改变原数组，并且能进行增删改操作

/*
    数组.splice(n,m,x):对数组进行增/删/改操作
    @params:
        n:从索引n开始（必填）
        m:向后截取m个元素，没有填写则默认截取到数组末尾（非必填）。
        x:代替截取掉的部分（非必填）
    @return:将截取到的部分以新数组的方式返回
*/

//增：
let arr = [0,1,2,3,4,5,6],
    newArr = arr.splice(arr.length-1,0,7); //从数组末尾开始向后截取0个元素，并在此插入新元素7
console.log(newArr,arr)// => [],[0,1,2,3,4,5,6,7]

//删：
let arr2 = [0,1,2,3,4,5,6],
    newArr2 = arr2.splice(0,1);//从索引0开始向后截取1个元素
console.log(newArr2,arr2)// => [0],[1,2,3,4,5,6]

//改：
let arr3 = [0,1,2,3,4,5,6],
    newArr3 = arr3.splice(0,1,0.5)//从索引0开始向后截取1个元素，并在此插入元素0.5
console.log(newArr3,arr3)// => [0],[0.5,1,2,3,4,5,6]

4.查

4.1 slice()

slice方法不会改变原数组，以下列出的n和m的情况也适用于splice

/*
    数组.slice(n,m)：查询数组
    @params:
        n:从索引n开始（必填）
        m:查询到索引m为止，不包含m，如果m不填或大于arr.length，默认查询到末尾（非必填）
    @return:将查找到的元素以新数组的方式返回，如果没有查找到，返回空数组
*/

//1.当n和m都为正整数：
let arr = [0,1,2,3,4,5],
    newArr = arr.slice(0,arr.length);//从索引0开始查询到数组末尾的后一项（复制数组）
console.log(newArr,arr)// => [0,1,2,3,4,5],[0,1,2,3,4,5]

//2.当n和m为小数时，会先通过parseInt转换为整数在进行查询操作
let arr2 = [0,1,2,3,4,5],
    newArr2 = arr2.slice(1.9,2.1);//从索引1开始查询到索引为2的元素
console.log(newArr2,arr2)// => [1],[0,1,2,3,4,5]

//3.当n是负数时，m不能大于n 否则返回空数组；表示从数组的末尾开始查找，数组最后一项索引为-1，越往前越小（原正数索引-arr.length=当前的负数索引）
let arr3 = [0,1,2,3,4,5],
    newArr3 = arr3.slice(-3,-1);//从索引-2开始向前查找到索引为-1的元素
console.log(newArr3,arr3);// => [3,4],[0,1,2,3,4,5],

//4.当n或m不是有效数字时，先通过parseInt转换为有效数字，转换为NaN则默认为0
let arr4 = [0,1,2,3,4,5],
    newArr4 = arr4.slice('1.9','哈哈哈');//从索引1开始向后查询到索引为0的元素，返回空数组
console.log(newArr4,arr4)// => [],[0,1,2,3,4,5]

let arr5 = [0,1,2,3,4,5],
    newArr5 = arr4.slice('1.9','3.1');//从索引1开始向后查询到索引为3的元素，返回空数组
console.log(newArr4,arr4)// => [1,2],,[0,1,2,3,4,5]

 5.将数组转换为字符串：

5.1 toString()

toString方法不会改变原数组

/*
    数组.toString:将数组转换为字符串
    @params:
    @return:转换后的字符串
*/

let arr = [1,'2',undefined,{name:"Zack"}],
    newArr = arr.toString();
console.log(newArr,arr)

结果为：  

5.2 join()

join方法不会改变原数组

/*
    数组.join([string]):将数组以指定分隔符的形式分隔成字符串
    @params:指定的分隔符（字符串格式）
    @return:转换后的字符串
*/

let arr = [0,1,2,3,4,5],
    newArr = arr.join('|');
console.log(newArr,arr)

结果为： 

6.数组拼接 

6.1concat()

concat方法不会改变原数组 

/*
    数组.concat(): 在指定数组后面将多个元素拼接成一个新数组
    @params:多个任意类型值
    @return:返回拼接后的新数组
*/

let arr = [1,2,3,4],
    arr2 = [5,6,7],
    newArr = arr.concat(arr2,'morning',{name:"Zack"})
console.log(newArr,arr,arr2)

 结果为：

7.检测数组中是否包含某一项

7.1 indexOf()

indexOf不会改变原数组

/*
    数组.indexOf(n,m):检测要检索这一项的值在数组中第一次出现的位置
    @params:
        n:要检索的值
        m:从索引m开始，不填则默认从0开始（非必填）
    @return:
        要检索的这一项第一次出现的索引，未找到则返回-1
*/

let arr = [0,1,2,3,4,5,'morning',7,'morning'];
console.log(arr.indexOf('morning'))//=>6
console.log(arr.indexOf('morning',7))//=>8

 结果为：

7.2 lastIndexOf()

lastIndexOf方法不会改变原数组 

/*
    数组.lastIndexOf():查找需要检索的元素在数组中最后一次出现的索引
    @params:
    @return: 需要检索的元素最后一次出现的索引，没有则返回-1
*/

let arr = [0,1,2,3,4,5,'morning',7,'morning'];
console.log(arr.lastIndexOf('morning'))//=>8

结果为：  

7.3 includes()

    includes方法不会改变原数组

/*
    数组.includes(n,m):验证数组是否包含某项元素
    @parmas:
        n:需要查询的元素
        m:从索引m开始向后检索,默认为0，如果为负数，且它大于数组长度则会重置为从 0 开始。
    @return:若指定数组包含返回true否则返回flase
*/
    let PersonA = {
      name: "Zack",
      age: 21
    }
    let arr = [0, '1', PersonA, 'morning'];
    console.log(arr.includes(PersonA));//=> true


    let arr2 = [0, '1', PersonA, 'morning'];
    console.log(arr2 .includes(PersonA，-5));//=> true

结果都为： 

8.数组排序

8.1 reverse()

reverse方法会改变原数组

/*
    数组.reverse():将数组的元素倒过来排序
    @params:
    @return:重新排序后的新数组
*/

let arr = [1,2,5,4,3,6,7],
    newArr = arr.reverse();
console.log(newArr,arr)

结果为： 

8.2 sort()

sort方法会改变原数组

/*
    数组.sort(fn => fn()):将数组按照指定的顺序进行排序
    @params:
        函数（可有可无），如果需要实现多位数正常排序，需要传递函数，并使返回值为a-b(升序)或者b-a（降序），属于冒泡排序机制
    @return:
        排序后的新数组
*/

let arr = [12,45,6,21,51,81],
    //升序：
    newArr = arr.sort((a,b) => (a-b));
console.log(newArr,arr)

结果为：

//降序
let arr = [12,45,6,21,51,81],
    newArr2 = arr.sort((a,b) => (b-a));
console.log(newArr2,arr)

结果为：

相关文章