ES6基础之数组和对象的拓展实例详解


Posted in Javascript onAugust 22, 2019

本文实例讲述了ES6基础之数组和对象的拓展。分享给大家供大家参考,具体如下:

数组的扩展

1.拓展运算符('...'),它相当于rest参数的逆运算,用于将一个数组转换为用逗号分隔的参数序列;

console.log(...[1, 2, 3])
// 1 2 3
console.log(1, ...[2, 3, 4], 5)
// 1 2 3 4 5

2.如果扩展运算符后面是一个空数组,则不产生任何效果;

[...[], 1]
// [1]

3.常见的拓展运算符的应用:

//合并数组
let arr1 = [1,2];
let arr2 = [3,4];
let arr3 = [5,6];
let newArr = [...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]
//将字符串转为真正的数组
let str = 'mine';
[...str] // ["m","i","n","e"]
//可以将类数组转化成正真的数组
 let arrayLike = {
  0 : 'div.class1' ,
  1 : 'div.class2' ,
  2 : 'div.class3' ,
  length : 3
}
console.log([...arrayLike]) // ["div.class1","div.class2","div.class3"]

4.新增 Array.from 方法,可以将类似数组的对象(array-like object)和可遍历(iterable)的对象转化成真正的数组;该方法还可以接受第二个参数,作用类似于数组的map方法,用来对每个元素进行处理,将处理后的值放入返回的数组;

let arr = [ 1 , 2 , 3];
arr.map( x => x * x);
// [ 1 , 4 , 9 ]
Array.from(arr, (x) => x * x)
// [ 1 , 4 , 9 ]

5.新增 Array.of 方法 ,用于将一组值,转换为数组(该方法基本上可以用来替代Array()new Array(),避免出现参数不同而导致的重载);

//传统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

var arr = [1, 2, 4, 5];
var r = arr.find(function( element , index , self ){
  return element % 2 == 0;
})
r // 2

7.数组实例方法 findIndex() , 该方法的参数与 find() 一样 , 不同的是该方法 返回的是第一个符合条件的数组成员的位置,如果所有成员都不符合条件,则返回-1;

var arr = [1, 2, 4, 5];
var r = arr.find(function( element , index , self ){
  return element % 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 允许直接写入变量和函数,作为对象的属性和方法(在对象中,直接写变量时,属性名为变量名, 属性值为变量的值)

//属性简写
var foo = 'bar';
var obj = {foo};
obj // { foo : "bar" }
//变量简写
var mine = {
  foo ,
  method(){
    //to do
  }
}

2.ES6 允许字面量定义对象时,用表达式作为对象的属性名或者方法名,即把表达式放在方括号内;

let propKey = 'foo';
let obj = {
 [propKey]: true,
 ['a' + 'bc']: 123,
 ['s' + 'ay'](){
  console.log('hello world')
 }
}
obj // {"foo":true,"abc":123}
obj.say() // 'hello world'

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),第一个参数是目标对象,后面的参数都是源对象;

var target = { a: 1 };
var source1 = { b: 2 };
var source2 = { c: 3 };
Object.assign(target, source1, source2);
target // {a:1, b:2, c:3}

ps:如果目标对象与源对象有同名属性,或多个源对象有同名属性,则后面的属性会覆盖前面的属性。

var target = { a: 1, b: 1 };
var source1 = { b: 2, c: 2 };
var source2 = { c: 3 };
Object.assign(target, source1, source2);
target // {a:1, b:2, c:3}

该方法不能用于目标对象是 undefined 和 null 上, 会报错;

5.Object.assign 方法实行的是浅拷贝,而不是深拷贝。如果源对象某个属性的值是对象,那么目标对象拷贝得到的是这个对象的引用,修改会对原对象造成影响;

var obj1 = {a: {b: 1}};
var obj2 = 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('hello world') } } );
_this.func() // hello world

克隆对象

var _this = { name : 'mine' };
Object.assign( {} , _this );

合并多个对象

var _this = {};
var source1 = { name : 'mine' };
var source2 = { mail : 'your' };
Object.assign( _this , source1 , source2 );
_this // {"name":"mine","mail":"your"}

为属性指定默认值

var default = { name : 'mine' , mail : 'your' }
function processContent(options) {
options = Object.assign({}, default , options);
// to do
}

7.Object.setPrototypeOf方法的作用与_proto_相同,用来设置一个对象的prototype对象,返回参数对象本身。它是 ES6 正式推荐的设置原型对象的方法。

let proto = {};
let obj = { 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)属性的键、值和键值对数组。

