日常平凡事情时一些数组经常使用要领,以及操纵总结

日常平凡工作中,少不了运用数组,关于后端的返回数据偶然若不是相符dom树衬着的数据前端照样会本身从新用后端返回数据重组来举行dom衬着。
空话不多说,我们先来看看数组所包括的要领,或许不是很全,不足处请人人补充,人人互相生长才是写这篇文章的目标不是吗?!
ES5中Array经常使用API:
1、join()
2、push()
3、pop()
4、splice()
5、indexOf()
6、lastIndexOf()
7、reverse()
8、slice()
9、every()
10、some()
11、reduce()
12、reduceRight()
13、forEach()
14、map()
15、filter()
16、sort()
17、concat()
18、shift()
19、unshift()
20、toLocaleString()
ES6新增:
1、扩大运算符 …的运用
2、Array.form()
3、Array.of()
4、copyWithin()
5、find()
6、findIndex()
7、fill()
8、entries()
9、flat()
10、flatMap()
11、keys()
12、values()
13、数组的空位
tips:es6的很多用法本菜鸡还不熟习,中心自创了阮一峰大神的API(没错就是连目次都是抄的)中心加了一些本身运用时的心得看法,人人喷我的时刻轻点(我就是抄了,你们说我我也不改)附上阮一峰大神撰写的文档链接http://es6.ruanyifeng.com/#do…
空话不多说直接上正题

1:数组对象的join要领:
join要领是将数组对象中的,每一个对象转换成字符串,并用传入参数字符串举行拼接,并返回一个字符串

let Arr = [1,2,3,4]
    console.log(Arr.join(',')) //1,2,3,4
    console.log(Arr.join('-')) //1-2-3-4
    let Arr2 = [1,2,[3,4],[5,6]]
    console.log(Arr2.join(',')) //1,2,3,4,5,6
    //若数组中有对象,则会对对象先运用tostring要领,所以对象将会被转换成[object Object],平常不会这么做也不多做申明
    let Arr3 =[1,2,{name:'name1',value:1}]//1,2,[object Object]
    console.log(Arr3.join(','))
 

2:数组对象的push要领:
该要领置信人人都很熟习,是向数组末端追加元素,然则实在这个要领是有一个反参的,人人能够没有注重

let arr = [1,2,3]
console.log(`push返回参数:${arr.push(4)} 追加后的数组对象:${arr} `)//打印效果 push返回参数:4 追加后的数组对象:1,2,3,4
    
    // 注重到打印出的arr.push(4)的反参4没有,没错就是返回拼接后的数组的长度(length属性)
//数组对象是能够接收一切对象的,所以push要领的入参是能够是一切正当对象(Symbol对象这块好像是不可,或许说是我没有转换)
    let arr = [1,2]
    arr.push('String')
    arr.push(Symbol('symbol'))
    arr.push({name:'testName',value:'Saurfang'})
    arr.push([3,4])
    arr.push(undefined)
    arr.push(null)
    arr.push(NaN)
    arr.push(new Date())
    console.dir(arr) 

输出效果:《日常平凡事情时一些数组经常使用要领,以及操纵总结》

2:数组对象的pop要领:
pop() 要领将删除 arrayObject 的末了一个元素,把数组长度减 1,而且返回它删除的元素的值。假如数组已为空,则 pop() 不转变数组,并返回 undefined 值。

//pop
    let arr = [1,2,3]
    console.log(arr.pop()) //3  返回的是删除的元素
    console.log(arr) //[1, 2]   删除末了一名元素的数组
    let arr2 = [1]
    console.log(arr2.pop())   //1
    console.log(arr2)         //[]
    let arr3 = []
    console.log(arr3.pop())   //undefined
    console.log(arr3)         //[]

3:数组对象的splice()要领
splice() 要领向/从数组中增加/删除项目,然后返回被删除的项目
splice要领有多个参数不必要每一个都填写,详细参数我借用w3cschool给我们的文档申明

语法arrayObject.splice(index,howmany,item1,…..,itemX)

参数以及用法

  • index:必须。整数,划定增加/删除项目标位置,运用负数可从数组结尾处划定位置。
  • howmany:必须。要删除的项目数目。假如设置为 0,则不会删除项目。
  • item1, …, itemX:可选。向数组增加的新项目。
