常见的、不常见的数组操作方法汇总

(1)concat:将多个数组合并成一个数组

<script>		
    //concat数组合并
    let arrOne = ['梦','为','努',';力'];
    let arrTwo = ['浇','了','水'];
    let arrThree = ['L','J','J'];
    let arrAll = arrOne.concat(arrTwo,arrThree);
    console.log(arrAll);    // ["梦", "为", "努", ";力", "浇", "了", "水", "L", "J", "J"]
</script>

(2)every:every会遍历数组内的所有元素,直到返回false

<script>
    //every
    let isShow = (x) =>{
        console.log(x);                     //输出:1
        return x % 2 == 0 ? true : false;
    }
    let number = [1,2,3,4,5,6,7,8,9,10];
    console.log(number.every(isShow));     //输出:false
</script>

(3)some:和every相似,some同样会遍历数组内的所有元素,不同的是,直到返回true终止

<script>
    //some
    let isShow = (x) =>{
        console.log(x);                    //输出:1,2
        return x % 2 == 0 ? true : false;
    }
    let number = [1,2,3,4,5,6,7,8,9,10];
    console.log(number.some(isShow));      //输出:true
</script>

(4)forEach:如果要遍历整个数组,可以使用forEach,它和for循环的结果相同(这里使用了ES6的箭头函数)

<script>
    //forEach
    let number = [1,2,3,4,5,6,7,8,9,10];
    number.forEach((x)=>{
        console.log((x % 2 == 0));    //输出:false,true,false,true,false,true,false,true,false,true
    })
</script>

(5)reduce:reduce方法接收一个函数作为参数,这个函数有四个参数(previousValue、currentValue、index、array),这个函数会返回一个将被叠加到叠加器的值,reduce方法停止执行后会返回这个累加器。如果要对一个数组进行求和,reduce比较好用

<script>
    //reduce
    let number = [1,2,3,4,5,6,7,8,9,10];
    number.reduce((previous,current,index)=>{
        console.log(previous + current)    //输出:3,6,10,15,21,28,36,45,55
        return previous + current;
    })
</script>

(6)find:遍历出数组内符合条件的元素,Array.find(当前的值、当前的位置和原数组)同时,也可以接受函数作为参数

<script>
    //find
    let person = {name:"前小端",age:18};
    let array = [10,2,77,23];
    function F(ind){
        if(ind<this.age){
            console.log(ind);	//输出10,2
        }
    }
    array.find(F,person);
</script>

(7)map:ES6中定义的一个遍历API,它有几个特点需要说明一下

  1. 三个参数分别是:某项元素的键值,元素的索引,数组本身;
  2. 不能使用break,return,continue跳出循环;
  3. 返回一个新数组;
  4. 可以记录索引;
<script>
    //map
    let numbers = [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15];
    let isShow = function(x){
        console.log(x)
    };
    let myMap = numbers.map(isShow)	//输出:1,2,3,4,5,6,7,8,9,10,11,12,13,14,15
    //console.log(myMap)    //请问:这里输出应该是什么?请万能的小伙伴帮忙解决一下,并且希望能解释一下为什么会出现这样的结果!知道的小伙伴请于下方评论区留言。
</script>

友情提示:请注意上放的提问环节哦-。——

(8)filter:同map一样;

(9)使用for...of循环迭代(个人更喜欢使用循环遍历),同样是ES6的方法

<script>
    //for...of
    let numbers = [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15];
    for(let i of numbers){
        console.log((i % 2 == 0) ? '偶数' : '奇数')    //输出:奇数,偶数,奇数,偶数,奇数,偶数,奇数,偶数,奇数,偶数,奇数,偶数,奇数,偶数,奇数
    }
</script>

并且for...in与之相同,这里就不再举例;

(10)iterator:是ES6为数组类添加的一个属性,需要通过Symbol.iterator来访问

<script>
    //iterator
    let numbers = [1,2,3,4];
    let iterator = numbers[Symbol.iterator]();
    console.log(iterator.next());    //输出:{ value: 1, done: false }
    console.log(iterator.next());    //输出:{ value: 2, done: false }
    console.log(iterator.next());    //输出:{ value: 3, done: false }
    console.log(iterator.next());    //输出:{ value: 4, done: false }
    console.log(iterator.next());    //输出undefined
</script>

该操作可以理解为使得数组具有了线性属性,各个元素以排队的方式出现,当超出元素索引时,线性结束,以undefined的形式结尾。这里推荐参考一篇关于Symbol.iterator的详解博客,地址   =>点击这里<=   。

