es6解构支不支持字符串(es6,web开发)

==undefinedmeans
let[num1=123]=[null];
//null严格相等undefined所有默认值无效
console.log(num1);//null

• 如果默认值是一个函数声明，函数声明是惰性求值的，只有在右边没有匹配值时才会执行

functionfunc(){
return123
}
let[num2=func()]=[undefined];
console.log(num2)

• 默认值可以引用解构赋值的其他变量，但该变量必须已经声明

let[str1='jsx',str2=str1]=[];
console.log(str1,str2);//jsxjsx
//str4未声明
let[str3=str4,str4='ljj']=[];//UncaughtReferenceError

3. 对象解构

3-1 基本用法

• 基本语法

let{var1,var2}={var1:…,var2:…}

• 对象解构赋值与先声明后独立进行解构赋值

let{name,age}={name:'jsx',age:22};
console.log(name,age);//jsx22
//先声明后独立解构赋值
leta,b;
//赋值语句需要通过()包围因为{}是一个块级而不是字面量
({a,b}={a:1,b:2});
console.log(a,b);//12

3-2 属性变量同名

• 对象的属性没有次序，左边的变量必须与对象属性同名，才能取到正确的值

let{name,age}={name:'jsx',age:22};
console.log(name,age);//jsx22

• 当变量没有对应的同名对象属性时，会导致1取不到值返回 undefined

//如果解构失败，变量的值等于undefined
let{a,b}={a:'jsx',c:'ljj'};
console.log(a,b);//jsxundefined

3-3 属性变量不同名

• 当变量名与对象属性名不一致时，可以使用冒号 : 来设置，将对象属性值赋值给 : 冒号后的变量

let{user:name,age:num}={user:'jsx',age:22}
console.log(name,num);//jsx22

• foo:baz 此时冒号前面 foo 则是匹配模式匹配对象属性，baz 则是匹配属性的值

let{foo:baz}={name:'jsx'};
console.log(foo);//ncaughtReferenceErro
console.log(baz);//undefined

• 先找到同名属性，然后再赋给对应的变量，真正被赋值的是后者，而不是前者

let{name:str,age:num1}={user:'jsx',age:22};
console.log(str,num1);//undefined22

• 数组对象嵌套解构赋值

letobj={lesson:['html',{class:'css'}]}
let{lesson:[x,{class:y}]}=obj;
//console.log(x,y);//htmlcss
let{lesson}=obj;
console.log(lesson);//['html',{…}]
letobj1={};
letarr1=[];
({foo:obj1.prop,bar:arr1[0]}={foo:123,bar:true});
console.log(obj1)//{prop:123}
console.log(arr1)//[true]

• 对象的解构赋值可以取到对象继承的属性

letobj2={};
letobj3={user:'ljj'};
Object.setPrototypeOf(obj2,obj3);
let{user}=obj2;
console.log(user);//ljj

• 可以使用扩展语法 ... 将对象剩余的属性与值赋值给一个变量

letoptions={
title:"Menu",
height:200,
width:100
};
//title=名为title的属性
//rest=存有剩余属性的对象
let{title,...rest}=options;
//现在title="Menu",rest={height:200,width:100}
console.log(rest.height);//200
console.log(rest.width);//100

3-4 默认值

• 对象的解构也可以指定默认值，默认值生效的条件是对象的属性值严格等于undefined

let{name='jsx'}={};
console.log(name);//jsx
let{name1='jsx'}={name1:'ljj'};
//默认值失效
console.log(name1);//ljj
//当对象属性值为undefined时有效
let{name2='jsx'}={name2:undefined};
console.log(name2);//jsx
let{x:y=3}={x:5};
console.log(y);//5
let{x1=3}={x1:null};
console.log(x1);//null

• 当指定的对象属性不存在时，直接在变量后添加默认值

• 当指定的对象属性存在，而属性值不存在或者为 undefined 时，先匹配属性再在变量值后添加一个等号 = 和相应的默认值即可

let{user:xm='jsx'}={};
console.log(xm);//jsx

4. 嵌套解构

如果一个对象或数组嵌套了其他的对象和数组，我们可以在等号左侧使用更复杂的模式（pattern）来提取更深层的数据

