JavaScript基础04——数组的创建及方法

数组的概念及定义

数组的概念：

        一组数据，数据的组和

        哪些数据的组和，只要是数据（所有数据），就可以放在数组中

数组的意义：

        可以同时操作多个数据

 数组的创建方式

  var arr1 = [1,2,3];           //字面量方式
    var arr2 = new Array(1,2,3)   //构造函数方式

    注意：当只有一个数据时，两种创建方式的不同。

    var arr1 = [5]             //表示有一个数组元素5
    var arr2 = new Array(5)    //表示有5个数组元素，值全部为undefined

 数组的操作-索引

索引操作：
        增：给并不存在的索引，赋值
        arr[5] = 1;
        console.log(arr[5]);
        console.log(arr)
        删
        console.log(arr.length)
        arr.length = 1;
        console.log(arr)
        改
        console.log(arr[0]);
        arr[0] = "hahahah";
        console.log(arr)
        查：数组的遍历
        console.log(arr[0])
        for(var i=0;i<arr.length;i++){
            console.log(arr[i])
        }

数组的操作-方法

        增
        在末尾添加元素               arr.push
        arr.push("gg");
        console.log(arr)
        var c = arr.push("gg")          //返回值是所增值的位置
        console.log(c)
        在开始添加元素               arr.unshift
         var a = arr.unshift("mm");
        console.log(a)
        删
        在末尾删除最后一位           arr.pop
        arr.pop()
        console.log(arr)
        删除第一个                   arr.shift
        arr.shift()
        console.log(arr)
        

        替换
        从第n个项目开始删除，一共删除m个，再删除的位置加入a.....     arr.splice（n,m,a...）
        console.log(arr)
        arr.splice(1,2,"pop","mmp")      从第二个数开始，删除两个（第二个和第三个）加入两个
        var b = arr.splice(1,2,"pop","mmp")          //返回被删除/替换的元素。
        console.log(b)
        console.log(arr)            

        截取
        返回一个新数组，从下标n的位置取到m"前一个"             arr.slice(n,m)
        arr.slice(2,4);
        console.log(arr);      // 不改变原数组
        var a = arr.slice(2,4);     截取第三到第四个，不包括第五个
        console.log(a)

　　　　　补充：可从已有的数组中返回选定的元素。

        该方法接收两个参数slice(start,end)，strat为必选，表示从第几位开始；

        end为可选，表示到第几位结束(不包含end位)，省略表示到最后一位；

        start和end都可以为负数，负数时表示从最后一位开始算起，如-1表示最后一位

        var arr = ["Tom","Jack","Lucy","Lily","May"];

        console.log(arr.slice(1,3));        //["Jack","Lucy"]       //返回值是截取的数组

        console.log(arr.slice(1));          //["Jack","Lucy","Lily","May"]

        console.log(arr.slice(-4,-1));      //["Jack","Lucy","Lily"]

        console.log(arr.slice(-2));         //["Lily","May"]

        console.log(arr.slice(1,-2));       //["Jack","Lucy"]

        console.log(arr);                   //["Tom","Jack","Lucy","Lily","May"]---原数组未改变

        排序
        var arr2 = [11,3,25,35,67]
        arr2.sort()
        console.log(arr2)       //按照字符方式排序
        arr2.sort(function(a,b){
            return a-b
        })
        var a = arr2.sort(function(a,b){
            return a-b
        })
        console.log(a)
        console.log(arr2)        //按照数字排序需要函数

        toString();
        转换成字符串，类似于没有参数的join()。
        该方法会在数据发生隐式类型转换时被自动调用，如果手动调用，就是直接转为字符串。
        var arr = [1,2,3];
        console.log(arr.toString());     //1,2,3
        console.log(arr);                //[1,2,3]---原数组未改变
    

concat()
        用于连接两个或多个数组，该方法不会改变现有的数组，而仅仅会返回被连接数组的一个副本。
        var arr1 = [1,2,3]
        var arr2 = arr1.concat();
        console.log(arr1);           //[1,2,3]---原数组
        console.log(arr1 === arr2);  //false
        console.log(arr2);           //[1,2,3]---原数组的副本

        console.log(arr1.concat("hello","world"));           //[1,2,3,"hello","world"]
        console.log(arr1.concat(["a","b"],[[3,4],{"name":"admin"}]));   //[1,2,3,"a","b",[3,4],{"name":"admin"}]
        // data为数组时，将data合并到原数组；data为具体数据时直接添加到原数组尾部；省略时创建原数组的副本。

        console.log(arr1);           //[1,2,3]---原数组未改变

