JavaScript操作数组的方法总结

数组

JavaScript操作数组的方法 , 包含ES6的方法

join

arr.join(分隔符)

作用: 将数组元素拼接为字符串,以分隔符分割,默认是逗号分割

var arr =[1,2,3]
console.log(arr.join('-'))  //1-2-3

push 和 pop

作用 : 操作数组末尾

push() 添加元素到数组末尾,返回修改后数组的长度

pop() 从数组末尾移除最后一项,返回移除的项

注意 : 会改变原数组

var  arr = ['zs','ls','ww','mz']
var len = arr.push('pp')
console.log(len)   //5
console.log(arr)  //['zs','ls','ww','mz','pp']

var item = arr.pop()
console.log(item)  //'pp'
console.log(arr) ['zs','ls','ww','mz']

shift 和 unshift

作用 : 操作数组开头

shift() 删除第一项,返回删除的值,如果数组为空,返回undefined

unshift() 添加到数组前面,返回长度

注意 : 会改变原数组

var  arr = ['ls','ww','mz']
var len = arr.unshift('zs')
console.log(len)   //4
console.log(arr)  //['zs','ls','ww','mz']

var item = arr.shift()
console.log(item)  //'zs'
console.log(arr) ['ls','ww','mz']

sort

作用 : 对数组排序 , 按照字母/首字母排序

注意:

1. 会改变原数组
2. 不传参,默认升序

//排序,先从第一个字符比较,相同,再比较第二个(无论是字符串还是数字)
//默认无参数(升序)
//字符串排序
let arr = ['a','bs','bc','ed','d']
console.log( arr.sort() )
//数字排序
arr2 = [13, 24, 51, 3 ,4,23];
console.log(arr2.sort());//[ 13, 23, 24, 3, 4, 51 ] 
console.log(arr2); //[ 13, 23, 24, 3, 4, 51 ](元数组被改变)

//sort要传一个回调函数,两两比较
//a-b  升序   b-a 降序
arr2 = [13, 24, 51, 3 ,4,23];
console.log(arr2.sort( (a,b) => a-b ));//[ 3, 4, 13, 23, 24, 51 ]
console.log(arr2); //[ 3, 4, 13, 23, 24, 51 ](元数组被改变)

reserve

作用 : 翻转数组

注意: 会改变原数组

var arr = [1,2,7,5,4]
console.log ( arr.reverse() ) //[4,5,7,2,1]
console.log ( arr ) //[4,5,7,2,1]

concat

作用 : 将元素/数组拼接到原数组中

返回 : 拼接后的新数组,不改变原数组

var arr1 = [2,5,4,8,67]
var newArr = arr1.concat(88,[13,24])
console.log(newArr) //[ 2, 5, 4, 8, 67, 88, 13, 24 ]

slice

作用 : 复制一段内容

返回值: 复制片段的新数组,不改变原数组

var arr =[4,3,8,6,1]

//不传参  相当于复制整个数组
var newArr = arr.slice()   
console.log(newArr)   //[4,3,8,6,1]

//传一个参数,开始的下标 
var newArr = arr.slice(3)   
console.log(newArr)   //[1]

//传两个参数,开始的下标,结束下标 
var newArr = arr.slice(1,3)   
console.log(newArr)   //[3,8,6]

splice

作用 : 截取一段内容

返回值 : 截取片段的新数组 , 原数组会减少被截取的片段

var arr =[4,3,8,6,1]

//不传参,一个也不截取
var newArr = arr.splice()  //[]
console.log(arr)    //[4,3,8,6,1]

//传一个参  ,开始下标
var newArr = arr.splice(1)   //[3,8,6,1]
console.log(arr)   //[4]

//传两个参 ,开始下标,截取个数
var newArr = arr.splice(1,3) //[3,8,6]
console.log(arr)  //[4,1]

//多个参 ,开始截取下标,截取个数,添加的元素(在原数组删除的位置上添加)
var newArr = arr.splice(1,2,'haha','hehe')  //[3,8]
console.log(arr) //[4,'haha','hehe',6,1]

indexOf/lastIndexOf

作用 : 查找元素出现的位置

indexOf : 查找元素第一次出现的位置

lastIndexOf : 查找元素最后一次出现的位置

//一般用于数组的去重
if(arr.indexOf('a') != -1){
    newArr.push('a')
}

ES5遍历数组

forEach

作用: 用来替代for循环的

let arr = [1,2,3,4,5]
arr.forEach( (ele,index,array) => {
    //ele 表示数组的每一项
    //index 数组每一项的下标
    //array 当前遍历的数组
    console.log(ele)
} )

map

作用 : 重新整理数据的结构,数组长度不变

必须和return 配合使用

let arr = [1,2,3,4,5]
let newArr = arr.map( (ele,index,array) => {
    return ele*2
})
console.log(newArr)  //[2,3,6,8,10]

filter

作用 : 过滤出符合条件的元素 / 删除不符合条件的

返回值 : 符合条件元素组成的新数组

//删除<3的元素 / 过滤出>3的元素
let arr = [1,2,3,4,5]
let newArr = arr.filter( (ele,index,array) => {
    return ele > 3
} )
console.log(newArr) //[4,5]

some

作用 : 有一个满足条件的,就返回true