//数组嵌套
let[name,[name1,[name2]]]=['jsx',['ljj',['ddc']]];
console.log(name,name1,name2);//jsxljjddc
//对象解构
letobj={
title:'对象解构',
info:{
target:'对象',
difficulty:{
level:1
}
}
}
let{
title,
info,
info:{
target,
difficulty,
difficulty:{
level
}
}
}=obj;
console.log(title,info,target,difficulty,level);
//对象解构
//{target:'对象',difficulty:{…}}
//对象
//{level:1}
//1
//对象数组嵌套
letobjArr={
message:'对象数组嵌套',
lesson:['html','css','js'],
news:{
main:'新消息'
}
}
let{
message,
lesson,
lesson:[item1,item2,item3],
news,
news:{
main
}
}=objArr;
console.log(message,lesson,item1,item2,item3,news,main)
//对象数组嵌套
//['html','css','js']
//htmlcssjs
//{main:'新消息'}
//新消息

5. 函数参数解构

一个函数可以有很多参数，其中大部分的参数都是可选的

• 把所有参数当作一个数组来传递，然后函数马上把这个数组解构成多个变量

functionarrFn([name,age]){
console.log(name,age)
}
arrFn(['jsx',22]);//jsx22

• 把所有参数当作一个对象来传递，然后函数马上把这个对象解构成多个变量

letobj={
title:"Mymenu",
items:["Item1","Item2"]
}
functionobjFn({
title,
items:[item1,item2]
}){
console.log(title);//Mymenu
console.log(item1,item2);//Item1Item2
}
objFn(obj);

• 可以使用带有嵌套对象和冒号映射的更加复杂的解构

//语法
function({
incomingProperty:varName=defaultValue
...
})
letobj1={
message:'嵌套带冒号',
info:{
name:'jsx',
lesson:['html','css'],
grilfriend:{
xm:'ljj'
}
}
}
functioncomplexFn({
message,
info:{
name,
lesson:[list1,list2],
grilfriend:{
xm
}
}
}){
console.log(message);//嵌套带冒号
console.log(list1,list2);//htmlcss
console.log(xm);//ljj
}
complexFn(obj1);

• 可以通过指定空对象 {} 为整个参数对象设置默认值

functionnullFn({
info='jsx',
width=100,
height=200
}={}){
console.log(info);//jsx
console.log(width);//100
console.log(height);//200
}
nullFn();

6. 圆括号问题

不可以使用圆括号的情况：

• 变量声明语句，不得使用圆括号

• 函数参数也属于变量声明，因此不能带有圆括号

• 赋值语句的模式，将整个模式放在圆括号之中，导致报错

//声明语句时不能使用圆括号包裹变量
let[(num)]=[1];
console.log(a);//UncaughtSyntaxError
let{(name:str)}={name:'jsx'};
console.log(str);//UncaughtSyntaxError
//函数参数内也不可以
functionfn([(a)]){
console.log(a);
}
fn(1);
//赋值语句内不可使用圆括号包裹
leta,b;
([a,b])=[1,2];
console.log(a,b)//UncaughtSyntaxError

可以使用圆括号的情况：

• 赋值语句的非模式部分，可以使用圆括号

letnum;
[(num)]=[123];
console.log(num);//123
letstr;
({name:str}={name:'jsx'});
console.log(str);//jsx

7. 解构赋值使用场景

• 交换变量的值

letname1='jsx';
letname2='ljj';
[name1,name2]=[name2,name1];
console.log(name1,name2);//ljj,jsx

• 从函数返回多个值

functionreturnFn(){
return{
name:'jsx',
age:22
}
}
let{
name,
age
}=returnFn();
console.log(name,age);//jsx22

• 函数参数的定义

functionargumentFn([list1,list2]){
console.log(list1);//jsx
console.log(list2);//ljj
}
argumentFn(['jsx','ljj'])
functionargumentFn1({obj}){
console.log(obj);//jsx
}
argumentFn1({obj:'jsx'})

• 提取 JSON 数据

letjsonData={
id:42,
status:"OK",
data:[867,5309]
};
let{
id,
status,
data:number
}=jsonData;
console.log(id,status,number);//42'OK'(2)[867,5309]

• 函数参数的默认值

functionfunc({title='默认值'}={}){
console.log(title)
}
func();//默认值

• 遍历 Map 结构

constmap=newMap();
map.set('first','hello');
map.set('second','world');
for(let[key,value]ofmap){
console.log(key+"is"+value);
//firstishello
//secondisworld
}

• 与 .entries() 方法进行循环操作

letuser={
name:"John",
age:30
};
for(let[key,value]ofObject.entries(user)){
console.log(${key}:${value});
//name:John
//age:30
}

• 输入模块的指定方法

<scripttype="module">
import{sayHi,sayHello}from'./index.js';
sayHi();//sayhi
sayHello();//sayhello
</script>

//index.js
exportfunctionsayHi(){
console.log('sayhi')
}
exportfunctionsayHello(){
console.log('sayhello')
}