数组方法

前言：

定义：数组是值的有序集合。 JS的数组是无类型的，数组元素可以是任意类型，并且同一个数组的不同元素也可能有不同的类型，每一个值叫做元素（数组元素），每个元素在数组中有一个位置。数组在平常的coding中是比较常用的数据格式，尤其式在解析后台数据时。之所以叫“教科书式的数组方法”，是因为每个方法我都配有示例，希望能通过示例的解析，让大家对方法能有更清晰对理解。除此之外，字符串和对象的方法也会在过两天分享，希望能对您有些许帮助，这将是我莫大的荣幸！

一、创建数组 x=[ ]

var a=["333","999"];        // 直接写在[ ]中

var aa=new Array(4,8,9);    // 通过实例传入Array中

var aaa=new Array(5);       // 传入的5为array的个数

    aaa[0]=6;               // 给aaa的第0个赋值为6

console.log(aaa);           //  [6,,,,,]

console.log(aa);            //  [4,8,9]

二、 访问数组元素 x.[index]

var a=["333","999"];

var b=a[0];              // 访问数组的第一个元素

var c=a[a.length-1];     // 访问数组的最后一个元素

var f=a["1"]===a[1];     // a["1"]会自动转为数字1

console.log(f);          //  true

当然，如果我们通过以下方式去访问时，会被解析成连续运算返回最后一个值

console.log([2,3,4,5][1,2]) // 4

数组也是一种特殊的对象，因此我们也可以通过键值对的形式去访问

var arr9 = [];

    arr9.say = 'Hello';

console.log(arr9.say)    // Hello

三、遍历数组 x.forEach(function(item,index,array){})

es6写法 forEach((item,index)=>{dosomething.....})

var a=["333","999"];

   a.forEach(function (item,index,array) {

           console.log(item,index)

 });
       //333 0  999 1

四、添加元素到数组的末尾 x.push(...)

var a=["333","999"];

    a.push("我是新元素","666");

console.log(a);    //["333","999","我是新元素","666"]

console.log(a.push("我","690"),a.length,a);  //6,["333","666","我是新元素","666","我","690"]

//返回新数组长度6，会执行一次a.push

五、在末尾删除数组(只能删除 1 个) x.pop()

var a=["333","999"];

    a.pop();

console.log(a);            // ["333"];  返回新数组

console.log( a.pop(),a);   //333 []

//会执行一次a.pop()，返回本次被删除元素

六、删除数组最前面元素 x.shift()

var a=["333","999"];

    a.shift();

console.log(a);            //  ["999"]

console.log( a.shift());   //  "999"

  //返回被删除元素，不会执行a.shift()

七、添加到数组的前面（头部）x.unshift("...")

var a=["333","999"];

    a.unshift("000","888","777");

console.log(a);

// ["000","888","777","333","999"]

console.log(a.unshift("111"),a.length,a);

//["111","000","888","777","333","999"]

   //会执行一次a.unshift，返回数组长度,

八、找到某个元素在数组中的索引 indexOf

var a=["333","999"];

var d=a.indexOf("333");   // 通过元素查找在当前数组的索引值

console.log(d);           // 0

var e=a.indexOf("654");   // 如果查不到返回-1

console.log(e);           // -1

九、复制数组 slice() , Array.from() […]

var a=[1,2,8];

var newArray=a.slice();

console.log(newArray);   //第一种方法  [1,2,8]

-----------------------------------

var newArray2=Array.from(a);

console.log(newArray2);  //第二种方法 [1,2,8]

------------------------------------

var newArray3=[...a];

console.log(newArray3);  //第三种方法 [1,2,8]

十、清空数组

// 两种方法都可以实现，但第二种比较优雅

var arr=[1,2,3,3,4,5];

    arr=[];

console.log(arr)     //  []

------------------------------------

var arr=[888,99];

    arr.length=0;

console.log(arr)     //  []

十一、合并数组

var arr=[1];

var arr2=[2];

