1.构造数组
字面量方式:
let a = []; //最常用的,简洁方便
a.length = 3; // [undefined × 3]
使用构造器:
let b = new Array(); //[]
let c = Array(3); //[undefined × 3]
let d = Array(1,2,3); //[1,2,3]
数组长度最大为Math.pow(2,32)-1 ,即 4294967295 位
两种方式性能PK?
new Array() < []
2.Array.of
Array.of用于将参数依次转化为数组中的一项,然后返回这个新数组,而不管这个参数是数字还是其它。它基本上与Array构造器功能一致,唯一的区别就在单个数字参数的处理上。如下:
Array.of(3); // [3]
Array(3); // [undefined × 3]
参数为多个,或单个参数不是数字时,Array.of 与 Array构造器等同:
Array.of(1, 2); // [1, 2]
Array(1, 2); // [1, 2]
Array.of('8'); // ["8"]
Array('8'); // ["8"]
即使其他版本浏览器不支持也不必担心,由于Array.of与Array构造器的这种高度相似性,实现一个polyfill十分简单。如下:
if (!Array.of){
Array.of = function(){
return Array.prototype.slice.call(arguments);
//return [].slice.call(arguments);
};
}
3.Array.from 语法:Array.from(arrayLike, processingFn, thisArg)
Array.from的设计初衷是快速便捷的基于其他对象创建新数组,准确来说就是从一个类似数组的可迭代对象创建一个新的数组实例
从语法上看,Array.from拥有3个形参,第一个为类似数组的对象,必选。第二个为加工函数,新生成的数组会经过该函数的加工再返回。第三个为this作用域,表示加工函数执行时this的值,后两个参数都是可选的。
var obj = {0: 'a', 1: 'b', 2:'c', length: 3};
Array.from(obj, (value) => value.repeat(2), obj); //["aa","bb","cc"]
生成一个从0到指定数字的新数组,Array.from就可以轻易的做到:
Array.from({length: 10}, (v, i) => i); // [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]
4.Array.isArray 用来判断一个变量是否数组类型
Array.isArray([]); // true
Array.isArray({0: 'a', length: 1}); // false
除了这个方法还有Object.prototype.toString 判断是否为数组
5.方法 unshift、shift、push、pop、splice、reverse、sort,以及两个ES6新增的方法flat、flatMap、copyWithin 和 fill, 以上方法会改变数组本身。
unshift 语法:arr.unshift(element1, …, elementN)
unshift() 方法用于在数组开始处插入一些元素(就像是栈底插入),并返回数组新的长度。
let array = ["red", "green", "blue"];
let length = array.unshift("yellow");
console.log(array); // ["yellow", "red", "green", "blue"]
console.log(length); // 4
shift 语法:arr.shift()
shift()方法删除数组的第一个元素,并返回这个元素。
let array = [1,2,3,4,5];
let item = array.shift();
console.log(array); // [2,3,4,5]
console.log(item); // 1
push 语法:arr.push(element1, …, elementN)
push()方法添加一个或者多个元素到数组末尾,并且返回数组新的长度。
let array = ["football", "basketball", "volleyball"];
let i = array.push("Table tennis");
console.log(array); // ["football", "basketball", "volleyball", "Table tennis"]
console.log(i); // 4
pop 语法:arr.pop()
pop() 方法删除一个数组中的最后的一个元素,并且返回这个元素。
let array = ["cat", "dog", "cow", "chicken", "mouse"];
let item = array.pop();
console.log(array); // ["cat", "dog", "cow", "chicken"]
console.log(item); // mouse
splice 语法:arr.splice(start,deleteCount,[item1, item2, …])
splice()方法用新元素替换旧元素的方式来修改数组。
start 为开始位置,如果超过了数组长度,则从数组末尾开始添加内容;如果是负值,则其指定的索引位置等同于 length+start (length为数组的长度),表示从数组末尾开始的第 -start 位。
deleteCount 指定要删除的元素个数,若等于0,则不删除。这种情况下,至少应该添加一位新元素,若大于start之后的元素总和,则start及之后的元素都将被删除。
itemN 指定新增的元素,如果缺省,则该方法只删除数组元素。
返回值 由原数组中被删除元素组成的数组,如果没有删除,则返回一个空数组。
let array = ["apple","boy"];
let splices = array.splice(-3,1,"cat");
console.log(array); // ["cat", "boy"]
console.log(splices); // ["apple"], 可见即使-start超出数组长度,数组默认从首位开始删除
------
let array = ["apple","boy"];
let splices = array.splice(3,3,"cat");
console.log(array); // ["cat"]
console.log(splices); // ["apple", "boy"]
可见当start超出数组长度,数组没变化,默认从末尾该添加啥添加啥
reverse 语法:arr.reverse()
reverse()方法颠倒数组中元素的位置,第一个会成为最后一个,最后一个会成为第一个,该方法返回对数组的引用。
let array = [1,2,3,4,5];
let array2 = array.reverse();
console.log(array); // [5,4,3,2,1]
console.log(array2===array); // true
sort 语法:arr.sort([comparefn])
sort()方法对数组元素进行排序,并返回这个数组。
comparefn是可选的,如果省略,数组元素将按照各自转换为字符串的Unicode(万国码)位点顺序排序,例如”Boy”将排到”apple”之前。当对数字排序的时候,25将会排到8之前,因为转换为字符串后,”25”将比”8”靠前。例如:
let array = ["Boy","apple","Cat","dog"];
let array2 = array.sort();
console.log(array); // ["Boy", "Cat", "apple", "dog"]
console.log(array2 == array); // true
let array3 = array.sort((a, b) => a.localeCompare(b));
console.log(array3)//["apple", "Boy", "Cat", "dog"]
let array = [10, 1, 3, 20];
let array1 = array.sort();
console.log(array1); // [1, 10, 20, 3]
let array2 = array.sort((a, b) => a-b);
console.log(array2)//[1, 3, 10, 20]
实际上,ECMAscript规范中并未规定具体的sort算法,这就势必导致各个浏览器不尽相同的sort算法,请看sort方法在Chrome浏览器下表现:
let array = [{ n: "a", v: 1 }, { n: "b", v: 1 }, { n: "c", v: 1 }, { n: "d", v: 1 }, { n: "e", v: 1 }, { n: "f", v: 1 }, { n: "g", v: 1 }, { n: "h", v: 1 }, { n: "i", v: 1 }, { n: "j", v: 1 }, { n: "k", v: 1 }, ];
array.sort((a, b) => return a.v - b.v);
for (let i = 0,len = array.length; i < len; i++) {
console.log(array[i].n);
}
由于v值相等,array数组排序前后应该不变,然而Chrome却表现异常,而其他浏览器(如IE 或 Firefox) 表现正常。
这是因为v8引擎为了高效排序(采用了不稳定排序)。即数组长度超过10条时,会调用另一种排序方法(快速排序);而10条及以下采用的是插入排序,此时结果将是稳定的。
解决办法:
// 由于快速排序会打乱值相同的元素的默认排序,因此我们需要先标记元素的默认位置
array.forEach((v, k) =>v.__index = k);
// 由于__index标记了初始顺序,这样的返回才保证了值相同元素的顺序不变,进而使得排序稳定
array.sort((a, b) => return a.v - b.v || a.__index - b.__index);
值得注意的是:
各浏览器的针对sort方法内部算法实现不尽相同,排序函数尽量只返回-1、0、1三种不同的值,不要尝试返回true或false等其它数值,因为可能导致不可靠的排序结果。
let array = [7, 6, 5, 4, 3, 2, 1, 0, 10, 9, 8];
let comparefn = (x, y) => x > y;
array.sort(comparefn);
flat 语法:arr.flat(depth)
flat() 方法会按照一个可指定的深度递归遍历数组,并将所有元素与遍历到的子数组中的元素合并为一个新数组返回。
var arr1 = [1, 2, [3, 4]];
arr1.flat();
// [1, 2, 3, 4]
var arr2 = [1, 2, [3, 4, [5, 6]]];
arr2.flat(2);
// [1, 2, 3, 4, 5, 6]
//使用 Infinity 作为深度,展开任意深度的嵌套数组
arr2.flat(Infinity);
// [1, 2, 3, 4, 5, 6]
var arr4 = [1, 2, , 4, 5];
arr4.flat(); //flat() 方法会移除数组中的空项:
// [1, 2, 4, 5]
flatMap 语法:arr.flatMap(fn,thisArg)
flatMap() 方法首先使用映射函数映射每个元素,然后将结果压缩成一个新数组。它与 map 和 深度值1的 flat 几乎相同,但 flatMap 通常在合并成一种方法的效率稍微高一些。
var arr1 = [1, 2, 3, 4];
arr1.flatMap(x => [x * 2]);
// [2, 4, 6, 8]
// 只会将 flatMap 中的函数返回的数组 “压平” 一层
arr1.flatMap(x => [[x * 2]]);
// [[2], [4], [6], [8]]
copyWithin(ES6) 语法:arr.copyWithin(target, start, end)
copyWithin() 方法基于ECMAScript 2015(ES6)规范,用于数组内元素之间的替换,即替换元素和被替换元素均是数组内的元素。
其中,taget 指定被替换元素的索引,start 指定替换元素起始的索引,end 可选,指的是替换元素结束位置的索引。
如果start为负,则其指定的索引位置等同于length+start,length为数组的长度。end也是如此。
let array = [1,2,3,4,5];
let array2 = array.copyWithin(0,3);
console.log(array===array2,array2); // true [4, 5, 3, 4, 5]
let array = [1,2,3,4,5];
console.log(array.copyWithin(0,3,4)); // [4, 2, 3, 4, 5]
let array = [1,2,3,4,5];
console.log(array.copyWithin(0,-2,-1)); // [4, 2, 3, 4, 5]
fill(ES6) 语法:arr.fill(value, start, end)
fill() 方法基于ECMAScript 2015(ES6)规范,它同样用于数组元素替换,但与copyWithin略有不同,它主要用于将数组指定区间内的元素替换为某个值。
其中,value 指定被替换的值,start 指定替换元素起始的索引,end 可选,指的是替换元素结束位置的索引。
如果start为负,则其指定的索引位置等同于length+start,length为数组的长度。end也是如此。
let array = [1,2,3,4,5];
let array2 = array.fill(10,0,3);
console.log(array===array2,array2); // true [10, 10, 10, 4, 5], 可见数组区间[0,3]的元素全部替换为10
6. concat、join、slice、toString、toLocateString、indexOf、lastIndexOf、未标准的toSource以及ES7新增的方法includes,不会改变自身的方法
concat 语法:arr.concat(value1, value2, …, valueN)
concat() 方法将传入的数组或者元素与原数组合并,组成一个新的数组并返回。
let array = [1, 2, 3];
let array2 = array.concat(4,[5,6],[7,8,9]);
console.log(array2); // [1, 2, 3, 4, 5, 6, 7, 8, 9]
console.log(array); // [1, 2, 3], 可见原数组并未被修改
若concat方法中不传入参数,那么将基于原数组浅复制生成一个一模一样的新数组(指向新的地址空间)。
let array = [{a: 1}];
let array3 = array.concat();
console.log(array3); // [{a: 1}]
console.log(array3 === array); // false
console.log(array[0] === array3[0]); // true,新旧数组第一个元素依旧共用一个同一个对象的引用
join 语法:arr.join([separator = ‘,’]) separator可选,缺省默认为逗号。
join() 方法将数组中的所有元素连接成一个字符串。
let array = ['We', 'are', 'Chinese'];
console.log(array.join()); // "We,are,Chinese"
console.log(array.join('+')); // "We+are+Chinese"
console.log(array.join('')); // "WeareChinese"
slice 语法:arr.slice(start, end)
slice() 方法将数组中一部分元素浅复制存入新的数组对象,并且返回这个数组对象。
参数 start 指定复制开始位置的索引,end如果有值则表示复制结束位置的索引(不包括此位置)。
如果 start 的值为负数,假如数组长度为 length,则表示从 length+start 的位置开始复制,此时参数 end 如果有值,只能是比 start 大的负数,否则将返回空数组。
slice方法参数为空时,同concat方法一样,都是浅复制生成一个新数组。
let array = ["one", "two", "three","four", "five"];
console.log(array.slice()); // ["one", "two", "three","four", "five"]
console.log(array.slice(2,3)); // ["three"]
let array = [{color:"yellow"}, 2, 3];
let array2 = array.slice(0,1);
console.log(array2); // [{color:"yellow"}]
array[0]["color"] = "blue";
console.log(array2); // [{color:"bule"}]
toString 语法:arr.toString()
toString() 方法返回数组的字符串形式,该字符串由数组中的每个元素的 toString() 返回值经调用 join() 方法连接(由逗号隔开)组成。
let array = ['Jan', 'Feb', 'Mar', 'Apr'];
let str = array.toString();
console.log(str); // Jan,Feb,Mar,Apr
toLocaleString 语法:arr.toLocaleString()
toLocaleString() 类似toString()的变型,该字符串由数组中的每个元素的 toLocaleString() 返回值经调用 join() 方法连接(由逗号隔开)组成。
let array= [{name:'zz'}, 123, "abc", new Date()];
let str = array.toLocaleString();
console.log(str); // [object Object],123,abc,2019/3/28 下午12:16:23
toString()和toLocaleString()两点区别:
1.当数字是四位数及以上时
let a=1234.5678
a.toString()//"1234.5678"
a.toLocaleString()//"1,234.568"
2.当目标是标准时间格式时
let sd=new Date()//Thu Mar 07 2019 12:11:55 GMT+0800 (中国标准时间)
sd.toLocaleString()//"2019/3/7 下午12:21:55"
sd.toString()//Thu Mar 07 2019 12:11:55 GMT+0800
indexOf 语法:arr.indexOf(element, fromIndex=0)
indexOf() 方法用于查找元素在数组中第一次出现时的索引,如果没有,则返回-1。
element 为需要查找的元素,fromIndex 为开始查找的位置,缺省默认为0。如果超出数组长度,则返回-1。如果为负值,假设数组长度为length,则从数组的第 length + fromIndex项开始往数组末尾查找,如果length + fromIndex<0 则整个数组都会被查找。
let array = ['abc', 'def', 'ghi','123'];
console.log(array.indexOf('def')); // 1
console.log(array.indexOf('def',-1)); // -1 此时表示从最后一个元素往后查找,因此查找失败返回-1
console.log(array.indexOf('def',-4)); // 1 由于4大于数组长度,此时将查找整个数组,因此返回1
console.log(array.indexOf(123)); // -1, 由于是严格匹配,因此并不会匹配到字符串'123'
lastIndexOf 语法:arr.lastIndexOf(element, fromIndex=length-1)
lastIndexOf() 方法用于查找元素在数组中最后一次出现时的索引,如果没有,则返回-1。并且它是indexOf的逆向查找,即从数组最后一个往前查找。
element 为需要查找的元素,fromIndex 为开始查找的位置,缺省默认为arr.length-1。如果超出数组长度,则返回-1。如果为负值,假设数组长度为length,则从数组的第 length + fromIndex项开始往数组栈底查找,如果length + fromIndex<0 则整个数组都会被查找。
同 indexOf 一样,lastIndexOf 也是严格匹配数组元素。
includes(ES7) 语法:arr.includes(element, fromIndex=0)
includes() 方法基于ECMAScript 2016(ES7)规范,它用来判断当前数组是否包含某个指定的值,如果是,则返回 true,否则返回 false。
element 为需要查找的元素,fromIndex 表示从该索引位置开始查找 element,缺省为0,它是正向查找,即从索引处往数组末尾查找。
let array = [0, 1, 2];
console.log(array.includes(0)); // true
console.log(array.includes(1)); // true
console.log(array.includes(2,-4)); // true
你可能会问,既然有了indexOf方法,为什么又造一个includes方法,arr.indexOf(x)>-1不就等于arr.includes(x)?看起来是的,几乎所有的时候它们都等同,唯一的区别就是includes能够发现NaN,而indexOf不能。
let array = [NaN];
console.log(array.includes(NaN)); // true
console.log(arra.indexOf(NaN)>-1); // false
7. 基于ES6,不会改变自身的方法一共有12个,分别为forEach、every、some、filter、map、reduce、reduceRight 以及ES6新增的方法entries、find、findIndex、keys、values。
forEach 语法:arr.forEach(fn(value, index,array), thisArg)
forEach() 方法指定数组的每项元素都执行一次传入的函数,返回值为undefined。
fn 表示在数组每一项上执行的函数,接受三个参数:
value 当前正在被处理的元素的值
index 当前元素的数组索引
array 数组本身
thisArg 可选,用来当做fn函数内的this对象。
forEach 将为数组中每一项执行一次 fn 函数,那些已删除,新增或者从未赋值的项将被跳过(但不包括值为 undefined 的项)。
let array = [1, 3, 5];
let obj = {name:'cc'};
let sReturn = array.forEach(function(value, index, array){
array[index] = value * value;
console.log(this.name); // cc被打印了三次
},obj);
console.log(array); // [1, 9, 25], 可见原数组改变了
console.log(sReturn); // undefined, 可见返回值为undefined
*forEach无法直接退出循环,只能使用return 来达到for循环中continue的效果
*它总是返回 undefined值,即使你return了一个值。
1. 对于空数组是不会执行回调函数的
2. 对于已在迭代过程中删除的元素,或者空元素会跳过回调函数
3. 遍历次数再第一次循环前就会确定,再添加到数组中的元素不会被遍历。
4. 如果已经存在的值被改变,则传递给 callback 的值是遍历到他们那一刻的值。
eg:
let a = [1, 2, ,3]; // 最后第二个元素是空的,不会遍历(undefined、null会遍历)
let obj = { name: 'obj的名字' };
let result = a.forEach(function (value, index, array) {
a[3] = '改变元素';
a.push('添加到尾端,不会被遍历')
console.log(value, 'forEach传递的第一个参数'); // 分别打印 1 ,2 ,改变元素
console.log(this.name); // 'obj的名字' 打印三次 this绑定在obj对象上
// break; // break会报错
return value; // return只能结束本次回调 会执行下次回调
console.log('不会执行,因为return 会执行下一次循环回调')
}, obj);
console.log(result); // 即使return了一个值,也还是返回undefined
every 语法:arr.every(fn, thisArg)
every()方法检测数组所有元素是否都符合判断条件(参数同上)
方法返回值规则:
1 ,如果数组中检测到有一个元素不满足,则整个表达式返回 false,且剩余的元素不会再进行检测
2. 如果所有元素都满足条件,则返回 true
eg:
function isBigEnough(element, index, array) {
return element >= 10; // 判断数组中的所有元素是否都大于10
}
[12, 5, 8, 130, 44].every(x => x >= 10); // false
[12, 54, 18, 130, 44].every(x => x >= 10); // true
some 语法:arr.some(fn, thisArg)
some()数组中的是否有满足判断条件的元素(参数同上)
方法返回值规则:
1 ,如果有一个元素满足条件,则表达式返回true, 剩余的元素不会再执行检测
2. 如果没有满足条件的元素,则返回false
eg:
function isBigEnough(element, index, array) {
return (element >= 10); //数组中是否有一个元素大于 10
}
let result = [2, 5, 8, 1, 4].some(isBigEnough); // false
let result = [12, 5, 8, 1, 4].some(isBigEnough); // true
filter 语法:arr.filter(fn, thisArg)
filter()过滤原始数组,返回通过所提供函数实现的所有元素组成的新数组(参数同上)
eg:
let a = [32, 33, 16, 40];
let result = a.filter(function (value, index, array) {
return value >= 18; // 返回a数组中所有大于18的元素
});
console.log(result,a);// [32,33,40] [32,33,16,40]
map 语法:arr.map(fn, thisArg)
map()对数组中的每个元素进行处理,返回新的数组(参数同上)
eg:
let a = ['1','2','3','4'];
let result = a.map(function (value, index, array) {
return value + 0
});
console.log(result); //["10", "20", "30", "40"]
reduce 语法:array.reduce(function(total, currentValue, currentIndex, arr), initialValue)
reduce()为数组提供累加器,合并为一个值
1. 如果 initialValue 在调用 reduce 时被提供,那么第一个 total 将等于 initialValue,此时 currentValue 等于数组中的第一个值
2. 如果 initialValue 未被提供,那么 total 等于数组中的第一个值,currentValue 等于数组中的第二个值。此时如果数组为空,那么将抛出 TypeError
3. 如果数组仅有一个元素,并且没有提供 initialValue,或提供了 initialValue 但数组为空,那么回调不会被执行,数组的唯一值将被返回
eg:
// 数组求和
let sum = [0, 1, 2, 3].reduce(function (a, b) {
return a + b;
}, 0);
// 6
------
// 将二维数组转化为一维 将数组元素展开//见flat()
let flattened = [[0, 1], [2, 3], [4, 5]].reduce((a, b) => a.concat(b),[]);
// [0, 1, 2, 3, 4, 5]
reduceRight 语法:array.reduceRight(function(total, currentValue, currentIndex, arr), initialValue)
这个方法除了与reduce执行方向相反外,其他完全与其一致
ES6 keys()&values()&entries() 遍历键名、遍历键值、遍历键名+键值
三个方法都返回一个新的 Array Iterator 对象,对象根据方法不同包含不同的值
eg:
for (let index of ['a', 'b'].keys()) {
console.log(index);
}
// 0
// 1
for (let elem of ['a', 'b'].values()) {
console.log(elem);
}
// 'a'
// 'b'
for (let [index, elem] of ['a', 'b'].entries()) {
console.log(index, elem);
}
// 0 "a"
// 1 "b"
在for..of中如果遍历中途要退出,可以使用break退出循环。
如果不使用for...of循环,可以手动调用遍历器对象的next方法,进行遍历:
let letter = ['a', 'b', 'c'];
let entries = letter.entries();
console.log(entries.next().value); // [0, 'a']
console.log(entries.next().value); // [1, 'b']
console.log(entries.next().value); // [2, 'c']
ES6 find()& findIndex() 根据条件找到数组成员 语法:arr.find(fn, thisArg),arr.findIndex(fn, thisArg)
find()定义:用于找出第一个符合条件的数组成员,并返回该成员,如果没有符合条件的成员,则返回undefined。
findIndex()定义:返回第一个符合条件的数组成员的位置,如果所有成员都不符合条件,则返回-1。
这两个方法都可以识别NaN,弥补了indexOf的不足.
eg:
// find
let a = [1, 4, -5, 10].find((n) => n < 0); // 返回元素-5
let b = [1, 4, -5, 10,NaN].find((n) => Object.is(NaN, n)); // 返回元素NaN
// findIndex
let a = [1, 4, -5, 10].findIndex((n) => n < 0); // 返回索引2
let b = [1, 4, -5, 10,NaN].findIndex((n) => Object.is(NaN, n)); // 返回索引4
8.扩展运算符
扩展运算符(spread)是三个点(...)。它好比 rest 参数的逆运算,将一个数组转为用逗号分隔的参数序列。
console.log(1, ...[2, 3, 4], 5)
// 1 2 3 4 5
扩展运算符后面可以放置表达式。
console.log((...[1, 2]))
注意,扩展运算符如果放在括号中,JavaScript引擎就会认为这是函数调用。如果这时不是函数调用,就会报错。
// Uncaught SyntaxError: Unexpected number
替代函数的 apply 方法
由于扩展运算符可以展开数组,所以不再需要apply方法,将数组转为函数的参数了。
// ES5 的写法
function f(x, y, z) {
// ...
}
var args = [0, 1, 2];
f.apply(null, args);
// ES6的写法
function f(x, y, z) {
// ...
}
let args = [0, 1, 2];
f(...args);
下面是扩展运算符取代apply方法的一个实际的例子,应用Math.max方法,简化求出一个数组最大元素的写法。
// ES5 的写法
Math.max.apply(null, [14, 3, 77])
// ES6 的写法
Math.max(...[14, 3, 77])
// 等同于
Math.max(14, 3, 77);
另一个例子是通过push函数,将一个数组添加到另一个数组的尾部。
// ES5的 写法
var arr1 = [0, 1, 2];
var arr2 = [3, 4, 5];
Array.prototype.push.apply(arr1, arr2);
// ES6 的写法
let arr1 = [0, 1, 2];
let arr2 = [3, 4, 5];
arr1.push(...arr2);
还有一个小例子
// ES5
new (Date.bind.apply(Date, [null, 2015, 1, 1]))
// ES6
new Date(...[2015, 1, 1]);
扩展运算符的应用
(1)复制数组
ES5:
const a1 = [1, 2];
const a2 = a1.concat();
a2[0] = 2;
a1 // [1, 2]
使用扩展运算符:
const a1 = [1, 2];
// 写法一
const a2 = [...a1];
// 写法二
const [...a2] = a1;
(2)合并数组
const a1 = [{ foo: 1 }];
const a2 = [{ bar: 2 }];
const a3 = a1.concat(a2);
const a4 = [...a1, ...a2];
这两种方法都是浅拷贝
a3[0] === a1[0] // true
a4[0] === a1[0] // true
(3)与解构赋值结合
// ES5
a = list[0], rest = list.slice(1)
// ES6
[a, ...rest] = list
const [first, ...rest] = [1, 2, 3, 4, 5];
first // 1
rest // [2, 3, 4, 5]
const [first, ...rest] = [];
first // undefined
rest // []
注意:如果将扩展运算符用于数组赋值,只能放在参数的最后一位,否则会报错。
const [...butLast, last] = [1, 2, 3, 4, 5];
// 报错
const [first, ...middle, last] = [1, 2, 3, 4, 5];
// 报错
(4)字符串
扩展运算符还可以将字符串转为真正的数组。
[...'hello']
// [ "h", "e", "l", "l", "o" ]
'x\uD83D\uDE80y'.length // 4
[...'x\uD83D\uDE80y'].length // 3
上面代码的第一种写法,JavaScript 会将四个字节的 Unicode 字符,
识别为 2 个字符,采用扩展运算符就没有这个问题。
因此,正确返回字符串长度的函数,可以像下面这样写。
function length(str) {
return [...str].length;
}
length('x\uD83D\uDE80y') // 3
(5)实现了 Iterator 接口的对象
任何定义了遍历器(Iterator)接口的对象都可以用扩展运算符转为真正的数组。
下面代码中,先定义了Number对象的遍历器接口,扩展运算符将5自动转成
Number实例以后,就会调用这个接口,就会返回自定义的结果。
Number.prototype[Symbol.iterator] = function*() {
let i = 0;
let num = this.valueOf();
while (i < num) {
yield i++;
}
}
console.log([...5]) // [0, 1, 2, 3, 4]
下面代码中,arrayLike是一个类似数组的对象,但是没有部署Iterator接口
,扩展运算符就会报错。
let arrayLike = {
'0': 'a',
'1': 'b',
'2': 'c',
length: 3
};
// TypeError: Cannot spread non-iterable object.
let arr = [...arrayLike];
(6)Map 和 Set 结构,Generator 函数
扩展运算符内部调用的是数据结构的 Iterator 接口,
因此只要具有 Iterator 接口的对象,都可以使用扩展运算符,比如 Map 结构。
let map = new Map([
[1, 'one'],
[2, 'two'],
[3, 'three'],
]);
let arr = [...map.keys()]; // [1, 2, 3]
Generator 函数运行后,返回一个遍历器对象,因此也可以使用扩展运算符。
const go = function*(){
yield 1;
yield 2;
yield 3;
};
[...go()] // [1, 2, 3]
上面代码中,变量go是一个 Generator 函数,执行后返回的是一个遍历器对象,
对这个遍历器对象执行扩展运算符,就会将内部遍历得到的值,转为一个数组。
9.数组的空位
Array(3) // [, , ,]
空位不是undefined,一个位置的值等于undefined,依然是有值的。空位是没有任何值,in运算符可以说明这一点。
0 in [undefined, undefined, undefined] // true
0 in [, , ,] // false
ES5 对空位的处理,已经很不一致了,大多数情况下会忽略空位。
forEach(), filter(), reduce(), every() 和some()都会跳过空位。
map()会跳过空位,但会保留这个值
join()和toString()会将空位视为undefined,而undefined和null会被处理成空字符串。
// forEach方法
[,'a'].forEach((x,i) => console.log(i)); // 1
// filter方法
['a',,'b'].filter(x => true) // ['a','b']
// every方法
[,'a'].every(x => x==='a') // true
// reduce方法
[1,,2].reduce((x,y) => x+y) // 3
// some方法
[,'a'].some(x => x !== 'a') // false
// map方法
[,'a'].map(x => 1) // [,1]
// join方法
[,'a',undefined,null].join('#') // "#a##"
// toString方法
[,'a',undefined,null].toString() // ",a,,"
ES6 则是明确将空位转为undefined。
Array.from方法会将数组的空位,转为undefined,也就是说,这个方法不会忽略空位。
Array.from(['a',,'b'])
// [ "a", undefined, "b" ]
扩展运算符(...)也会将空位转为undefined。
[...['a',,'b']]
// [ "a", undefined, "b" ]
copyWithin()会连空位一起拷贝
[,'a','b',,].copyWithin(2,0) // [,"a",,"a"]
fill()会将空位视为正常的数组位置。
new Array(3).fill('a') // ["a","a","a"]
for...of循环也会遍历空位。
let arr = [, ,];
for (let i of arr) {
console.log(1);
}
// 1
// 1
entries()、keys()、values()、find()和findIndex()会将空位处理成undefined。
// entries()
[...[,'a'].entries()] // [[0,undefined], [1,"a"]]
// keys()
[...[,'a'].keys()] // [0,1]
// values()
[...[,'a'].values()] // [undefined,"a"]
// find()
[,'a'].find(x => true) // undefined
// findIndex()
[,'a'].findIndex(x => true) // 0
注: 如果与别处相似,纯属巧合~
若有问题或者错误请在下方留言~
网友评论