//splice
    let arr =[1,2,3,4]
    // arr.splice(1,2) //从数组indexOf为1的位置删除两个元素并返回一个数组
    console.log(arr.splice(1,2))// [2, 3]
    console.log(arr)  //[1,4]
    let arr2=[1,2,3,4]
    arr2.splice(1,2,666,777,888) //从arr2indexOf为1的位置删除两个元素并插进去666,777,888三个元素
    console.log(arr2) //[1, 666, 777, 888, 4]
    let arr3 = [1,2,3,4]
    arr3.splice(-1,1,7777)//从arr3末端删除1个元素并在删除元素位置插进去7777
    console.log(arr3) //[1, 2, 3, 7777]
    let arr4 = [1,2,3,4]
    arr4.splice(-1,0,6666)//从arr4末端删除0个元素并在删除元素位置插进去7777
    console.log(arr4)  //[1, 2, 3, 6666, 4]
    let arr5 = [1,2,3,4]
    arr5.splice(-2,3,9999)
    console.log(arr5)//[1, 2, 9999]

5:数组对象的indexOf要领:

返回输入参数在数组中的位置(第一次涌现)
//indexOf

    let arr =['a','b','c','d']
    console.log(arr.indexOf('c'))  //2
    let arr2 = ['a','b','b','b']
    console.log(arr2.indexOf('b')) //1

6:数组对象的lastIndexOf要领:

返回输入参数在数组中的位置(末了一次涌现)
用法就不多做论述了和indexOf()一样

7:数组对象的reverse要领:

倒置数组中元素的位置
//reverse
    let arr = [1,2,3,4]
    arr.reverse()
    console.log(arr) //[4, 3, 2, 1]

8:数组对象的slice要领:

从已有的数组中返回选定的元素
用法:arrayObject.slice(start,end)

  • start:必须。划定从那边最先拔取。假如是负数,那末它划定从数组尾部最先算起的位置。也就是说,-1 指末了一个元素,-2 指倒数第二个元素,以此类推。
  • 可选。划定从那边完毕拔取。该参数是数组片段完毕处的数组下标。假如没有指定该参数,那末切分的数组包括从 start 到数组完毕的一切元素。假如这个参数是负数,那末它划定的是从数组尾部最先算起的元素。
//slice
    let arr = [1,2,3,4]
    console.log(arr.slice(0,2))//[1, 2] //返回arr中第1个元素最先截取两个长度的数组长度
    console.log(arr)//[1, 2, 3, 4]//该要领与splice要领差别,只是返回个中一截的数组长度并拼接成数组返回,并不会转变原数组

9:数组对象的every要领
检索数组对象中每一个元素是不是都相符要求

let arr = [10,11,12,13]
    console.log(arr.every(i=>i>10))//推断arr中一切元素是不是大于10//false
    console.log(arr.every(i=>i>9)) //推断arr中一切元素是不是大于9//true

10:数组对象的some要领
检索数组对象中是不是有相符划定规矩的元素

let arr = [10,11,12,13]
    console.log(arr.some(i=>i<9)) //推断arr中是不是有元素小于9  //false
    console.log(arr.some(i=>i<11)) //推断arr中是不是有元素小于11 //true

11:数组对象的reduce要领
累加器要领,和forEach要领有点相似对数组中对象举行遍历盘算并返回终究效果

//reduce
    let arr = [1,2,3,4,5,6,7,8,9,10]

    console.log( '效果:'+
        arr.reduce((x,y)=>{
            console.log(`x=>${x}`)
            console.log(`y=>${y}`)
            return x+y
        })
    ) //55

从输出效果来看你们能够发明第一次运转回调函数的时刻x为1,y为2,而第二次x=3,y=3,第三次输出为x=6,y=4,由此能够看出第一次x即是数组的第一个元素值,第二个元素为数组的第二个元素值,而今后,x为回调函数返回的值,y为arr[次数]的值

11:数组对象的reduceRight要领

//reduceRight
    let arr = [1,2,3,4,5,6,7,8,9,10]

    console.log( '效果:'+
        arr.reduceRight((x,y)=>{
            console.log(`x=>${x}`)
            console.log(`y=>${y}`)
            return x+y
        })
    ) //55

从输出效果来看能够看出,reduceRight要领与reduce要领一样,之后过是从末端盘算追加

12:数组对象的forEach要领
要领用于挪用数组的每一个元素,并将元素传递给回调函数

let arr = ['aaa','ccc','ddd','eee','bbb']
    arr.forEach((currentValue,index,arr)=>{
        console.log(`index:${index},value:${currentValue}`)
        console.log(arr)
    })
    /*   此为输出效果
         index:0,value:aaa
         ['aaa','ccc','ddd','eee','bbb']...
         forEach要领对数组中的元素举行遍历,举行操纵回调函数中的currentValue为遍历的当前元素值,index为当前元素索引,arr是当前元素返回的数组
         forEach 要领用于挪用数组的每一个元素,并将元素传递给回调函数。
         假如对数组中的每一个元素都要举行操纵或许推断则能够运用此要领,假如遍历须要回返则不发起运用

    */