var arr3=[3];

var arr4=arr.concat(arr2,arr3)

console.log(arr4)     // [1,2,3]

---------------------------------------
// 下面这个方法也可以实现，但只能合并两个数组

var arr1=[1,2,3];

var arr2=[4,5,6];

    arr1.push.apply(arr1,arr2);

console.log(arr1);   // [1, 2, 3, 4, 5, 6]

十二、在数组中找到最大值和最小值

//方法1
var array1 = [1,2,3,4];

var array2 = Math.max.apply(null,array1);  // 最大值

var array3 = Math.min.apply(null,array1);  // 最小值

console.log(array2,array3);                // 4 ,1

--------------------------------------------------

//方法2
var array4 =Math.max(...array1);         // 最大值

var array5 =Math.min(...array1);         // 最小值

console.log(array4,array5);              // 4 ,1

十三、判断是不是数组

// 在javascript中，如何判断一个变量是否是数组

(1)Array.isArray()方法

    var a = [0, 1, 2];

    console.log(Array.isArray(a));   // true

(2)typeof  toString 方法

由于低版本的IE不支持ES5，如需要兼容，用typeof，我们都知道，数组是特殊的对象，所以数组的typeof结果也是object，而因为null的结果也是object，所以需要加判断是 object同时排除null、排除纯对象,先判断a是不是object,并且a!==null, 并且toString.call判断a等于 [object Array]

var a = [0, 1, 2];

console.log( typeof a ==='object' &&  a !==null  &&  Object.prototype.toString.call(a) ==='[object Array]');   //  true

十四、数组与其他值的运算(使用”+”会自动转为string,”-“会自动转为number)

// 数组和任何值相加都会将数组转换成字符串再进行拼接

console.log([1,2,3] + 6) ;       // "1,2,36"

console.log([1,2,3] + {}) ;      // "1,2,3[object Object]"

console.log([1,2,3] + [1,2,3])； // "1,2,31,2,3"

如果数组只有一个值，那么当这个数组和其他值相减相乘等时会被转换为数字，如果为空会被转换为0

console.log([5] - 2)          // 3

十五、数组去重

// ES6新增的Set数据结构，类似于数组，但是里面的元素都是唯一的，其构造函数可以接受一个数组作为参数

let arr1=[1,2,1,2,6,3,5,69,66,7,2,1,4,3,6,8,9663,8]

let set = new Set(arr1);

console.log(set)       //  {1,2,6,3,5,69,66,7,4,8,9663,8]

// ES6中Array新增了一个静态方法from，可以把类似数组的对象转换为数组

var arr=[1,2,1,2,6,3,5,69,66,7,2,1,4,3,6,8,9663,8]

console.log(Array.from( new Set(arr)))  // {1,2,6,3,5,69,66,7,4,8,9663,8]

//函数去重：

function removeRepeatArray(arr){
        return Array.from(new Set(arr))
}
console.log(removeRepeatArray([1,5,9,8,6,2,5,1,2,5,8,65,3,5,5,2,2,5]))
    //  [1, 5, 9, 8, 6, 2, 65, 3]

十六、将数组顺序打乱

function upsetArr(arr){
    return arr.sort(function(){ return Math.random() - 0.5});
}

解析：沿用原sort的 a-b 的方法，先生成一个随机数，然后将其与随机数进行 比较，如果 Math.random() - 0.5 是 true，则返回前者，否则比较下一个

十七 实现将数组中数字求和，字母忽略。

var arr=["a",3,4,5,9,"d"];
function sum(arr){
    var a=0;
    for(var i=0;iif(typeof arr[i]==="number"){
            a+=arr[i]
        }
    }
    return a;
}

sum(arr)  //21

通过循环遍历判断数组中的每个值是否是数字，如果是的赋值到变量上进行加法计算

十八、delete，splice删除数组内指定的某个值。

使用delete删除数组内的制定索引的值后，直接改的是原数组，而且删除值的位置仍然保留，为undefined。

