JavaScript第六章----集合引用类型
Object
-
显示地创建Object实例
//第一种使用new操作符和Object构造函数 let person = new Object(); person.name = "Nicholas"; person.age = 29; //第二种是使用对象字面量(使用更广泛) let person = { name:"Nicholas"; age:29 }; //也可以用对象字面量表示法来定义一个只有默认属性和方法的对象 let person = {}; person.name = "Nicholas"; person.age = 29;
Array
-
创建数组
//1.使用Array构造函数 let colors = new Array();//创建一个空数组 let colors = new Array(30);//创建一个初始length为20的数组 let colors = new Array("red","blue","green"); //2.使用数组字面量表示法 let colors = ["red","blue","green"];//创建一个包含3个元素的数组 let name = [];//创建一个空数组 let values = [1,2,];//创建一个包含2个元素的数组 //3.ES6新增的用于创建数组的静态方法 Array.from("Matt")//['M','a','t','t']; //Array.from()中的第一个参数是一个类数组对象,即任何可迭代的结构,或者有一个length属性和可索引元素的结构,并且还可以接受第二个可选的映射函数参数 const a1 = [1,2,3,4]; const a2 = Array.from(a1,x=>x**2);//[1,4,9,16] Array.of(1,2,3,4);
-
数组空位
使用数组字面量初始化数组时,可以使用一串逗号来创建空位(hole)
ES6新增的方法和迭代器与早期的ECMAScript版本中存在的方法行为不同。ES6新增方法普遍将这些空位当成存在的元素,只不过值为undefined
const options = [,,,,,];//创建包含5个元素的数组 console.log(options.length);//5
-
数组索引
数组length属性的独特之处在于,他不是只读的。通过修改length属性,可以从数组末尾删除或添加元素let colors = ['red','blue','green'];//创建一个包含3个字符串的数组 colors.length = 2;//将数组的元素个数修改为两个,即删除了最后一个值 alert(colors[2]);//undefined let colors = ['red','blue','green'];//创建一个包含3个字符串的数组 colors.length = 4;//将数组元素修改为4个,位置3在数组中不存在 alert(colors[3]);//undefined,因此访问其值时会返回特殊值undefined //使用length属性可以方便地向数组末尾添加元素 let colors = ['red','blue','green'];//创建一个包含3个字符串的数组 colors[colors.length] = "black" //添加一种颜色(位置三)
-
检测数组
在只有一个网页(因而只有一个全局作用域)的情况下,使用instanceof
操作符就足矣;如果网页里有多个框架,就可能涉及两个不同的全局执行上下文if(value instanceof Array){ //操作数组 } if(Array.isArray(value){ //操作数组 }
-
迭代器方法
在ES6中,Array的原型上暴露了3个用于检索数组内容的方法,keys()
、values()
、entries()
const a = ["foo","bar","baz","qux"]; const aKesy = Array.from(a.keys()); //[0,1,2,3] const aValues = Array.from(a.values());//["foo","bar","baz","qux"] const aEntries = Array.from(a.entries());//[[0,"foo"],[1,"bar"],[2,"baz"],[3,"qux"]]
-
复制和填充方法
ES6新增了两个方法:批量复制方法copyWithin()
,以及填充数组方法fill()
const zeroes = [0,0,0,0,0]; zeroes.fill(5);//用5填充整个数组 console.log(zeroes);//[5,5,5,5,5] zeroes.fill(0);//重置 zeroed.fill(7,1,3);//用7填充索引大于等于1且小于3的元素 console.log(zeroes);//[0,7,7,0,0] zeroes.fill(0);//重置 //负值索引从数组末尾开始计算,也可以将负索引想象成数组长度加上它得到的一个正索引 //fill()静默忽略超出数组边界、零长度及方向相反的索引范围 //与fill()不同,copyWithin()会按照指定范围千夫指数组中的部分内容,然后将他们插入到指定索引开始的位置。开始索引和结束索引则与fill()使用相同的计算方法: let ints; reset = ()=>ints = [0,1,2,3,4,5,6,7,8,9]; reset(); ints.copyWithin(5);//从ints中复制索引0开始的内容,插入到索引0开始的位置 console.log(ints); reset(); ints.copyWithin(0,5);//从ints中复制索引5开始的内容,插入到索引0开始的位置 console.log(ints);//[5,6,7,8,9,5,6,7,8,9]
-
转换方法
所有对象都有toLocaleString()
、toString()
和valueOf()
方法。其中,valueOf()返回的是数组本身,而toString()返回数组中每个值的等效字符串拼接而成的一个逗号分隔的字符串。也就是说,对数组的每个值都会调用其toString()方法,以得到最终的字符串。
继承的方法toLocaleString()
以及toString()
都返回数组值的逗号分隔的字符串。如果想使用不同的分隔符,则可以使用join()
方法。 -
栈方法
ECMAScript数组提供了push()
方法和pop()
方法,以实现类似栈的行为。 -
队列方法
使用push()
方法、shift()
方法、unshift()
方法和pop()
方法 -
排序方法
数组有两个方法可以用来对比元素重新排序:reverse()和sort()。let values = [1,2,3,4,5]; values.reverse(); alert(values);//5,4,3,2,1 let values = [0,1,5,10,15]; values.sort(); alert(values());//0,1,10,15,5 values.sort((a,b)=>a-b);//将所有元素从小到大的排列
-
操作方法
concat()
方法//concat()方法可以在现有数组全部元素基础上创建一个新数组,原始数组保持不变 let colors = ["red","green","blue"]; let colors2 = colors.concat("yellow",["black","brown"]); console.log(colors);//["red","green","blue"] console.log(colors2);//["red","green","blue","yellow","black","brown"] //打平数组参数的行为可以重写,方法是在参数数组上指定一个特殊的符号:Symbol.isConcatSpreadable。这个符号能够阻止concat()打平数组,相反把这个值设置为true可以强制打平类数组对象 let colors = ["red","green","blue"]; let newColors = ["black","brown"]; let moreNewColors = { [Symblo.isConcatSpreadable]:true, length:2; 0:"pink"; 1:"cyan" }; newColors[Symblo.isConcatSpreadable] = false; let colors2 = colors.concat(moreNewColors);//强制打平数组 let colors3 = colors.concat("yellow",newColors);//强制不打平数组 console.log(colors);//["red","green","blue"] console.log(colors2);//["red","green","blue","pink","cyan"] console.log(colors3);//["red","green","blue","yellow",["black","brown"]]
slice()
方法//方法slice()用于创建一个包含原有数组中一个或多个元素的新数组 //如果只有一个参数,则slice()会返回该索引到数组末尾的所有元素 //如果有两个参数,则slice()会返回从开始索引到结束索引对应的所有元素,其中不包含结束索引对应的元素 //这个操作不影响原始数组 let colors = ["red","green","blue","yellow","purple"]; let colors2 = colors.slice(1); let colors3 = colors.slice(1,4); alert(colors2);//grenn,blue,yellow,purple alert(colors3);//green,blue,yellow //如果slice()的参数有负值,那么就以数值长度家上这个负值的结果确定位置
splice()
方法//splice()的主要目的是在数组中间插入元素,但是有3中不同的方式使用这个方法 //传入的第一个参数为要删除的第一个元素的位置,第二个参数为要删除元素的数量,后面的参数为要插入的元素 //这种方法会改变原有数组 splice(0,2);//会删除前两个元素----删除 splice(2,0,"red","green");//从数组位置2开始插入字符串"red"和"green"----插入 splice(2,1,"red","green");//会在位置2删除一个元素,然后从该位置开始像数组中插入"red"和"green"----替换
-
搜索和位置方法
indexOf()
,lastIndexOf()
和includes()
let numbers = [1,2,3,4,5,4,3,2,1]; alert(numbers.indexOf(4));//从前往后找的索引为3 alert(numbers.lastIndexOf(4));//从后往前找的索引为5 alert(numbers.includes(4));//true判断数组中存在4这个元素
断言函数
find()
、findIndex()
//find()和findIndex()方法使用了断言函数。这两个方法都从数组的最小索引开始,find()返回第一个匹配的元素,findIndex()返回第一个匹配元素的索引。 const people = { { name:"Matt"; age:27 }, { name:"Nicholas"; age:29 } }; alert(people.find((element,index,array)=>element.age<28));//{name:"Matt",age:2 7} alert(people.findIndex((element,index,array)=>element.age<28)));//0 //找到匹配项后,这两个方法都不再继续搜索
-
迭代方法
every()
、filter()
、forEach()
、map()
、some()
//在这些方法中every()和some()是最相似的,都是从数组中搜素符合某个条件的元素 //对every()来说,传入的函数必须对每一项都返回true,它才会返回true //对some()来说,只要有一项让传入的函数返回true,它就会返回true let numbers = [1,2,3,4,5,4,3,2,1]; alert(numbers.every((item,index,array)=>item>2);//false alert(numbers.some((item,index,array)=>item>2);//true //filter()方法基于给定的函数来决定某一项是够应该包含在它返回的数组中,比如要返回一个所有数值都大于2的数组 let numbers = [1,2,3,4,5,4,3,2,1]; alert(numbers.filter((item,index,array)=>item>2));//3,4,5,4,3 //map()方法也会返回一个数组,这个数组的每一项都是对原始数组中同样位置的元素运行传入含函数而返回的结果,例如,可以将一个数组中的每一项都乘以2,并返回包含所有结果的数组 let numbers = [1,2,3,4,5,4,3,2,1]; alert(numbers.map((item,index,array)=>item*2);//2,4,6,8,10,8,6,4,2
-
归并方法
reduce()
、reduceRight()
//reduce()方法从数组第一项开始遍历到最后一项,而reduceRight()方法从最后一项开始遍历至第一项 //接受四个参数:上一个并归值、当前项的索引、数组本身 //这个函数返回的任何值都会作为下一次调用同一个函数的第一个参数 let values = [1,2,3,4,5]; alert(values.reduce((prev,cur,index,array)=>prev+cur);//15
Map
Map是一种新的集合类型
-
基本API:
set()
、get()
、has()
、delete()
、clear()
const m = new Map(); alert(m.has("firstName"));//false alert(m.get("firstName"));//undefined alert(m.size);//0 m.set("firstName","Matt") .set("lastName","Frisbie");//插入了两对键值对 alert(m.has("firstName"));//true alert(m.get("firstName"));//Matt m.delete("firstName");//只删除这一对键值对 m.clear();//清除这个映射实例中的所有键值对 //与Object只能使用数值、字符串和符号作为键不同,Map可以使用任何JavaScript数据类型作为键。
Set
与Map相同的方法:has()
、delete()
、clear()
,也可以包含任何JavaScript数据类型作为值
不同的方法:add()
类似于Map中的set()