let obj = { 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.3water.com/code/HtmlJsRun测试上述代码运行效果。

更多关于JavaScript相关内容可查看本站专题:《javascript面向对象入门教程》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
javascript使用中为什么10..toString()正常而10.toString()出错呢
Jan 11 Javascript
jquery操作对象数组元素方法详解
Nov 26 Javascript
详解javascript实现自定义事件
Jan 19 Javascript
jQuery Validation Plugin验证插件手动验证
Jan 26 Javascript
BootStrap入门教程(二)之固定的内置样式
Sep 19 Javascript
JS实战篇之收缩菜单表单布局
Dec 10 Javascript
JavaScript生成.xls文件的代码
Dec 22 Javascript
利用prop-types第三方库对组件的props中的变量进行类型检测
May 02 Javascript
vue中的非父子间的通讯问题简单的实例代码
Jul 19 Javascript
js刷新页面location.reload()用法详解
Dec 09 Javascript
vue更改数组中的值实例代码详解
Feb 07 Javascript
vue实现广告栏上下滚动效果
Nov 26 Vue.js
node express使用HTML模板的方法示例
Aug 22 #Javascript
vue中使用v-model完成组件间的通信
Aug 22 #Javascript
layui动态表头的实现代码
Aug 22 #Javascript
深入理解令牌认证机制(token)
Aug 22 #Javascript
聊聊鉴权那些事(推荐)
Aug 22 #Javascript
在Node.js中将SVG图像转换为PNG,JPEG,TIFF,WEBP和HEIF格式的方法
Aug 22 #Javascript
vue使用高德地图根据坐标定位点的实现代码
Aug 22 #Javascript
You might like
php实现mysql同步的实现方法
2009/10/21 PHP
Laravel 集成微信用户登录和绑定的实现
2019/12/27 PHP
js实现页面打印功能实例代码(附去页眉页脚功能代码)
2009/12/15 Javascript
js压缩工具 yuicompressor 使用教程
2010/03/31 Javascript
Yii-自定义删除确认弹框(zyd)jquery实现代码
2013/03/04 Javascript
JavaScript获取网页表单提交方式的方法
2015/04/02 Javascript
几种经典排序算法的JS实现方法
2016/03/25 Javascript
微信公众平台开发教程(五)详解自定义菜单
2016/12/02 Javascript
bootstrap警告框使用方法解析
2017/01/13 Javascript
Bootstrap标签页(Tab)插件使用方法
2017/03/21 Javascript
VS Code转换大小写、修改选中文字或代码颜色的方法
2017/12/15 Javascript
nodejs微信扫码支付功能实现
2018/02/17 NodeJs
解决iview打包时UglifyJs报错的问题
2018/03/07 Javascript
使用vue中的v-for遍历二维数组的方法
2018/03/07 Javascript
基于vue-simplemde实现图片拖拽、粘贴功能
2018/04/12 Javascript
微信小程序实现收藏与取消收藏切换图片功能
2018/08/03 Javascript
使用jquery Ajax实现上传附件功能
2018/10/23 jQuery
JavaScript常见继承模式实例小结
2019/01/11 Javascript
使用Vue开发自己的Chrome扩展程序过程详解
2019/06/21 Javascript
JS插件amCharts实现绘制柱形图默认显示数值功能示例
2019/11/26 Javascript
解决removeEventListener 无法清除监听的问题
2020/10/30 Javascript
python实现百度关键词排名查询
2014/03/30 Python
用Python编写生成树状结构的文件目录的脚本的教程
2015/05/04 Python
python 队列详解及实例代码
2016/10/18 Python
Python读取视频的两种方法(imageio和cv2)
2018/04/15 Python
python实现决策树分类(2)
2018/08/30 Python
不到20行实现Python代码即可制作精美证件照
2020/04/24 Python
Java爬虫技术框架之Heritrix框架详解
2020/07/22 Python
纽约的奢华内衣店:Journelle
2016/07/29 全球购物
全球知名旅游社区法国站点:TripAdvisor法国
2016/08/03 全球购物
英国女性时尚鞋类的潮流制造者:Koi Footwear
2018/10/19 全球购物
整个世界的设计师家具在哈恩:Designathome
2019/03/25 全球购物
请描述一下”is a”关系和”has a”关系
2015/02/03 面试题
汽车装潢店创业计划书范文
2014/02/05 职场文书
信息管理专业自荐书
2014/06/05 职场文书
入党积极分子党支部意见
2015/06/02 职场文书