var arr=[1,2,3,45,5,2];

    delete arr[0]

console.log(arr,arr[0]).   // [empty,2,3,45,5],undefined

如果要彻底删除，可以使用splice()方法 splice(开始位置，删除个数，添加的值)，如果没有第三个值，可以只传前两个值

两个值的示例：

var arr=[1,2,3,45,5,2];

    arr.splice(0,1)

console.log(arr)    //  [2, 3, 45, 5, 2]

三个值的示例：

var arr=[1,2,3,45,5,2];

    arr.splice(0,1,100)

console.log(arr)     //  [100 ,2, 3, 45, 5, 2]

十九、slice()截取数组，可选择开始位置和结束位置

slice()接收两个参数，第一个是开始位置，第二个是结束位置

var arr=[1,2,3,45,5,2];

    arr.slice(0,4)

console.log(arr). //  [1, 2, 3, 45]

如果slice()括号中不传参数，将会全部截取

var arr=[1,2,3,45,5,2];

    arr.slice()

console.log(arr).  //  [1, 2, 3, 45, 5, 2]

二十、颠倒数组的顺序，也称数组的反转

var arr=[1,2,3,45,5,2];

    arr.reverse()

console.log(arr)   // [2, 5, 45, 3, 2, 1]

二十一、join()将数组以括号中的值分割成字符串(不会改变原数组)

var arr=[1,2,3,45,5,2];

console.log(arr.join("_”));  //  "1_2_3_45_5_2"

console.log(arr);   //  [1, 2, 3, 45, 5, 2]

二十二、sort()排序，将数组中的值进行排序，从大到小或从小到大(会改变原本的数组)

sort原本的排序功能只能识别到个位数做比较，所以扩展使用以下方法：（排序方法有很多，这是最传统，也是使用频率较多的，其他的方法不再赘述）

var arr=[1,2,3,45,5,2];

    arr.sort(function(a,b){
        return a-b
    })
   //  [1, 2, 2, 3, 5, 45]

查看此时的arr数组：
    console.log(arr)  //   [1, 2, 2, 3, 5, 45]

    arr.sort(function(a,b){
        return b-a
    })
  //  [45, 5, 3, 2, 2, 1]

查看此时的arr数组：
    console.log(arr)  //   [45, 5, 3, 2, 2, 1]

当然我们有时是不可以改变原数组的，那么可以试试下面的方法将需要的内容拷贝出来即可：

var arr=[1,3,6,8,45,34,90,122,9,0];

var array=arr.slice();

    array.push(34)

console.log(arr，array)

// [1,3,6,8,45,34,90,122,9,0],[1,3,6,8,45,34,90,122,9,0,34]

---

数组中的迭代方法filter(), every(),forEach(),map(),some()

filter()：对数组中的每一项运行给定函数，返回该函数会返回true 的项组成的数组。

every()：对数组中的每一项运行给定函数，如果该函数对每一项都返回true，则返回true。

forEach()：对数组中的每一项运行给定函数。这个方法没有返回值。

map()：对数组中的每一项运行给定函数，返回每次函数调用的结果组成的数组。

some()：对数组中的每一项运行给定函数，如果该函数对任一项返回true，则返回 true.

一、数组迭代方法之filter()

（filter返回的是一个符合某种条件的数组，并返回，不会更改原数组）

var arr=[1,3,6,8,45,34,90,122,9,0];

var array = arr.filter(function(element){

        return element>10
    })
console.log(array)

//筛选数组中大于10的值， [45, 34, 90, 122]

//查看原数组，并没有改变

console.log(arr)    //  [1,3,6,8,45,34,90,122,9,0]

二、数组迭代方法之every()

（主要是用于判断一个素组中的值是否符合某个标准。必须是每个值都符合才会返回true。否则返回false）

var arr = [1,2,3,4,5,4,3,2,1];

var everyResult = arr.every(function(item, index, array){
    return (item > 2);
});

//判断数组中所有的值是否都大于2，如果都大于2，返回true，反之返回false.

console.log(everyResult)     //false

三、数组迭代方法之forEach()

（数组的循环遍历,对数组中的每一项运行给定函数。这个方法没有返回值。)

var arr=[1,3,6,8,45,34,90,122,9,0];

    arr.forEach(function(item,index,array){
        console.log(item,index,array)
    })
/*
 0 1 (10) [1, 3, 6, 8, 45, 34, 90, 122, 9, 0]
 1 3 (10) [1, 3, 6, 8, 45, 34, 90, 122, 9, 0]
 2 6 (10) [1, 3, 6, 8, 45, 34, 90, 122, 9, 0]
 3 8 (10) [1, 3, 6, 8, 45, 34, 90, 122, 9, 0]
 4 45 (10) [1, 3, 6, 8, 45, 34, 90, 122, 9, 0]
 5 34 (10) [1, 3, 6, 8, 45, 34, 90, 122, 9, 0]
 6 90 (10) [1, 3, 6, 8, 45, 34, 90, 122, 9, 0]
 7 122 (10) [1, 3, 6, 8, 45, 34, 90, 122, 9, 0]
 8 9 (10) [1, 3, 6, 8, 45, 34, 90, 122, 9, 0]
 9 0 (10) [1, 3, 6, 8, 45, 34, 90, 122, 9, 0]
*/

四、数组迭代方法之map()

（数组的循环遍历,对数组中的每一项运行给定函数，返回每次函数调用的结果组成的数组。)

