解构（模式匹配）

数组解构：

等号左边的变量放到中括号内部，匹配右侧数组中得元素

// 数组的不完全解构
// let [a,b] = [1,2,3];
// console.log(a,b);        //1,2let [a,b,c] = [1,[2,3],4]console.log(a,b,c);           //1 [ 2, 3 ] 4

// 拓展运算符 ...
// ...用在=左边，有聚合的作用，生成新的对象或者数组
// ...用在=右边，有拆分、剥离的作用let [a,...b] = [1,2,3]console.log(a,b);       //1 [ 2, 3 ]

// 数组解构设置默认值，默认值也可以为一个函数let [a,b,c=10] = [1,2]console.log(a,b,c);       //1 2 10
// function myFun(){
//     console.log('函数');
// }
// let [a,b,c = myFun()] = [1,2]
// console.log(a,b,c);         //函数  1 2 undefined

对象解构

等号左边的变量放到大括号内部，匹配右侧数组中的元素。对象的属性没有次序，变量必须与属性同名，才能取到正确的值

   // 对象解构，使用对象的简写形式，（省略key,保留value对应的变量）let {name:username,age:userage} = {name:'张三',age:12}console.log(username,userage);   //张三 12

   // 嵌套解构let obj = {p:['Hello',{y:'World'}]}let {p:[a,{y:b}]} = objconsole.log(a+b);   //HelloWorld

   // 默认值（默认值生效的条件是，对象的属性值严格等于undefined）let {name,age,gender='male'} = {name:'张三',age:12}console.log(name,age,gender);   //张三 12 male

   // 拓展运算符完成对象的深克隆let obj1 = {a:1,b:2,c:3}let {...b} = obj1console.log(b);         //{ a: 1, b: 2, c: 3 }    console.log(b === obj1);  //false

字符串解构

等号左边的变量如果放在中括号内进行的类似于数组解构，从字符串中获取指定字符；如果放在大括号内进行的类似于对象解构，从实例属性获方法中解构。

   // 字符串既可以使用[]解构，也可以使用{}解构// 使用[]解构字符串内部的字符// 使用{}解构字符串原型中的方法和属性let [a, b, c, d, e] = 'hello'console.log(a, b, c, d, e);    //h e l l olet { length, toString } = 'hello'console.log(length, toString);    //5 [Function: toString]// 字符串转数组（数组解构、拓展运算符）let [...arr] = 'hello'console.log(arr);     //[ 'h', 'e', 'l', 'l', 'o' ]

数值解构

等号左边的变量放在大括号中进行解构，可以获取到数值包装器构造函数原型中指定的方法。

//数字和Boolean只能使用{}解构其原型对象中的方法和属性
// 而不能使用[]解构，因为他们都是不可迭代的// let [a,b] = 10;
// console.log(a,b);     //TypeError: 10 is not iterablelet {valueOf} = 12;
console.log(valueOf);         //[Function: valueOf]

布尔类型解构

等号左边的变量放在大括号中进行解构，可以获取到布尔包装器构造函数原型中指定的方法。

    let [c] = true;          //TypeError: true is not iterable

es6解构(模式匹配)相关推荐

ES6 解构赋值的用法笔记
1.概念:解构赋值可以理解为对赋值运算符的一种扩展.它主要针对数组或者对象进行模式匹配,然后对模式中的变量进行赋值. 2.特性:采用ES6解构赋值的方式可以代码的可读性更高.代码书写更加简洁.清晰. ...
ES6解构赋值原理详解
ES6解构赋值 ES6变量的解构赋值本质上是"模式匹配",只要等号两边的模式相同,左边的变量就会被赋予匹配的右边的值,如果匹配不成功变量的值就等于undefined 数组的解构赋值 ...
前端学习必备之ES6解构赋值的常见用法
1.解构赋值可以轻松获取对象或者数组中的数据 var jsonData = {data: "111",data2: ["test","test2&qu ...
es6解构--简化代码
第一段代码直接用 import { Radio } from 'antd'; render() {return(<Radio.Group value={size} onChange={this. ...
[OHIF-Viewers]医疗数字阅片-医学影像-es6解构赋值-const{}=-let{}=
[OHIF-Viewers]医疗数字阅片-医学影像-es6解构赋值-const{}=-let{}= 解构赋值语法是一种 Javascript 表达式.通过解构赋值, 可以将属性/值从对象/数组中取出, ...
ES6解构赋值: ES6...转为ES5的写法
es6的特性,主要用于数组和对象的析构直接上问题: 因为chrome低版本(用的55版本)不支持es6...的下面这种写法, 需要转为es5写法 function calcLinePaths() ...
菜鸟也谈js（一）——ES6解构对象篇
前言为什么我会在开篇谈这样一个low到爆的问题呢?这是因为一个伟大的错误,多么痛的领悟!从前,我深深的以为,后台是权威,后台的数据必须是对的.直到有一天测试给我反馈了一个bug,我的页面崩溃了... ...
聊聊 ES6 解构(下)
大家好,我是Chuck,一个不那么正经却热爱前端的孩儿. 昨晚睡觉的时候,突然想起来点事情,点开了掘金,一看上文,这是什么东西?怎么忘了好多东西呢? 这篇文章接上文聊聊 ES6 解构|8月更文挑战. ...
js之删除对象中的属性——delete、es6解构赋值、自执行匿名函数
js之删除对象中的属性--delete.es6解构赋值.自执行匿名函数实例 const person = {name: '李世民',gender: 'male',age: 24 };// 删除目标对 ...

es6解构(模式匹配)

解构（模式匹配）

数组解构：

对象解构

字符串解构

数值解构

布尔类型解构

es6解构(模式匹配)相关推荐

最新文章

热门文章