join()
        根据指定分隔符将数组中的所有元素放入一个字符串，并返回这个字符串。
        参数：join(str);参数可选，默认为","号，以传入的字符作为分隔符。
        var arr = [1,2,3];
        console.log(arr.join());         //1,2,3
        var a = arr.join();
        console.log(a);                 //1,2,3     返回值是这个字符串
        console.log(arr.join("&"))
        console.log(arr.join("-"));      //1-2-3
        console.log(arr);                //[1,2,3]---原数组未改变

reverse()
        颠倒数组中元素的顺序
        var arr = [1,2,3];
        console.log(arr.reverse());     //[3,2,1]
        console.log(arr);               //[3,2,1]---原数组改变
        var a = arr.reverse();
        console.log(a)                  //返回值是改变后的数组

valueOf()
        返回数组的原始值（一般情况下其实就是"数组自身"），一般由js在后台调用，并不显式的出现在代码中
        var arr = [1,2,3];
        console.log(arr.valueOf());         //[1,2,3]
        console.log(arr);                   //[1,2,3]
        //为了证明返回的是数组自身
        console.log(arr.valueOf() == arr);  //true

indexOf()
        根据指定的数据，从左向右，查询在数组中出现的位置，如果不存在指定的数据，返回-1。
        该方法是查询方法，"""不会对数组产生改变"""。
        indexOf(value, start);value为要查询的数据；start为可选，表示开始查询的位置，
        当start为负数时，从数组的尾部向前数；如果查询不到value的存在，则方法返回-1
        var arr = ["h","e","l","l","o"];
        console.log(arr.indexOf("l"));        //2
        console.log(arr.indexOf("l",3));      //3
        console.log(arr.indexOf("l",4));      //-1
        console.log(arr.indexOf("l",-1));     //-1
        console.log(arr.indexOf("l",-3));     //2

lastIndexOf()
        根据指定的数据，从右向左，查询在数组中出现的位置，如果不存在指定的数据，返回-1。
        该方法是查询方法，不会对数组产生改变。
        lastIndexOf(value, start);value为要查询的数据；start为可选，表示开始查询的位置，
        当start为负数时，从数组的尾部向前数；如果查询不到value的存在，则方法返回-1
        var arr = ["h","e","l","l","o"];
        console.log(arr.lastIndexOf("l"));        //3
        console.log(arr.lastIndexOf("l",3));      //3
        console.log(arr.lastIndexOf("l",1));      //-1
        console.log(arr.lastIndexOf("l",-3));     //2
        console.log(arr.lastIndexOf("l",-4));     //-1

forEach()
        ES5新增方法，用来遍历数组，该方法没有返回值。
        forEach接收的回调函数会根据数组的每一项执行，该回调函数默认有三个参数，
        分别为：遍历到的数组的数据，对应的索引，数组自身。
        forEach(callback);callback默认有三个参数，分别为value，index，self。
        var arr = ["Tom","Jack","Lucy","Lily","May"];
        var a = arr.forEach(function(value,index,self){
            console.log(value + "--" + index + "--" + (arr === self));
        })
        // 打印结果为：
        // Tom--0--true
        // Jack--1--true
        // Lucy--2--true
        // Lily--3--true
        // May--4--true
        console.log(a);     //undefined---forEach没有返回值
        //该方法为遍历方法，不会修改原数组

16.map()
        同forEach功能；2.map的回调函数会将执行结果返回，最后map将所有回调函数的返回值组成新数组返回。
        map(callback);callback默认有三个参数，分别为value，index，self。
        功能1：同forEach
        var arr = ["Tom","Jack","Lucy","Lily","May"];
        var a = arr.map(function(value,index,self){
            console.log(value + "--" + index + "--" + (arr === self))
        })
        // 打印结果为：
        // Tom--0--true
        // Jack--1--true
        // Lucy--2--true
        // Lily--3--true
        // May--4--true

        //功能2：每次回调函数的返回值被map组成新数组返回
        var arr = ["Tom","Jack","Lucy","Lily","May"];
        var a = arr.map(function(value,index,self){
            return "hi:"+value;
        })
        console.log(a);     //["hi:Tom", "hi:Jack", "hi:Lucy", "hi:Lily", "hi:May"]
        console.log(arr);   //["Tom", "Jack", "Lucy", "Lily", "May"]---原数组未改变