(11)数组的entrise()keys()values()方法:

<script>
    //entries
    let numbers = [1,2,3,4];
    let aEntrise = numbers.entries();
    console.log(aEntrise.next())    //输出:{value:[0,1],done:false}
    console.log(aEntrise.next())    //输出:{value:[1,2],done:false}
    console.log(aEntrise.next())    //输出:{value:[2,3],done:false}
    console.log(aEntrise.next())    //输出:{value:[3,4],done:false}
    console.log(aEntrise.next())    //输出:{value:undefined,done:false}
</script>

此方法包含键值对的形式,可以将数组每个索引下所对应的value渲染出来;

<script>
    //keys
    let numbers = [1,2,3,4];
    let aEntrise = numbers.keys();
    console.log(aEntrise.next())    //输出:{value:0,done:false}
    console.log(aEntrise.next())    //输出:{value:1,done:false}
    console.log(aEntrise.next())    //输出:{value:2,done:false}
    console.log(aEntrise.next())    //输出:{value:3,done:false}
    console.log(aEntrise.next())    //输出:{value:undefined,done:false}
</script>

如果理解了entrise,那么keys方法就更容易理解了,keys用来获取到数组内每个元素的索引值;

values()就不再举例说明了。

算了,还是用values()附上一个懒省劲的小栗子:

<script>
    //values
    let numbers = [1,2,3,4];
    let aEntrise = numbers.values();
    for(let i=0;i<numbers.length;i++){
        console.log(aEntrise.next())
    }
    //输出:{value: 1, done: false},{value: 2, done: false},{value: 3, done: false},{value: 4, done: false}
</script>

(12)form:Array.form(数组,过滤条件)方法根据已有的数组创建一个新数组,比如要复制numbers数组,可以

<script>
    //form
    let numbers = [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15];
    let newNumbers = Array.from(numbers);
    console.log(newNumbers);    //输出:[1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15]
    let events = Array.from(numbers,x=>(x % 2 == 0 ? '偶数' : '奇数'));
    console.log(events);    //输出:["奇数", "偶数", "奇数", "偶数", "奇数", "偶数", "奇数", "偶数", "奇数", "偶数", "奇数", "偶数", "奇数", "偶数", "奇数"] 
</script>

(13)of:根据传入的参数组建一个新的数组

<script>
    //of
    let number = Array.of(1,2,3,4,5,6);
    console.log(number);    //输出:[1, 2, 3, 4, 5, 6]
</script>

(14)fill:使用静态值填充数组

<script>
    //fill
    let number = Array.of(1,2,3,4,5,6);
    console.log(number.fill(0));    //输出:[0, 0, 0, 0, 0, 0]
</script>

并且可以从指定位置填充fill(x,y),x是要填充的内容,y是要开始填充的位置索引:

console.log(number.fill(22,2));    //输出:[0, 0, 22, 22, 22, 22]

还可以指定结束填充的索引:

number.fill(0);
console.log(number.fill(1,3,5));    //输出:[0, 0, 0, 1, 1, 0]

(15)copyWithin:将数组内的一系列元素复制给此数组下指定的位置,话不多说,上栗子

<script>
    //copyWithin
    let copyArray = [1,2,3,4,5,6];
    console.log(copyArray.copyWithin(0,3));    //输出:[4, 5, 6, 4, 5, 6]
</script>

这里说明一下:array.copyWithin(x,y),x代表被替换掉的起点索引位置,y代表用来复制的索引(直至此数组最后一个元素),并且,请牢记x<y,<y,y。

(16)还有reverse(),sort(),indexOf(),lastIndexOf(),

<script>
    let numbers = [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,10];
    console.log(numbers.reverse());    //输出:[10, 15, 14, 13, 12, 11, 10, 9, 8, 7, 6, 5, 4, 3, 2, 1]
    console.log(numbers.sort());    //输出:[1, 10, 10, 11, 12, 13, 14, 15, 2, 3, 4, 5, 6, 7, 8, 9]
    console.log(numbers.lastIndexOf(10));    //输出:2
    console.log(numbers.indexOf(10));    //输出:1
    console.log(numbers.indexOf(100));    //输出:-1
</script>

numbers.indexOf(100)的输出结果为-1是因为numbers中没有找到100这个元素。

以上就是一些对数组操作的API,后续可能还会有ES7、ES8的数组操作API,会不定时更新。

巴拉巴拉:

==主页传送门==

猜你喜欢

转载自blog.csdn.net/weixin_42941619/article/details/89976842