摘要:因为转换为字符串后,在前面还可以接受一个函数作为参数,根据函数的返回值进行排序。函数的返回值将作为新数组中的每一项的值。该方法接收一个函数作为参数,对数组中的每一项运行该函数,该方法没有返回值。
1. 检测对象是不是数组 instanceof操作符 Array.isArray()方法
var color = new Array("red", "green"); console.log(Array.isArray(color)); //true2. 转换方法 toString()
该方法会输出每一项,并以","连接,实际上该方法会调用数组中每一项的toString()方法,然后拼接得到的每一项的字符串。
var color = new Array("red", "green"); console.log(color.toString()); // red,green alert(color); // red,green console.log(color); // ["red","green"]toLocaleString()
该方法会输出每一项,并以","连接,实际上该方法会调用数组中每一项的toLocaleString()方法,然后拼接得到的每一项的字符串。一般都会返回与toString()相同的值
var color = new Array("red", "green"); console.log(color.toLocaleString()); // red,greenvalueOf()
该方法输出整个数组的字符串形式
var color = new Array("red", "green"); console.log(color.valueOf()); // ["red","green"]join()
该方法接收一个字符串,然后以该字符串为间隔,将数组中的每一项拼接起来
var color = new Array("red", "green"); console.log(color.join("&&")); // red&&green3. 栈方法和队列方法 栈方法push()和pop()
栈是一种LIFO("LAST-In-First-Out"后进先出)的数据结构。
有两个方法,push()和pop().
push()接受一个或者多个参数,将它们添加到数组末尾处,返回添加后数组的长度
pop()则从数组中移除最后一项,并返回该项的值。
队列方法unshift()和shift()队列是一种FIFO("First-In-First-Out"先进先出)的数据结构。
有两个方法,unshift()和shift().
unshift()与push()类似,只不过是在数组的最前面添加一项或多项
var color = new Array("red", "green"); color.unshift("blue","yellow"); console.log(color); // ["blue", "yellow", "red", "green"]
shift()与pop()类似,是返回数组的最前面一项
4. 排序方法有两种排序方法,reverse()和sort()。
reverse()reverse()方法会反转数组项的顺序。
sort()sort()默认按照升序重新排列数组,而顺序的决定是由每一项转换为字符串后进行比较的。
var values = [0, 1, 5, 10, 15]; values.sort(); console.log(values) // [0, 1, 10, 15, 5], 因为转换为字符串后,10在5前面
sort()还可以接受一个函数作为参数,根据函数的返回值进行排序。这个函数接受两个值作为参数,排序原则如下:
参数1在参数2前面,返回负数,参数1在参数2后面,返回正数,两个参数相等,则返回0.
// 先创建一个简单的比较函数,该函数接受两个值做参数,本函数按照升序排列 function compare(value1, value2){ if(value1 < value2){ return -1; }else if(value1 > value2){ return 1; }else { return 0; } } // 然后将该函数传入sort()方法中进行比较 var values = [0, 5, 1, 15, 10]; values.sort(compare); console.log(values); // [0, 1, 5, 10, 15]
sort()内部是根据冒泡法排序的,不断比较两个数的大小。
5. 操作方法 拼接数组concat()该方法可以接收一个或多个参数,并新建一个当前数组的副本,将参数拼接到该副本末尾,然后返回该副本数组。
参数主要有两种类型:
参数是数组,则将数组中的每一项添加到副本数组的末尾
参数不是数组,则直接将其添加到副本数组的末尾
裁减数组slice()该方法基于当前数组创建一个新的数组,接收一个或者两个参数,用于指定返回项的起始和结束位置。
当值传入一个参数时,返回从参数指定位置开始到数组末尾的所有项
当传入两个参数时,返回起始和结束位置之间的的但不包括结束位置的项。
两个参数均可以接收负数,会以数组的长度值加上该负数,然后计算需要返回的项。
修改数组splice()该方法可以增加,减少或修改数组中的一项或多项。该方法接收一个或多个参数,先从指定位置删除项,然后添加任意数量的项。
该方法始终会返回一个数组,数组中包含被删除的返回项。
参数1指定需要删除的项的起始位置
参数2指定需要删除的项的数量
参数3-参数n指定需要向数组中添加的项
所以根据传入参数的数量,有以下情况:
不传入参数,则不对数组做任何改变
var array = [1,2,3,4]; console.log(array.splice()); // [] console.log(array); // [1,2,3,4]
传入一个数值参数,则从数组中删除指定位置和数组末尾之间的所有项
var array = [1,2,3,4]; console.log(array.splice(2)); // [3,4] console.log(array); // [1,2]
传入两个数值参数,则删除数组中从指定位置开始的指定数量的项
var array = [1,2,3,4]; console.log(array.splice(2,1)); // [3] console.log(array); // [1,2,4]
传入三个或三个以上的参数,则先删除指定位置开始的指定数量的项,然后在该位置添加其他参数所指示的项
var array = [1,2,3,4,5,6]; console.log(array.splice(2,1,"red","green")); // [3] console.log(array); // [1, 2, "red", "green", 4, 5, 6]copyWithin()
copyWithin()方法在数组内部将一部分复制到另一部分,而不改变数组的大小,然后返回修改后的数组。该方法接收一个至三个参数。参数含义如下:
第一个参数是一个索引值,被复制的序列将放到以该索引为起始的位置上。为必需参数。
第二个参数代表将要被复制的部分的起始位置。非必需参数,默认为0。
第三个参数代表将要被复制的部分的结束位置,不包括结束位置。非必需参数,默认为array.length-1
以上三个参数都接收负值,会自动加上数组的长度值,转换为正值。看一些例子吧。
[11, 22, 33, 44, 55].copyWithin(-2); // [11, 22, 33, 11, 22]
上面代码复制到的索引位置是 5-2=3,由于后两个参数没有,所以复制的值是[11,22,33,44,55],但是由于该方法不改变数组的大小,所以仅仅是将11和22复制到44和55的位置。
[11, 22, 33, 44, 55].copyWithin(0, 3); // [44, 55, 33, 44, 55]
上面的代码复制到的索引位置是 0,复制区域开始的索引位置是3,第三个参数没有,所以会一直复制直到末尾,复制的值是[44,55], 覆盖了11和22
[11, 22, 33, 44, 55].copyWithin(1, 3, 4);// [11, 44, 33, 44, 55]
上面的代码复制到的索引位置是1,复制区域开始的索引位置是3,第三个参数是4,所以只会复制位置3的值44,覆盖了22
fill()该方法在指定位置处填充一个固定的值。方法接收三个参数:
param1,指定填充的值。必需参数。
param2, 指定填充开始的位置。非必需参数,默认为0
param3, 指定填充结束的位置,但不包括结束的位置。默认为数组的长度值。
[1, 2, 3].fill(4); // [4, 4, 4] [1, 2, 3].fill(4, 1); // [1, 4, 4] [1, 2, 3].fill(4, 1, 2); // [1, 4, 3]6. 位置方法
数组有两个位置方法indexOf()和lastIndexOf()。两个方法都接收一个或两个参数,第一个参数指定要查找的项,第二个参数是可选的,表示查找开始的位置。两个方法的区别是indexOf()从前往后开始查找,返回指定项第一次出现的位置,lastIndexOf()从后往前开始查找,返回指定项第一次出现的位置。若没有查找到指定项,则两个方法均返回-1。
传入一个参数
var array = ["H", "E", "L", "L", "O"]; console.log(array.indexOf("L")); // 2 console.log(array.lastIndexOf("L")); // 3
传入两个参数
var array = ["H", "E", "L", "L", "O"]; console.log(array.indexOf("L", 3)); // 3 ,忽略了array[2] console.log(array.lastIndexOf("L", 2)); // 2 忽略了array[3]
有两个需要注意的事项,
数组中的项和传入参数作比较时,用的是===全等号,即必须严格相等
lastIndexOf()返回的索引值是基于正序的索引值,而非基于倒序的索引值
var array = ["H", "E", "L", "L", "O"]; console.log(array.lastIndexOf("O")); // 返回4,而非07. 归并方法
有两个归并数组的方法reduce()和reduceRight()。这两个方法都会迭代数组中的所有项,然后构建一个返回值,其中reduce()从数组的第一项开始,遍历到最后,reduceRight()从最后一项开始,遍历到第一项。
这两个方法都接收两个参数: 第一个参数是在每一项上调用的函数,第二个参数是可选的,作为归并基础的初始值。
作为第一个参数的函数接收4个参数: 前一个值,当前值,当前项的索引和该数组对象。这个函数返回的值,将作为下一次迭代操作中函数的第一个参数。函数的第二个参数是数组的下一项。
第一次迭代发生在数组的第二项上,函数的第一个值是数组的第一项,第二个参数是数组的第二项。
传入一个参数
function add(prev, curv, index, array){ return prev + curv; } var values = [1, 2, 3, 4, 5]; var sum = values.reduce(add); console.log(sum); //15
上面的代码中,第一次迭代中,传入add()中的参数如下:prev = 1, curv = 2,index = 1,array = values,第一次迭代后,add()函数返回值是1+2=3。
第二次迭代中,传入add()中的参数如下:prev = 3,curv = 3,index = 1,array = values,第二次迭代后,add()函数返回值是3+3=6。依次向后迭代...
reduceRight()则是从最后一项开始往前迭代。
传入两个参数
传入两个参数时,第二个参数将作为归并基础的初始值。也就是说,传入该参数后,用该参数加上后面最终迭代得到的值。
function add(prev, curv, index, array){ return prev + curv; } var values = [1, 2, 3, 4, 5]; var sum = values.reduce(add, 10); console.log(sum); // 25, 在迭代得到的值上面加上了108. 创建数组的新方法 Array.from()
该方法基于一个类数组的对象或可迭代的对象,创建一个新的数组实例。该方法接收一至三个参数,各个参数如下:
参数1是一个类数组对象或可迭代对象,方法基于该对象创建数组。函数的返回值将作为新数组中的每一项的值。必需的参数。
参数2是一个函数,数组的每一项都会调用该函数。非必需参数。
参数3指定在参数2中,this所代表的对象。非必需参数。
类数组对象是具有length属性并含有被编上索引的元素的对象,如NodeList对象。
可迭代对象是可以获得其中的元素的对象,如Map和Set
var str = "hello"; Array.from(str, x => x + x); // ["hh", "ee", "ll", "ll", "oo"]
上面的代码中接收一个字符串为第一个参数,接收箭头函数作为第二个参数。在箭头函数中,对每一项做了复制操作,然后返回得到的值,作为数组的每一项。
Array.of()该方法接收一系列参数,并以这些参数为项,创建一个数组,并返回该数组。
var arra = Array.of("red", "green", "blue"); console.log(arra); // ["red", "green", "blue"]
该方法与构造函数Array()类似,但有一点不同。当接收到只有一个数值类型的参数时,Array()会创建一个数值参数指定的长度的数组,而Array.of()会将该数值作为数组中的项添加进数组。
var arra1 = new Array(7); console.log(arra1); // [undefined × 7] var arra2 = Array.of(7); console.log(arra2); // [7]9. 迭代方法 every()
该方法接收一个函数作为参数,对数组中的每一项运行该函数,若对每一项,指定函数都返回true,则最终every()方法返回true。该方法还接收一个可选的第二个参数,指定在运行函数时,函数中this所代表的对象。
var num = [1,2,3]; console.log(num.every( value => { if(value > 0){return true;} return false; })); // true,因为每一项都大于0 console.log(num.every( value => { if(value > 1){return true;} return false; })); //false,因为1-1=0,转换为布尔值是falsesome()
该方法与every()对应,every()是所有项均返回true,最终才返回true,some()是只要有至少一个返回true,该方法就会返回true.
var num = [1,2,3]; console.log(num.some( value => { if(value > 1){return true;} return false; })); // true,因为至少有一项大于1 console.log(num.some( value => { if(value > 3){return true;} return false; })); //false,都不大于3filter()
该方法接收一个函数作为参数,对数组中的每一项运行该函数,若对某一项,指定函数返回true,则将该项添加到一个新建的数组中,最后返回该数组。该方法还接收一个可选的第二个参数,指定在运行函数时,函数中this所代表的对象。
var num = [1,2,3]; console.log(num.filter( value => { if(value > 0){return true;} return false; })); // [1,2,3] console.log(num.filter( value => { if(value > 1){return true;} return false; })); // [2, 3]forEach()
该方法接收一个函数作为参数,对数组中的每一项运行该函数,该方法没有返回值。作用于for循环类似。
该方法还接收一个可选的第二个参数,指定在运行函数时,函数中this所代表的对象。
该方法接收一个函数作为参数,对数组中的每一项运行该函数,返回由该函数的返回值组成的数组。该方法还接收一个可选的第二个参数,指定在运行函数时,函数中this所代表的对象。
var num = [1,2,3]; console.log(num.map( value => { return value * value; })); // [1, 4, 9]find()
该方法接受一个函数作为参数,对数组中的每一项运行该函数,直到某一次运行后返回true,此时,该方法将返回该项的值。若所有项的运行结果都是fase,最终将返回undefined。所以该方法并不一定遍历数组中所有项。该方法还接收一个可选的第二个参数,指定在运行函数时,函数中this所代表的对象。
var num = [1,2,3]; console.log(num.find( value => { if(value === 2){return true;} return false; })); // 2
看如下代码
var inventory = [ {name: "apples", quantity: 2}, {name: "bananas", quantity: 0}, {name: "cherries", quantity: 5} ]; function findCherries(fruit) { return fruit.name === "cherries"; } console.log(inventory.find(findCherries)); // { name: "cherries", quantity: 5 }findIndex()
该方法与find()类似,只不过当找到符合条件的项时,会返回该项的索引值。
var num = [1,2,3]; console.log(num.findIndex( value => { if(value === 2){return true;} return false; })); // 1
注意:以上方法中,接收的作为参数的函数,都可以接受三个参数,分别是数组每一项的当前值,当前索引值,以及调用方法的数组本身.
var num = [1,2,3]; num.forEach( (value, index, array) => { console.log("数组为->"+array + ":"); console.log(index + "->" + value); }); // 数组为->1,2,3: 0->1 // 数组为->1,2,3: 1->2 // 数组为->1,2,3: 2->310. 其他方法 entries()
entries()方法返回一个新建的数组迭代对象,对象中包含了每一项的key/value组成的数组。看代码
var a = ["a", "b", "c"]; var iterator = a.entries(); for(let e of iterator){ console.log(e); } // [0, "a"] // [1, "b"] // [2, "c"]keys()
该方法返回一个可迭代对象,其中包含了数组中每一项的索引值
var arr = ["a", "b", "c"]; var iterator = arr.keys(); console.log(iterator.next()); // { value: 0, done: false } console.log(iterator.next()); // { value: 1, done: false } console.log(iterator.next()); // { value: 2, done: false } console.log(iterator.next()); // { value: undefined, done: true }values()
该方法于keys()方法对应,也是返回一个可迭代对象,其中包含数组中每一项的值
var a = ["w", "y", "k", "o", "p"]; var iterator = a.values(); console.log(iterator.next().value); // w console.log(iterator.next().value); // y console.log(iterator.next().value); // k console.log(iterator.next().value); // o console.log(iterator.next().value); // pincludes()
该方法用于查找数组中是否包含等于指定值的项。接收两个参数:
param1,指定被查找是否存在于数组中的值,必须。
param2,指定查找开始的索引值,默认为0,非必需。当传入负值时,将加上数组的长度值。
[1, 2, 3].includes(4); // false [1, 2, 3].includes(3, 3); // false [1, 2, 3].includes(3, -1); // true [1, 2, NaN].includes(NaN); // true
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/83372.html
摘要:如果没有学习过计算机科学的程序员,当我们在处理一些问题时,比较熟悉的数据结构就是数组,数组无疑是一个很好的选择。 showImg(https://segmentfault.com/img/bVTSjt?w=400&h=300); 1、常见 CSS 布局方式详见: 一些常见的 CSS 布局方式梳理,涉及 Flex 布局、Grid 布局、圣杯布局、双飞翼布局等。http://cherryb...
摘要:如果没有学习过计算机科学的程序员,当我们在处理一些问题时,比较熟悉的数据结构就是数组,数组无疑是一个很好的选择。 showImg(https://segmentfault.com/img/bVTSjt?w=400&h=300); 1、常见 CSS 布局方式详见: 一些常见的 CSS 布局方式梳理,涉及 Flex 布局、Grid 布局、圣杯布局、双飞翼布局等。http://cherryb...
阅读 1553·2021-09-26 09:46
阅读 2632·2021-09-07 09:59
阅读 2723·2021-09-07 09:59
阅读 1818·2019-08-30 14:20
阅读 886·2019-08-26 13:39
阅读 3111·2019-08-26 12:24
阅读 743·2019-08-26 11:55
阅读 1191·2019-08-23 16:49