ES6扩展运算符和rest运算符用法实例分析_javascript技巧

来源:脚本之家  责任编辑:小易  

一 对象解构 对象解构语法在赋值语句的左侧使用了对象字面量 let node = { type: true, name: false } //既声明又赋值 let { type, name } = node; //或者先声明再赋值 let type, name ({type,name} = node); console.log(type);//true console.log(name);//false type与name标识符既声明了本地变量,也读取了对象的相应属性值。 解构赋值表达式的值为表达式右侧的值。当解构表达式的右侧的计算结果为null或者undefined时,会抛出错误。 默认值 当你使用解构赋值语句时,如果所指定的本地变量在对象中没有找到同名属性,那么该变量会被赋值为undefined let node = { type: true, name: false }, type, name, value; ({type,value,name} = node); console.log(type);//true console.log(name);//false console.log(value);//undefined 你可以选择性地定义一个默认值,以便在指定属性不存在时使用该值。 let node = { type: true, name: false }, type, name, value; ({ type, value = true, name } = node); console.log(type);//true console.log(name);//false console.log(value);//true 赋值给不同的本地变量名 let node = { type: true, name: false, value: "dd" } let { type: localType, name: localName, value: localValue = "cc" } = node; console.log(localType); console.log(localName); console.log(localValue); type:localType这种语法表示要读取名为type的属性,并把它的值存储在变量localType上。该语法与传统对象字面量的语法相反 嵌套的对象结构 let node = { type: "Identifier", name: "foo", loc: { start: { line: 1, column: 1 }, end: { line: 1, column: 4 } } } let { loc: localL, loc: { start: localS, end: localE } } = node; console.log(localL);// start: {line: 1,column: 1},end: {line: 1,column: 4} console.log(localS);//{line: 1,column: 1} console.log(localE);//{line: 1,column: 4} 当冒号右侧存在花括号时,表示目标被嵌套在对象的更深一层中(loc: {start: localS,end: localE}) 二 数据解构 数组解构的语法看起来跟对象解构非常相似,只是将对象字面量换成了数组字面量。 let colors = ["red", "blue", "green"]; let [firstC, secondC, thirdC, thursC = "yellow"] = colors; console.log(firstC//red console.log(secondC);//blue console.log(thirdC);//green console.log(thursC);//yellow 你也可以在解构模式中忽略一些项,并只给感兴趣的项提供变量名。 let colors = ["red","green","blue"]; let [,,thirdC] = colors; console.log(thirdC);//blue thirdC之前的逗号是为数组前面的项提供的占位符。使用这种方法,你就可以轻易从数组任意位置取出值,而无需给其他项提供名称。 解构赋值 let colors = ["red","green","blue"], firstColor = "black", secondColor = "purple"; [firstColor,secondColor] = colors; console.log(firstColor);//red console.log(secondColor);//green 数组解构有一个非常独特的用例,能轻易的互换两个变量的值。 let a =1,b =2; [a,b] = [b,a]; console.log(a);//2 console.log(b);//1 嵌套的解构 let colors = ["red", ["green", "blue"], "yellow"]; let [firstC, [, ssc]] = colors; console.log(ssc);//blue 剩余项 let colors = ["red", "green", "blue"]; let [firstC, ...restC] = colors; console.log(firstC); console.log(...restC); console.log(restC[0]);//green console.log(restC[1]);//blue 使用剩余项可以进行数组克隆 let colors = ["red", "green", "blue"]; let [...restC] = colors; console.log(restC);//["red", "green","blue"] 三 混合解构 let node = { type: "Identifier", name: 'foo', loc: { start: { line: 1, column: 1 }, end: { line: 1, column: 4 } }, range: [0, 3] } let { type, name: localName, loc: { start: { line: ll }, end: { column: col } }, range: [, second] } = node; console.log(type);//Identifier console.log(localName);//foo console.log(ll);//1 console.log(col);//4 console.log(second);//3 以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。 您可能感兴趣的文章:基于ES6作用域和解构赋值详解ES6解构赋值的功能与用途实例分析ES6解构赋值实例详解es6中的解构赋值、扩展运算符和rest参数使用详解es6学习之解构时应该注意的点ES6新特性四:变量的解构赋值实例ES6新特性之解构、参数、模块和记号用法示例ES6学习之变量的解构赋值深入浅出讲解ES6的解构解析JavaScript的ES6版本中的解构赋值www.zgxue.com防采集请勿采集本网。

本文实例讲述了ES6扩展运算符和rest运算符用法。分享给大家供大家参考,具体如下:

运算符可以很好的为我们解决参数和对象数组未知情况下的编程,让我们的代码更健壮和简洁。

运算符有两种:对象扩展运算符与rest运算符。

