JS中常见数组的处理方法

#JS中常见数组的处理

基础操作方法

push(）末尾添加数据

作用: 就是往数组末尾添加数据

返回值: 就是这个数组的长度

let colors = []; // 创建一个数组
let count = colors.push("red", "green");
console.log(count) // 2

###unshift()/shift()

unshift()

作用: 就是在数组的头部添加数据

返回值: 就是数组的长度

shift()

作用: 头部删除一个数据

返回值: 就是删除掉的那个数据

 //unshift
 var arr = [10, 20, 30, 40]
 res=arr.unshift(99)
 console.log(arr);//[99,10,20,30,40]
 console.log(res);//5

//shift
 let arr = [10, 20, 30, 40]
 res=arr.shift()
 console.log(arr);[20,30,40]
 console.log(res);10

reverse() 翻转数组

作用: 就是用来翻转数组的

返回值: 就是翻转好的数组

var arr = [10, 20, 30, 40]
res=arr.reverse()
console.log(arr);//[40,30,20,10]	
console.log(res);//[40,30,20,10]

splice()

语法一: 数组名.splice(开始索引,多少个)

作用: 就是用来截取数组的

返回值: 是一个新数组里面就是你截取出来的数据

语法二: 数组名.splice(开始索引,多少个,你要插入的数据)

作用: 删除并插入数据

注意: 从你的开始索引起

返回值: 是一个新数组里面就是你截取出来的数据

let arr = ["a","b","c","d","e"]
let arr1 = arr.splice(1)         //arr = ["a"]  arr1=["b","c","d","e"]
let arr2 = arr.splice(1,3)      //arr = ["a","e"]  arr2 = ["b","c","d"]
let arr3 = arr.splice(1,3,"f")  //arr=["a","f","e"]  arr3=["b","c","d"]

indexOf() 从左检查数组中有没有这个数值

作用: 就是检查这个数组中有没有该数据，如果有就返回该数据第一次出现的索引，如果没有返回 -1

//indexOf 语法一
var arr = [10, 20, 10, 30, 40, 50, 60]
res = arr.indexOf(10)  //indexof(要查询的数据)
console.log(res);  // 0

//indexOf  语法二
var arr = [10, 20, 10, 30, 40, 50, 60]
res = arr.indexOf(10,1)   //indexof（要查询的数据，开始索引）
console.log(res); // 2

slice()

作用: 就是截取数组中的一部分数据

返回值: 就是截取出来的数据放到一个新的数组中

注意: 包前不包后 包含开始索引不包含结束索引

let arr = [1, 2, 3, 4, 5];
let arr1 = arr.slice(1)           //[2,3,4,5] 
let subArr = arr.slice(1, 4);     // [2, 3, 4] (不包含索引4)
let copy = arr.slice();           // 创建浅拷贝 [1, 2, 3, 4, 5]

遍历方法

forEach()

作用: 就是用来循环遍历数组的代替了我们的for

返回值: 没有返回值如果真的说要有返回值就是undefined

let arr = [1,2,3,4,5]
let arr1 = arr.forEach((item,index,self)=>{
	//具体逻辑
    console.log(arr1);   //undefined（无返回值）
})

map()

作用：就是用来映射

返回值: 必然是一个数组一个映射完毕的数组；这个数组合原数组长度一样

let arr = [1, 2, 3, 4, 5]
console.log('原始数组 : ', arr);
let res = arr.map((item) => {
    return item * 10
})
console.log(res);  //[10,20,30,40,50]

filter()

作用：数据筛选

返回值: 如果有就是过滤(筛选)出来的数据保存在一个数组中；如果没有返回一个空数组

let arr = [1,2,3,4,5,6]; 
let arr1 = arr.filter((item,index,self)=>{ 
    console.log(item) // -> 1,2,3,4,5,6 
    console.log(index) // -> 0,1,2,3,4,5 
    console.log(self) // -> [1,2,3,4,5,6] 
    return item > 3 
}) 

console.log(arr1) // -> [4,5,6]

find()

作用: 用来获取数组中满足条件的数据

返回值: 如果有就是满足条件的第一个数据；如果没有就是undefined

let arr = [1, 2, 3, 4, 5]
let res = arr.find((item) => {
    return item > 3
})
console.log(res) //4

every() ：判断数组是不是满足所有条件

作用: 主要是用来判断数组中是不是每一个都满足条件

只有所有的都满足条件返回的是true

只要有一个不满足返回的就是false

返回值: 是一个布尔值

let arr = [1, 2, 3, 4, 5]
let res = arr.every((item)=>{
    return item > 0
})
console.log(res);  //打印结果  true

let res1 = arr.every((item)=>{
    return item > 1
})
console.log(res1);  //打印结果  false

some()：数组中有没有满足条件的

作用: 主要是用来判断数组中是不是每一个都满足条件

只有有一个满足条件返回的是true

只要都不满足返回的就是false

返回值: 是一个布尔值

let arr = [1, 2, 3, 4, 5]
let res = arr.some((item)=>{
    return item > 3
})
console.log(res); //true

归约方法

reduce()：数组的第一项开始，逐个遍历到最后，迭代数组的所有项，然后构建一个最终返回的值。

语法：数组名.redece( (prev,item,index,arr) => { },初始值)

prev：一开始就是初始值，当有了第一次结果以后，这个值就是第一次的结果

item: 表示数组中的每一项

index: 表示每一项对应的索引

作用：用来叠加

返回值：叠加后的结果

//累加
let arr = [1, 2, 3, 4, 5]
const arr1 = arr.reduce((prev,item)=>{
   return prev += item
},0)
  console.log(arr1); // 15

//更复杂的用法
let arr = ["苹果","苹果","橘子","香蕉","香蕉","香蕉"]
const arr1 = arr.reduce((prev,item)=>{
    if(!prev[item]){  
        prev[item]=0         //如果没有这种水果先设为0
    }
    prev[item]++ 
    return prev      
},{})         //初始值是一个空对象

  console.log(arr1);  // {苹果: 2, 橘子: 1, 香蕉: 3}