A股上市公司传智教育(股票代码 003032)旗下技术交流社区北京昌平校区

 找回密码
 加入黑马

QQ登录

只需一步,快速开始

本帖最后由 AreYouGlad 于 2017-12-20 11:55 编辑



解构赋值
按照一定的模式,从数组和对象中提取值,然后对变量进行赋值
数组解构
  • 完全解构
[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
}

2 个回复

倒序浏览
回复 使用道具 举报
回复 使用道具 举报
您需要登录后才可以回帖 登录 | 加入黑马