数组一些常用的方法(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]
        

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

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

与解构赋值结合

通过 …rest来获取剩余的值。

        let [first, ...rest] = [1, 2, 3, 4, 5]
        console.log(first);    //1
        console.log(rest);     //[2, 3, 4, 5]

如果将扩展运算符放在第一位,则会报错

将字符串转化为数组

		[...'es6']      //['e', 's', '6']

10. at(负索引)

用于获取数组中指定索引的元素, 不仅可以用于数组也可以用于字符串
Array.at(index)
index表示要获取的元素的索引,该参数可以是负数,表示从数组末尾开始计算的位置。
该方法返回指定索引位置的元素,如果索引越界,则返回undefined。

const arr = ['a', 'b', 'c', 'd', 'e'];

console.log(arr.at(2)); // 'c'
console.log(arr.at(-1)); // 'e'
console.log(arr.at(5)); // undefined

该方法不会修改原始数组,而是返回一个新的值

你可能感兴趣的:(javascript,java,c语言,html)