前言

在JavaScript中关于一些操作数组的方法大致可以分为三大类,一类的操作方法会改变原数组,而另一类不会改变原数组,并且会返回新的数组。最后是遍历数组的方法。

改变原数组

push()和pop()

push()和pop()分别是向数组的最后增加或者删除成员,并即时更新索引,及length属性的值。push()可以传入多个成员。
let arr = [1, 2, 3, 4]
arr.push(5);
console.log(arr) //1, 2, 3, 4, 5
let arr = [1, 2, 3, 4]
arr.pop()
console.log(arr)// 1, 2, 3

shift()和unshift()

unshift()和shift()分别是从数组的前面增加或删除成员。unshift()也可以传入多个参数。
let arr = [1, 2, 3, 4]
arr.unshift(0)
console.log(arr) // 0, 1, 2, 3, 4
let arr = [1, 2, 3, 4]
arr.shift()
console.log(arr) // 2,3,4

splice()

splice()可以说是上述增删方法的汇总方法,它可以指定从数组增加删除成员,返回被删除的项目,
参数说明:
至少需要传入1个参数。当只传入一个参数时,默认该参数表示在数组中从第N项开始删除后面所有项见code1
第一个参数是必传参数,整数,规定添加或删除数组成员的的位置,传入负数的话,则表示逆向操作。
第二个参数是可选参数,表示删除数组成员的个数,可以传0,传0表示不删除。
第三个参数可以传入多个。表示增加的数组成员内容。
另外如果该操作删除了诺干数组成员,那么将会返回被删除的数组成员组成一个新的数组。

只传入一个参数

如果只传入一个正整数N,那么表示从第N项开始,删除后面所有的成员。

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

image.png

如果传入负整数-M,则表示从数组末项开始往前删除M项

let arr = [0,1,2,3,4,5]
console.log(arr.splice(-2))

image.png

传入两个参数

如果传入两个参数(N,M),则表示从第N个开始,删除M项成员。N为负整数时同上。

let arr = ['0', '1', '2', '3', '4', '5']
arr.splice(1,0)
console.log(arr)

image.png

传入三个参数

当传入三个参数时,第三个参数可以是字符串、数字、布尔值,甚至是对象数组等

let arr = ['0', '1', '2', '3', '4', '5']
arr.splice(2,1,'4','a', 8, {name: '泰戈尔', age: 18}, true)
console.log(arr)

image.png

sort()数组的排序

sort()是对数组的元素进行排序,并返回排序后的数组,其排序原理是根据字符串Unicode码排序,所以进行排序前,要先将数组成员转换成字符串

默认排序

sort()默认排序数组只比较元素的第一个单位值,当位数多了之后它的排序是不准确的例如:

let arr = [108,30,60,804,502]
arr.sort()
console.log(arr)

image.png

多条件排序

多条件排序可以传入一个自定义函数,函数中可以根据条件来排序数组,例如:

let arr = [{id:10,age:2},{id:5,age:4},{id:6,age:10},{id:9,age:6},{id:2,age:8},{id:10,age:9}]
arr.sort(function(a,b){
         if(a.id === b.id){// 如果id的值相等,按照age的值降序
             return b.age - a.age
         }else{ // 如果id的值不相等,按照id的值升序
             return a.id - b.id
         }
     })
console.log(arr)

reserve()反转数组

reserve()可以反转数组的成员例如:

let arr = [1,2,3];
console.log(arr.reverse());
console.log(arr);

image.png

ES6: copyWithin()

copyWithin()指定位置的成员复制到其他位置
首先看一下参数:
第一个参数T:必传参数,从T开始替换数据,如果是负数则从数组的末项开始。
第二个参数N:是可选参数,默认值是0,表示从N开始选择一个区间,准备截取该区间内的值替换。
第三个参数M:是可选参数,默认值是数组的长度,表示到达M位置前停止截取,负数表示从数组末尾开始。

[1, 2, 3, 4, 5].copyWithin(0,1,3)
[1, 2, 3, 4, 5].copyWithin(0,-3,-1)

image.png

ES6: fill()

fill()将传入的值填充到数组成员中,
参数说明:
第一个参数T:T表示要填充给数组的值。
第二个参数N:表示想要开始填充的位置,默认值是0.
第三个参数M:表示填充结束的位置,默认值是数组的length。

['a', 'b', 'c'].fill('dd')
['a', 'b', 'c'].fill(88,1,2)

image.png

不改变原数组

