数组方法总结

一、稀松数组

1、稀松数组概念;

2、访问empty打印值是undefined;

二、类数组（是对象，有length属性，可以通过[ ]访问，但是没有Array上的方法）

 1、arguments
 2、DOM List
 3、String -->   var str ='12345';
                 console.log(str[1]);//2
                 console.log(str.length);//5

三、数组上面方法：ES5和以前
1、转字符串 toString( ) join( ) || str.split( )

1、toString( ): 去掉数组最外面那层[],多层嵌套也可以
console.log(Array.prototype.toString.call([[1, 2], [3, 4]]));//'1,2,3,4'

2、join( ):可以去掉数组最外面那层[ ],但是一旦传入分隔符-,它就只能拔第一层
console.log([1, [2, [3, 4, 5]]].join());//1,2,3,4,5
console.log([1, [2, [3, 4, 5]]].join('-'));//1-2,3,4,5 --》跟toString区别

3、str.split( )
var str = '123';
console.log(str.split());//['123']
console.log(str.split(''));//['1', '2', '3']

2、堆栈方法 push( ) 、pop( ) || unshift( )、shift( )

push( ) 返回值：增加数组后的长度
pop( ) 返回值：删除的项目

unshift( ) 返回值：增加数组后的长度
shift( ) 返回值：删掉的项目

var arr = [1, 2, 3, 4, 5];
console.log(arr, arr.push(8));//[1, 2, 3, 4, 5, 8] 6
console.log(arr, arr.pop( ));//[1, 2, 3, 4, 5] 8
console.log(arr, arr.unshift(0));//[0, 1, 2, 3, 4, 5] 6
console.log(arr, arr.shift( ));//[1, 2, 3, 4, 5] 0

3、排序方法 reserve( )、sort( )、随机排序 Math.random( )

reserve( ) 返回值：倒序后的原数组（操作原数组）
sort( ) 返回值：重新排序后的原数组（操作原数组）
随机排序 Math.random( )
var arr = [1, 2, 3];
console.log(arr, arr.sort((a, b) => b-a));//[3, 2, 1] [3, 2, 1]
console.log(arr, arr.reverse(arr));//[3, 2, 1] [3, 2, 1]

4、数组拼接 concat( )

var arr = [1, 2];
console.log(arr.concat(3, 4));//[1, 2, 3, 4]
console.log(arr.concat([3, 4]));//[1, 2, 3, 4]

//concat( ) 不能拼接嵌套数组
console.log(arr.concat([1, [2]]));//[1, 2, 1, Array(1)] x

5、删改数组 slice( ) 、splice( )

slice( ) 1、[) 左闭右开 ; 
        2、start end (无法倒序);

             用法 1、截取一个数组，并返回新数组(不会操作原数组)
                     //不传参数,复制一份原数组返回
                     var arr = [1, 2, 3, 4, 5];
                     console.log(arr.slice())//[1, 2, 3, 4, 5]
                     //传一个参数,截取数组
                     var arr = [1, 2, 3, 4, 5];
                     console.log(arr.slice(2));//[3, 4, 5]
                     //传二个参数,左闭右开,截取数组
                     var arr = [1, 2, 3, 4, 5];
                     console.log(arr.slice(2, 4));//[3, 4]
                     //start end (无法倒序);
                     var arr = [1, 2, 3, 4, 5];
                     console.log(arr.slice(4, 2));//[]
                    //传负数,反过来算开始索引位置,然后再往右截取
                     var arr = [1, 2, 3, 4, 5];
                     console.log(arr.slice(-2))//[4, 5]

                     var arr = [1, 2, 3, 4, 5];
                     console.log(arr.slice(-2, -1));//[4]

                  2、将字符串、类数组转变为数组
                     var str = '12345';
                     console.log(Array.prototype.slice.call(str));//['1', '2', '3', '4', '5']
            
                     function test( ){
                          console.log(Array.prototype.slice.call(arguments));//[1, 2, 3, 4, 5]
                      }
                      test(1,2,3,4,5);

splice( )
        用法1、返回删除的元素组成的新数组（会修改原数组）,如果不传,则返回空数组
        //不传参数,不做操作
        var arr = [1, 2, 3, 4, 5, 6];
        console.log(arr, arr.splice( ))//[]
        //一个参数,做截取操作,左闭右开
        var arr = [1, 2, 3, 4, 5, 6];
        console.log(arr, arr.splice(3))//[1, 2, 3]  [4, 5, 6] 
        //二个参数,1、start：增加或者删除的位置  2、指定删除的个数
        var arr = [1, 2, 3, 4, 5, 6];
        console.log(arr, arr.splice(0, 3))//[4, 5, 6]  [1, 2, 3]
        //三个参数,插入的值
        var arr = [1, 2];
        console.log(arr.splice(0, 0, 'a', 'b'))//['a', 'b', 1, 2]
        console.log(arr.splice(0, 0, ['a', 'b']))//[Array(2), 1, 2]//当一个值插入，和concat()不一样

6、索引方法 indexOf( ) 、 lastIndexOf( )

