js数组中添加、删除、更改、查询元素方法

数组添加元素

1.Array.push() 追加到后面 – 原数组

let arry = [1,2,3,4];
array.push(5,6)

2.Array.unshift()追加到前面 – 原数组

let array = [1,2,3,4];
array.unshift(2,4)

3. Array.splice(索引位置,个数，添加的元素) – 原数组

let array = [1,2,3,4,5];
array.splice(array.length,0,6,8,9);//第二个参数为0的时候，是可以添加参数的，1的时候是删除

4.Array.length – 原数组

let array=[1,2,3,4,5];
array[array.length]=6

5. … 新数组

[...[1,2,3,4],5]

6.获取数组指定位置的元素

6.1 通过下标直接获取指定元素

let arr = [1, 4, 5, 8, 10]
// 获取数组的第一个元素
let num1 = arr[0]
// 获取数组的最后一个元素
let num2 = arr[arr.length - 1]
// 获取数组的倒数第二个元素
let num3 = arr[arr.length - 2]

console.log(num1, num2, num3); // 1 10 8

6.2 通过 slice ()方法获取

let arr = [2, 4, 6, 8, 10]
// 获取数组的第一个元素
let num4 = arr.slice(0, 1)
// 获取数组的最后一个元素
let num5 = arr.slice(-1)
// 获取数组的倒数第二个元素
let num6 = arr.slice(-2, -1)

console.log(num4[0], num5[0], num6[0]); // 2 10 8

6.3 数组 at() 方法

let arr2 = [2, 4, 6, 8, 10]
// 获取数组的第一个元素
let num4 = arr2.at(0)
// 获取数组的最后一个元素
let num5 = arr2.at(-1)
// 获取数组的倒数第二个元素
let num6 = arr2.at(-2)

console.log(num4, num5, num6); // 2 10 8

获取指定位置不存在的元素返回 undefined

let arr = [2, 4, 6, 8, 10]

console.log(arr[5]); // undefined

获取类数组指定位置元素

let likeArr = {
  length: 2,
  0: 'vue',
  1: 'react'
}
let lang = Array.prototype.at.call(likeArr, 0)

console.log(lang); // vue

7.删除元素

7.1 shift() 方法用于把数组的第一个元素从其中删除，并返回第一个元素的值
注意： 此方法改变数组的长度

提示: 移除数组末尾的元素可以使用 pop() 方法

let arr = [1,2,3,4,5]
arr.shift()  // 1
// arr => [2,3,4,5]

slice() 方法可从已有的数组中返回选定的元素

slice() 方法可提取字符串的某个部分，并以新的字符串返回被提取的部分

注意： slice() 方法不会改变原始数组

let arr = [1,2,3,4,5]
let newArr = arr.slice(1)
// arr => [1,2,3,4,5]
// newArr => [2,3,4,5]

splice() 方法用于添加或删除数组中的元素

注意：这种方法会改变原始数组

返回值
如果删除一个元素，则返回一个元素的数组。 如果未删除任何元素，则返回空数组

let arr = [1,2,3,4,5]
let newArr = arr.splice(0, 1)
// arr => [2,3,4,5]
// newArr => [1]

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

let arr = [1,2,3,4,5]
arr.pop() //  5
// arr => [1,2,3,4]

let arr = [1,2,3,4,5]
let newArr = arr.slice(0, arr.length - 1)
// arr => [1,2,3,4,5]
// newArr => [1,2,3,4]

删除数组中某个指定下标的元素

splice 删除

let index = 3
let arr = [1,2,3,4,5]
 arr.splice(index, 1) // [4]

// arr => [1,2,3,5]

for循环删除

let index = 3, // 删除的id
    arr = [1,2,3,4,5],
    arrLen = arr.length,
    newArr = [];
 
for (let i = 0; i < arrLen; i++) {
    if (i !== index) {
        newArr.push(arr[i])
    }
}
 
// arr => [1,2,3,4,5]
// newArr => [1,2,3,5]

delete删除

JavaScript提供了一个delete关键字用来删除（清除）数组元素

要注意的是，使用delete删除元素之后数组长度不变，只是被删除元素被置为empty了

let index = 3
let arr = [1,2,3,4,5]
delete arr[index] 
// arr  = > [1, 2, 3, empty, 5]

删除数组中某个指定元素

splice 删除

let value = 'b',
arr = ['a','b','c','d']
 
arr.splice(arr.indexOf(value), 1) // ['b']
// arr => ['a','c','d']

filter 删除

var arr = ['a','b','c','d'],
value = 'b'
 
arr = arr.filter(item => item != value)
// arr => ['a','c','d']

for 删除

let value = 'b',
    arr = ['a','b','c','d'],
    arrLen = arr.length,
    newArr = []
 
for (let i = 0; i < arrLen; i++) {
    if (arr[i] !== value) {
        newArr.push(arr[i])
    }
}
 
// 其他forEach、map、for of循环同理

Set 删除

let arr = ['a','b','c','d']
    value = 'b'
let newSet = new Set(arr)
newSet.delete(value)
let newArr = [...newSet]

// newArr => ['a','c','d']

8 修改元素

使用splice() 修改数组元素。原理很简单，就是向指定位置插入任意数量的元素，且同时删除任意数量的元素

var arr = [1,2,3,4,5];
arr.splice(2, 1, 10);
 
console.log(arr); //[1, 2, 10, 4, 5]

补充

在JS中，扩展运算符(spread)是三个点(...)，剩余运算符也是三个点(...)

一  作用

扩展运算符

1. 数组的复制 / 对象的复制

var arr1 = ['hello'];
var arr2 = [...arr1];
console.log(arr2);  // ['hello']
 
var obj1 = {name: '93 Million Miles'}
var obj2 = {...obj1};
console.log(obj2);  // {name: '93 Million Miles'}

2. 数组的合并 / 对象的合并

var arr1 = ['1','2','3'];
var arr2 = ['one','two','three'];
var mergeArr = [...arr1,...arr2];
mergeArr;  // ['1', '2', '3', 'one', 'two', 'three']
 
var obj1 = {name:'chuichui'};
var obj2 = {height:176};
var mergeObj = {...obj1,...obj2};
mergrObj;  // { name: "chuichui", height: 176 }

3. 字符串转数组

var arr1 = [...'hello'];
arr1;  // ['h', 'e', 'l', 'l', 'o']

4. 函数传参

可以把数组中的参数迭代为函数参数

function f(x,y,z) {
  console.log(x+y+z);
}；
var args = [1,2,3];
f(...args);  // 6

5、由于扩展运算符可以展开数组，所以可以代替函数的apply方法

// ES5 的写法
function f(x, y, z) {
  // ...
}
var args = [0, 1, 2];
f.apply(null, args);
 
// ES6 的写法
function f(x, y, z) {
  // ...
}
let args = [0, 1, 2];
f(...args);

二、 剩余运算符

剩余运算符相比来说是扩展运算符的逆运算

1. 把逗号隔开的值序列组合成一个数组

//当函数参数个数不确定时，用 rest运算符
function f1(...args) {
  console.log(args); // [1,2,3]
}
 
f1(1,2,3);
 
//当函数参数个数不确定时的第二种情况
function f2(item, ...arr) {
  console.log(item); // 1
  console.log(arr);  // [2,3]
}
f2(1, 2, 3);
 
//rest运算符配合 解构使用
let [a,...temp] = [1, 2, 4];
console.log(a);    // 1
console.log(temp); // [2,4]