Jet_closer_burning

数组一些常用的方法(es5+es6)

数组常用方法

- 1.添加（push与unshift）
- 2.删除(pop与shift)
- 3.从数组中连续删除、插入数据：splice()
- 4.数组串联：join()
- 5.数组排序：sort()
- 6.数组颠倒：reverse()
- 7.数组抽取：slice()
- 8.数组合并：concat()
- 9.数组转为字符串：toString()
ES5中数组常用方法
- 1.forEach(遍历)
- 2.map(映射)
- 3.filtter(过滤)
- 4.every(所有)和some(存在)
- 5.reduce(组合)和reduceRight()
- 6.indexOf(搜索)和lastIndexOf()
是否会改变原数组
ES6数组方法
- 1. of (创建)
- 2. from(转换)
- 3. fill(填充)
- 4. copyWithin(复制)
- 5. find(查找第一个符合的值)
- 5. findIndex(查找第一个符合的索引)
- 6. includes(是否存在)
- 7. flat(降低数组层级)
- 8. flatMap(映射)
- 9. ...(扩展运算符)
- - 复制数组
  - 合并数组
  - 与解构赋值结合
  - 将字符串转化为数组
- 10. at(负索引)

1.添加（push与unshift）

1-1：push()

向数组末尾添加一个或多个元素
返回新数组的长度

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

打印出来的结果为：(5) [1, 2, 3, 4, 5]
1-2:unshift()

向数组的开头添加一个或多个元素
返回新数组的长度

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

打印出来的结果为：(5) [4, 5, 1, 2, 3]

2.删除(pop与shift)

2-1:pop()

删除数组最后一个元素，如果数组为空，则不改变数组，返回undefined
返回被删除的元素

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

打印结果(4) [1, 2, 3, 4]
2-2:shift()

把数组的第一个元素删除，若空数组，不进行任何操作，返回undefined
返回第一个元素的值

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

打印结果(4) [ 2, 3, 4，5]

3.从数组中连续删除、插入数据：splice()

splice(1,2,3)，1:起始下标，2：连续删除多少项（为0则不删除），
3：插入的数据（为0则不插入）
返回被删除的元素

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

打印结果(5) [1, "2", 3, 4, 5]

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

打印结果(4) [1, 3, 4, 5]

4.数组串联：join()

把数组中所有元素放入一个字符串
返回字符串

let arr=[1,2,3,4,5]
    console.log(arr.join("+"))

打印结果1+2+3+4+5

5.数组排序：sort()

对数组元素进行排序
返回该数组

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

打印结果(5) [1, 2, 3, 4, 5,]

    let arr=["Mike","Doinb","Uzi","Mary","Faker","ClearLove"]
    console.log(arr.sort())

打印结果(6) ["ClearLove", "Doinb", "Faker", "Mary", "Mike", "Uzi"]

6.数组颠倒：reverse()

颠倒数组中元素的顺序
返回该数组

 let arr=["Mike","Doinb","Uzi","Mary","Faker","ClearLove"]
    console.log(arr.sort().reverse())

打印结果(6) ["Uzi", "Mike", "Mary", "Faker", "Doinb", "ClearLove"]

7.数组抽取：slice()

slice(1,2),1:起始下标，2：结束位置（若为0则返回下标后所有元素）
从已有的数组中返回选定的元素
返回一个新数组

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

打印结果(3) [3, 4, 5]

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

打印结果(2) [3, 4]

8.数组合并：concat()

连接两个或多个数组
返回被连接数组的一个副本

 let arr1=["RNG","EDG"]
    let arr2=["Uzi","ClearLove"]
    let arr3=["TOP","SKT"]
    console.log(arr1.concat(arr2,arr3))

打印结果(6) ["RNG", "EDG", "Uzi", "ClearLove", "TOP", "SKT"]

9.数组转为字符串：toString()

把数组转为字符串
返回数组的字符串形式

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

打印结果为1,2,3,4,5

ES5中数组常用方法

1.forEach(遍历)

从头至尾遍历数组，为每个元素调用指定的函数。
forEach有三个参数(数组元素，索引，数组本身)。

    const data = [1, 2, 3, 4, 5];  //要求和的数组
    let sum = 0;     //初始为0
    
    data.forEach( value => sum+=value) //将每个值累加到sum上
    console.log(sum)           //=>15
    
    data.forEach((v,i,a)=> a[i]=v+1)
    console.log(data)      //=>[2,3,4,5,6]

注：forEach无法在所有元素传递给调用函数之前终止遍历（无法使用break），如果要使用就使用try。
返回值：无。

2.map(映射)

map()方法将调用的数组每个元素传递给指定的函数，并返回一个数组。

    let a=[1,2,3]
    let b=a.map(x)  return x*x )
    console.log(b)        //=>[1,4,9]
   /=============================/
    let a=[1,2,3]
    let b=a.map(i=> return i )
    console.log(b)        //=>[1,2,3]

