JavaScript基础: ES6新特性-变量声明，变量解构赋值，对象简写，模板字符串

ES6一般指ECMAScript 6。 ECMAScript 6（简称ES6）是于2015年6月正式发布的JavaScript语言的标准，正式名为ECMAScript 2015（ES2015）。而为什么单独说ES6版本为什么会单独拿出来说，因为ES6对于JavaScript来说就是一个比较大的版本更新，有些新的东西可以说是革新了这个语言。

声明变量关键字

这个在ES6中除了var以外有增加了let和const两个关键字，这个在前面聊过几个具体区别。地址

所以在本篇不再聊一遍了，如果不了解的人可以翻看一下前面那一篇文章。

变量的解构赋值

ES6允许按照一定模式从数组和对象中提取值，对变量进行赋值这个被称为解构赋值，说起来很绕口，还是老规矩用代码演示。

数组解构赋值

演示如下：

const gameNames=['艾尔登法环','战神','消失的光芒'];
var [a,b,c]=gameNames;
console.log(a);
console.log(b);
console.log(c);

在这里插入图片描述

可以看出直接将数组的值依次赋值了。

对象解构赋值

演示如下：

  const obj={
        name:'宫崎老贼',
        age:25,
        createGame : function () {
          console.log('如何让玩家不爽');
        }
    };
    // 但是需要与属性的名字相同不然不会生效
    var {a,b,c} =obj;
    console.log('-------随便属性名-----');
    console.log(a);
    console.log(b);
    console.log(c);
    console.log('-------相同的属性名-----');
    var {name,age,createGame} =obj;
     console.log(name);
    console.log(age);
    console.log(createGame);

在这里插入图片描述

注意：需要与属性的名字相同不然不会生效。

还可以如下尝试：

  const obj={
        name:'宫崎老贼',
        age:25,
        createGame : function () {
          console.log('如何让玩家不爽');
        }
    };
    var { age} =obj;
    console.log(age);

在这里插入图片描述

可以看出与顺序无关，至于其变量名与属性名相同有关。

对象的简写

上面再变量解构赋值的时候提到的了如何将对象的属性进行依次变量赋值，当然也可以反过来操作，就是将变量作为属性值。也就是ES6中允许再大括号里面，直接写入变量和函数名，作为对象的属性和方法。

如果这样说可能读者觉得，就是一句废话，还是老规矩代码要是。

// 传统也可以实现
var name="v胖";
var age=3;
var obj={
    name:name,
    age:age
};

在这里插入图片描述

如果只是这个就是，那么我前面说的不就是废话了吗？其实不然如下看：

var name="v胖";
var age=3;
function samll(){
    console.log('我不会数3');
}
var obj={
    name ,
    age,
    samll  
};

在这里插入图片描述

如果这样看就发现这个前面说的简化了。

模板字符串

前面说了在JavaScript 中单引号和双引号都可以表示字符串，而在新版本中多了一对符号**``**, 这个不是单引号而是键盘tap键盘上面的波浪号键的另一个符号。

还是演示在具体说：

var a='abcd';
var b="ab"+
      "cd";
var c=`ab
       cd`;

在这里插入图片描述

可以看出完全保留了字符串的格式，哪怕换行等。

那么是字符格式的数据吗？如果是如果证明？

简单：

// 第一种
typeof(c);
//第二种
Object.prototype.toString.call(c);

在这里插入图片描述