JavaScript数组相关操作方法以及数组扩展与修复-CFANZ编程社区

JavaScript一些常用的操作方法

join()

将数组中所有元素转化为字符串并连接一起，返回最后生成的字符串。可以指定分隔符；

        var arr = [23,56,78,0,98,190];
        console.log(arr.join(""));//235678098190
        console.log(arr.join("@ "));//23@ 56@ 78@ 0@ 98@ 190

reverse()

把数组的元素颠倒顺序，返回逆序数组;

        console.log(arr.reverse());//[190, 98, 0, 78, 56, 23]

sort()

把数组中元素默认成字符串进行比较排序返回排序后的数组（一般是按照正序排序），也可以自定义排序的方式

        arr.sort(function(a,b){return a-b;});
        console.log(arr)

concat()

连接两个数组，若concat()参数是数组，则连接的是该数组的元素，并非是数组本身，concat()不会递归扁平化数组的数组（就是只拆开最外层数组），也不会修改调用的数组。

        var arr1 = [12,34,56,78,82]
        console.log(arr.concat(arr1));

slice()

切片操作，返回指定数组的一个片段或者子数组，接受两个参数，分别表示片段的起始和结束位置。若只有一个参数，则表示从起始位置到结尾的所有数组元素；若参数是负数，则表示相对于数组中最后一个元素的位置。

       console.log(arr.slice(2,6));//[78,0,98,190]

splice()

Array.splice()是在数组中插入或者删除元素。第一个参数表示指定插入或（或）删除的起始位置。第二个参数表示从数组中删除的个数，若省略，则删除从起始位置到结尾的所有元素。

       console.log(arr.splice(2,4,2019));//[78, 0, 98, 190]
       console.log(arr); //[23,56,2019]

Array.splice()返回一个由被删除的元素组成的数组，若没有删除数组元素，则返回一个空数组。前两个参数指定了要删除的数组元素。其他参数则是需要插入数组中的元素，若这些参数中含有数组，直接插入数组本身并非数组元素。

push()和pop()

把数组当成栈来使用。

push()方法在数组的尾部添加元素，并且返回数组的新长度

pop()方法删除数组的最后一个元素，减小数组长度，并且返回被删除的元素。

unshift()和shift()

unshift()：入队操作，向数组的头部添加元素，返回数组新的长度

shift()：出队操作，就是删除数组的第一个元素，并且将其返回

toString()和toLocaleString()

toString()把数组元素转化为字符串

toLocaleString()把数组元素转化为本地化的字符串。

ECMAScript5中的数组方法

forEach()

从头到尾遍历数组，为每个元素调用指定的函数。forEach不能像for循环中使用break语句实现提前终止。需要把forEach方法放置在try块中，并抛出一个异常，抛出异常时就会提前终止。

