JS数组

JS数组是JS内置的一个对象，它的创建方式有两种，一种是用new的方式创建，一种是用Array构造函数创建，另一种是用数组字面量[]创建，在开发中通常都会使用数组字面量的方式创建对象，如下：

1
2
3
4
//使用new的方式创建数组
let names = new Array('hailee','david','chris')
//使用字面量的方式创建数组
let names = ['hailee','david','chris']

数组常用的方法

在开发的过程中使用数组提供的方法场景比较多，如需要对数组元素进行增加、删除、替换等操作。以下是一些常用的方法：

unshift(),shift()

  1. unshift(): 在数组头部添加元素，返回的是数组的长度。

  2. Shift(): 在数组头部删除元素，返回的是被删除的那一个元素。

1
2
3
4
5
6
7
8
9
10
//unshift()方法的参数可以有一个或者多个，会依次添加到数组头部
let friends = ['hailee','david','chris']
let result = friends.unshift('hailey','haley')
console.log(result) //5

//shift()方法没有参数，调用这个方法一次就会删除数组头部的一个元素,返回被删除的那个元素
let removeFriend = friends.shift()
console.log(removeFriend)//'hailey'

//注意：这两个方法会影响原数组

push(),pop()

  1. push(): 在数组尾部添加元素，返回的是数组的长度。

  2. pop(): 在数组尾部删除元素，返回的是被删除的那一个元素。

1
2
3
4
5
6
7
8
9
10
//push()方法的参数可以有一个或者多个，会依次添加到数组尾部
let friends = ['hailee','david','chris']
let result = friends.push('hailey','haley')
console.log(result) //5

//pop()方法没有参数，调用这个方法一次就会删除数组尾部的一个元素,返回被删除的那个元素
let removeFriend = friends.pop()
console.log(removeFriend)//'chris'

//注意：这两个方法也会影响原数组

concat(),slice(),splice()

  1. concat(): 用于合并一个或者多个数组,返回一个新数组，不会改变原数组。

  2. slice(): 返回由方法两个参数之间的包括第一个参数，不包括第二个参数的新数组，不会改变原数组。

  3. splice():用于删除、替换、增加数组项，会改变原数组。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
//concat()方法接收一个或者多个数组类型的参数
let oldFriends = ['hailee','david','chris']
let newFriends = ['tom','sam']
let result1 = oldFriends.concat(newFriends)
console.log(result1)  //['hailee','david','chris','tom','sam']

//slice()方法接收2个参数
let result2 = result1.slice(0，3)
console.log(result2)  // ['hailee','david','chris']

//1.splice(index,deleteNum):两个参数是删除的操作，index是从哪个位置开始删除，number是删除几个元素,返回被删除元素组成的数组
let result3 = oldFriends.splice(2,1)
console.log(result3) // ['chris']

//2.splice(index,deleteNum,insertEle):大于或者等于三个参数是插入或者替换操作，index是从哪个位置开始删除或者插入元素，deleteNum是删除几个元素,insertEle是要插入的元素,这个方法返回被删除元素组成的数组，没有就是空数组，但是原数组会改变
let result4 = oldFriends.splice(0,1,'tom','sam')  
console.log(result4) //['hailee']
console.log(oldFriends)//['tom', 'sam', 'david', 'chris']

sort(),reverse()

  1. sort(): 对数组的元素进行排序，并返回当前数组排序后的结果，默认排序是将元素转换为字符串，然后按照它们的 UTF-16 码元值升序排序,所以一般用数组排序可以传入一个比较函数。

  2. reverse(): 对数组元素进行翻转，返回当前数组翻转后的结果。

1
2
3
4
5
let array = [25,34,32,53,54]
let result = array.reverse()  //翻转数组
console.log(result) //[54,53,32,34,25]
console.log(array.sort((a,b)=> a - b)) //升序 [25,32,34,53,54]
console.log(array.sort((a,b)=> b - a)) //降序 [54,53,34,32,25]

forEach(),every(),some()…

  1. forEach(): 对数组的每个元素执行一次给定的函数,方法没有返回值。

  2. every() 这个方法对于需要验证数组中每个元素是否都符合某种标准的情况特别有用,是否每个学生成绩都及格了，是否每个SKU都有库存,是否每个员工年龄都超过了18岁等，符合条件就返回true！

  3. some() 只要一个数组项满足要求就返回true，这个班有学生考上了清华，虽然只有一个学生考上了。

  4. filter():对数组元素进行筛选，满足条件就会添加到新数组中，不满足条件就会被过滤掉。

  5. map(): 返回新数组由原数组中的每个元素都调用一次提供的函数后的返回值组成。

1
2
3
4
5
6
7
8
9
10
11
let friends = ['hailee','david','chris']
friends.forEach((e) => console.log(e));//依次输出“hailee” “david” “chris”
let ages = [25,34,32,53,54]
let result1 = ages.every((e) => e>=20);//依次输出“hailee” “david” “chris”
console.log(result1) //true
let result2 = ages.some((e) => e>=50);
console.log(result2) //true
let result3 = ages.filter((item,index,array)=>item>20)
console.log(result3) //[25,34,32,53,54]
let result4 = ages.map((item,index,array)=>item*2)
console.log(result4) //[05,68,64,106,108]

reduce()

reduce(): 方法对数组中的每个元素按序执行一个提供的reducer 函数，每一次运行reducer会将先前元素的计算结果作为参数传入，最后将其结果汇总为单个返回值。

1
2
3
4
let array = [1,2,3,4,5]
let result1 = array.reduceRight((pre,cur,index,array)=>{
    return pre + cur;
 },5)

数组去重

  1. 使用indexOf()跟filter()方法
1
2
3
// 数组去重
let array = ['hailee','hailee','25','54']
array.filter((item,index,arr)=>arr.indexOf(item)==index) //['hailee','25','54']
  1. Array.from()跟Set数据结构
1
2
let array = [1,2,3,4,5,6,5,4,3,2,1]
console.log(Array.from(new Set(array))) //[1,2,3,4,5,6]
  1. Set数据结构跟解构赋值
1
2
3
let me = ['hailee','hailee','25','26','starbucks','cups']
let newArray = [...new Set(me)]
console.log(newArray,'newArray') //['hailee','25','26','starbucks','cups']

总结

数组常用的方法有很多，这是我常用的一些数组的方法，在对数组进行操作的时候可以根据数据类型选择适合的方法以及操作，涉及到数组去重的方法还有好几个，下次再更新！