数组学习(一)

该学习笔记来源于《javascript高级程序设计》(第三版),主要为目前接触到的知识点的梳理,方便日后查看。目前刚开始,后续如果还有接触会陆续更新到这边,别问我为什么不一次性更完(捂脸哭.jpg),之前这些我可都是看过的呀!因为一直没用,我基本都不认识他们了..... 当然啦!如果这对你恰好也有帮助,那我也是很开心的😁。

5.2 Array类型

创建数组的基本方式有两种:

方式一:使用Array构造函数(new操作符也可省略不写)。

1     var colors = new Array();  //创建一个空数组
2     var colors = new Array(20); //创建一个length值为20的数组
3     var colors = new Array("red","black","blue","pinl"); //创建一个包含3个字符串的数组
4     console.log(colors);

 方式二:使用数组字面量表示法。

1     var colors = ["green","blue","pink"];  //创建一个包含3个字符串的数组
2     var names = [];//创建一个空数组
3     console.log(colors);
4     console.log(names);
    var group = [{name: "lily", age: 18}, {name: "sam", age: 20}]; //创建包含两个对象的数组。
    mgroup();
    function mgroup() {
        for (var i = 0; i < group.length; i++) {
            console.log(group[i]);
        }
    }

 

 数组之:索引和length

 数组之索引:

     var colors = ["green", "blue", "pink"];
     colors[3] = "brown";  //索引值超过数组现有项数,数组就会自动增加到该索引值加1的长度(比如该示例中:索引是3,因此数组长度就是4)
     colors[7] = "red"; //索引是7 数组是8
     console.log(colors);

数组之length:

    //当length属性值小于数组项数时:移除
    var colors = ["green", "blue", "pink"];//创建一个包含3个字符串的数组
    colors.length = 2;  //length属性设置为2(小于数组项数)会移除最后一项(位置为2的那一项),再访问colors[2]就会显示undefined
    console.log(colors);
    console.log(colors[2]);

    //当length属性值大于数组项数时:新增
    var colors = ["green", "blue", "pink"];//创建一个包含3个字符串的数组
    colors.length = 4;  //length属性设置为4(大于数组项数),则新增的每一项会取得undefined值
    console.log(colors);
    console.log(colors[3]); //undefined


    //利用length属性在数组末尾添加新项
    var colors = ["green", "blue", "pink"];//创建一个包含3个字符串的数组
    colors[colors.length] = "red"; //在位置3添加一种颜色
    colors[colors.length] = "black";//在位置4再添加一种颜色
    console.log(colors);    //(5) ["green", "blue", "pink", "red", "black"]

由于数组最后一项的索引值始终是length-1,因此下一个新项的位置就是length。每当在数组末尾添加一项后,其length属性都会自动更新以反应这一变化。

 

5.2.1 检测数组

方法有二分别为:

   // instanceof操作符的问题在于:假定只有一个全局执行环境
    if (colors instanceof Array) {
        console.log("Yes,array");
    }

    //ECMAscript5新增Array.isArray()方法。这个方法的目的是最终确定某个值到底是不是数组,而不管他是在哪个全局执行环境中创建的。
    if (Array.isArray(colors)) {
        console.log("is array");
    }

 

5.2.3 栈方法

push()方法可以接收任意数量的参数,把它们逐个添加到数组末尾,并返回修改后的数组长度。

     var colors = new Array();  //创建一个数组
     var count = colors.push("red", "black", "green");  //推入三项
     console.log(colors);
 
     count = colors.push("blue");    //推入另一项
     console.log(colors);

pop()方法则从数组末尾移除最后一项,减少数组的length值,然后返回移除的项。

     var item = colors.pop(); //取得最后一项
     console.log("数组最后一项的值为:" + item);
     console.log(colors);

 

5.2.5 重排序方法

reverse()方法会反转数组项的顺序。
var num = [0,1,5,10,15];
console.log(num);  //[0, 1, 5, 10, 15]
num.reverse();
console.log(num);  //[15, 10, 5, 1, 0]

 

