js的数组常用操作方式

待我称王封你为后i 2022-12-10 08:51 106阅读 0赞

> js的数组常归操作方式有哪些？？？请往下看

**join()** 数组转字符串拼接

// 原数组不变,返回值为带有连接符的字符串
    const arr = ['hello','world'];
    const newArr = arr.join(',');  // 参数：连接符
    console.log(arr); // ['hello','world'] 
    console.log(newArr); // 'hello,world'

**unshift()** 数组前增加一项

// 原数组被改变,返回值为数组新的索引值
    const arr = ['hello','world'];
    const newArr = arr.unshift('new'); // 参数：增加项
    console.log(arr); // ['new','hello','world'] 
    console.log(newArr); // arr.length

**shift()** 数组前删除一项

// 原数组被改变,返回值为删除项
    const arr = ['hello','world'];
    const newArr = arr.shift(); // 参数：空
    console.log(arr); // ['world']
    console.log(newArr); // 'hello'

**push()** 数组尾追加一项或多项

// 原数组被改变,返回值为数组新的索引值
    const arr = ['hello','world'];
    const newArr = arr.push('new'); // 参数：追加项
    console.log(arr); // ['hello','world','new',....]
    console.log(newArr); // arr.length

**pop()** 数组尾删除一项

// 原数组被改变,返回值为被删除项
    const arr = ['hello','world'];
    const newArr = arr.push('new'); // 参数：空
    console.log(arr); // ['hello']
    console.log(newArr); // 'world'

**slice()** 删除数组项

// 原数组不变,返回值为被删除项
    const arr = ['hello','world'];
    const newArr = arr.slice(0,1); 
    /* 参数： start：值为数组索引，当值为0时，数组项不变；删除索引项(未传入end时),哪里开始选取(传入end时) end：哪里结束选取 */
    console.log(arr); // ['hello','world']
    console.log(newArr); // ['hello']

**concat()** 数组项拼接(连接)

// 原数组不变,返回值为拼接后的新数组
    const arr = ['hello','world'];
    const arrA = ['new','123'];
    const newArr = arr.concat(arrA); // 参数：拼接(连接)数组项
    console.log(arr);  // ['hello','world']
    console.log(newArr); // ['hello','world','new','123']

**…** 数组连接,与concat效果相同，语法使用上更加简洁

// 原数组不变,返回值为拼接后的新数组
    const arr = ['hello','world'];
    const arrA = ['new','123'];
    const newArr = [...arr,...arrA]; // 参数：拼接(连接)数组项
    console.log(arr);  // ['hello','world']
    console.log(newArr); // ['hello','world','new','123']

**toString() || toLocaleString()** 数组转字符串

// 原数组不变,返回值为转换后的字符串
    const arr = ['hello','world'];
    const newArr = arr.toString(); // 参数：空
    console.log(arr);  // ['hello','world']
    console.log(newArr); // 'hell,world'

**indexOf() || lastIndexOf()** 数组检索指定项

// 原数组不变,返回值：被检索项索引值。检索项存在时，返回对应索引
    const arr = ['hello','world'];
    const newArr = arr.indexOf('world'); // 参数：item:检索项,start:从哪里开始检索
    console.log(arr);  // ['hello','world']
    console.log(newArr); // 检索项存在时，返回对应索引值,检索项不存在时,返回-1

**reverse()** 数组项反转

// 原数组不变,返回值：被检索项索引值。检索项存在时，返回对应索引
    const arr = ['hello','world'];
    const newArr = arr.reverse(); // 参数：空
    console.log(arr);  // ['world','hello']
    console.log(newArr); // ['world','hello']

**sort()** 数组项排序

// 按字符编码排序,原数组被改变,返回值为排序后的新数组
    const arr = ['hello','world','new','123'];
    const newArr = arr.sort(); // 参数：空
    console.log(arr);  // ["123", "hello", "new", "world"]
    console.log(newArr); // ["123", "hello", "new", "world"]

## splice 实现删除/添加/替换数组项 ##

**splice()** 删除数组项

// 删除数组项,原数组被改变,返回值为删除项
    const arr = ['hello','world'];
    const newArr = arr.splice(0,1); // 参数：2个参数时,index：从哪里开始，howmany：删除几项
    console.log(arr);  // ["world"]
    console.log(newArr); // ["hello"]

**splice()** 添加/替换数组项

// 删除数组项,原数组被改变,返回值：howmany为0时,返回值为空;howmany大于0时,返回值为被替换掉的数组项
    const arr = ['hello','world'];
    const newArr = arr.splice(0,1,'new','123'); // 参数：3个或3个以上参数时,index：从哪里开始;howmany：替换几项;data1,data2,...,需要添加或替换的数组项
    console.log(arr);  // ["new", "123", "world"]
    console.log(newArr); // ["hello"]

以上便是自己近期学习整理的一份 javascript 常规数组操作，以便自己查阅，不足之处欢迎你在评论区批评指正，能够与你共同交流学习  
[后盾人：向军][Link 1]  
主要是根据这位老师讲学的视频，看起来很有意思，很有趣，所以才决定自己整理一份

[Link 1]: https://www.houdunren.com/Edu/system