一，什么是es6

ES6全称为EMAScript 6，是由ECMA国际标准组织制定的一项针对JavaScirpt脚本语言的标准化规范，同时也新增了许多特性。是 JavaScript 语言的下一代标准。
参考文档：es6.ruanyifeng.com/

二，var，let 和 const 命令

1.声明变量的方式：

ES6之前： var 变量名称;
es6出现之后：只使用let 或者 const

2.三者的区别：

如果通过var定义变量,可以重复定义同名的变量,并且不会报错,并且后定义的会覆盖先定义的;
如果通过var定义变量,可以先使用后定义(预解析);
如果通过var定义的局部变量,和全局变量一样,后续都可以被使用;

如果通过let定义变量,不可以重复定义同名的变量;
如果通过let定义变量,不可以先使用再定义;
如果通过let定义的局部变量,那么这个变量只能在当前定义变量的{}中使用;

const 声明的变量一旦声明了就不能改变。
const 是一个只读常量固定不变
如果const的是一个对象，对象所包含的值是可以被修改的。抽象一点儿说，就是对象所指向的地址没有变就行

三，模板字符串

模板字符串指是增强版的字符串，用反引号（`）标识，标签将会被解析
将表达式嵌入字符串中进行拼接，用${}来界定，

在ES6之前，我们往往这么处理字符串

console .log('我今年‘+age+’岁')

使用模板字符串

console .log(`我今年${age}岁`)

四，变量的解构赋值

解构赋值是ES6中新增的一种赋值方式，指的是ES6允许按照一定的模式，从数组或对象中取出值，对变量进行赋值。 如果解构不成功，变量的值就等于undefined。

1，把数组中的数值取出,赋值给新的变量

let arr = [1, 3, 5];
const  [a,b,c]= arr
console.log("a=" + a);
console.log("b=" + b);
console.log("c=" + c);
输出:  a=1;b=3;c=5

2，对象的解构

const obj = {
  username: '悟空',
  height: 100,
};
const { username, height } = obj;
console.log(username, height);	// ‘悟空’	100

3，在数组的解构赋值中,左边的个数可以和右边的不一样(解构不到的为undefined)

let [a, b,c] = [1, 3];
console.log("a=" + a);
console.log("b=" + b);
输出: a=1;b=3;c=undefined  // 解构不到的为undefined

4，在数组的解构赋值中，左边的个数比右边的个数多，可以给左边设置指定的默认值

let [a, b,c=666] = [1, 3];
console.log("a=" + a);
console.log("b=" + b);
console.log("c=" + c);
输出: a=1;b=3;c=666

5，在数组的解构赋值中,左边的个数和右边的不一样,那么设置默认值会被覆盖;

let [a, b,c=666,d=888] = [1, 3,5,7];
console.log("a=" + a);
console.log("b=" + b);
console.log("c=" + c);
console.log("d=" + d);
输出: a=1;b=3;c=5,d=7

五，扩展运算符

拓展运算符是三个点 (...）,常见作用如下
1，打包剩余的数据
数组使用会把剩下数据打包成数组，对象使用会把剩下的对象打包为对象
就算是只有一个数，也会返回一个数组，一个数都没有，就返回一个空数组

//1，获取剩下 数组
const [a, ...b] = [1, 3,5,7];
console.log(a);//1
console.log(b);//[3,5,7]

//2，获取剩下 对象
const { a, ...c } = { a: 1, b: 2, c: 3 };
console.log(c);// {b:2,c:3}

const { a,b,c ,...d } = { a: 1, b: 2, c: 3 };
console.log(d); // 空对象 {}

2,用在函数的形参上，会解构成数组

function calc(...args) {	// ...args 数组 装载这所有传给calc的参数
  
  let sum = 0;
  args.forEach((value) => (sum += value));
  console.log(sum);
}
calc(1, 2);
calc(1, 2, 3);
calc(1, 2, 3, 4);

3，延展作用

//在新的存储空间把 原来obj的值 通过扩展运算符解构放进去 newObj再添加其他属性就不会影响原来的obj
const obj = {
  username: '悟空',
  height: 200,
};	
const newObj = { ...obj, color: 'yellow' };

4，扩展运算符对数组操作

const arr = ['a', 'b', 'c'];

//在数组的后面 新增一个 元素 'd'
const newArr=[...arr,'d'];

//在数组前面 新增一个元素 w
const newArr = ['w', ...arr];

六，交换两个变量的值

let a = 1; let b = 2;
// 交换两个值 [a,b]=[b,a]; 
console.log(a,b); 
// a = 2 b = 1

七，函数参数默认值

函数没有传递实参时，输出默认值，
函数传递了实参，输出实参

function show(msg = '你好',str="你我都好") {
  console.log(msg,str);
}
show(); // 没有传递参数  输出你好 你我都好
show('大家好'); // 输出 大家好 你我都好
show('大家好',"世界美好"); // 输出 大家好 世界美好

八，对象的简写

1，对象的属性名和值简写
无须再次定义属性名

const username = 123;
const color = 'red';

const obj = {
  //变量名和属性名一致 对象属性可以简写 
  username, 
  color, 
};

2，对象的方法简写
内部定义函数时无须function关键字

const person={
   
  //show方法 没有简写  
  show:function(){
    console.log("show");
  },
    
  //say方法 简写
  say(){
    console.log("say");			
  } 
  
}
person.show();
person.say();

九，set对象

1，set对象是es6才推出的一种语法，set是一个对象，不是一个数组；；

2，主要功能是去重；

3，可以实现数组和对象之间的相互转换；

const beforeArr=['a','b',3,4];

// 1，数组转成set对象
const set = new Set(beforeArr)

//2，给set添加数据的时候 使用 add方法  
set.add(1);
set.add(2);
set.add(2);// 3，发现有重复数据了，自己内部过滤重复，不会添加进去

//4 set 转成 数组（map、forEach。。。）
const arr=[...set];
console.log(arr);

结尾

好了今天的内容就到这里了，es6中还有许多新增的功能，如果感兴趣可以继续学习
参考文档：es6.ruanyifeng.com/

ES6中有哪些新特性？