|
|
@@ -0,0 +1,78 @@
|
|
|
+<!DOCTYPE html>
|
|
|
+<html lang="en">
|
|
|
+<head>
|
|
|
+ <meta charset="UTF-8">
|
|
|
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
|
+ <title>Document</title>
|
|
|
+</head>
|
|
|
+<body>
|
|
|
+ <script>
|
|
|
+ //1、解构赋值
|
|
|
+ // let arr = [1, 2, 3, 4, 5];
|
|
|
+ // let a = arr[0];
|
|
|
+ // let b = arr[1];
|
|
|
+ // ....
|
|
|
+ // 数组解构赋值 定义一个数组 并将数组中的元素赋值给变量 [变量名1, 变量名2, 变量名3, ... 变量名n] = 数组名
|
|
|
+ // 数组解构赋值是按照顺序执行的
|
|
|
+ // let [a, b, c, d,e] = arr;
|
|
|
+ // console.log(a, b, c, d,e);
|
|
|
+
|
|
|
+ // 对象结构赋值
|
|
|
+ // let obj = {
|
|
|
+ // userName: "张三",
|
|
|
+ // age:20,
|
|
|
+ // sex: "男"
|
|
|
+ // };
|
|
|
+ // let age = 20;
|
|
|
+ // let userName = obj.userName;
|
|
|
+ // let age = obj.age;
|
|
|
+ // let sex = obj.sex;
|
|
|
+ // 对象解构赋值 定义一个对象 并将对象中的属性赋值给变量 {属性名1, 属性名2, ... 属性名n} = 对象名
|
|
|
+ // 对象解构赋值是按照属性名一一对照赋值的
|
|
|
+ // 可以为属性赋默认值 {属性名=默认值} = 对象名 如果属性不存在 则使用默认值 如果属性存在 则使用属性值
|
|
|
+ // let {sex,userName, age = 18} = obj;
|
|
|
+ // console.log(userName, age, sex);
|
|
|
+ // 可以为属性起别名 {属性名:别名} = 对象名
|
|
|
+ // let {userName, age:userAge, sex} = obj;
|
|
|
+ // console.log(userName, userAge, sex);
|
|
|
+
|
|
|
+ // 字符串解构
|
|
|
+ // let str = "hello world";
|
|
|
+ // let [a,b,c,d,e,f] = str;
|
|
|
+ // console.log(a,b,c,d,e,f);
|
|
|
+
|
|
|
+ // 使用场景
|
|
|
+ // 1、函数参数解构
|
|
|
+ // function add(obj) {
|
|
|
+ // console.log(obj.a+obj.b);
|
|
|
+ // }
|
|
|
+ // function add({a, b}) {
|
|
|
+ // console.log(a+b);
|
|
|
+ // }
|
|
|
+ // add({a:1, b:2});
|
|
|
+
|
|
|
+ // 2、函数返回值解构
|
|
|
+ // function foo(){
|
|
|
+ // return {
|
|
|
+ // a:1,
|
|
|
+ // b:2
|
|
|
+ // }
|
|
|
+ // }
|
|
|
+ // let {a,b} = foo();
|
|
|
+ // console.log(a, b);
|
|
|
+
|
|
|
+ // 3、变量互换
|
|
|
+ // let a = 1;
|
|
|
+ // let b = 2;
|
|
|
+
|
|
|
+ // // let temp = a;
|
|
|
+ // // a = b;
|
|
|
+ // // b = temp;
|
|
|
+ // // 解构赋值 可以直接将变量的值互换
|
|
|
+ // [a, b] = [b, a];
|
|
|
+ // console.log(a, b);
|
|
|
+
|
|
|
+
|
|
|
+ </script>
|
|
|
+</body>
|
|
|
+</html>
|