sort()方法按升序排列数组项 -- 即最小的值位于最前面,最大的值排在最后面。为了实现排序,sort()方法会调用每个数组项的toString()转型方法,然后比较得到的字符串,以确定如何排序。即使数组中的每一项都是数值,sort()方法比较的也是字符串。

var num = [0,1,5,10,15];
num.sort();
console.log(num);    //[0, 1, 10, 15, 5]  //数值5虽然小于10,但在进行字符串比较时, “10”则位于“5”的前面。

 

以上排序方式在很多情况下都不是最佳方案,因此sort()方法接收一个比较函数作为参数,以便我们指定哪个值位于哪个值的前面。比较函数接收两个参数,如果第一个参数应该位于第二个参数之前则返回一个负数,如果两个参数相等则返回0,如果第一个参数应该位于第二个之后则返回一个正数,以下就是一个简单的比较函数:

var num = [0,1,5,10,15];
function compare(value1,value2) {
    if(value1<value2){
        return -1;
    }else if(value1>value2){
        return 1;
    }else {
        return 0;
    }
}

num.sort(compare);
console.log(num);    //[0, 1 , 5, 10, 15]

在将比较函数传递到sort()方法之后,数值仍然保持了正确的升序。当然也可以通过比较函数产生降序排列的结果,只要交换比较函数返回的值即可。

var num = [0,1,5,10,15];
function compare(value1,value2) {
    if(value1<value2){
        return 1;
    }else if(value1>value2){
        return -1;
    }else {
        return 0;
    }
}

num.sort(compare);
console.log(num);    //[15, 10, 5, 1, 0]

 

对于数值类型或者其valueOf方法会返回数值类型的对象类型,可以使用一个更简单的比较函数,这个函数只要用第一个函数减第二个函数即可。由于比较函数通过返回一个小于零、等于零或大于零的值来影响排序结果,因此,减法操作就可以适当地处理所有这些情况。

var num = [0,1,5,10,15];
function compare(value1,value2) {
    return value1 - value2  //升序排列,降序:value2 - value1
} num.sort(compare); console.log(num); //[0, 1, 5, 10, 15]

 

 

5.2.6 操作方法

concat()方法可以基于当前数组中的所有项创建一个新数组。具体来说,这个方法会创建当前数组一个副本,然后将接收到的参数添加到这个副本的末尾,最后返回新构建的数组。在没有给concat方法传递参数的情况下,它只是复制当前数组并返回副本。

    var colors = ["red","blue"];
    var colors2 = colors.concat("green","black",["pink","brown"]);
    console.log(colors2);

 slice()方法,它能够基于当前数组中的一或多个项创建一个新数组。slice()方法可以接受一或是二个参数,即要返回项的起始和结束位置。注意slice()方法不会影响原始数组。

  • 一个参数:slice()方法返回从该参数指定位置开始到当前数组末尾的所有项。
  • 二个参数:slice()方法则返回起始和结束位置之间的项-但不包括结束位置的项
    var colors = ["orange", "blue", "green", "black", "pink", "white", "brown"];
    var colors2 = colors.slice(1);  //接受一个参数
    var colors3 = colors.slice(1, 5); //接受二个参数
    console.log(colors2);
    console.log(colors3);

 splice()方法算是最强大的数组方法了,他有很多用法。splice()主要的用途是向数组的中部插入项,但使用这种方法的方式则有如下3种:

  • 删除:可以删除任意数量的项,只需指定2个参数:要删除的第一项的位置和要删除的项数。例如:splice(0,2)会删除数组中的前两项。
  • 插入:可以向指定位置插入任意数量的项,只需提供三个参数:起始位置、0(要删除的项数)和要插入的项(任意多个项)。
  • 替换:可以向指定位置插入任意数量的项,且同时删除任意数量的项,只需指定3个参数:起始位置、要删除的项数和要插入的任意数量的项。插入的项数不必与删除的项数相等。
    //删除
    var colors = ["red", "orange", "blue"];
    var removed = colors.splice(0, 1); //删除第一项
    console.log(colors);   //(2) ["orange", "blue"]
    console.log(removed); //["red"]  返回的数组中只包含一项

    //插入
    var removed = colors.splice(1, 0, "pink", "white"); //从位置1开始插入两项
    console.log(colors);  //(4) ["orange", "pink", "white", "blue"]
    console.log(removed); //返回的是一个空数组
    
    //替换
    var removed = colors.splice(1, 1, "purple", "black");  //插入两项,删除一项(pink)
    console.log(colors);    // ["orange", "purple", "black", "white", "blue"]
    console.log(removed);   //["pink"] 返回的数组中只包含一项

 

