扩大运算符
含意
扩大运算符（spread）是三个点（...),能够当作rest参数的逆运算,将数组转为用逗号分隔的参数序列
rest是把传入的参数组合成一个数组
扩大运算符是把数组分解成参数
console.log(...[1,2,3])//1,2,3console.log(1,...[2,3,4],5)//1,2,3,4,5[...document.querySelectorAll('div')]// [<div>, <div>, <div>]- 该运算符次要用于函数的调用,将一个数组,变为参数序列
function push(array,...items){ array.push(...items)}function add(x,y){ return x+y}const numbers = [4,38]add(...numbers) //42- ...能够与失常的参数联合应用
function f(v,w,x,y,z){ console.log(v,w,x,y,z) //-1 0 1 2 3}const args = [0,1]f(-1,...args,2,...[3]);- ...前面还能够搁置表达式
var x = 1const arr = [ ...(x>0?['a']:[]), 'b',]console.log(arr) //['a','b']- 如果扩大运算符前面是一个空数组，则不产生任何成果。
[...[], 1]// [1]- 只有函数调用时,扩大运算符才能够放在圆括号中
(...[1, 2])// Uncaught SyntaxError: Unexpected numberconsole.log((...[1, 2]))// Uncaught SyntaxError: Unexpected numberconsole.log(...[1, 2])// 1 2下面三种状况，扩大运算符都放在圆括号外面，然而前两种状况会报错，因为扩大运算符所在的括号不是函数调用。代替apply办法
es5:function f(x,y,z){ console.log(x,y,z) // 0 1 2}var args = [0,1,2];f.apply(null,args)因为f接管的参数不能为数组，为了不便，能够用apply办法来实现用数组的参数来传递，这是很多时候使用的一个小技巧罢了。而apply办法第一个参数，是要代替的对象。没有要代替的，用null,也是很天然的es6:function f(x,y,z){ console.log(x,y,z) // 0 1 2}var args = [0,1,2]f(...args)- 利用:Math.max
// ES5 的写法Math.max.apply(null, [14, 3, 77])// ES6 的写法Math.max(...[14, 3, 77])// 等同于Math.max(14, 3, 77);- 将一个数组增加到另一个数组的尾部
es5:var arr1 = [0, 1, 2];var arr2 = [3, 4, 5];Array.prototype.push.apply(arr1,arr2)console.log(arr1)//[0,1,2,3,4,5]push办法的参数不能是数组，所以只好通过apply办法变通应用push办法es6:let arr1 = [0, 1, 2];let arr2 = [3, 4, 5];arr1.push(...arr2);console.log(arr1)//[0,1,2,3,4,5]- 另一个例子
// ES5new (Date.bind.apply(Date, [null, 2015, 1, 1]))// ES6new Date(...[2015, 1, 1]);bind.apply:
扩大运算符的利用
复制数组
数组是复合数据类型,所以间接复制的话是复制指向底层数据结构的指针,不是一个新数组
var a1 = [1,2]var a2 = a1a2[0]= 2a1 //[2,2]所以es5的变通方法:
var a1 = [1, 2];var a2 = a1.concat();a2[0] = 2;a1 // [1, 2]concat:用于连贯2个或多个数组,不会扭转现有数组,会返回被连贯的数组的正本 如果参数是数组,那么增加的是数组中的元素es6:
var a1 = [1, 2];var a2 = [...a1]或者var [...a2] = a1合并数组
var arr1 = ['a', 'b'];var arr2 = ['c'];var arr3 = ['d', 'e'];// ES5 的合并数组arr1.concat(arr2, arr3);// [ 'a', 'b', 'c', 'd', 'e' ]// ES6 的合并数组[...arr1, ...arr2, ...arr3]// [ 'a', 'b', 'c', 'd', 'e' ]a3和a4是用两种不同办法合并而成的新数组，然而它们的成员都是对原数组成员的援用，这就是浅拷贝。
如果批改了援用指向的值，会同步反映到新数组。
var a1 = [{foo:1}]var a2 = [{bar:2}]var a3 = a1.concat(a2)var a4 = [...a1,...a2]a3[0] === a1[0] // truea4[0] === a1[0] // true与解构赋值联合
用于生成数组
// ES5a = list[0],rest = list.slice(1)// ES6[a,...rest] = listrest // list[1]slice(start,end):截取数组中选定的元素并返回,start为负,从数组尾部开始算起的地位end,可选,不写则蕴含从 start 到数组完结的所有元素const [first, ...rest] = [1, 2, 3, 4, 5];first // 1rest // [2, 3, 4, 5]const [first, ...rest] = [];first // undefinedrest // []const [first, ...rest] = ["foo"];first // "foo"rest // []如果将扩大运算符用于数组赋值，只能放在参数的最初一位，否则会报错。
const [...butLast, last] = [1, 2, 3, 4, 5];// 报错const [first, ...middle, last] = [1, 2, 3, 4, 5];// 报错字符串
将字符串转为真正的数组
[...'hello']// [ "h", "e", "l", "l", "o" ]实现了Iterator接口的对象
)
)
Map,Set构造,Generator函数
let map = new Map([ ['1','one'], ['2','two'], ['3','three'],]);let arr = [...map.keys()]- Generator 函数运行后，返回一个遍历器对象，因而也能够应用扩大运算符。
const go = function*(){ yield 1; yield 2; yield 3;};[...go()] // [1, 2, 3]- 如果对没有 Iterator 接口的对象，应用扩大运算符，将会报错。
const obj = {a: 1, b: 2};let arr = [...obj]; // TypeError: Cannot spread non-iterable objectArray.from(arrayLike[, mapFn[, thisArg]])
arrayLike想要转换成数组的伪数组对象或可迭代对象。mapFn 可选如果指定了该参数，新数组中的每个元素会执行该回调函数。thisArg 可选可选参数，执行回调函数 mapFn 时 this 对象。* 用于将相似数组的对象和可遍历的对象转为真正的数组let arrayLike = { '0':'a', "1":'b', "2":'c', length:3}es5:var arr1 = [].slice.call(arrayLike) //['a','b','c']es6:let arr2 = Array.from(arrayLike) //['a','b','c']- 理论利用中，Array.from将常见的相似数组的对象是 DOM 操作返回的 NodeList 汇合，以及函数外部的arguments对象转为数组
let ps = document.querySelectorAll('p')Array.from(ps).filter(p=>{ return p.textContent.length >100})function foo(){ var args = Array.from(arguments)}- 只有是部署了 Iterator 接口的数据结构，Array.from都能将其转为数组。
Array.from('hello')// ['h', 'e', 'l', 'l', 'o']let namesSet = new Set(['a', 'b'])Array.from(namesSet) // ['a', 'b']- 如果参数是一个真正的数组,Array.from会返回一个截然不同的新数组
var arr1 = [1,2,3]var arr2 = Array.from(arr1)arr2 === arr1 //false- ...也能够将某些数据结构转为数组
function foo(){ var args = [...arguments]}[...document.querySelectorAll('div')]扩大运算符背地调用的是遍历器接口,如果这个对象没有部署这个接口,就无奈转换
Array.from能够转化有length属性的相似数组的对象,而扩大运算符就无奈转换
Array.from({length:3})// [ undefined, undefined, undefined ]下面代码中，Array.from返回了一个具备三个成员的数组，每个地位的值都是undefined。
扩大运算符转换不了这个对象。
- Array.from的第二个参数,相似map,对每一个元素进行解决
Array.from(arr,x=>x*x)Array.from([1, 2, 3], (x) => x * x)// [1, 4, 9]上面的例子是取出一组 DOM 节点的文本内容
let spans = document.querySelectorAll('span.name');let names1 = Array.prototype.map.call(spans,s=>s.textContent);.map():返回一个新数组,原始数组调用函数解决后的值let names2 = Array.from(spans,s=>s.textContent)将数组中布尔值为false的成员转为0
Array.from([1,2,3],n=>n||0)// [1, 0, 2, 0, 3]另一个例子是返回各种数据的类型。
function typesOf () { return Array.from(arguments, value => typeof value)}typesOf(null, [], NaN)// ['object', 'object', 'number']Array.from的第一个参数指定了第二个参数运行的次数。这种个性能够让该办法的用法变得非常灵活。
Array.from({length:2},()=>'jack')// ['jack', 'jack']将字符串转为数组,返回字符串的长度
function countSymbols(string){ return Array.from(String).length}Array.from办法会将数组的空位，转为undefined，也就是说，这个办法不会疏忽空位。
Array.from(['a',,'b'])// [ "a", undefined, "b" ]Array.of()
将一组值转换为数组,次要是补救Array()的有余
Array() // []Array(3) // [, , ,]Array(3, 11, 8) // [3, 11, 8]Array办法没有参数、一个参数、三个参数时，返回后果都不一样。
只有当参数个数不少于 2 个时，Array()才会返回由参数组成的新数组。
参数个数只有一个时，实际上是指定数组的长度。
Array.of(3, 11, 8) // [3,11,8]Array.of(3) // [3]Array.of(3).length // 1let arr = Array.of(1, 2, 3, 4)console.log(arr) // [1, 2, 3, 4]console.log(arr.length) // 4Array.of能够代替Array()或者new Array()
Array.of() // []Array.of(undefined) // [undefined]Array.of(1) // [1]Array.of(1, 2) // [1, 2]Array.of办法能够用上面的代码模仿实现
function ArrayOf(){ return [].slice.call(arguments)}数组实例的copyWithin()
在以后数组中,将指定地位的成员复制到其余地位(笼罩原有成员),而后返回以后被扭转的数组
Array.prototype.copyWithin(target,start,end)target:从这个地位开始替换数据,如果数值为负,示意倒数start(可选):从这个地位开始读取数据,默认为0,如果数值为负,示意从开端开始计算end(可选):到该地位前进行读取数据,默认为数组的长度,如果数值为负,示意从开端开始计算例子:
[1,2,3,4,5].copyWithin(0,3) //[4,5,3,4,5]从0开始替换,替换数字是第3位到数组完结,所以是4,5,替换掉了1,2[1,2,3,4,5].copyWithin(0,3,4) //[4,2,3,4,5]从0开始替换,替换数字是第3位到第4位完结,所以是4,替换掉了1[1,2,3,4,5].copeWithin(0,-2,-1) //[4, 2, 3, 4, 5]find()和findIndex()
find:返回找出的第一个符合条件(返回值为true)的数组成员,如果没有,返回undefined
findIndex:返回第一个符合条件的数组成员的地位,如果没有,返回-1
find(callback(value,index,arr),thisArg)findIndex(callback(value,index,arr),thisArg)value:以后的值index:以后的地位arr:原数组thisArg:绑定回调函数的this对象例子:
[1, 4, -5, 10].find((n) => n < 0) // -5[1, 5, 10, 15].find(function(value, index, arr) { return value > 9;}) // 10[1,5,10,15].findIndex(function(value,index,arr){ return value >9}) //2function f(v){ return v>this.age //this指向person}let person = {name:'John',age:20};[10,12,26,15].find(f,person); //26另外，这两个办法都能够发现NaN，补救了数组的indexOf办法的有余。
[NaN].indexOf(NaN)// -1[NaN].findIndex(y => Object.is(NaN, y))// 0下面代码中，indexOf办法无奈辨认数组的NaN成员，然而findIndex办法能够借助Object.is办法做到。
Object.is():判断2个值是否是同一个值,不进行强制转换,须要满足以下条件:* 都是undefined* 都是null* 都是true或false* 都是长度雷同的字符串且字符排列程序雷同* 都是雷同对象(意味着同一个援用)* 都是数字,都是 +0,都是 -0,都是 NaN,或都是非零而且非 NaN 且为同一个值留神:+0 != -0 es5替换:if (!Object.is) { Object.is = function(x, y) { // SameValue algorithm if (x === y) { return x !== 0 || 1 / x === 1 / y; } else { return x !== x && y !== y; } };}数组实例的fill()
应用指定值,填充(批改)一个数组,其实就是用默认内容初始化数组
fill(value,start,end)
value:填充值start:填充起始地位end：填充完结地位，能够省略，理论完结地位是end-1例子:
['a','b','c'].fill(7) //[7,7,7]new Array.fill(7) //[7,7,7]如果填充的类型为对象，那么被赋值的是同一个内存地址的对象，而不是深拷贝对象
let arr = new Array(3).fill({name: "Mike"});arr[0].name = "Ben";arr // [{name: "Ben"}, {name: "Ben"}, {name: "Ben"}]let arr = new Array(3).fill({name: "Mike"},0,1);arr[0].name = "Ben";arr // [{name: "Ben"},empty*2] =====>length:3let arr = new Array(3).fill([]);arr[0].push(5);arr // [[5], [5], [5]]数组实例的entries(),keys(),values()
用于遍历数组,返回一个遍历器对象,能够用for...of循环进行遍历
enteries():键值对的遍历
keys():键名的遍历
values():键值的遍历
for(let index of ['a','b'].keys()){ console.log(index);}// 0// 1for (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"数组实例的includes()
- 查看数组中是否蕴含给定的值
includes(value,start)value:查找的內容strat:搜寻的起始地位,默认为0,如果正数,从后开始,如果大于数组长度,从头开始- 例子
[1, 2, 3].includes(2) // true[1, 2, 3].includes(4) // false[1, 2, NaN].includes(NaN) // true[1, 2, 3].includes(3, 3); // false[1, 2, 3].includes(3, -1); // true相较于indexOf(),不须要比拟是否等于-1,NaN也能够检测
[NaN].indexOf(NaN)// -1[NaN].includes(NaN)// truees5:
var contains = (()=> Array.prototype.includes ? (arr, value) => arr.includes(value) : (arr, value) => arr.some(el => el === value))()contains(['foo', 'bar'], 'baz'); // => false数组实例的flat(),flatMap()
flat
- flat():将嵌套数组变成一维数组,取出数组,放在原来的地位,返回新数组
[1, 2, [3, 4]].flat()// [1, 2, 3, 4]- flat(n):默认拉平一层,为1,如果想要“拉平”多层,将flat()的参数写成一个想要拉平层数的整数,
如果不确定层数,能够用Infinity
[1, 2, [3, [4, 5]]].flat()// [1, 2, 3, [4, 5]][1, 2, [3, [4, 5]]].flat(2)// [1, 2, 3, 4, 5][1, [2, [3]]].flat(Infinity)// [1, 2, 3]- 如果原数组有空位，flat()办法会跳过空位。
[1, 2, , 4, 5].flat()// [1, 2, 4, 5]flatMap()
对arr的每一个成员执行函数,而后对返回值组成的数组执行flat(),返回新数组,只能开展一层
arr.flatMap(function callback(currentValue[, index[, array]]) {
// ...
}[, thisArg])
callback:回调函数:三个参数:
currentValue:以后参数
index:以后参数的地位
array:原数组
thisArg:绑定回调函数里的this
[2,3,4].flatMap((x=>[x,x*2]))// 相当于 [[2, 4], [3, 6], [4, 8]].flat()// [2, 4, 3, 6, 4, 8][1, 2, 3, 4].flatMap(x => [[x * 2]])// 相当于 [[[2]], [[4]], [[6]], [[8]]].flat()// [[2], [4], [6], [8]]数组的空位
数组的空位指，数组的某一个地位没有任何值。比方，Array构造函数返回的数组都是空位。
Array(3) // [, , ,] 返回一个具备 3 个空位的数组空位不等于undefined，一个地位的值等于undefined，仍然是有值的。空位是没有任何值，in运算符能够阐明这一点
第一个数组的 0 号地位是有值的，第二个数组的 0 号地位没有值:0 in [undefined, undefined, undefined] // true0 in [, , ,] // falseES5和ES6对于空位的解决
ES5:
forEach(),filter(),reduce(),every(),some(),会跳过空位
map(),跳过空位,但保留值
join(),toString(),将空位视为undefined,undefined和null被解决成空字符串
)
ES6:将空位转为undefined
Array.from(['a',,'b'])// [ "a", undefined, "b" ][...['a',,'b']]// [ "a", undefined, "b" ][,'a','b',,].copyWithin(2,0) // [,"a",,"a"]new Array(3).fill('a') // ["a","a","a"]let arr = [, ,];for (let i of arr) { console.log(1);}// 1// 1// 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) // 0Array.prototype.sort的排序稳定性
- 排序稳固
const arr = [ 'peach', 'straw', 'apple', 'spork'];const stableSorting = (s1, s2) => { if (s1[0] < s2[0]) return -1; return 1;};arr.sort(stableSorting)// ["apple", "peach", "straw", "spork"]下面代码对数组arr依照首字母进行排序。
排序后果中，straw在spork的后面，跟原始程序统一，所以排序算法stableSorting是稳固排序。
- 排序不稳固
const unstableSorting = (s1, s2) => { if (s1[0] <= s2[0]) return -1; return 1;};arr.sort(unstableSorting)// ["apple", "peach", "spork", "straw"]下面代码中，排序后果是spork在straw后面，跟原始程序相同，所以排序算法unstableSorting是不稳固的。
常见的排序算法之中，插入排序、合并排序、冒泡排序等都是稳固的，堆排序、疾速排序等是不稳固的。
不稳固排序的次要毛病是，多重排序时可能会产生问题。
假如有一个姓和名的列表，要求依照“姓氏为次要关键字，名字为主要关键字”进行排序。
开发者可能会先按名字排序，再按姓氏进行排序。如果排序算法是稳固的，这样就能够达到“先姓氏，后名字”的排序成果。如果是不稳固的，就不行。
ES2019 明确规定，Array.prototype.sort()的默认排序算法必须稳固。
这个规定曾经做到了，当初 JavaScript 各个次要实现的默认排序算法都是稳固的。