es6

es6 新增语法

(es6 新增语法)

Posted by YC on November 18, 2018

前言

es6 语法格式

ECMAScript 6.0（以下简称 ES6）是 JavaScript 语言的下一代标准，已经在 2015 年 6 月正式发布了。 它的目标，是使得 JavaScript 语言可以用来编写复杂的大型应用程序，成为企业级开发语言。es6使得开发更加的快速，打个比喻，如果es5是锯子的话，那es6就是电锯。 目前浏览器大部分都兼容es6 像脚手架工具也使用了babel转码器

正文 let 和 const 命令

  • let 命令是用来声明变量的，他的用法类似var，但是区别在于，let 声明的变量只有在代码块内有效，let变量不能重复申明 而var则不同 （块级作用域，可以简单的理解为 一队{}就是一个块级作用域）
{
  let a = 10;
  var b = 1;
}
a // ReferenceError: a is not defined.
b // 1

let 变量在for 循环中特别实用 原来var的在for循环结束后不会被清除，会继续会存在,例如：设计一个数组，数组存放方法变量，输出为自己的索引值

var a = []
for (var i = 0; i < 10; i++) {
  a[i] = function () {
    console.log(i);
  }
}
a[6]() // 10

会发现a6 输出的是10 因为i这个时候是已10为结束的 但这不符合原有的设计，而将var 替换成let 后，达到了我们预期想要的效果

var a = []
for (let i = 0; i < 10; i++) {
  a[i] = function () {
    console.log(i);
  }
}
a[6]() // 6

  • 这是因为使用var 声明的是一个全局变量 i 全部函数方法 i指向的都是全局的i，而循环结束，i指向的则是结束最后一轮的10，而使用let申明，i只存在本循环中，每一次的循环i都是一个新的变量，所以会输出自己变量，而在javascript引擎内部会记住上一轮的值，初始化本轮的变量i，就在上一轮循环的基础上进行计算

  • const 是用来声明一个只读的常量，一旦声明 就不能被改变

const和let命令相同 只能在声明的块级作用域内才有效 const和let一样 不能重复声明

建议声明常量的时候，常量名使用全部大写

const MAX = 5;

这样有助于辨识常量

对const 本质是常量指向的内存地址所保存的数据不能改变，对于简单类型的数据（数组，字符串，布尔值），比较好理解为就是数据不能改变，而对于复合类型的数据（对象和数组）const 保存的是 复合类型的内存地址，例如：

const foo = {};
// 为 foo 添加一个属性，可以成功
foo.prop = 123;
foo.prop // 123
//将foo 指向另一个对象，就会报错
foo = {} // TypeError: "foo" is read-only
  • 综上，对于变量尽可能使用 let 来声明，而对于常量 使用const 而对于复合类型，const 储存的只是复合类型的地址

解构赋值

  • 什么是解构赋值，结构赋值 是es6 新的赋值方式，对于等号两边的模式结构相同，左边的变量就会被赋予对应的值，例如
let [a, b, c] = [1, 2, 3];
a // 1
b // 2
c // 3

let [x, y, ...z] = ['a'];
x // "a"
y // undefined
z // []

如果解构不成功，变量的值就等于 undefined

解构赋值 默认值

let [foo = true] = [];
foo // true

let [x, y = 'b'] = ['a']; // x='a', y='b'
let [x, y = 'b'] = ['a', undefined]; // x='a', y='b'

注意，ES6 内部使用严格相等运算符（===），判断一个位置是否有值。所以，只有当一个数组成员严格等于undefined，默认值才会生效。如果一个数组成员是null，默认值就不会生效，因为null不严格等于undefined。

let [x = 1] = [undefined];
x // 1

let [x = 1] = [null];
x // null

默认值可以引用解构赋值的其他变量，但该变量必须已经声明。最后报错因为y此时还没有声明

let [x = 1, y = x] = [];     // x=1; y=1
let [x = 1, y = x] = [2];    // x=2; y=2
let [x = 1, y = x] = [1, 2]; // x=1; y=2
let [x = y, y = 1] = [];     // ReferenceError: y is not defined

解构赋值的应用， 列入进行大小 min 和 max 交换位置时

let min = 5;
let max = 3
// 原有写法
let c = min
min = max 
max = c

//es6 
[min, max] = [max, min]

一行代码替代了原来的三行代码

对于返回值为数组，只需要第一个数组的场景

function f(){
        return [1,2,3,4,5];
    }
    let a,b,c;
    // 不确定返回的长度是多少
    // 只要第一个 其他赋数组
    // 当返回多个值的时候 用...
    // [a,...b]=f();
    // 使用,会跳过 , 隔开的部分
    [a,,...b]=f()
    a // 1 
    b // [2,3,4,5,6]

对象赋值，对象解构赋值和数组有些不同，对象赋值是根据key value 进行匹配的 而数组是根据索引进行匹配的

    // 根据 key value 去匹配的
    let o={p:42,q:true};
    let {p,q}=o;
    console.log(p,q);
  • 总结 利用解构赋值帮助业务的开发效率

    持续更新。。。

CATALOG