数组常用的方法和ES6新增的数组方法及数组字符串的相互转换

数组常用的方法和ES6新增的数组方法及数组字符串的相互转换

一、数组常用的方法

1、push 在数组末尾添加一个或者多个元素，并返回数组长度，可以添加任意类型的值作为数组的一个元素。

//语法: arr.push(item)
let arr = [1, 2];
arr.push(3)                // [1, 2, 3]
arr.push(undefined)        // [1, 2, 3, undefined]
arr.push('张三')           // 返回的是数组长度 5 此时数组 => [1, 2, 3, undefined, "张三"]

2、pop 删除最后一个元素，并返回删除元素的值；如果数组为空则返回 undefine。该方法会改变原数组

//语法: arr.pop()
let arr = [1,2,3,4,5]
arr.pop() // 返回删除元素的值 5  此时原数组 => [1,2,3,4]

3、unshift 在数组开头添加一个或者多个元素，并返回数组的长度，可以添加任意类型的值作为数组的一个元素

//语法: arr.unshfit(item)
let arr = ['张三']
arr.unshift('李四')  // ["李四", "张三"]
arr.unshift(3)       // 返回数组的长度 3 此时原数组 => [3, "李四", "张三"]

4、**shfit ** 删除数组开头第一个元素，并返回被删除的元素；如果数组为空则返回undefine。该方法会改变原始数组

//语法: arr.shift();
let arr = [1,2];
arr.shift()  // 返回被删除的元素 1  此时原数组 => [2]

5、slice 截取数组，得到截取的数组；不改变原始数组，得到新数组。

//语法: arr.slice(start,end)
//ps: start 代表从哪个位置开始截取,截取到的数组包含该位置元素  
//    end   代表截取到哪个位置但截取到的数组不包含该位置元素,end可以省略，省略代表截取到数组结束
let arr = ['元素1','元素2','元素3',4,5,6]
arr.slice(2))   
//  ["元素3", 4, 5, 6] 此时原数组 =>  ["元素1", "元素2", "元素3", 4, 5, 6]
arr.slice(1,5)
//  ["元素2", "元素3", 4, 5] 此时原数组 =>  ["元素1", "元素2", "元素3", 4, 5, 6]

6、splice 用于插入、删除或替换数组的元素，如果从数组中删除了元素，则返回的是含有被删除的元素的数组，请注意，splice方法与slice方法的作用是不同的，splice方法会直接对数组进行修改。

//语法: arrayObject.splice(index,howmany,element1,.....,elementX)
// index：必需。规定从何处添加/删除元素。该参数是开始插入和（或）删除的数组元素的下标，必须是数字。
// howmany：必需。规定应该删除多少元素。必须是数字，但可以是 "0"。不含该位置元素，如果未规定此参数，则删除从index开始到原数组结尾的所有元素。
// element1：可选。规定要添加到数组的新元素。从index所指的下标处开始插入。
// elementX：可选。可向数组添加若干元素。
let arr = ['元素1', '元素2', '元素3', 4, 5, 6]
arr.splice(2)
//返回删除的元素数组 ["元素3", 4, 5, 6] 此时原数组 =>  ["元素1", "元素2"]
arr.splice(1, 2)
//返回删除的元素数组 ["元素2", "元素3"] 此时原数组 =>   ["元素1", 4, 5, 6]
arr.splice(0, 2, '添加1', '添加2', '添加3')
//返回删除的元素数组 ["元素1", "元素2"] 此时原数组 =>  ["添加1", "添加2", "添加3", "元素3", 4, 5, 6]
arr.splice(0, 0, '添加')  //原数组 ["添加", "元素1", "元素2", "元素3", 4, 5, 6]

7、concan 合并两个或多个数组，得到新数组，原数组不改变，如果要进行concat()操作的参数是数组，那么添加的是数组中的元素，而不是数组。

//语法: arr.concan(arr1,arr2...arr3)
var arr1 = [1,2,3]
var arr2 = ['元素4','元素5']
var arr3 = ['a','b']
    arr1 = arr1.concat(arr2,arr3,'单独加一个')
    //此时原数组arr1 => [1, 2, 3, "元素4", "元素5", "a", "b", "单独加一个"]

8、indexOf 数组元素索引，并返回元素索引位置，不存在返回 -1 ，索引从0开始

//语法: arr.indexOf(value,start)
//value => 必须有 为检索的内容
//start => 开始检索的位置，可以没有，没有默认从头开始
var arr = ['a','b','c']
    arr.indexOf('c')  // 返回下标 2
    arr.indexOf('d')  // 没找到返回 -1

9、jojn 数组转字符串,与 toString() 方法类似

//语法: arr.join(sep)
// sep 可选, 指定要使用的分隔符
let arr = [1,2,3,4]
var str = arr.join('-')  //  1-2-3-4

10、reverse 颠倒数组中元素的顺序，改变原数组，而不会创建新的数组

//语法: arr.()
// sep 可选, 指定要使用的分隔符
let arr = [1,2,3,4]
var str = arr.reverse  //  [4,3,2,1]

二、ES6新增的几个方法

1、foreach 遍历数组无返回值，不改变原数组