1.对象扩展( spread)运算符(...)

(1)解决参数个数问题

以前我们编程是传递的参数一般是确定,否则将会报错或者异常,如下:

function test(a,b,c,d) { console.log(a) console.log(b) console.log(c) console.log(d) console.log(e)//e is not defined}test(1,2,3,4)

参数固定,多余的参数会出错。

但我们又想传递多个参数,但是不确定参数的个数,这时候可以使用对象扩展运算符来作参数。

function test1(...arg) { console.log(arg[0]);//1 console.log(arg[1]);//2 console.log(arg[2]);//3 console.log(arg[3])//4 console.log(arg[4])//5 console.log(arg[5])//undefined}test1(1,2,3,4,5)

这时候程序是不会报错的,多余取值返回的结果是undefined。这说明是可以传入多个值,并且就算方法中引用多了也不会报错。

(2)解决数组赋值问题

我们先用一个例子说明,我们声明两个数组arr1和arr2,然后我们把arr1赋值给arr2,然后我们改变arr2的值,你会发现arr1的值也改变了,因为我们这是对内存堆栈的引用,而不是真正的赋值。

let arr1=['i','love','you'];let arr2=arr1;console.log("arr2====",arr2);arr2.push('too');console.log("arr1====>",arr1);

控制台输出的结果为:

["i", "love", "you"]

["i", "love", "you", "too"]

这是我们不想看到的,可以利用对象扩展运算符简单的解决这个问题,现在我们对代码进行改造。

let arr1=['i','love','you'];let arr2=[...arr1];console.log(arr2);arr2.push('too');console.log(arr1);

最终可以看到我们的arr1并没有改变,简单的扩展运算符就解决了这个问题。

2.rest运算符

(1)含义

rest参数作用: 将多余的逗号分隔的参数序列转换为数组参数

注意: rest参数必须是最后一个参数,否则报错。

rest运算符与对象扩展运算符有很多类似之处,它也用…(三个点)来表示,比如:

function test(first,...arg){ console.log("first==>",first)//0 console.log("arg=====>",arg)}test(0,1,2,3,4,5,6,7);

输出结果为:

first==> 0

arg=====>[1, 2, 3, 4, 5, 6, 7]

(2)如何循环输出rest运算符

用for…of循环来进行打印出arg的值

function test(first,...arg){ for(let val of arg){ console.log(val) }}test(0,1,2,3,4,5,6,7);

结果为:

1,2,3,4,5,6,7

最后总结: 扩展运算符用三个点号表示,功能是把数组或类数组对象展开成一系列用逗号隔开的值 rest运算符也是三个点号,不过其功能与扩展运算符恰好相反,把逗号隔开的值序列组合成一个数组 当三个点(...)在等号左边,或者放在形参上。为 rest 运算符 当三个在等号右边,或者放在实参上,是 spread运算符

或者说:放在被赋值一方是rest 运算符。放在赋值一方式 spread运算符。

感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具http://tools.jb51.net/code/HtmlJsRun测试上述代码运行效果。

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

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

本文实例讲述了ES6知识点整理之对象解构赋值应用。分享给大家供大家参考,具体如下: ES6 允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为解构(Destructuring), 在对象的解构赋值中有一些需要注意的事项 初识对象的解构 var {name} = { name:'Joh', age:10 }; console.log(name); // Joh 通过解构的形式取出对象中的属性值 对解构出的属性进行重命名 var {name} = { name:'Joh', age:10 }; console.log(name); // Joh // 通过{属性:新的名称} = 对象的方式 对解构出的属性进行重命名 var {color:color2} = { color:'red', age:10 }; console.log(color2); // red console.log(color); // 此处报错:Uncaught ReferenceError: color is not defined 对象嵌套解构中模式和变量的区别 var obj = { a:{ b:{ c:123 } } }; let {a:{b:{c}}} = obj; // 针对嵌套解构的最终输出只能是最里层的,外层的a和b都作为解构中的一种模式存在,而不是变量,只有c能正常输出 console.log(c); // 123 console.log(a, b, c); // Uncaught ReferenceError: a is not defined 报错之后停止 解析对象的默认值 var obj = { name:'Joh', age:22 }; var {name, id='999', age} = obj; console.log(name, id ,age); // Joh 999 22 var obj2 ={ name:'Lily', age:10 }; var {name:name2, id:id2='888', age:age2} = obj2; console.log(name2, id2, age2); // Lily 888 10 解构对象中可能出现的异常 ① 父解构的节点为undefined,在编程中一定要注意这个,属于粗心错误 : let {x:{y}} = {name:{y:12}}; // 父结构中没有x属性名, 错误:Cannot destructure property `y` of 'undefined' or 'null'. ② 事先定义了一个变量重名错误 : let name; let {name} = {name:'Joh'}; // Uncaught SyntaxError: Identifier 'name' has already been declared 解决方案1: let name; let {name:name2} = {name:'Joh'}; console.log(name2); //运行结果:Joh 解决方案2: var name; var {name} = {name:'Joh'}; console.log(name); //运行结果:Joh 感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具http://tools.jb51.net/code/HtmlJsRun测试上述代码运行结果。 更多关于JavaScript相关内容可查看本站专题:《javascript面向对象入门教程》、《JavaScript查找算法技巧总结》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》 希望本文所述对大家JavaScript程序设计有所帮助。 您可能感兴趣的文章:ES6解构赋值实例详解es6中的解构赋值、扩展运算符和rest参数使用详解ES6解构赋值的功能与用途实例分析ES6学习之变量的解构赋值ES6新特性四:变量的解构赋值实例基于ES6作用域和解构赋值详解ES6 对象的新功能与解构赋值介绍ES6入门教程之变量的解构赋值详解es6基础学习之解构赋值ES6的解构赋值实例详解ES6数组与对象的解构赋值详解内容来自www.zgxue.com请勿采集。


  • 本文相关:
  • es6中箭头函数的定义与调用方式详解
  • javascript es6中箭头函数注意细节小结
  • es6中的箭头函数实例详解
  • 关于es6箭头函数中的this问题
  • 详解javascript es6中的箭头函数(arrow functions)
  • 深入浅出es6新特性之函数默认参数和箭头函数
  • javascript es6箭头函数使用指南
  • es6标准 arrow function(箭头函数=>)
  • es6函数之箭头函数用法实例详解
  • es6新特性之函数的扩展实例详解
  • es6数组之扩展运算符操作实例分析
  • es6箭头函数和扩展实例分析
  • 一个多浏览器支持的背景变暗的div并可拖动提示窗口功能的代码
  • js树形控件脚本代码
  • 实现iframe延时加载
  • 浅谈gulp创建完整的项目流程
  • javascript 将共享属性迁移到原型中去的实现方法
  • javascript基于html5 canvas制作画箭头组件
  • js & jquery 动态添加 select option
  • 修复ie9&safari 的sort方法
  • 不同浏览器javascript变量作用域的处理方法
  • js对象是否拥有某属性如何判断
  • ES6知识点整理之对象解构赋值应用示例
  • 深入理解ES6之数据解构的用法
  • vue里面三个点是什么意思
  • 网站首页网页制作脚本下载服务器操作系统网站运营平面设计媒体动画电脑基础硬件教程网络安全基础知识javascript类库表单特效广告代码网页特效黑客性质javascript技巧domnode.jsjs其它首页javascriptjavascript面向对象入门教程javascript错误与调试技巧总结javascript数据结构与算法技巧总结javascript遍历算法与技巧总结javascript数学运算用法总结es6中箭头函数的定义与调用方式详解javascript es6中箭头函数注意细节小结es6中的箭头函数实例详解关于es6箭头函数中的this问题详解javascript es6中的箭头函数(arrow functions)深入浅出es6新特性之函数默认参数和箭头函数javascript es6箭头函数使用指南es6标准 arrow function(箭头函数=>)es6函数之箭头函数用法实例详解es6新特性之函数的扩展实例详解es6数组之扩展运算符操作实例分析es6箭头函数和扩展实例分析一个多浏览器支持的背景变暗的div并可拖动提示窗口功能的代码js树形控件脚本代码实现iframe延时加载浅谈gulp创建完整的项目流程javascript 将共享属性迁移到原型中去的实现方法javascript基于html5 canvas制作画箭头组件js & jquery 动态添加 select option修复ie9&safari 的sort方法不同浏览器javascript变量作用域的处理方法js对象是否拥有某属性如何判断js刷新页面方法大全js中settimeout()的用法详解js截取字符串常用方法详细整理js页面跳转常用的几种方式js打开新窗口的2种方式js数组与字符串的相互转换方法js设置cookie、读取cookie、删除js删除数组里的某个元素方法js 将json字符串转换为json对象的javascript深入理解js闭包bootstrap table 表格中增加下拉菜单末行微信小程序实现滑动操作代码bootstrap实现的标签页内容切换显示效果示如何实现修改密码时密码框显示保存到cook使用js读秒使用示例js获取iframe中的window对象的实现方法javascript调用堆栈及settimeout使用方法如何消除inline-block属性带来的标签间间文字垂直滚动之javascript代码js字符串转换成xml对象并使用技巧解读
    免责声明 - 关于我们 - 联系我们 - 广告联系 - 友情链接 - 帮助中心 - 频道导航
    Copyright © 2017 www.zgxue.com All Rights Reserved