数组应该是咱们在写程序中应用到最多的数据结构了,相比于无序的对象,有序的数组帮咱们在处理数据时,实在是帮了太多的忙了。今天恰好看到一篇Array.include的文章,突然发现通过几个ES3,ES5,ES6,ES7几个版本的更迭,发如今代码中用到了好多数组的方法,因此准备所有列出来,也是给本身加深印象javascript
ES3兼容如今全部主流浏览器java
ES3中的方法毫无疑问你们已经烂熟在心了,不过中间有些细节能够回顾加深一下记忆,好比是否修改原数组返回新数组,执行方法以后的返回值是什么,某些参数的意义是否搞混等等。熟悉的的能够直接快速浏览或者跳过。git
Array.join()方法是将一个数组里面的全部元素转换成字符串,而后再将他们链接起来返回一个新数组。能够传入一个可选的字符串来分隔结果字符串中的全部元素。若是没有指定分隔字符串,就默认使用逗号分隔。es6
let a = [1,2,3,4,5,6,7]; let b = a.join(); // b = "1,2,3,4,5,6,7"; let c = a.a.join(" "); // b = "1 2 3 4 5 6 7";
方法Array.join()刚好与String.split()相反,后者是经过将一个字符串分隔成几个元素来建立数组github
Array.reverse()方法将颠倒数组中元素的顺序并返回一个颠倒后的数组。它在原数组上执行这一操做,因此说并非建立了一个新数组,而是在已存在的数组中对元素进行重排。chrome
let a = [1,2,3,4,5,6,7]; a.reverse(); // a = [7,6,5,4,3,2,1]
Array.sort()是在原数组上进行排序,返回排序后的数组。若是调用方法时不传入参数,那么它将按照字母顺序对数组元素进行排序,说得更精确点,是按照字符编码的顺序进行排序。要实现这一点,首先应把数组的元素都转换成字符串(若有必要),以便进行比较。api
若是数组中有未定义的元素,这些元素将放在数组的末尾数组
let a = [1,12,23,14,,undefined,null,NaN,56,6,7,"a",{},[]]; a.sort(); //[[], 1, 12, 14, 23, 56, 6, 7, "NaN", {}, "a", null,undefined,undefined × 1] //返回的NaN已是一个字符串,说明在比较过程当中将其转化成了字符串进行比较
仔细看能够发现,上面顺序并无按照数字大小进行排序。若是想按照其余标准进行排序,就须要提供比较函数。该函数比较先后两个值,而后返回一个用于说明这两个值的相对顺序的数字。比较函数应该具备两个参数 a 和 b,其返回值以下:浏览器
若 a 小于 b,在排序后的数组中 a 应该出如今 b 以前,则返回一个小于 0 的值。数据结构
若 a 等于 b,则返回 0。
若 a 大于 b,在排序后的数组中 a 应该出如今 b 以后,则返回一个大于 0 的值。
let a = [1,12,23,14,,undefined,null,NaN,56,6,7,"a",{},[]]; a.sort((a,b) => {return a - b}); //[null, Array(0), NaN, Object, 1, 6, 7, 12, 14, 23, 56, "a",undefined, undefined × 1]
Array.concat() 方法用于链接两个或多个参数(数组,字符串等),该方法不会改变现有的数组,而会返回链接多个参数的一个新数组。若是传入的参数是数组,那么它将被展开,将元素添加到返回的数组中。但要注意,concat并不能递归的展开一个元素为数组的参数。
let a = [1,2,3]; let b = a.concat(4,5,[6,7,[9,10]]); // b = [1,2,3,4,5,6,7,[9,10]]];
Array.slice() 方法可从已有的数组中返回指定的一个片断(slice),或者说是子数组。它是从原数组中截取了一个片断,并返回到了一个新数组。
Array.slice(a,b) 它有两个参数a,b
参数 | 描述 |
---|---|
a | 必选。规定从何处开始选取。若是是负数,那么它规定从数组尾部开始算起的位置。也就是说,-1 指最后一个元素,-2 指倒数第二个元素,以此类推。 |
b | 可选。规定从何处结束选取。该参数是数组片段结束处的数组下标。若是没有指定该参数,那么切分的数组包含从 start 到数组结束的全部元素。若是这个参数是负数,那么它规定的是从数组尾部开始算起的元素。 |
let a = [1,2,3,4,5,7,8]; let b = a.slice(3); // [4, 5, 7, 8] let c = a.slice(3,5); // [4, 5] let d = a.slice(-5,-2); // [3, 4, 5] let d = a.slice(2,1); // []
请注意,该方法并不会修改数组,而是返回一个新的子数组。若是想删除数组中的一段元素,应该使用下面这个方法 Array.splice()。
Array.splice() 方法从数组中添加/删除元素,而后返回被删除的元素。它在原数组上修改数组,并不像slice和concat那样建立新数组。注意,虽然splice和slice名字很是类似,可是执行的倒是彻底不一样的操做。
参数 | 描述 |
---|---|
index | 必选,整数。规定添加/删除项目的位置,使用负数可从数组结尾处倒着寻找位置。 |
howmany | 可选,整数。要删除的元素数量。若是设置为 0,则不会删除元素。若是没有选择,则默认从index开始到数组结束的全部元素 |
item1, ..., itemX | 可选。向数组添加新的元素。 |
let a = [1,2,3,4,5,7,8]; let b = a.splice(3); // a = [1,2,3] b = [4, 5, 7, 8] ----------------------------------------------------------- let c = [1,2,3,4,5,7,8]; let d = c.splice(3,5); // c = [1,2] d = [3,4,5,7,8] ----------------------------------------------------------- let e = [1,2,3,4,5,7,8]; let f = e.splice(3,2,111,222,[1,2]); // e = [1, 2, 3, 111, 222,[1,2], 7, 8] f = [4,5]
你们要记住slice()和splice()两个方法第二个参数表明的意义是不同的。虽然这很基础,但是有时候仍是会弄混。
Array.push() 方法可向数组的末尾添加一个或多个元素,并返回新的长度。
Array.pop()方法用于删除并返回数组的最后一个元素。若是数组已经为空,则 pop() 不改变数组,并返回 undefined 值。
let a = [1,2,3,4,5]; let b = a.pop(); //a = [1,2,3,4] b = 5 let c = a.push(1,3,5); // a = [1,2,3,4,1,3,5] c = 7
上面两个方法都是直接对原数组进行操做。经过上面两个方法能够实现一个先进后出的栈。
unshift,shift()的方法行为和push(),pop()很是类似,只不过他们是对数组的头部元素进行插入和删除。
Array.unshift() 方法可向数组的头部添加一个或多个元素,并返回新的长度。
Array.shift()方法用于删除并返回数组的第一个元素。若是数组已经为空,则 pop() 不改变数组,并返回 undefined 值。
let a = [1,2,3,4,5]; let b = a.shift(); //a = [2,3,4,5] b = 1 let c = a.unshift(1,3,5); // a = [1,3,5,2,3,45] c = 7
和全部javascript的对象同样,数组也有toString()方法,这个方法能够将数组的每个元素转化成字符串(若是必要的话,就调用元素的toString()方法),而后输出字符串的列表,字符串之间用逗号隔开。(用个人话来理解,其实就是遍历数组元素调用每一个元素自身的toString()方法,而后用逗号链接)
toString()的返回值和没有参数的join()方法返回的字符串相同
let a = let e = [1,undefined,null,Boolean,{},[],function(){console.log(1);}]; let b = a.toString(); // b = "1,,,function Boolean() { [native code] },[object Object],,function (){console.log(1);}"
注意,输出的结果中,返回的数组值周围没有括号。
toLocaleString方法是toString()方法的本地化版本。它是使用地区特定的分隔符把生成的字符串链接起来,造成一个字符串。
虽然是两个方法,可是通常元素两个方法的输出结果却基本是同样的,去网上找了相关文章,发现只有两种状况比较有区分,一个是时间,一个是4位数字以上的数字,举例以下
let a = 1111; let b = a.toLocaleString(); // b = "1,111" let c = a.toString(); // c = "1111"; ------------------------------------------------------- let date = new Date(); let d = date.toString(); // d = "Sun Sep 03 2017 21:52:18 GMT+0800 (中国标准时间)" let e = date.toLocaleString(); //e = "2017/9/3 下午9:52:18"
好吧,这个api和数组关系不大。。。主要仍是和数组中元素自身有关。啊哈哈,尴尬。
Array.valueOf()方法在平常中用的比较少,该方法继承与Object。javascript中许多内置对象都针对自身重写了该方法,数组Array.valueOf()直接返回自身。
let a = [1,"1",{},[]]; let b = a.valueOf(); a === b; // true
好啦,关于ES3的方法就不详细描述了,我相信你们基本上都已经彻底是烂熟于心的那种,惟一可能须要增强记忆的就是一些参数含义,返回数据这些了。
ES5中的数组方法在各大浏览器的兼容性
Opera 11+
Firefox 3.6+
Safari 5+
Chrome 8+
Internet Explorer 9+
2.Array在ES5新增的方法中接受两个参数,第一个参数都是function类型,必选,默认有传参,这些参数分别是:
currentValue : 数组当前项的值
index : 数组当前项的索引
array : 数组对象自己
第二个参数是当执行回调函数时指向的this(参考对象),不提供默认为window,严格模式下为undefined。
以forEach举例
语法
array.forEach(callback, thisArg) array.forEach(callback(currentValue, index, array){ //do something }, thisArg)
例子:
//demo,注意this指向 //我这个demo没有用箭头函数来测试 let a = ['a', 'b', 'c']; a.forEach(function(currentValue, index, array){ this.info(currentValue, index, array); },{info:function(value,index,array){ console.log(`当前值${value},下标${index},数组${array}`)} }); function info(value,index,array){ console.log(`外放方法 : 当前值${value},下标${index},数组${array}`)} } // 当前值a,下标0,数组a,b,c // 当前值b,下标1,数组a,b,c // 当前值c,下标2,数组a,b,c
3.ES5中的全部关于遍历的方法按升序为数组中含有效值的每一项执行一次callback函数,那些已删除(使用delete方法等状况)或者未初始化的项将被跳过(但不包括那些值为 undefined 的项)(例如在稀疏数组上)。
例子:数组哪些项被跳过了
function logArrayElements(element, index, array) { console.log(`a[${index}] = ${element}`); } let xxx; //定义未赋值 let a = [1,2,"", ,undefined,xxx,3]; delete a[1]; // 移除 2 a.forEach(logArrayElements); // a[0] = 1 // 注意索引1被跳过了,由于在数组的这个位置没有项 被删除了 // a[2] = "" // 注意索引3被跳过了,由于在数组的这个位置没有项,能够理解成没有被初始化 // a[4] = undefined // a[5] = undefined // a[6] = 3
好了,上面3点基本上是ES5中全部方法的共性,下面就不重复述说了。开始正文解析每一个方法的不一样了
Array.forEach() 为每一个数组元素执行callback函数;不像map() 或者reduce() ,它老是返回 undefined值,而且不可链式调用。典型用例是在一个链的最后执行反作用。
注意: 没有办法停止或者跳出 forEach 循环,除了抛出一个异常。若是你须要跳出函数,推荐使用Array.some。若是能够,新方法 find() 或者findIndex() 也可被用于真值测试的提前终止。
例子:若是数组在迭代时被修改了
下面的例子输出"one", "two", "three"。当到达包含值"two"的项时,整个数组添加了一个项在第一位,这致使全部的元素下移一个位置。此时在下次执行回调中,由于元素 "two"符合条件,结果一直增长元素,直到遍历次数完毕。forEach()不会在迭代以前建立数组的副本。
let a = ["one", "two", "three"]; let b = a.forEach((value,index,arr) => { if (value === "two") { a.unshift("zero"); } return "new" + value }); // one,0,["one", "two", "three"] // two,1,["one", "two", "three"] // two,2,["zero", "one", "two", "three"] // two,3,["zero","zero", "one", "two", "three"]
看完例子能够发现,使用 forEach 方法处理数组时,数组元素的范围是在callback方法第一次调用以前就已经肯定了。在 forEach 方法执行的过程当中:原数组中新增长的元素将不会被 callback 访问到;若已经存在的元素被改变或删除了,则它们的传递到 callback 的值是 forEach 方法遍历到它们的那一个索引时的值。
ES5中全部API在数组被修改时都听从这个原则,如下再也不重复
Array.map 方法会给原数组中的每一个元素都按顺序调用一次callback函数。callback每次执行后的返回值(没有指定返回值则返回undefined)组合起来造成一个新数组。
例子:返回每一个元素的平方根的数组
let a = [1,4,9]; let b = a.map((value) => { return Math.sqrt(value); //若是没有return,则默认返回undefined }); // b= [1,2,3]
Array.filter()为数组中的每一个元素调用一次 callback 函数,并利用全部使得 callback 返回 true 或 等价于 true 的值 的元素建立一个新数组。那些没有经过 callback 测试的元素会被跳过,不会被包含在新数组中
例子:数组去重
let a = [1,2,3,4,32,6,79,0,1,1,8]; let b = a.filter((value,index,arr) => { return arr.indexOf(value) === index; }); // b = [1, 2, 3, 4, 32, 6, 79, 0, 8]
Array.some 为数组中的每个元素执行一次 callback 函数,直到找到一个使得 callback 返回一个“真值”(便可转换为布尔值 true 的值)。若是找到了这样一个值,some 将会当即返回 true。不然,some 返回 false。callback 只会在那些”有值“的索引上被调用,不会在那些被删除或历来未被赋值的索引上调用。
例子:查看数组内是否含有大于0的元素
let a = [-1,4,9]; let b = a.some((value) => { return value > 0; //若是没有return,则默认返回undefined,将没法告诉some判断 }); // b = true
some方法能够理解成拥有跳出功能的forEach()函数,能够用在在一些须要中断函数的地方
Array.every() 方法为数组中的每一个元素执行一次 callback 函数,直到它找到一个使 callback 返回 false(表示可转换为布尔值 false 的值)的元素。若是发现了一个这样的元素,every 方法将会当即返回 false。不然,callback 为每个元素返回 true,every 就会返回 true。callback 只会为那些已经被赋值的索引调用。不会为那些被删除或历来没被赋值的索引调用。
例子:检测全部数组元素的大小,是否都大于0
let a = [-1,4,9]; let b = a.every((value) => { return value > 0; //若是没有return,则默认返回undefined }); // b = false
Array.indexOf()使用严格相等(strict equality,即===)进行判断searchElement与数组中包含的元素之间的关系。
Array.indexOf()提供了两个参数,第一个searchElement表明要查询的元素,第二个表明fromIndex表示从哪一个下标开始查找,默认为0。
语法
arr.indexOf(searchElement) arr.indexOf(searchElement, fromIndex = 0)
Array.indexOf()会返回首个被找到的元素在数组中的索引位置; 若没有找到则返回 -1
例子:
let array = [2, 5, 9]; array.indexOf(2); // 0 array.indexOf(7); // -1 array.indexOf(9, 2); // 2 array.indexOf(2, -1); // -1 array.indexOf(2, -3); // 0
Array.lastIndexOf()就不细说了,其实从名字你们也能够看出来,indexOf是正向顺序查找,lastIndexOf是反向从尾部开始查找,可是返回的索引下标仍然是正向的顺序索引
。
语法
arr.lastIndexOf(searchElement, fromIndex = arr.length - 1)
须要注意的是,只是查找的方向相反,fromIndex和返回的索引都是正向顺序的,千万不要搞混了(感受我这么一说,你们可能搞混了,捂脸)。
例子:各类状况下的的indexOf
var array = [2, 5, 9, 2]; var index = array.lastIndexOf(2); // index = 3 index = array.lastIndexOf(7); // index = -1 index = array.lastIndexOf(2, 3); // index = 3 index = array.lastIndexOf(2, 2); // index = 0 index = array.lastIndexOf(2, -2); // index = 0 index = array.lastIndexOf(2, -1); // index = 3
Array.reduce() 为数组中的每个元素依次执行回调函数,最后返回一个函数累计处理的结果。
语法
array.reduce(function(accumulator, currentValue, currentIndex, array), initialValue)
reduce的回调函数中的参数与前面的不一样,多了第一个参数,是上一次的返回值
accumulator : 上一次调用回调返回的值,或者是提供的初始值(initialValue)
currentValue : 数组当前项的值
currentIndex : 数据当前项的索引。第一次遍历时,若是提供了 initialValue ,从0开始;不然从1开始
array : 调用 reduce 的数组
initialValue : 可选项,其值用于第一次调用 callback 的第一个参数。若是没有设置初始值,则将数组中的第一个元素做为初始值。空数组调用reduce时没有设置初始值将会报错。
例子:数组求和
let sum = [0, 1, 2, 3].reduce(function (o,n) { return o + n; }); // sum = 6
对了,当回调函数第一次执行时,accumulator 和 currentValue 的取值有两种状况:
调用 reduce 时提供initialValue,accumulator 取值为 initialValue ,currentValue 取数组中的第一个值;
没有提供 initialValue ,accumulator 取数组中的第一个值,currentValue 取数组中的第二个值。
例子:reduce数组去重
[1,2,3,4,5,6,78,4,3,2,21,1].reduce(function(accumulator,currentValue){ if(accumulator.indexOf(currentValue) > -1){ return accumulator; }else{ accumulator.push(currentValue); return accumulator; } },[])
注意 :若是数组为空而且没有提供initialValue, 会抛出TypeError 。若是数组仅有一个元素而且没有提供initialValue, 或者有提供initialValue可是数组为空,那么此惟一值将被返回而且callback不会被执行。
Array.reduceRight() 为数组中的每个元素依次执行回调函数,方向相反,从右到左,最后返回一个函数累计处理的结果。
由于这个方法和reduce方法基本是如出一辙的,除了方法相反,因此就不详细的再写一遍了
之因此将这个方法放在最后,是由于这个方法和前面的不太一致,是用于肯定传递的值是不是一个 Array,使用方法也很简单
例子
let a = Array.isArray([1,2,3]); //true let b = Array.isArray(document.getElementsByTagName("body")); //类数组也为false
不过感受除非是临时判断,否则通常也不会用这个方法去判断,通常仍是下面这种万金油型的吧。
Object.prototype.toString.call([]).slice(8, -1) === "Array";//true
好啦,关于ES5的方法基本上就讲到这里了,感受本身在深刻去看了一些文章以后,仍是有一些额外的收获的。好比对reduce这个平时不经常使用的方法了解更加深入了,感受以前不少遍历收集数据的场景其实用reduce更加方便。
不一样于es5主要以遍历方法为主,es6的方法是各式各样的,不过必需要说一句,在性能上,es6的效率基本上是最低的。
英文名字叫作Spread syntax,中文名字叫作扩展运算符。这个方法我不知道怎么描述,感受更像是原有concat()方法的加强,能够配合着解构一块儿使用,你们仍是直接看例子感觉如下吧
例子:简单拷贝数组
//若是是ES5 let c = [7,8,9].concat(a); //若是是ES6 let a = [1,23,4,5,6]; let b = [7,8,9,...a]; // b = [7, 8, 9, 1, 23, 4, 5, 6] ---------------------------------------------------------- //浅拷贝 let c = [{a : 1}]; let d = [...c] d[0].a = 2 c[0].a // 2
能够看到这个方法对于引用类型仍然是浅复制,因此对于数组的深拷贝仍是须要用额外的方法,能够看我另一篇文章
Array.of()方法能够将传入参数以顺序的方式返回成一个新数组的元素。
let a = Array.of(1, 2, 3); // a = [1, 2, 3]
其实,刚看到这个api和他的用途,仍是比较懵逼的,由于看上去这个方法就是直接将传入的参数变成一个数组以外,就没有任何区别了,那么我为何不直接用之前的写法去实现相似的效果呢,好比 let = [1,2,3];并且看上去也更加直接。而后我去翻了下最新的ECMAScript草案,其中有这么一句话
The of function is an intentionally generic factory method; it does not require that its this value be the Array constructor. Therefore it can be transferred to or inherited by other constructors that may be called with a single numeric argument.
本身理解了一下,其实大概意思就是说为了弥补Array构造函数传入单个函数的不足,因此出了一个of这个更加通用的方法,举个例子
let a = new Array(1);//a = [undefined × 1] let b = new Array(1,2);// b = [1,2]
你们能够注意到传入一个参数和传入两个参数的结果,彻底是不同的,这就很尴尬了。而为了不这种尴尬,es6则出了一种通用的of方法,无论你传入了几个参数,都是一种相同类型的输出结果。
不过我好奇的是,若是只传入几个参数,为何不直接let a = [1,2,3];效率和直观性也更加的高。若是要建立一个长度的数组,我确定仍是选let a = new Array(10000),这种形式,实在没有感受到Array.of的实用场景,但愿你们能够给我点指导。
Array.from()方法从一个相似数组(拥有一个 length 属性和若干索引属性的任意对象)或可迭代的对象(String, Array, Map, Set和 Generator)中建立一个新的数组实例。
咱们先查看Array.from()的语法
语法
Array.from(arrayLike, mapFn, thisArg)
从语法中,咱们能够看出Array.from()最基本的功能是将一个类数组的对象转化成数组,而后经过第二个和第三个参数能够对转化成功后的数组再次执行一次遍历数据map方法,也就是Array.from(obj).map(mapFn, thisArg)。
对了额外说一句,这个方法的性能不好,和直接的for循环的性能对比了一下,差了百倍不止。
例子 :将一串数字字符串转化为数组
let a = Array.from("242365463432",(value) => return value * 2); //a = [4, 8, 4, 6, 12, 10, 8, 12, 6, 8, 6, 4]
Array.copyWithin方法,在当前数组内部,将指定位置的成员浅复制到其余位置(会覆盖原有成员),而后返回当前数组。也就是说,使用这个方法,会修改当前数组。
这个方法有点复杂,光看描述可能你们未必能轻易理解,你们能够先看下语法,再看demo配合理解,并且本身没有想到这个方法合适的应用场景。网上也没又看到相关使用场景。可是讲道理,这个方法设计出来,确定是通过深思熟虑的,若是你们有想到,欢迎评论给我,谢谢。
语法
arr.copyWithin(target, start, end) //arr.copyWithin(目标索引, 源开始索引, 结束源索引)
例子
// 将3-4号位复制到0号位 [1, 2, 3, 4, 5].copyWithin(0, 3, 4); // [4, 2, 3, 4, 5] // 将2-5号位复制到0号位 [1, 2, 3, 4, 5].copyWithin(0, 2, 5); //[3, 4, 5, 4, 5] // 将1-4号位复制到4号位 [1, 2, 3, 4, 5].copyWithin(4, 1, 4); //[1, 2, 3, 4, 2]
复制遵循含头不含尾原则
第一个是常规的例子,你们能够对比看第二个能够发现,这个方法是先浅复制了数组一部分暂时存储起来,而后再从目标索引处开始一个个覆盖后面的元素,直到这段复制的数组片断所有粘贴完。
再看第三个例子,能够发现当复制的数据片断从目标索引开始粘贴时,若是超过了长度,它将中止粘贴,这说明它不会改变数据的 length,可是会改变数据自己的内容。
Array.copyWithin能够理解成复制以及粘贴序列这二者是为一体的操做;即便复制和粘贴区域重叠,粘贴的序列也会有拷贝来的值。
Array.find()方法返回数组中知足提供的测试函数的第一个元素的值。不然返回 undefined。
Array.findIndex() 方法返回数组中知足提供的测试函数的第一个元素的值的索引。不然返回 -1。
这两个方法其实使用很是类似,使用场景有点像ES5中Array.some,都是在找到第一个知足条件的时候,跳出循环,区别的是,三种返回的值彻底不同,我想这也许是为何要在ES6中增长这两个API的缘由吧,能够理解成是数组的方法的补足。
例子:三个方法各自的返回值
let a = [1,2,3,4,5].find((item)=>{return item > 3}); // a = 4 返回第一个符合结果的值 let b = [1,2,3,4,5].findIndex((item)=>{return item > 3}); // b = 3 返回第一个符合结果的下标 let c = [1,2,3,4,5].some((item)=>{return item > 3}); // c = true 返回是否有符合条件的Boolean值 -----------------不知足条件-------------------- let a = [1,2,3,4,5].find((item)=>{return item > 6}); // a = undefined let b = [1,2,3,4,5].findIndex((item)=>{return item > 6}); // b = -1 let c = [1,2,3,4,5].some((item)=>{return item > 6}); // c = false
注意:find()和findIndex()方法没法判断NaN,能够说是内部用 ===判断,不一样于ES7中的include方法。不过这个判断方式是另一个话题,不在本文详述了,感兴趣的同窗能够去查一下。
其实还能够发现,Array.find() 方法只是返回第一个符合条件的元素,它的加强版是es5中Array.filter()方法,返回全部符合条件的元素到一个新数组中。能够说是当用find方法时考虑跟多的是跳出吧。
我感受这4个方法配合相应的回调函数基本上能够彻底覆盖大多数须要数组判断的场景了,你们以为呢?
Array.fill()方法用一个固定值填充一个数组中从起始索引到终止索引内的所有元素,返回原数组
这个方法的使用也很是简单,你们基本上看个语法和demo就能懂了。须要注意的是,这个方法是返回数组自己,还有一点就是,类数组不能调用这个方法,刚刚本身去改了MDN上面的文档。
语法
arr.fill(value) arr.fill(value, startIndex) arr.fill(value, startIndex, endIndex)
例子
let a = new Array(10); a.fill(1); // a = [1, 1, 1, 1, 1, 1, 1, 1, 1, 1]; let b = [1,2,34,5,6,7,8].fill(3,4); //b = [1, 2, 34, 5, 3, 3, 3]; let c = [1,2,34,5,6,7,8].fill(3,2,5); // c = [1, 2, 3, 3, 3, 7, 8];
我的感受这个方法初始化数组挺有用的,本身每次测试数据时,只要new Array(10000).fill(1),比之前遍历直观方便多了
Array.entries()将数组转化成一个中包含每一个索引的键/值对的Array Iterator对象
Array.keys()将数组转化成一个中包含每一个索引的键的Array Iterator对象
Array.values()将数组转化成一个中包含每一个索引的值的Array Iterator对象。
Array.values()方法chrome浏览器并不支持,
之因此将这三个方法放在一块儿是有缘由的额,你们能够看这三个方法其实都是一个数组转化为一种新的数据类型——返回新的Array Iterator对象,惟一区别的是转化以后的元素不同。跟他们的名字同样,entries()方法转化为所有的键值对,key()方法转化为键,value()保留值。
例子:观察各个迭代器遍历输出的东西
Array.entries()
let a = [1,2,3].entries(); for(let i of a){console.log(i);} //[0, 1] //[1, 2] //[2, 3]
Array.keys()
let b = [1,2,3].keys(); for(let i of b){console.log(i);} //0 //1 //2
Array.values()
let c = [1,2,3].values(); for(let i of c){console.log(i);} //1 //2 //3
关于迭代器这个东西,本身说不上什么,由于本身没有亲自用过,若是你们有什么看法课能够评论给我,我来补充和学习一下
Array.includes方法返回一个布尔值,表示某个数组是否包含给定的值,若是包含,则返回true,不然返回false,与字符串的includes方法相似。
这个方法你们能够看做是ES5中Array.indexOf的语义加强版,“includes”这个是否包含的意思,直接返回Boolean值,比起原来的indexOf是否大于-1,显得更加直观,我就是判断有没有包含哪一个值
语法,使用方法和indexof如出一辙
arr.includes(searchElement) arr.includes(searchElement, fromIndex)
例子
let array = [2, 5, 9]; array.includes(2); // true array.includes(7); // false array.includes(9, 2); // true array.includes(2, -1); // false array.includes(2, -3); // true
方法还真是tmd多啊,感受基本上应该是更新完了,先后两星期花了我4天时间吧,仍是挺累的。不过收货仍是不少,好比知道了ES5的方法基本上都有第二个this指向的参数,从新认识了reduce方法,感受本身以前不少场景用reduce更好,从新熟悉了一些ES6的方法能够试用有些场景
若是能看到最后的,感受你也是够累的,哈哈哈。
既然这么累,点颗星吧