// 语法 arr.forEach((item,index,arr)=>{})
// item  （数组中当前被处理的元素）
// index （当前元素在数组中的索引)
// arr   （调用的数组）
var arr = ['f', 'o', 'r', 'e', 'a', 'c', 'h']
arr.forEach((item, index, arr) => {
    console.log(item) //  foreach
})

2、map 遍历数组，返回一个新数组，不改变原数组

// 语法 arr.map((item,index,arr)=>{})
// item  （数组中当前被处理的元素）
// index （当前元素在数组中的索引)
// arr   （调用的数组）
var arr = [1,2,3,4,5]
var newArr = arr.map((item, index, arr) => {
   return item += 10
})

console.log(newArr) // [11, 12, 13, 14, 15]

3、filter 过滤掉数组中不满足条件的值，返回一个新数组不改变原数组‘

// 语法 arr.filter((item,index,arr)=>{})
// item  （数组中当前被处理的元素）
// index （当前元素在数组中的索引)
// arr   （调用的数组）
var arr = [1,2,3,4,5]
var newArr = arr.filter((item, index, arr) => {
   return item > 2
})

console.log(newArr) // [3, 4, 5]

4、reduce ( ) 方法接收一个函数作为累加器，数组中的每个值（从左到右）开始缩减，最终计算为一个值，不改变原数组

// 语法 arr.reduce((prev,item,index,arr)=>{},init)
// prev  （上一次调用回调返回的值，或者是提供的初始值（init））
// item  （数组中当前被处理的元素）
// index （当前元素在数组中的索引)
// arr   （调用的数组）
// init  （为reduce的第二个参数传递给函数的初始值）
var arr = [1, 2, 3, 4, 5, 6]
var sum = arr.reduce((prev, item, index, arr) => {
    return prev + item
}, 10)
console.log(sum)  //  31

5、some 遍历数组每一项，只要有一项满足条件，则停止遍历，结果返回true

// 语法 arr.some((item,index,arr)=>{})
// item  （数组中当前被处理的元素）
// index （当前元素在数组中的索引)
// arr   （调用的数组）
var arr = [1, 2, 3, 4, 5, 6]
var num = 0   //检测被执行了几次
var bool = arr.some((item, index, arr) => {
    if(item > 2){
        num ++
    }
    return item > 2
}, 10)
console.log(bool,num)  // true   1

6、every 遍历数组每一项，元素满足条件返回true，只要其中有一项元素不满足条件，则停止遍历结果返回false, 所有元素都满足条件，结果返回 true ; 不改变原数组

// 语法 arr.every((item,index,arr)=>{})
// item  （数组中当前被处理的元素）
// index （当前元素在数组中的索引)
// arr   （调用的数组）
var arr = [1, 2, 3, 4, 5, 6]
var num = 0   //检测被执行了几次
var bool = arr.every((item, index, arr) => {
    if(item < 7){
        num ++
    }
    return item < 7
}, 10)
console.log(bool,num)  // true   6

7、find 返回数组中满足传入函数条件的第一个元素。所有成员不满足条件则返回 undefined。

// 语法 arr.find((item,index,arr)=>{},this)
// item  （数组中当前被处理的元素）
// index （当前元素在数组中的索引)
// arr   （调用的数组）     
// this   为第二个参数，用来绑定回调函数的this对象
let arr = ['张三', '李四', '王五', '石头'];
let name = arr.find((item, index) => {
    return item == "李四"
})
console.log(name)   //李四

8、findIndex 返回数组中满足传入函数条件的第一个元素位置。所有成员不满足条件则返回 -1。

在这里插入代码片// 语法 arr.findIndex((item,index,arr)=>{},this)
// item  （数组中当前被处理的元素）
// index （当前元素在数组中的索引)
// arr   （调用的数组）     
// this   为第二个参数，用来绑定回调函数的this对象
let arr = ['张三', '李四', '王五', '石头'];
let name = arr.findIndex((item, index) => {
    return item == "王五"
})
console.log(name)   //2

9、flat 该方法可以给数组降维，返回一个新数组，不会改变原数组。（类似还有flatMap，该方法只能展开一层数组）

//语法: arr.flat(num)
//num 为拉平层级的数量，默认为1
var arr = [1,2,[3,4,[5,6,[7,8],],],9]
var arr1 = arr.flat(3) // [1, 2, 3, 4, 5, 6, 7, 8, 9]
var arr2 = arr.flat(1) // [1, 2, 3, 4,[5,6,[7,8],], 9]

三、数组字符串的相互转换

1、数组转字符串
（1） toString 能够把每个元素转换为字符串，然后以逗号连接输出显示

var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9];
var str = arr.toString();   // 1,2,3,4,5,6,7,8,9

（2）join 也可以把数组转成字符串，不过它可以指定分隔符。不指定符号默认是一逗号连接输出显示

var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9];
var str = arr.join(',');   // 1,2,3,4,5,6,7,8,9

2、字符串转数组
(1) split 可以指定某个特定的符号来分割加入到数组中

var str = "1,2,3";
var arr = str.split(',');   // ["1", "2", "3"]

（2）使用解构形成数组

var str = "12345";
var arr = [...str]   //  ["1", "2", "3", "4", "5"]

如上述有任何问题，欢迎各位路过的大佬帮忙留言指出