当前位置:Gxlcms > JavaScript > 基于ES6作用域和解构赋值详解

基于ES6作用域和解构赋值详解

时间:2021-07-01 10:21:17 帮助过:31人阅读

ES6 强制开启严格模式

作用域

•var 声明局部变量,for/if花括号中定义的变量在花括号外也可访问

•let 声明的变量为块作用域,变量不可重复定义

•const 声明常量,块作用域,声明时必须赋值,不可修改

  1. // const声明的k指向一个对象,k本身不可变,但对象可变
  2. function test() {
  3. const k={
  4. a:1
  5. }
  6. k.b=3;
  7. console.log(k);
  8. }

test()解构赋值

  1. {
  2. let a, b, 3, rest;
  3. [a, b, c=3]=[1, 2];
  4. console.log(a, b);
  5. }
  6. //output: 1 2 3
  7. {
  8. let a, b, 3, rest;
  9. [a, b, c]=[1, 2];
  10. console.log(a, b);
  11. }
  12. //output: 1 2 undefined
  13. {
  14. let a, b, rest;
  15. [a, b, ...rest] = [1, 2, 3, 4, 5, 6];
  16. console.log(a, b, rest);
  17. }
  18. //output:1 2 [3, 4, 5, 6]
  19. {
  20. let a, b;
  21. ({a, b} = {a:1, b:2})
  22. console.log(a ,b);
  23. }
  24. //output: 1 2

使用场景

变量交换

  1. {
  2. let a = 1;
  3. let b = 2;
  4. [a, b] = [b, a];
  5. console.log(a, b);
  6. }

获取多个函数值

  1. {
  2. function f(){
  3. return [1, 2]
  4. }
  5. let a, b;
  6. [a, b] = f();
  7. console.log(a, b);
  8. }

获取多个函数返回值

  1. {
  2. function f(){
  3. return [1, 2, 3, 4, 5]
  4. }
  5. let a, b, c;
  6. [a,,,b] = f();
  7. console.log(a, b);
  8. }
  9. //output: 1 4
  10. {
  11. function f(){
  12. return [1, 2, 3, 4, 5]
  13. }
  14. let a, b, c;
  15. [a, ...b] = f();
  16. console.log(a, b);
  17. }
  18. //output: 1 [2, 3, 4, 5]

对象解构赋值

  1. {
  2. let o={p:42, q:true};
  3. let {p, q, c=5} = o;
  4. console.log(p ,q);
  5. }
  6. //output: 42 true 5

获取json值

  1. {
  2. let metaData={
  3. title: 'abc',
  4. test: [{
  5. title: 'test',
  6. desc: 'description'
  7. }]
  8. }
  9. let {title:esTitle, test:[{title:cnTitle}]} = metaData;
  10. console.log(esTitle, cnTitle);
  11. }
  12. //Output: abc test

以上这篇基于ES6作用域和解构赋值详解就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。

人气教程排行