前端

变量的扩展与解构(ES6)

2019-08-05  本文已影响5人  前白

1、发展历史

基本概念:ES6 是 ECMAScript6 的一个简称;

1996年网景(Netscape)提交给国际标准组织(ECMA)的新语言,希望成为国际标准。第二年发布了Javascript并称为ECMAScript。为什么不叫JavaScript而是ECMAScript呢?有两个原因,一个是因为商标问题,JavaScript是只有网景公司才可以使用的商标;ECMA的国际标准,体现标准的制作者不是个人或者公司。

ECMA是在5.1版本之后的更新迭代,ES6 第一个版本是在2015年6月发布的,后续每年六月份发布一次,ES2015、ES2016、ES2017、ES2018;ES6是统称下一代的JavaScript语言。

ES6就是ECMAScript6是新版本JavaScript语言的标准,它的目标是使得JavaScript语言可以用来编写复杂的大型应用程序,成为企业级开发语言。

ECMAScript定义了:语言语法:语法解析规则、关键字、语句、声明、运算符等。类型:布尔型、数字、字符串、对象等。

2、ES6的主要优势

在ES6之前定义变量都是用var这个关键字,var是在全局的环境下声明的一个变量,而且这个变量有一个变量的提升;也就是说,即使把变量放在后面,但是JavaScript引擎的运行的时候会把变量提到代码的最上层,然后先声明再赋值,这样就带来了一个变量提升的问题。ES6在此基础上做了一下改进,提出了两个变量的扩展:let和const。

3、变量的扩展

      //变量声明
      {
          let a = 10;
          var b = 10;
      }
      a  // ReferenceError: a is not defined. 
      b  // 10 
      
      for(var i = 0; i < 5; i++){
          setTimeout(function(){
              console.log(i);
          },i * 100);
      }
      const a = 10;
      a = 3;      //TypeError:Assignment to constant variable.

var与let 和 const 的比较:

var的缺点:

es6变量 :

4、变量的解构

解构的作用是可以快速取得数组或对象当中的元素或属性。

目的:为了方便我们从数组或者对象把我们想要的值给提取出来并且赋给我们想要赋的值;如果没有解构成功就返回undefined。我们主要是从数组和对象的解构来介绍了解:

      let [a, b, c] = [1, 2, 3];
      /* a = 1; b = 2; c = 3 */
      
      let [week, [[month], year]] = [1, [[2], 3]];
      /* week = 1; month = 2; year = 3 */
      
      let [ , , third] = ["week", "month", "year"];
      /* third = 'year' */
      
      let [x, , y] = [1, 2, 3];
      /* x = 1; y = 3 */
      
      let [head, ...tail] = [1, 2, 3, 4];
      /* head = 1; tail = [2, 3, 4] */
      
      let [a, [b], d] = [1, [2, 3], 4];
      /* a = 1; b = 2; d = 4 */
      
      [a, b] = [b, a];
      // 位置互换 
      
      // 指定默认值 
      let [x, y = 'b'] = ['a'];
      /* x = 'a'; y = 'b' */
      
      function f() {
          console.log('参数错误!');
      }
      
      let [x = f()] = [];
      let { month, week } = { week: 'aaa', month: 'bbb' };
      /* week = 'aaa'; month = 'bbb' */
      
      let { log, sin, cos } = Math;
      /* log = Math.log; sin = Math.sin; cos = Math.cos */
      
      let obj = {
          p: [
              'Hello',
              { y: 'World' }
          ]
      };
      let { p: [x, { y }] } = obj;
      /* x = 'hello'; y = 'word'; */
      
      let  { week: { month } } = { year: 'year' };
      /* TypeError: Cannot destructure property `month` of 'undefined' or 'null'. */
上一篇下一篇

猜你喜欢

热点阅读