日期:2021年8月10日
作者:Commas
注释:如果您觉得有所帮助
,帮忙点个赞
;如果有不对的地方,还望各位大佬不吝赐教,谢谢^ - ^
(ง •_•)ง 积跬步以致千里,ES6的学习笔记
1.01365 = 37.7834;0.99365 = 0.0255
1.02365 = 1377.4083;0.98365 = 0.0006
文章目录
一、解构的定义
定义:ES6 允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为
解构(Destructuring)
。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
//(1)数组解构
const aryName = ["张三","李四","王五","赵六"];
//(1-1)old
// let zhang = aryName[0];
// let li = aryName[1];
// let wang = aryName[2];
// let zhao = aryName[3];
// console.log(zhang,li,wang,zhao);
//控制台输出:张三 李四 王五 赵六
//(1-2)new
let [zhang,li,wang,zhao] = aryName;
console.log(zhang,li,wang,zhao);
//控制台输出:张三 李四 王五 赵六
//(2)对象解构
const qian = {
name:"钱七",
age:18,
say:function(){
console.log("Hello World");
}
};
//(2-1)old
// let name =qian.name;
// let age =qian.age;
// let say =qian.say;
//(2-2)new
let {name,age,say}=qian;
console.log(name); //钱七
console.log(age); //18
console.log(say); //ƒ(){console.log("Hello World");}
say(); //Hello World
</script>
</body>
</html>
二、变量解构赋值的用途
序号 | 说明 |
---|---|
1 | 交换变量的值 |
2 | 解构函数返回的多个值 |
3 | 函数参数的定义 |
4 | 提取JSON数据 |
5 | 函数默认值 |
(2-1)交换变量的值
let [x,y]=[1,2];
console.log(x,y); \\1 2
[x,y]=[y,x];
console.log(x,y); \\2 1
(2-2)解构函数返回的多个值
//(1)数组
function getAryName(){
return ["张三","李四"]
};
let [zhang,li] = getAryName();
console.log(zhang,li); //张三 李四
//(2)对象
function getXY(){
return {"x":1,"y":2}
};
// let {x,y}=getXY()
let {y,x}=getXY()
console.log(x,y); //1 2
(2-3)函数参数的定义
function positionAry([x,y,z]){
console.log(x,y,z);
};
positionAry([9, 8, 5]);
//控制台输出:9 8 5
//即参数x=9,y=8,z=5,变量名与参数一一对应;
//(2)对象
function positionObj({x,y,z}){
console.log(x,y,z);
};
positionObj({z:5,y:8,x:9});
//控制台输出:9 8 5
//即参数x=9,y=8,z=5,变量名与参数一一对应;
(2-4)提取JSON数据
const qian = {
name:"钱七",
age:18,
say:function(){
console.log("Hello World");
}
};
//NO1:
// let say =qian.say;
//NO2:
let {say}=qian;
say(); //Hello World
(2-5)函数默认值
test = function({x=1,y=2,z} = {}) {
console.log(x,y,z)
};
test({}); //1 2 undefined
test({z:3}); //1 2 3
test({x:111,y:222,z:333}); //111 222 333
版权声明:本文为博主原创文章,如需转载,请给出:
原文链接:https://blog.csdn.net/qq_35844043/article/details/119567604