注：map返回的是新数组，不修改调用的数组。如果是稀疏数组，返回的也是相同稀疏数组。
返回值：有，新的数组。

3.filtter(过滤)

filtter()遍历数组,过滤出来符合条件的元素,放到一个新数组里面,如果没有就返回空。
三个参数：当前元素、当前索引、原数组。

    let a=[1,2,3,4,5]
    let b=a.filter(x=> return x<3 )
    console.log(b)        //=>[1,2]
    
    let c=a.filter(x=> return x>5 )
    console.log(c)        //=>[]

注：filter()会跳过稀疏数组中缺少的元素，返回的总书稠密的。
filter不会改变原数组，而是返回一个新数组。
返回值：有，符合条件的数组。

4.every(所有)和some(存在)

every()方法就像数学中的“所有”，针对所有符合条件的返回true否则返回false。

    let a=[1,2,3,4,5]
    let b=a.every(x=> return x<3)
    console.log(b)        //=>false
    
    let c=a.every(x=> x<6)
    console.log(c)        //=>true

some()方法就像数学中的“存在”，但数组中至少存在一个元素符合判定条件则返回true，
否则false（一个都没有）。

    let a=[1,2,3,4,5]
    let b=a.some(x=> return x<3 )
    console.log(b)        //=>true
    
    let c=a.some(x=> return x<1 )
    console.log(c)        //=>false

注：一旦every()和some()确定该返回什么值它们就会停止遍历数组。
every()在判定数组时，第一次返回false后就返回false，如果判定一直返回true，他将遍历整个数组。
some()相反，第一次返回true就返回true，如果判定为false就遍历整个数组。
按照数学惯例，在空数组上调用时，every()返回true,some()返回false。
返回值：true或者false。

5.reduce(组合)和reduceRight()

reduce()和reduceRight()方法使用指定的函数将数组元素进行组合，生成单个值。

四个参数：累积值（之前的计算结果或初始值）、当前元素、当前索引和原数组

    let a=[1,2,3,4,5]
    let b=a.reduce((x,y)=>{
    	 return x+y
    },0)
    console.log(b)        //=>15

如上例所示，打印一下第一个参数x,为： 0，1，3，6，10，
第二个y，为：1，2，3，4，5（当前元素）。

如果把0换成1又会发生什么呢？接下来请看：

    let a=[1,2,3,4,5]
    let b=a.reduce((x,y)=> {
        return x+y
    },1)
    console.log(b)        //=>16

结果变成了16，打印第一个参数x为：1，2，4，7，11，第二个还是初始值。
那么得出结论：第一次调用函数时，第一个参数是初始值，它就是传递给reduce()的第二个参数。在接下来的调用中，这个值就是上一次化简函数的返回值。在上面例子中第一次调用时的参数分别为0和1。将两者相加并返回1，再次调用时参数是1和2，返回3，以此类推…最后返回15。

reduce() 方法收第二个参数，用于指定累加器的初始值。在本例中，我们将初始值设为 0。如果省略该参数，则默认将数组的第一个元素作为累加器的初始值。
除了计算数组元素的和之外，reduce() 方法还可以用于计算数组的最大值、最小值、平均值等聚合操作。

而reduceRight()的工作原理跟reduce()一样，不同的是他按照数组索引从右到左来处理。

注：reduce()和reduceRight()都能接收一个可选的参数，它指定了化简函数调用时this关键字的值。第二个参数没有，则表示为默认值（第一个元素）。
reduce方法不会改变原数组，而是返回一个最终的结果值。
返回值：有。

6.indexOf(搜索)和lastIndexOf()

indexOf()和lastIndexOf()搜索整个数组中具有给定值的元素，返回找到的第一个元素的索引或者如果没有找到就返回-1。
indexOf()从头至尾搜索，lastIndexOf()则相反。

    let a=[1,2,3,4,5,4,3,2,1]
    let b=  a.indexOf(3)
    let c=  a.lastIndexOf(3)
    console.log(b)        //=>2
    console.log(c)        //=>6

注：indexOf()和lastIndexOf()不接受函数作为其参数。
返回值：第一个元素的索引。

是否会改变原数组

会改变：push(),pop(),shift(),unshift() ,splice(),sort(),reverse()。
不变：concat(),split(),slice(),filter(),reduce()。

ES6数组方法

1. of (创建)

创建一个由任意数量的参数组成的数组

        Array.of(1,2,3,4,5)  //[1, 2, 3, 4, 5]
        Array.of()           //[]

2. from(转换)

将一个类似数组或可迭代对象转换为一个真正的数组

        Array.from([1,2,3,4,5])  //[1, 2, 3, 4, 5]
        Array.from([1,2,3,,5])   //[1, 2, 3, undefined, 5]
        Array.from('ES6')        //['E', 'S', '6']

