数组学习(一)
该学习笔记来源于《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
更多数组求和方式见:链接