黑马程序员技术交流社区

标题: 【广州前端首发】ES6核心课程笔记之语法篇（二） [打印本页]

---

作者: AreYouGlad    时间: 2017-12-19 11:16
标题: 【广州前端首发】ES6核心课程笔记之语法篇（二）

查看更多精彩前端资源

---

解构赋值

---

按照一定的模式，从数组和对象中提取值，然后对变量进行赋值

数组解构

• 完全解构
  

[JavaScript] 纯文本查看 复制代码

let arr = [10, 20, 30];

let [ a, b, c ] = arr;

console.log(a); // 10

console.log(b); // 20

console.log(c); // 30

• 部分解构
  

[JavaScript] 纯文本查看 复制代码

let [ a, , c ] = [10, 20, 30];

console.log(a); // 10

console.log(c); // 30

• 特殊值
  

[JavaScript] 纯文本查看 复制代码

let [ a, b, c ] = [10, [ 20, 21, 22 ], {a: 1, b: 2}];

console.log(a); // 10

console.log(b); // [ 20, 21, 22 ]

console.log(c); // {a: 1, b: 2}

• 深层解构
  

[JavaScript] 纯文本查看 复制代码

let [ a, [b1, b2] ] = [10, [ 20, 21, 22 ], 30];

console.log(a); // 10

console.log(b1); // 20

console.log(b2); // 21

• 解构缺失
  

[JavaScript] 纯文本查看 复制代码

let [ a, b ] = [10];

console.log(a); // 10

console.log(b); // undefined

• 默认值
  

[JavaScript] 纯文本查看 复制代码

let [ a = 'aa', b = 'bb' ] = [10];

console.log(a); // 10

console.log(b); // bb

对象解构

• 完全解构
  

[JavaScript] 纯文本查看 复制代码

let { a, b, c } = { a: 10, b: 20, c: 30 };

console.log(a); // 10

console.log(b); // 20

console.log(c); // 30

• 部分解构
  

[JavaScript] 纯文本查看 复制代码

let { a, c } = { a: 10, b: 20, c: 30 };

console.log(a); // 10

console.log(c); // 30

• 特殊值
  

[JavaScript] 纯文本查看 复制代码

let { a, b, c } = { a: 10, b: [20, 21, 22], c: { c1: 30, c2: 31 } };

console.log(a); // 10

console.log(b); // [20, 21, 22]

console.log(c); // { c1: 30, c2: 31 }

• 深层解构1
  

[JavaScript] 纯文本查看 复制代码

let { b: [ b1, b2 ], c: { c1, c2 } } = { a: 10, b: [20, 21], c: { c1: 30, c2: 31 } };

console.log(b);   // RefrenceError

console.log(b1); // 20

console.log(b2); // 21

console.log(c);   // RefrenceError

console.log(c1); // 30

console.log(c2); // 31

• 深层解构2
  

[JavaScript] 纯文本查看 复制代码

// 对象深层解构时前面的引导符不算变量，如有需要，需单独解构

let { c, c: { c1, c2 } } = { a: 10, b: [20, 21], c: { c1: 30, c2: 31 } };

console.log(c);   // { c1: 30, c2: 31 }

console.log(c1); // 30

console.log(c2); // 31

• 解构缺失
  

[JavaScript] 纯文本查看 复制代码

let { a, b } = { a: 10 };

console.log(a); // 10

console.log(b); // undefined

• 默认值
  

[JavaScript] 纯文本查看 复制代码

let { a = 'aa', b = 'bb' } = { a: 10 };

console.log(a); // 10

console.log(b); // bb

• 重起变量名
  

[JavaScript] 纯文本查看 复制代码

let { a: myA } = { a: 10 };

console.log(myA); // 10

console.log(a);      // ReferenceError

使用场景

• 变量交换
  

[JavaScript] 纯文本查看 复制代码

let a = 10, b = 20, c = 30;

// 注意这里a b c已经声明了,就不用再声明了

[a, b, c] = [ b, c, a ];

console.log(a, b, c);

• 提取对象中值
  

[JavaScript] 纯文本查看 复制代码

let ajaxResponseData = {

        code: 200,

        msg: '成功',

        result: {

                name: '车',

                info: '各种车',

                list: ['兰博基尼', '法拉利']

        }

};



// 解构提取result中info与list的值

let { result: { info, list } } = ajaxResponseData;

console.log(info);

console.log(list);

• 函数返回多个值（本质还是提取对象中的值）
  

[JavaScript] 纯文本查看 复制代码

function fn() {

        let obj = {};

        return {

                get: function(key){

                        return obj[key];

                },

                set: function(key, val){

                        obj[key] = val;

                }

        };

}



// 解构fn的返回值

let { get, set } = fn();

set('fib', [1, 1, 2, 3, 5, 8, 13]);

get('fib');

``字符串

---

新的字符串定义方式。

• 多行字符串
  

[JavaScript] 纯文本查看 复制代码

let str = `第一行第一行

        第二行第二行`;

console.log(str);

• 模版字符串
  

[JavaScript] 纯文本查看 复制代码

// 可以访问变量、调用函数、及各种表达式运算

let mei = {

        name: '小美',

        age: 16

};

let str = `${ mei.name }今年${ mei.age }了，

        还有${ 30 - mei.age }年他就30了`;

console.log(str);

语句

---

for of
新的循环语句,可遍历数组得到里面的每个值,也可以遍历Set与Map以及内置的类数组的对象

• 遍历数组
  

[JavaScript] 纯文本查看 复制代码

let arr = ['a', 'b', 10, 20];

for(let v of arr) {

        console.log(v);   // 'a', 'b', 10, 20

}

---

作者: AreYouGlad    时间: 2017-12-19 11:16

---

作者: hz有盼头啊    时间: 2017-12-21 09:13
感谢分享

---

欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/)

黑马程序员IT技术论坛 X3.2