5.2.7 位置方法

ECMScript5为数组实例添加了两个位置方法:indexOf和lastIndexOf。这两个方法都接收两个参数:要查找都项和(可选的)表示查找起点位置的索引。其中indexOf方法从数组的开头(位置0)开始向后查找,lastIndexOf方法则从数组的末尾开始向前查找。

这两个方法都返回要查找的项在数组中的位置,或者在没找到的情况下返回-1。

    const arr = [1,2,3,4,5,4,6,7,8];

    console.log(arr.indexOf(9));  //-1
    console.log(arr.indexOf(4));  //3
    console.log(arr.lastIndexOf(4));  //5

 

5.2.8 迭代方法

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

只是对数组中对每一项运行传入的函数,该函数接收三个参数:当前值(数组中正在处理的当前元素)、索引(数组中正在处理的当前元素的索引)、数组(forEach()方法正在操作的数组)。没有返回值,本质上与使用for循环迭代数组一样,来看以下例子。
    const arr = ['lily', 'Tom', 'adsem'];

    arr.forEach(function (curr,index,arr) {  //三个参数:当前值、索引、数组
        console.log(curr);
        console.log(index);
        console.log(arr);
    })

 

5.2.9 归并方法

ECMAScript5新增两个归并数组的方法:reduce()和reduceRight()。这两个方法都会迭代数组都所有项,然后构建一个最终返回都值。其中,reduce()方法从数组都第一项开始,逐个遍历到最后。而reduceRight()则从数组都最后一项开始,向前遍历到第一项。

这两个方法都接收两个参数:一个在每一项上调用都函数和(可选的)作为归并基础的初始值。传给reduce()和reduceRight()的函数接收4个参数:前一个值、当前值、项的索引和数组对象。这个函数返回的任何值都会作为第一个参数自动传递给下一项。第一次迭代发生在数组的第二项上,因此第一个参数是数组的第一项,第二个参数就是数组的第二项。

使用reduce()方法可以执行求数组中所有值之和的操作,比如:

var num = [0,1,5,10,15,8];

var getSum = num.reduce(function (prev, cur, index, array) {
    return prev + cur;
});
console.log(getSum); //39

reduceRight()的作用类似,只不过方向相反而已。

使用reduce()和reduceRight(),主要取决于要从哪头开始遍历数组。除此之外,它们完全相同。

 

 

关于数组的想关操作:

    // 获取数组中的最大、最小值
    var num = [1,4,3,8,54,95,231,0,999,-88];
    var Max = Math.max.apply(Math,num);
    var Min = Math.min.apply(Math,num);
    console.log(Max);
    console.log(Min);

 

//数组求和 reduce()
var num = [0,1,5,10,15,8,8];
function getSum(big){
    return big.reduce(function(prev, curr,index,big){
           return prev + curr;
    })
}
var result =  getSum(num);
console.log('求和结果:', result); //求和结果:47

//数组求和 foreach():
var num = [0,1,5,10,15,8,8];
function getSum(num) {
    var sum = 0;
    num.forEach(function (cur,index,array) {
        sum += cur
    });
    return sum;
}
console.log(getSum(num)); //47

更多数组求和方式见:链接

 

posted @ 2018-01-20 20:00  黎色癫狂  阅读(401)  评论(0编辑  收藏  举报