filter()
        1.同forEach功能；2.filter的回调函数需要返回布尔值，当为true时，
        将本次数组的数据返回给filter，最后filter将所有回调函数的返回值组成新数组返回（此功能可理解为“过滤”）。
        filter(callback);callback默认有三个参数，分别为value，index，self。
          功能1：同forEach
        var arr = ["Tom","Jack","Lucy","Lily","May"];
        var a = arr.filter(function(value,index,self){
            console.log(value + "--" + index + "--" + (arr === self))
        })
        // 打印结果为：
        // Tom--0--true
        // Jack--1--true
        // Lucy--2--true
        // Lily--3--true
        // May--4--true

        //功能2：当回调函数的返回值为true时，本次的数组值返回给filter，被filter组成新数组返回
        var arr = ["Tom","Jack","Lucy","Lily","May"];
        var a = arr.filter(function(value,index,self){
            return value.length > 3;
        })
        console.log(a);         //["Jack", "Lucy", "Lily"]
        console.log(arr);       //["Tom", "Jack", "Lucy", "Lily", "May"]---原数组未改变

every()
        判断数组中每一项是否都满足条件，只有所有项都满足条件，才会返回true。
        every()接收一个回调函数作为参数，这个回调函数需要有返回值，every(callback);
        callback默认有三个参数，分别为value，index，self
        当回调函数的返回值为true时，类似于forEach的功能，遍历所有；
        如果为false，那么停止执行，后面的数据不再遍历，停在第一个返回false的位置。
        var arr = ["Tom","abc","Jack","Lucy","Lily","May"];
        var a = arr.every(function(value,index,self){
            console.log(value + "--" + index + "--" + (arr == self))
        })
        打印结果为：
        Tom--0--true
        因为回调函数中没有return true，默认返回undefined，等同于返回false

        demo2:
        var arr = ["Tom","abc","Jack","Lucy","Lily","May"];
        var a = arr.every(function(value,index,self){
            console.log(value + "--" + index + "--" + (arr == self))
            return value.length < 4;
        })
        打印结果为：
        Tom--0--true
        abc--1--true
        Jack--2--true
        因为当遍历到Jack时，回调函数到return返回false，此时Jack已经遍历，但是后面数据就不再被遍历了

         demo3:
        var arr = ["Tom","abc","Jack","Lucy","Lily","May"];
        var a = arr.every(function(value,index,self){
            console.log(value + "--" + index + "--" + (arr == self))
            return true;
        })
        // 打印结果为：
        // Tom--0--true
        // abc--1--true
        // Jack--2--true
        // Lucy--3--true
        // Lily--4--true
        // May--5--true
        //因为每个回调函数的返回值都是true，那么会遍历数组所有数据，等同于forEach功能

        功能2：当每个回调函数的返回值都为true时，every的返回值为true，只要有一个回调函数的返回值为false，every的返回值都为false

         demo1:
        var arr = ["Tom","abc","Jack","Lucy","Lily","May"];
        var a = arr.every(function(value,index,self){
            return value.length > 3;
        })
        console.log(a);           //false

        //demo2:
        var arr = ["Tom","abc","Jack","Lucy","Lily","May"];
        var a = arr.every(function(value,index,self){
            return value.length > 2;
        })
        console.log(a);           //true

 some()
        功能：判断数组中是否存在满足条件的项，只要有一项满足条件，就会返回true。
        参数：some()接收一个回调函数作为参数，这个回调函数需要有返回值，some(callback);
        callback默认有三个参数，分别为value，index，self。

        功能1：因为要判断数组中的每一项，只要有一个回调函数返回true，some都会返回true，所以与every正好相反，当遇到一个回调函数的返回值为true时，可以确定结果，
　　　　　　那么停止执行，后面都数据不再遍历，停在第一个返回true的位置；当回调函数的返回值为false时，需要继续向后执行，到最后才能确定结果，所以会遍历所有数据，实现类似于forEach的功能，遍历所有。

         demo1:
        var arr = ["Tom","abc","Jack","Lucy","Lily","May"];
        var a = arr.some(function(value,index,self){
            console.log(value + "--" + index + "--" + (arr == self))
            return value.length > 3;
        })
        // 打印结果为：
        // Tom--0--true
        // abc--1--true
        // Jack--2--true

        功能2：与every相反，只要有一个回调函数的返回值都为true，some的返回值为true，所有回调函数的返回值为false，some的返回值才为false
        demo1:
        var arr = ["Tom","abc","Jack","Lucy","Lily","May"];
        var a = arr.some(function(value,index,self){
            return value.length > 3;
        })
        console.log(a);             //true

        //demo2:
        var arr = ["Tom","abc","Jack","Lucy","Lily","May"];
        var a = arr.some(function(value,index,self){
            return value.length > 4;
        })
        console.log(a);             //false