indexOf( ) ：返回在数组中可以找到一个给定元素的第一个索引，如果不存在，则返回-1
lastIndexOf( ) ：返回指定元素（也即有效的 JavaScript 值或变量）在数组中的最后一个的索引，如果不存在则返回 -1。从数组的后面向前查找，从 fromIndex 处开始

7、ES6中 Array.of( ) 、Array.from( )

//以前可以通过Array( )来创建数组，但是传一个参数进去和几个参数进去，存在很大差异
console.log(Array(3));//Array(3),length = 3
console.log(Array(1, 2, 3));//[1, 2, 3]

//所以ES6引入Array.of( )优化
console.log(Array.of(3));//[3]
console.log(Array.of(1, 2, 3));//[1, 2, 3]

Array.from( ):将类数组变为数组
//ES5方法
function test( ){
    console.log(Array.prototype.slice.call(arguments));//[1, 2]
};
test(1, 2);
//ES6
function test( ){
    console.log(Array.from(arguments));//[1, 2]
};
test(1, 2);
//...运算符 = Array.from( )
function test( ){
    console.log([...arguments]);//[1, 2]
};
test(1, 2);

四、数组迭代的方法 forEach( ) 、 map( ) 、 filter ( ) 、some ( ) every( ) 、reduce( )

总结：
    forEach:循环
    map：返回一个跟原数组有映射关系的数组,原数组有几项就会返回几项,成对出现
    filter：返回一个过滤某一项或者几项的数组
    some：用于判断,有一项通过,返回布尔值 true
    every：用于判断,里面数组是每一项全部通过,返回布尔值 true

--> forEach( ) 
1、第一个参数：callback函数，有三个形参(item:迭代项  index：索引  arr：原数组）
            var arr = [9, 8, 7, 6];
            arr.forEach(function(item, index, arr){
                console.log(item);//9 8 7 6
                console.log(index);//0 1 2 3
                console.log(arr);//[9, 8, 7, 6]
            })
//map forEach filter some every中item、index和arr参数都是一样的

2、第二个参数,this指向，默认是window
 var obj = {
     name: '张三',
     times: [1, 2, 3],
     print: function( ){
                console.log(this);//obj
                this.times.forEach(function(item){
                       console.log(this);//window
                 })
            }
       }
       obj.print( );
       传入this,可以保存到全局this,本例是obj
            var obj = {
                name: '张三',
                times: [1, 2, 3],
                print: function(){
                    console.log(this);//obj
                    this.times.forEach(function(item){
                        console.log(this);//window --> obj
                    }, this)
                }
            }
            obj.print();

3、forEach没有返回值，哪怕你直接return 一个值 都不行

4、空数组、稀松数组 并不会调用forEach()方法
var arr = [ ];
arr.forEach(function( ){
    console.log(1);//什么都没打印
})

var arr = [1, , ,3];
arr.forEach(function(item){
    console.log(item);//1 3
})

5、类数组 调用forEach( ) 1、强制调用 2、转数组后调用
function test( ){
    // console.log(arguments.forEach(function(item){
    //     console.log(item);// TypeError: arguments.forEach is not a function
    //}))
    //1、类数组变成数组，再调用，现在用
    //[...arguments].forEach(function(item){
    //     console.log(item);//1 2
    // })
    //2、强行调用
Array.prototype.forEach.call(arguments, function(item){
      console.log(item);//1 2
    })
            
}
 test(1, 2);

--> map( ) 
 2.1：返回一个映射函数
 2.2：this指向 
 2.3: 其他都跟forEach一样
 var arr = [1, 2, 3];
            var arr1 = arr.map(function(item, index, arr){
                return item * 2;
            })
            console.log(arr1);//[2, 4, 6]

//后端返回的数据，希望拿到里面name值，怎么做？
          var user = [
                {
                    name: '张三',
                    age: 18,
                    sex: 'male'
                },{

                    name: '李四',
                    age: 20,
                    sex: 'male' 
                },{
                    name: '王五',
                    age: 16,
                    sex: 'male'
                }
            ];
            var nameArr = user.map(function(item){
                return item.name;
            });
            console.log(nameArr);//['张三', '李四', '王五']

--> filter( ) 过滤数组
返回：一个只有true值的数组
     1、return item：直接返回一个true值的数组
     2、return item+判断条件:直接返回一个对应条件true值的数组
     
     //常见需求：去掉原本数组里面的undefined、null去掉
            var arr = [1, 3, 4,undefined, null, 8, 0];
            var newArr = arr.filter(function(item, index, arr){
                return item != undefined;//undefined != undefined/null != undefined 返回flase,被过滤
            })
            console.log(newArr);//[1, 3, 4, 8, 0]

--> some:用于判断，只要有一个成员通过，那么返回就是true
--> every:用于判断，所有成员都要通过，那么返回就是true
 var arr = [1, 2, 3, 4, 5];
            var arr1 = arr.some(function(item, index, arr){
                return item % 2 === 0;
            });
            var arr2 = arr.every(function(item, index, arr){
                return item % 2 === 0;
            });
            console.log(arr1, arr2);//true false