3. fill(填充)

用静态值填充数组中的元素。
fill(0,1,2)
0：用来填充的值
1：被填充的起始索引
2(可选)：被填充的结束索引，默认为数组末尾

	let a =[1,2,3,4,5]
	a.fill(0)         //[0, 0, 0, 0, 0]
	a.fill(0,2)       //[1, 2, 0, 0, 0]
	a.fill(0,1,2)     //[1, 0, 3, 4, 5]

4. copyWithin(复制)

将一部分数组元素复制到数组中的另一个位置
copyWithin(0,1,2)
// 0：替换数据的位置，如果为负值表示倒数
// 1：从该位置开始读取,如果为负值表示从末尾开始计算
// 2(可选)：到该位置结束，默认为数组长度

	let a =[1,2,3,4,5]
	a.copyWithin(0,1)         //[2, 3, 4, 5, 5] 
	//表示从数组的2开始复制数组[2,3,4,5]到索引0的开始位置
	a.copyWithin(0,1,2)      // [2, 2, 3, 4, 5]
	//表示从数组的22号位开始复制数组[2]到索引0的开始位置
	a.copyWithin(1,-3,-2)    // [1, 3, 3, 4, 5]
	//-3相当于2号位，-2相当于3号位 复制[3]到索引1的的位置

5. find(查找第一个符合的值)

返回数组中满足函数的第一个元素的值，否则返回未定义。

	let a =[1,2,3,4,5]
	a.find(i=>{
	     i === 2;      //2
	     i === 0;      //undefined
	})

5. findIndex(查找第一个符合的索引)

返回数组中满足给定测试函数的第一个元素的索引，否则返回-1。

	let a =[6,7,8,7,6]
	a.find(i=>{
	     i === 7 ;      //1
	     i === 0;      //-1
	})

6. includes(是否存在)

判断一个数组是否包含一个指定的值，如果包含则返回 true
includes(0,1)
0：包含的值
1：搜索的起始索引，默认为0

	let a =[1,2,3,4,5]
	a.includes(1)   //true
	a.includes(0)   //false
	a.includes(1,1) //false 
	//意思是找的[2,3,4,5]中是否包含1

7. flat(降低数组层级)

通过将所有子数组平铺成一个新数组来降低嵌套数组的层级
flat() 默认只降低一级层级
flat(X) X代表降低的层数，默认为1
不管有多少层级，使用Infinity关键字作为参数，都能转化为一维数组

	let a = [1, 2, [3, 4, [5, 6]]]
	a.flat()           //[1, 2, 3, 4, [5, 6]]
	a.flat(Infinity)   //[1, 2, 3, 4, 5, 6]

8. flatMap(映射)

将一个数组映射为另一个数组，并将结果平铺成一个新数组
flatMap(0,1,2)
0：当前数组成员
1：当前数组成员索引
2：原数组

	let a = [1, 2, 3,4, 5]
	  a.flatMap(i => {
           return i * 2           //[2, 4, 6, 8, 10]
           return [[i * 2]]       //[[2], [4], [6], [8], [10]]
     }) 
     
      a.flatMap((v, i, Array) => {
            console.log('%c ======>>>>>>>>', 'color:orange;', v, i, Array) 
      })
      // 1 0  [1, 2, 3, 4, 5]
      // 2 1  [1, 2, 3, 4, 5]
      // 3 2  [1, 2, 3, 4, 5]
      // 4 3  [1, 2, 3, 4, 5]
      // 5 4  [1, 2, 3, 4, 5]

9. …(扩展运算符)

将数组转为参数序列

	let a =[1, 2, 3, 4, 5]
	...(a)        //1 2 3 4 5

应用

复制数组

如果只是一层数组或者对象则是深拷贝

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

如果数组或对象中的元素是引用类型的元素，则是浅拷贝

        let a = {
            name: "Macey",
            country: "Argentina",
            team: {
                football: 'Barcelona'
            },
        }
        let b = { ...a }
        b.team.football = 'Paris Saint-Germain'
        console.log(a.team.football);    //Paris Saint-Germain
        console.log(b.team.football);   //Paris Saint-Germain

数组或对象中的元素是引用类型的元素,实现深拷贝

        let a = {
            name: "Macey",
            country: "Argentina",
            team: {
                football: 'Barcelona'
            },
        }
        let b = {
            ...a,
            team: { ...a.team }
        }
        b.team.football = 'Paris Saint-Germain'
        console.log(a.team.football);    //Barcelona
        console.log(b.team.football);   //Paris Saint-Germain

合并数组

跟复制一样，如果只是一层数组或者对象则是深拷贝

        let a = [1, 2, 3]
        let b = [4, 5, 6]
        a[0] = 9                   //[9, 2, 3]
        let c = [...a, ...b]       //[1, 2, 3, 4, 5, 6]