ES6 初识 let、const、ES6兼容、解构赋值

ES6 是ECMAScript就是JavaScript中的语法规范!定义基础的语法、变量、数据类型
let
  • 不能对同一变量重复声明定义
  • lit声明变量不会变量提升
  • 定义的变量块级作用域。一个花括号一个块。
  • 函数内不能用let重新声明函数的参数
 
const
  • const定义常量不可修改
  • 只在块级作用域起作用
  • const 不存在变量提升
  • 不可重复声明同一个量
  • 声明后必要赋值
  • 常量是对象的时候,可以改变里面的值,不可以改变对象
 
快速让浏览器兼容ES6的方法
  • 利用nodejs进行bable导入
  • 启动命令提示符窗口并且输入:npm install babel-core@5,然后回车
  • 使用,然后用ie9打开测试
 
解构赋值
ES6允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为解构(Destructuring)。
  • 数组的解构赋值
    • 可全部赋值,也可赋值部分
      • var [a, b, c] = [1, 2, 3];
      • console.log(a, b, c);  //1 2 3
    • 允许嵌套
      •  var [a, b, [c, d], e] = [1, 2, [3], 4, 5];
      •  console.log(a, b, c, d, e)  //1 2 3 undefined 4
    • 允许有默认值,后面赋值回将其覆盖
      • var [a, b, [c, d], e = 1] = [1, 2, [3, 4]];
      •   console.log(a, b, c, d, e);     //1 2 3 4 1
      •   var [a, b, [c, d], e = 1] = [1, 2, [3, 4], 5];
      •  console.log(a, b, c, d, e);      //1 2 3 4 5
  • 解构赋值(对象)
    • 等号左边是变量名,等号右边不能全是变量名
    •  如果有嵌套格式,需要等号两侧格式一致
    • 等号右边可以有初始值,想要拿到初始值就不要赋新值
    • var { a,  b, c } = { 'a': {'name': 'zhangsan',  'age': '18' }, 'b': 2, 'c': 3}
    • console.log(a, b, c);      // {name: "zhangsan", age: "18"} 2 3
  • 字符串解构赋值
    • var [a, b, c, d, e, f, g, h] = "不想搬宿舍必须我";
    •     console.log(a, b, c, d, e);   //不 想 搬 宿 舍
    •     console.log(f, g, c)  //必 须 搬
    •     console.log(h, a, b)  //我 不 想
  • 解构赋值的用途
    • 交换变量的值
      • var x = 10;
      •     var y = 20;
      •     [x, y] = [y, x];
      •     console.log(x, y);   //20 10
    • 提取函数返回的多个值
      • function fn1() { 
      • return { 'name': '张三', 'age': '22' }
      •     }
      •     var {  name,   age } = fn1();
      •     console.log(name, age);     //张三 22
    • 定义函数参数
      • function fn2({ a, b, c }) {
      •         console.log('姓名:' + a);
      •         console.log('身高:' + b);
      •         console.log('体重:' + c);  }
      •     fn2({ a: "张三",  b: "177cm",   c: "55kg",  d: '学生'  });
      • 姓名:张三
      •  身高:177cm
      • 体重:55kg
    • 函数参数的默认值
      • function fn3({  name = "马俏桥" }) { consoe.log('姓名:' + name)  }
        •    fn3({});    //姓名:马俏桥
posted @ 2020-08-31 20:58  帅气巴巴  阅读(328)  评论(0编辑  收藏  举报