//判断数组是否包含奇数 (只要有一个满足)
let  arr = [2,4,6,8,10,21];
let  flag = arr.some( (ele,index,array) => {
    return ele%2 == 1
})
console.log(flag) //true

every

作用 : 所有的都满足,才返回true

//判断是否都是偶数
let arr = [2,4,6,8,10,21];
let flag = arr.every( (ele,index,array) => {
    return ele % 2 == 0
} )
console.log(falg) //false

reduce

作用 : 从左到右 ,对数组相邻两个元素计算 (求和/求阶乘)

//没有初始值 (如果数组为空,不设置初始值会报错)
let arr = [1, 2, 3, 4];
let sum = arr.reduce(function(prev, cur, index, array) {
    //prev 是初始值(或上一次执行回调返回的结果)
    //cur 是当前要操作的元素
    //index 是当前要操作元素的下标
    //array 是数组本身
    return prev + cur;
})
console.log(arr, sum); //[1,2,3,4]   10
//执行结果
//1  2  1   没有设置初始值,prev默认从数组第一个开始遍历
//3  3  2
//6  4  3


//设置初始值
var arr = [1, 2, 3, 4];
var sum = arr.reduce(function(prev, cur, index, arr) {
    //prev 是初始值(或上一次执行回调返回的结果)
    //cur 是当前要操作的元素
    //index 是当前要操作元素的下标
    //arr 是数组本身
    console.log(prev, cur, index);
    return prev + cur;
},0)
console.log(arr, sum); //[1,2,3,4]   10
//执行结果
//0 1 0
//1 2 1
//3 3 2 
//6 4 3

高级用法

//1.计算数组中每个元素出现次数
let arr = [1, 3, 2, 5, 2, 4, 2, 63, 1, 4, 2, 4, 2, 2, 3, 4]
let obj = arr.reduce((prev, next, index, arr) => {
    if (next in prev) {
        prev[next]++
    } else {
        prev[next] = 1
    }
    //一定要有返回值,将这一次的结果返回出去
    return prev
    //prev的初始值给{}
}, {})
console.log(obj)

//2.数组去重
let newArr = arr.reduce( (prev,next,index,array) => {
    if(prev.includes(next)){
        return prev
    }else{
        return prev.concat(next)
    }
},[])
//3.将二维数组转为一维
let arr = [[1, 2, 3], 3]
let newArr = arr.reduce((prev, next, index, array) => {
    return prev.concat(next)
}, [])
console.log(newArr)
//4.将多维转为一维
let arr = [[1, [2, 3]], 3]
//封装函数
let newArr = function(arr) {
    return arr.reduce((prev, next) => {
        //判断next是否是数组,如果是数组再次调用函数转,不是就直接使用next
        return prev.concat(Array.isArray(next) ? newArr(next) : next)
    }, [])
}
console.log(newArr(arr))

reduceRight

**作用: 从右向左 对数组相邻两个元素计算 **

总结(遍历)

• 没有返回值
  • forEach: 代替普通的for循环
• 返回数组
  • map(映射) ,返回数组长度和之前一样
  • filter(过滤) , 返回数组长度和之前不一定一样
• 判断,返回true/false
  • some 判断是否 **有一个以上( >=1 )**满足条件的
  • every 判断是否都满足条件

ES6新增的语法

for…of

**作用 : 遍历数组 **

arr.keys() 数组下标

arr.entries() 数组某一项

let arr = ['zs','ls','ww']
//循环值(默认是values())
for(let val of arr){
    console.log(val) //'zs' 'ls' 'ww'
}
//循环索引
for(let index of arr.keys()){
    console.log(index) //0 1 2
}
//循环值和索引
for(let item of arr.entries()){
    console.log(item) //[0,'zs'] [1,'ls] [2,'ww']
}
//直接拿值和索引
for(let [key,val] of arr.entries()){
    console.log(key,val) // 0 'zs'  1 'ls'  2 'ww'
}

Array.from()

作用 : 把 类似数组(伪数组) 转成数组

只要具备length的,就能转

let str = 'i love you'
let json = {
    0: 'i',
    1: 'love',
    2: 'you',
    length: 3
}
let arr1 = Array.from(json)
console.log(arr1) //["i", "love", "you"]
let arr2 = Array.from(str)
console.log(arr2) //["i", " ", "l", "o", "v", "e", " ", "y", "o", "u"]

Array.of()

作用 : 把 一组值 转成数组

let arr = Array.of('you jump i jump')
console.log(arr) //["you jump i jump"]

let arr  = Array.of('you','jump','i','jump')
console.lgo(arr) //['you','jump','i','jump']

find

作用 : 查找符合条件的第一个成员

返回值 : 返回成员 ,没有找到就返回undefined

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

findIndex()

**作用 : 查找符合条件的第一个位置 **

返回值 : 返回位置 ,没有找到就返回undefined

let arr = [1,2,3,4,5]
let res = arr.findIndex( (ele,index,array) => {
    return ele > 4
})
console.log(res) //4

fill

作用 : 填充

arr.fill( 填充的东西 , 开始位置 , 结束位置 )

let arr  = new Array(10)
arr.fill('默认值') //都填充默认值
arr.fill('默认值' ,1 ,4) //[empty, "默认值", "默认值", "默认值", empty × 6]

includes

作用 : 数组是否包含

let arr = ['you','jump','i','jump']
let flag = arr.includes('you')
console.log(flag) //true