目录
一:介绍
1.从数组和对象中提取值,对变量进行赋值,这被称为解构(Destructuring)。
2.解构赋值是对赋值运算符的扩展。
3.他是一种针对数组或者对象进行模式匹配,然后对其中的变量进行赋值。
二:解构赋值实例
1.数组中解构赋值。
2.从对象中解构赋值。
3.从方法中解构赋值
三:解构模型
在解构中,有下面两部分参与:
- 解构的源:解构赋值表达式的右边部分
- 解构的目标,解构赋值表达式的左边部分。
四:解构赋值具体代码
<script>
//1.从数组中解构
const F4 = ['小沈阳','刘能','赵四','小宋']
//let shen =F4[0];
//let liu =F4[1];
//let zhao =F4[2];
//let song =F4[3];
let [shen,liu,zhao,song]=F4;
console.log(shen);
console.log(liu);
console.log(zhao);
console.log(song);
//2.从对象中解构
const person ={
name:'陈浩楠',
age:20,
eat: function(){
console.log('吃吃吃');
}
}
console.log(person.name);
console.log(person.age);
person.eat();
let {name,age,eat}=person;
console.log(name);
console.log(age);
person.eat();
//3. 方法初始值
let server_url={
protocol:'http://',
domain:'192.168.1.106',
port:2022,
context:''
};
function getServer01(server_url) {
if (server_url.context=='') {
return server_url.protocol+server_url.domain+':'+server_url.port;
}else{
return server_url.protocol+server_url.domain+ ':' +server_url.port+'/'+server.context;
}
}
console.log(getServer01(server_url));
function getServer02(protocol,domain,port,context) {
if (context=='') {
return protocol+domain + ':' +port
}else{
return protocol+domain+':'+port+'/'+context;
}
}
let {protocol,domain,port,context}=server_url;
console.log(getServer02(protocol,domain,port,context));
console.log('--------------------------------------------------');
let server = {
protocol: 'http://',
domain: '192.168.1.106',
};
function getServer03({protocol,domain,port=80,context=''}) {
if (context == '') {
return protocol + domain + ":" + port;
} else {
return protocol + domain + ":" + port + "/" + context;
}
}
console.log(getServer03(server));
</script>