reduce()
        功能：从数组的第一项开始，逐个遍历到最后，迭代数组的所有项，然后构建一个最终返回的值。

        参数：reduce()接收一个或两个参数：第一个是回调函数，表示在数组的每一项上调用的函数；
        第二个参数（可选的）作为归并的初始值，被回调函数第一次执行时的第一个参数接收。
        reduce(callback,initial);callback默认有四个参数，分别为prev，now，index，self。
        callback返回的任何值都会作为下一次执行的第一个参数。
        如果initial参数被省略，那么第一次迭代发生在数组的第二项上，因此callback的第一个参数是数组的第一项，第二个参数就是数组的第二项。
         demo1:不省略initial参数，回调函数没有返回值
    var arr = [10,20,30,40,50];
    arr.reduce(function(prev,now,index,self){
        console.log(prev + "--" + now + "--" + index + "--" + (arr == self))
    }, 2019)
    // 打印结果为：
    // 2019--10--0--true
    // undefined--20--1--true
    // undefined--30--2--true
    // undefined--40--3--true
    // undefined--50--4--true
    // 此时回调函数没有return，所以从第二次开始，prev拿到的是undefined

    //demo2:省略initial参数，回调函数没有返回值
    var arr = [10,20,30,40,50];
    arr.reduce(function(prev,now,index,self){
        console.log(prev + "--" + now + "--" + index + "--" + (arr == self))
    })
    打印结果为：第一次，回调函数的第一个参数是数组的第一项。第二个参数就是数组的第二项
    10--20--1--true
    undefined--30--2--true
    undefined--40--3--true
    undefined--50--4--true
    此时回调函数没有return，所以从第二次开始，prev拿到的是undefined

    demo3:不省略initial参数，回调函数有返回值
    var arr = [10,20,30,40,50];
    arr.reduce(function(prev,now,index,self){
        console.log(prev + "--" + now + "--" + index + "--" + (arr == self));
        return "hello";
    }, 2019)
    打印结果为：
    2019--10--0--true
    hello--20--1--true
    hello--30--2--true
    hello--40--3--true
    hello--50--4--true
    此时回调函数有return，所以从第二次开始，prev拿到的是回调函数return的值

    demo4:省略initial参数，回调函数有返回值
    var arr = [10,20,30,40,50];
    arr.reduce(function(prev,now,index,self){
        console.log(prev + "--" + now + "--" + index + "--" + (arr == self));
        return "hello";
    })
    // 打印结果为：第一次，回调函数的第一个参数是数组的第一项。第二个参数就是数组的第二项
    // 10--20--1--true
    // hello--30--2--true
    // hello--40--3--true
    // hello--50--4--true
    // 此时回调函数有return，所以从第二次开始，prev拿到的是回调函数return的值

    //demo5：使用reduce计算数组中所有数据的和
    var arr = [10,20,30,40,50];
    var sum = arr.reduce(function(prev,now,index,self){
        return prev + now;
    })
    console.log(sum);      //150
    // 回调函数的最后一次return的结果被返回到reduce方法的身上

    //demo6：使用reduce计算数组中所有数据的和
    var arr = [10,20,30,40,50];
    var sum = arr.reduce(function(prev,now,index,self){
        return prev + now;
    }, 8)
    console.log(sum);      //158
    // 回调函数的最后一次return的结果被返回到reduce方法的身上
    // 因为reduce有第二个参数initial，在第一次执行时被计算，所以最终结果被加上8

reduceRight()
    功能：（与reduce类似）从数组的最后一项开始，向前逐个遍历到第一位，迭代数组的所有项，然后构建一个最终返回的值。
    参数：同reduce。
    demo：同reduce

是否改变原数组

    pop,shift; push,unshift; reverse; sort; splice—— yes。

 

功能方法没有必要关注返回值，但是功能方法可以有返回值

 数组的遍历(获取数组中的每个元素)

 数组元素的获取：

       索引，数组元素的下标，表示数组元素在数组中的顺序，从0开始，到arr.length-1

 

    利用循环，配合索引

整数数组／字符串数组／对象数组／二维数组

     整数数组：arr = [1,2,3,4,5,6,7]
        数组的元素为整数

    字符串数组：arr = ["h","e","l","l","o”]
        数组的元素为字符串

    json对象数组：arr = [{name:"Lisa"},{name:"Jack"},{name:"Loss"}]
        数组的元素为对象
        如何获取对象数组内的元素：arr[1].name;    //Jack

    二维数组：arr = [[1,"a",3],["hello",6,8],["color","width"]]
        数组的元素为数组
        如何获取而为数组内的元素：arr[2][1];      //width