ES6基础之数组和对象的拓展实例详解
本文实例讲述了ES6基础之数组和对象的拓展。分享给大家供大家参考,具体如下:
数组的扩展
1.拓展运算符('...'),它相当于rest参数的逆运算,用于将一个数组转换为用逗号分隔的参数序列;
console.log(...[1,2,3]) //123 console.log(1,...[2,3,4],5) //12345
2.如果扩展运算符后面是一个空数组,则不产生任何效果;
[...[],1] //[1]
3.常见的拓展运算符的应用:
//合并数组 letarr1=[1,2]; letarr2=[3,4]; letarr3=[5,6]; letnewArr=[...arr1,...arr2,...arr3];//等同于ES5[].concat(arr1,arr2,arr3) //[1,2,3,4,5,6] //与解构赋值结合(用于生成数组) const[val,...rest]=[1,2,3,4,5]; val//1 rest//[2,3,4,5] //将字符串转为真正的数组 letstr='mine'; [...str]//["m","i","n","e"] //可以将类数组转化成正真的数组 letarrayLike={ 0:'div.class1', 1:'div.class2', 2:'div.class3', length:3 } console.log([...arrayLike])//["div.class1","div.class2","div.class3"]
4.新增Array.from方法,可以将类似数组的对象(array-likeobject)和可遍历(iterable)的对象转化成真正的数组;该方法还可以接受第二个参数,作用类似于数组的map方法,用来对每个元素进行处理,将处理后的值放入返回的数组;
letarr=[1,2,3]; arr.map(x=>x*x); //[1,4,9] Array.from(arr,(x)=>x*x) //[1,4,9]
5.新增Array.of方法,用于将一组值,转换为数组(该方法基本上可以用来替代Array()或newArray(),避免出现参数不同而导致的重载);
//传统Array Array()//[] Array(3)//[,,,] Array(1,2,3)//[1,2,3] //Array.of Array.of()//[] Array.of(undefined)//[undefined] Array.of(1)//[1] Array.of(1,2)//[1,2]
6.数组实例方法find()用于找出第一个符合条件的数组成员,该方法的参数是一个回调函数,该回调函数可以接收三个参数,依次是当前元素,当前元素索引,数组本身;如果查找成功,返回符合条件的第一个成员,如果没有符合条件的成员,则返回undefined;
vararr=[1,2,4,5]; varr=arr.find(function(element,index,self){ returnelement%2==0; }) r//2
7.数组实例方法findIndex(),该方法的参数与find()一样,不同的是该方法返回的是第一个符合条件的数组成员的位置,如果所有成员都不符合条件,则返回-1;
vararr=[1,2,4,5]; varr=arr.find(function(element,index,self){ returnelement%2==0; }) r//1
ps:find()和findIndex()这两个方法都可以发现NaN,弥补了数组的IndexOf方法的不足。
8.数组实例方法includes(),方法返回一个布尔值,表示某个数组是否包含给定的值,与字符串的includes方法类似;该方法接收两个参数,第一个参数是要查找的成员,第二个参数表示搜索的起始位置(如果为负数,则表示倒数的位置,如果大于数组长度,则会重置为从0开始)
[1,2,3].includes(2)//true [1,2,3].includes(4)//false [1,2,3].includes(3,3);//false [1,2,3].includes(3,-1);//true
对象的拓展
1.ES6允许直接写入变量和函数,作为对象的属性和方法(在对象中,直接写变量时,属性名为变量名,属性值为变量的值)
//属性简写 varfoo='bar'; varobj={foo}; obj//{foo:"bar"} //变量简写 varmine={ foo, method(){ //todo } }
2.ES6允许字面量定义对象时,用表达式作为对象的属性名或者方法名,即把表达式放在方括号内;
letpropKey='foo'; letobj={ [propKey]:true, ['a'+'bc']:123, ['s'+'ay'](){ console.log('helloworld') } } obj//{"foo":true,"abc":123} obj.say()//'helloworld'
3.新增Object.is()方法,用来比较两个值是否严格相等,与严格比较运算符(===)的行为基本一致,不同之处在于一是+0不等于-0,二是NaN等于自身。
+0===-0//true NaN===NaN//false Object.is(+0,-0)//false Object.is(NaN,NaN)//true
4.新增Object.assign方法用于对象的合并,将源对象(source)的所有可枚举属性,复制到目标对象(target),第一个参数是目标对象,后面的参数都是源对象;
vartarget={a:1}; varsource1={b:2}; varsource2={c:3}; Object.assign(target,source1,source2); target//{a:1,b:2,c:3}
ps:如果目标对象与源对象有同名属性,或多个源对象有同名属性,则后面的属性会覆盖前面的属性。
vartarget={a:1,b:1}; varsource1={b:2,c:2}; varsource2={c:3}; Object.assign(target,source1,source2); target//{a:1,b:2,c:3}
该方法不能用于目标对象是undefined和null上,会报错;
5.Object.assign方法实行的是浅拷贝,而不是深拷贝。如果源对象某个属性的值是对象,那么目标对象拷贝得到的是这个对象的引用,修改会对原对象造成影响;
varobj1={a:{b:1}}; varobj2=Object.assign({},obj1); obj1.a.b=2; obj2.a.b//2
6.Object.assign方法常用于以下几个方面
为对象添加属性
var_this={}; Object.assign(_this,{name:'mine'}); _this//{name:'mine'}
为对象添加方法
var_this={}; Object.assign(_this,{func(){console.log('helloworld')}}); _this.func()//helloworld
克隆对象
var_this={name:'mine'}; Object.assign({},_this);
合并多个对象
var_this={}; varsource1={name:'mine'}; varsource2={mail:'your'}; Object.assign(_this,source1,source2); _this//{"name":"mine","mail":"your"}
为属性指定默认值
vardefault={name:'mine',mail:'your'} functionprocessContent(options){ options=Object.assign({},default,options); //todo }
7.Object.setPrototypeOf方法的作用与_proto_相同,用来设置一个对象的prototype对象,返回参数对象本身。它是ES6正式推荐的设置原型对象的方法。
letproto={}; letobj={x:10}; Object.setPrototypeOf(obj,proto); proto.y=20; proto.z=40; obj.x//10 obj.y//20 obj.z//40
8.Object.getPrototypeOf()方法,该方法与Object.setPrototypeOf方法配套,用于读取一个对象的原型对象。
9.Object.keys(),Object.values(),Object.entries()除第一个外,后面两个是ES6新增的方法,用于遍历对象,返回都是数组,成员是参数对象自身的(不含继承的)所有可遍历(enumerable)属性的键、值和键值对数组。
letobj={a:1,b:'hello'} Object.keys(obj);//["a","b"] Object.values(obj);//[1,"hello"] Object.entries(obj);//[["a",1],["b","hello"]]
感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具:http://tools.jb51.net/code/HtmlJsRun测试上述代码运行效果。
更多关于JavaScript相关内容可查看本站专题:《javascript面向对象入门教程》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》
希望本文所述对大家JavaScript程序设计有所帮助。