var arr=[1,3,6,8,45,34,90,122,9,0];

    arr.map(function(item,index,array){
        console.log(index,item,array)
    })
 /*
 0 1 (10) [1, 3, 6, 8, 45, 34, 90, 122, 9, 0]
 1 3 (10) [1, 3, 6, 8, 45, 34, 90, 122, 9, 0]
 2 6 (10) [1, 3, 6, 8, 45, 34, 90, 122, 9, 0]
 3 8 (10) [1, 3, 6, 8, 45, 34, 90, 122, 9, 0]
 4 45 (10) [1, 3, 6, 8, 45, 34, 90, 122, 9, 0]
 5 34 (10) [1, 3, 6, 8, 45, 34, 90, 122, 9, 0]
 6 90 (10) [1, 3, 6, 8, 45, 34, 90, 122, 9, 0]
 7 122 (10) [1, 3, 6, 8, 45, 34, 90, 122, 9, 0]
 8 9 (10) [1, 3, 6, 8, 45, 34, 90, 122, 9, 0]
 9 0 (10) [1, 3, 6, 8, 45, 34, 90, 122, 9, 0]
 */

五、数组迭代方法之some()

(对数组中的每一项运行给定函数，如果该函数对任一项返回 true，则返回 true)

var numbers = [1,2,3,4,5,4,3,2,1];

var someResult = numbers.some(function(item, index, array){
    return (item > 2);
});

//只要有一个返回true，则返回true

console.log(someResult); // true

归并：迭代数组中的所有值，返回一个按条件计算的最终值。

reduce:

var values = [1,2,3,4,5];

var sum = reduce(function(prev, cur, index, array){
    return prev + cur;
});

//第一次执行回调函数，prev 是1，cur 是2。第二次，prev 是3（1 加2 的结果），cur 是3（数组的第三项）。这个过程会持续到把数组中的每一项都访问一遍，最后返回结果。
//通过循环遍历，返回数组中所有值的总和  15

reduceRight:

var values = [1,2,3,4,5];

var sum = reduceRight(function(prev, cur, index, array){
    return prev + cur;
});

//第一次执行回调函数，prev 是5，cur 是4。第二次，prev 是9（5加4 的结果），cur 是3（数组的第三项）。这个过程会持续到把数组中的每一项都访问一遍，最后返回结果。
//通过循环遍历，返回数组中所有值的总和  15