ES6最常用的语法

备注：新语法可能在大多数浏览器上还不支持，需要使用babel语法转换器，支持低端浏览器

• 但是流行的库基本都基于ES6构建，React\vue默认使用ES6新语法开发

一、在定义数据上的改变

使用ES6最好前面加一行严格模式的代码在文件头添加”javascript 严格模式

'use strict';
let hello = 'hello world.';
console.log(hello);

1.1数据类型

symbol
ES6 以前，我们知道5种基本数据类型分别是Undefined，Null，Boolean，Number以及String，然后加上一种引用类型Object构成了JavaScript中所有的数据类型，但是ES6出来之后，新增了一种数据类型，名叫symbol，像它的名字表露的一样，意味着独一无二，意思是每个 Symbol类型都是独一无二的，不与其它 Symbol 重复。
可以通过调用 Symbol() 方法将创建一个新的 Symbol 类型的值，这个值独一无二，不与任何值相等。

var mySymbol=Symbol();
console.log(typeof mySymbol) //"symbol"

1.1、块级作用域

• 之前的定义用var没有块级这个概念，但es6中加入这个概念，关键字为let定义变量，
  与var有上面不同？–它在定义的作用域范围内有效，2、同一个变量名不可以定义两次

for(var i=0;i<10;i++);
for(let j=0;j<10;j++);
console.log(i);
console.lo(j);
10
 Uncaught ReferenceError: j is not defined
for(var i=0;i<10;i++);
for(let j=0;j<10;j++);
console.log(i);
console.lo(j);
10
报错： Uncaught ReferenceError: j is not defined
{
let a=0;
}
console.log(a);//报错

1.1.1、let不能在js中使用，是es6的语法，需要在js中使用就必须使用严格模式：‘use strict’;

1.1.2、声明后未赋值，表现相同

  var varTest;
  let letTest;
  console.log(varTest); //输出undefined
  console.log(letTest); //输出undefined

也即是说声明后直接使用输出都是一样的undefined

1.1.3、使用未声明的变量，不同

 console.log(varTest); //输出undefined(注意要注释掉下面一行才能运行)
  console.log(letTest); //直接报错：ReferenceError: letTest is not defined

直接使用没有声明的变量，let直接报错，var的提示未定义：undefined

1.1.4、重复声明同一个变量的时候，不同

var varTest = 'test var OK.';
  let letTest = 'test let OK.';
 
  var varTest = 'varTest changed.';
  let letTest = 'letTest changed.'; //直接报错：SyntaxError: Identifier 'letTest' has already been declared
 
  console.log(varTest); //输出varTest changed.(注意要注释掉上面letTest变量的重复声明才能运行)
  console.log(letTest);

var 重复声明，第二次声明会覆盖第一次声明的值

let重复声明会报错

1.1.5、变量作用域不同

{
  var varTest = 'test var OK.';
  let letTest = 'test let OK.';
 
  {
    var varTest = 'varTest changed.';
    let letTest = 'letTest changed.';
  }
 
  console.log(varTest); //输出"varTest changed."，内部"{}"中声明的varTest变量覆盖外部的letTest声明
  console.log(letTest); //输出"test let OK."，内部"{}"中声明的letTest和外部的letTest不是同一个变量
}

大括号包裹的是一个作用域，不同；作用域let声明的变量只在当前的作用域里面有用，和另一个作用域里面的let声明的变量是两个不同的变量，互相不会有影响
而var的声明的是全局的变量

在实际开发中，我们选择使用var、let还是const，取决于我们的变量是不是需要更新，通常我们希望变量保证不被恶意修改，而使用大量的const。使用const声明，声明一个对象的时候，也推荐使用const，当你需要修改声明的变量值时，使用let，var能用的场景都可以使用let替代。
####二、字符串的改变

• 字符串使用反引号，且反引号里面的变量可以不用+链接，一个关键符号${变量名}即可

  let i=90;
            console.log(`哈哈${i}
            闫    
            `);

三、函数的变化

• 函数变成箭头函数

function(参数){}
ES6:(参数)=>{}
参数是一个的话可以写成这个样子
参数名=>{}

• 函数带有了默认值：不传参数为默认的

const add=(num1,num2=1)=>{
return num1+num2;
}

箭头函数中this的使用跟普通函数也不一样，在JavaScript的普通函数中，都会有一个自己的this值，主要分为：
普通函数：
1、函数作为全局函数被调用时，this指向全局对象
2、函数作为对象中的方法被调用时，this指向该对象
3、函数作为构造函数的时候，this指向构造函数new出来的新对象
4、还可以通过call，apply，bind改变this的指向
箭头函数：
1、箭头函数没有this，函数内部的this来自于父级最近的非箭头函数，并且不能改变this的指向。
2、箭头函数没有super
3、箭头函数没有arguments
4、箭头函数没有new.target绑定。
5、不能使用new
6、没有原型
7、不支持重复的命名参数。

四、 一个数组的新用法—展开运算符三个点…

• 多用于数组操作
  1、数组拼接

const odd=[1,3,5];
const nums=[2,...odd,4,6];
console.log(nums);
(6) [2, 1, 3, 5, 4, 6]
arr1.push(...arr2) // 将arr2 追加到数组的末尾
arr1.unshift(...arr2) // 将arr2 追加到数组的开头
var arr1 = ['two', 'three'];
var arr2 = ['one', ...arr1, 'four', 'five'];
 
// ["one", "two", "three", "four", "five"]

2、复制拷贝

var arr = [1,2,3];
var arr2 = [...arr]; // 和arr.slice()差不多

记住：数组中的对象依然是引用值，所以不是任何东西都“拷贝”过去了。
3、将arguments（参数）或者NodeList（节点集合）转换为Array
像拷贝数组一样，我们常常使用Array.Prototype.slice来将NodeList和arguments这种类数组对象转换为真正的数组。但是现在我们能够用展开运算符轻易的实现这项任务：

[...document.querySelectorAll('div')]
     var div=document.getElementsByTagName('div');
    var div=document.querySelectorAll('div');
//    console.dir(div);
    console.log(...div);
使用此法，你甚至可以像数组一样获取参数。
var myFn = function(...args) {
// ...
}
function a(a,b,c)
    {
        console.log(...arguments);
    }
    a(1,2,3);
打印123

4、使用Math函数

• 当然了，展开运算符将数组“展开”成为不同的参数，所以任何可接收任意数量的参数的函数，都能够使用展开运算符来传参

let numbers = [9, 4, 7, 1];
Math.min(...numbers); // 1

5、结构的乐趣：使用解构和展开运算符将信息解压到你想要的变量中去：

let { x, y, ...z } = { x: 1, y: 2, a: 3, b: 4 };
console.log(x); // 1
console.log(y); // 2
console.log(z); // { a: 3, b: 4 }剩余的属性被分配到了展开运算符之后的z变量中。

五、加了类、模块知识

module.js

export const name='123';

main.js

import {name} from './module.js';
console.log(name);

module.js

export  default function(){
}

main.js

import say from './module.js';
say();

Node现在和不支持