function foreach(a,f,t){
    try {
        a.forEach(f,t)
    } catch (error) {
        if (error === foreach.break) {
            return
        else{
            throw error
        }
    }
}
foreach.break = new Error("提前终止")

map()

把数组的每一个元素传递给指定的函数，并且返回一个新数组（包含该函数的返回值）。即是针对数组的每一个参数进行操作。

       arr.map(item=>{
           console.log(item/2);
       })

fliter()

返回的数组是调用数组的一个子集，传递数组是用来做逻辑判断的。

       console.log(arr.filter((args)=>{
           return args % 2 == 0
       }));//[56, 78, 0, 98, 190]

every() 和 some()

every()和some()方法是数组的逻辑判断：针对数组元素应用指定的函数进行判断，返回true或者false。注意，一旦every（）和some（）确认该返回什么值它们就会停止遍历数组元素。

some方法中，只要数组中有一个元素满足条件，就返回true，立即停止遍历数组；

       console.log(arr.some((args)=>{
            return args % 2 == 0
       }));//true

every方法中，需要每一个元素都满足条件才能返回true。必须遍历全部的数组。

       console.log(arr.every((args)=>{
            return args % 2 == 0
       }));//false

reduce() 和 reduceRight()

将数组元素进行组合，生成单个值。reduce()需要两个参数，第一个参数是执行操作函数，第二个参数（可选）是一个传递给函数的初始值。

console.log(arr.reduce(function(a,b){return a+b}));//445

reduceRight()与reduce()相似，只是从右到左的进行处理。

indexOf() 和lastIndexOf()

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

console.log(arr.indexOf(0));//445

兼容ie678

        Array.prototype.indexOf = function(item,index){
           var n = this.length,i = ~~index;
           if(i<0)i +=n;
           for(;i<n;i++){
               if(this[i]===item){return i;}
           }

           return -1;
       }

       
       console.log(arr.indexOf(0));//445
       
       Array.prototype.lastIndexOf = function(item,index){
           var n = this.length,
               i = index == null ? n-1:index;
            if(i<0) i = Math.max(0,n+i);

            for(;i>=0;i--){
                if (this[i] === item) {
                    return i;
                }
            }

            return -1;

       }

ES6给了Array添加了@@iterator属性

需要通过Symbol.iterator进行访问，返回一个包含数组键值对的迭代器对象，通过同步调用得到数组元素的键值对。不断调用next方法便可依次得到数组中的值。

        var num =  [0, 2, 4, 6, 8, 10, 12, 14, 16];
        var iterator = nums[Symbol.iterator]();
        console.log(iterator.next().value);//0
        console.log(iterator.next().value);//2

entries

返回包含数组所有键值对的@@iterator

includes

若数组中存在某个元素，则返回true，否则返回false,第一个参数是要查寻的元素，第二个参数是开始查询的索引位置。

        console.log(num.includes(10, 0));//true

copyWithin

复制数组中一系列的元素到同一个数组指定的起始位置

        //copyWithin,第一个参数是被复制元素放置的起始位置，第二参数是需要复制的元素的起始位置
        var arrCopy = num.copyWithin(7, 3, 5);
        console.log(arrCopy); //[0, 2, 4, 6, 8, 10, 12, 6, 8]

find

根据回调函数中的条件从数组中查找元素，若是找到该元素，就返回该元素（返回的是第一个满足条件的值）。

findIndex

根据回调函数中的条件从数组中查找元素，若是找到该元素，就返回该元素的索引（返回的是第一个满足条件的值）。

        function arr12(element) {
            return (element % 12 != 0) ? true : false;
        }
        console.log(num.find(arr12));//10
        console.log(num.findIndex(arr12));//1

fill

使用静态值填充数组

        //第一个参数表示要填充的静态值，第二个参数是被填充数组的起始位位置，第三个参数是被填充的末尾位置
        arrItem.fill(9, 2);
        console.log(arrItem); //[9, 9, 9, 9, 9, 9, 9]

from

根据已有的数组，创建一个新数组

        var newNum = Array.from(num);
        console.log(newNum); //[0, 2, 4, 6, 8, 10, 12, 14, 16]

keys

返回包含数组所有索引的@@iterator

        var _keys = num.keys();
        console.log(_keys.next());//{value: 0, done: false}
        console.log(_keys.next());//{value: 1, done: false}
        console.log(_keys.next());//{value: 2, done: false}

of

根据传入的参数创建新数组

        var arrItem = Array.of(1, 2, 3, 5, 4, 6, 9);
        console.log(arrItem); //[1, 2, 3, 5, 4, 6, 9]

实现原理：

    function ArrayOf() {
        return [].slice.call(arguments)
    }
    var arr = ArrayOf(1, 2, 3, 5);
    console.log(arr); //[1,2,3,5]

values

返回包含数组所有值的@@iterator

        var _values = num.values();
        console.log(_values.next()); //{value: 0, done: false}
        console.log(_values.next());//{value: 2, done: false}