过量的我就不说了,这个日常平凡用的比较多人人基本上都晓得用法
13:数组对象的map要领
这个和forEach要领很像,区分我写在代码备注里了
`let arr = [‘aaa’,’ccc’,’ddd’,’eee’,’bbb’]

console.log(arr.map((currentValue,index,arr)=>{
    
    return currentValue+index
}))
/*   此为输出效果
        [aaa1,ccc2,ddd3,eee4,bbb5]
     map要领和forEach要领很像回调要领的都是必传当前遍历元素的值与选填的当前元素索引选填的当前元素地点数组唯一差别的是forEach要领没有返回值然则map要领却会返回一个新数组这用于要对数组中到场一些新子元素异常轻易(操纵数组)
*/`

14:数组对象的filter要领
过滤器要领,过滤出数组对象中相符自定义划定规矩的元素并组合成一个新数组返回

//filter
    let arr = [111,222,333,444,555,666]
    console.log(
        arr.filter((currentValue,index,arr)=>{
            return currentValue>333
        })
    ) //输出效果 [444,555,666]
    /**
     * filter要领的入参用法用forEach map一样都是currentValue必填,index,arr选填
     * filter将会返回一个过滤掉不相符自定义划定规矩的数组的新数组
     * */

15:数组对象的sort要领

多用于数组的排序可传入一个回调函数来定义排序体式格局,平常在比较Number元素大小时可用,假如数组中元素都是Number范例而又没有传入回调函数则返回原数组,说白了不传回调函数比较大小只对String范例有用,所以又想不传入回调函数又想排序纯Number数组就要先把一切数组元素转换成String范例举行排序,空话不多说直接上代码
let arr = [333,11,666,2,8,123,0]
    let arr2 = ['zzz','eee','sss','aaa','ddd']
    console.log(arr2.sort())  // ["aaa", "ddd", "eee", "sss", "zzz"]
    console.log(arr.sort()) //[0, 11, 123, 2, 333, 666, 8]
    //因而可知不传回调函数对纯Number范例的数组是不见效的,可见sort要领的排序体式格局是经由过程编码来对数组元素举行排序的

    //纯Number范例数组从小到大排序
    console.log(arr.sort((a,f)=>{
        return a-f
    }))//[0, 2, 8, 11, 123, 333, 666]
    //纯Number范例数组从大到小排序
    console.log(arr.sort((a,f)=>{
        return -(a-f)
    }))//[666, 333, 123, 11, 8, 2, 0]

16:数组对象的concat要领:
这要领如今不怎么用了吧照样讲一讲,该要领用于拼接数组,可传入多个参数(最少传入一个)返回一个新数组,假如传入的是一个数组则会拼接入数组中的元素而不是数组

let arr = [1,2,3,4,5]
    console.log(arr.concat(6,7,8,[9,10],[11],[12,13]))//[1,2,3,4,5,6,7,8,9,10,11,12,13]

过量的我也不讲了,ES6中有更好用的要领,我会鄙人一篇博客中申明

17:数组对象的shift要领:

这个不太好用我就简朴申明,毕竟一家人最主要的是整整齐齐
假如数组是空的,那末 shift() 要领将不举行任何操纵,返回 undefined 值。


    //shift
    let arr = [1,2,3,4,5]
    console.log(arr.shift())  //1
    console.log(arr)          //[2,3,4,5]
    //注重啦,这个要领会转变原数组长度的,平常场所都用不到

18:数组对象的unshift要领:
unshift() 要领将把它的参数插进去 arrayObject 的头部,并将已存在的元素依次地移到较高的下标处,以便留出空间。该要领的第一个参数将成为数组的新元素 0,假如另有第二个参数,它将成为新的元素 1,以此类推。(这段我直接抄的由于不晓得怎样表达)
空话不多说,上代码

//unshift
    let arr = [1,2,3,4,5]
    console.log(arr.unshift(6)) //6
    console.log(arr.unshift([7,8,9]))//7

    console.log(arr)  //[[7,8,9],6,1,2,3,4,5]
    //unshift要领返回的是新数组长度,而shift要领是返回第一个被删除的元素,这两个要领都邑转变数组长度,而传入的参数假如是个数组将不会和concat要领一样将传入数组元素打散

好啦,我能想的起来的数组要领只要这么多了,这些都是es6之前的,es6中有很多新的好用的操纵数组的api我将鄙人一篇博客中讲,同时也会说一些我在日常平凡工作中操纵数组的骚操纵,愿望人人能斧正我的看法,写博客的目标不就是配合生长吗?我如今只是只小菜鸡望诸君多多提点同时望诸君代码永无bug

    原文作者:crow
    原文地址: https://segmentfault.com/a/1190000019229955
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