ES5:
slice、join、toLocateString、toStrigin、cancat、indexOf、lastIndexOf、
ES7:
includes

slice()

slice()方法返回一个从开始到结束(不包括结束)选择的数组的区间并且原数组不会被修改。值得注意的是:slice对一维原始数据类型的数组是深拷贝,对多维引用类型的数组是浅拷贝

let a= ['hello','world'];
let b=a.slice(0,1); // ['hello']
console.log(b)
let a= ['hello','world'];
    let b=a.slice(0,1); // ['hello']
    a[0]='改变原数组';
    console.log(a,b); // ['改变原数组','world'] ['hello']
    b[0]='改变拷贝的数组';
     console.log(a,b); // ['改变原数组','world'] ['改变拷贝的数组']
let a= [{name:'OBKoro1'}];
    let b=a.slice();
    console.log(b,a); // [{"name":"OBKoro1"}]  [{"name":"OBKoro1"}]
    // a[0].name='改变原数组';
    // console.log(b,a); // [{"name":"改变原数组"}] [{"name":"改变原数组"}]
    // b[0].name='改变拷贝数组',b[0].koro='改变拷贝数组';
    //  [{"name":"改变拷贝数组","koro":"改变拷贝数组"}] [{"name":"改变拷贝数组","koro":"改变拷贝数组"}]

可以看到如果数组的元素是简单数据类型,那么改变其中的值,原数组不会发生变化。
如果数组的元素是引用数据类型的话,改变其中的一个,原数组也会发生变化。

join()

join()方法用于把数组中的所有元素通过指定的分隔符对数组进行分割,在数组的每一项之间插入该分隔符,该操作会返回处理后的字符串。

let a= ['hello','world'];
let str=a.join(); // 'hello,world'
let str2=a.join('+'); // 'hello+world'
如果数组里面是多维数组的时候,它可以继续切割,但是如果有Object类型的元素的话,那么它将无法进行切割,该操作会将Object元素分割成[Object, Object]。
let b= [{name:'OBKoro1',age:'23'},'test'];
let str2 = b.join(); // [object Object],test

image.png

toLocaleString()

toLocaleString()返回一个表示数组元素的字符串,该字符串是由数组中的每个元素的toLocaleString()返回值调用的join()方法用逗号隔开的形式组成。

let a=[{name:'OBKoro1'},23,'abcd',new Date()];
let str=a.toLocaleString(); // [object Object],23,abcd,2018/5/28 下午1:52:20
console.log(str)

image.png

toString()

它和join()方法类似,该方法可以把数组转换为每一项由逗号链接起来的字符串。

  • 其实该方法和join()方法一样,但是能做的却没有join()多,因为它不能自定义分隔符。
let b= [ 'toString','演示'].toString(); // toString,演示
let a= ['调用toString','连接在我后面']+'啦啦啦'; // 调用toString,连接在我后面啦啦啦

cancat()

cancat()方法可以用于合并至少两个数组,然后返回一个新的数组。

let a = [1, 2, 3];
let b = [4, 5, 6];
//连接两个数组
let newVal=a.concat(b); // [1,2,3,4,5,6]
// 连接三个数组
let c = [7, 8, 9]
let newVal2 = a.concat(b, c); // [1,2,3,4,5,6,7,8,9]
// 添加元素
let newVal3 = a.concat('添加元素',b, c,'再加一个'); 
// [1,2,3,"添加元素",4,5,6,7,8,9,"再加一个"]
// 合并嵌套数组  会浅拷贝嵌套数组
let d = [1,2 ];
let f = [3,[4]];
let newVal4 = d.concat(f); // [1,2,3,[4]]

这里在开发中用这种方法合并数组,但是相同的项也会合并到新数组中,所以必要时需要去重操作。

new Set()

let a = [1, 2, 3, 4];
let b = [4, 5, 6, 2];
let newVal = d.concat(f);
let arr = new Set(newVal)
console.log(Array.from(arr))

使用new Set()配合Array.form()进行数组合并后的去重。

ES6 ...扩展运算符

在ES6当中我们还可以直接使用扩展运算符进行合并数组。

let a = [2, 3, 4, 5]
let b = [ 4,...a, 4, 4]
console.log(a,b); //  [2, 3, 4, 5] [4,2,3,4,5,4,4]

关于数组中的索引的操作方法

indexOf()

返回在数组中

最后修改:2021 年 12 月 28 日
如果觉得我的文章对你有用,可以对我进行您主观即不限定金额大小的打赏。