简单说说ES6新特性

ECMAScript 6.0（以下简称 ES6）是 JavaScript 语言的下一代标准，已经在 2015 年 6 月正式发布了。 它的目标，是使得 JavaScript 语言可以用来编写复杂的大型应用程序，成为企业级开发语言。

ECMAScript和JS的关系 ECMAScript是标准,JS是实现

• 类似于HTML5是标准,IE，chrome是实现    例如国家定了医用口罩标准（需要过滤XX，等等各种参数），咱们买的正规口罩是实现
• 目前ECMAScript除了JS还没别的实现，所以ECMAScript==JS也说得过去
• ES6发布于2015年发布,所以也可以叫es2015 去年的ES2021 是ES12 但是主要的改变是在es6,这几年的东西都增加的不多，所以把ES6以及以后的版本统称为es6也合理，ES2022也也即将推出

今天对我目前所知的并且常用的一些做一个总结，适合处于新手村和即将走出新手村的兄弟观看学习，同时也欢迎各位大佬补充

1、声明变量

　　首先说说在没有es6之前存在的问题，也就是var的问题

1. 可以重复定义
2. 无法限制修改，有些东西不会变化，没常量
3. 没有块级作用域，只有函数作用域
4. 变量提示带来的混乱

　　es6新增了两个声明变量关键字，let和const    这两个关键字就是为了解决es5存在的问题

　　let

　　（1）let 声明变量时只在其块级作用域中有效

1 {
2   let a = 10;
3   var b = 1;
4 }
5 console.log(a); //出错 not defined
6 console.log(b); //1

　　在es5中如果要实现块级作用域，通常借助立即执行匿名函数来实现

1 (function(){
2   var a = 1;
3 }());
4 console.log(a); //出错，not defined

　　但是有了let之后，就可以解决这么问题

　　（2）没有变量提升

　　也正是如此，变量必须在声明后使用，否则就会报错，这里对比var经典的变量提升

//let
console.log(a); //出错， not defined
let a = 1; 

//var
console.log(a); //undefined
var a =1;

　　（3）不可以在相同作用域内重复声明同一个变量，也包括不能和var，const变量名重复

let a = 1;
let a = 1; //出错 let不可重复声明

var b = 1;
let b = 1; //出错 let不可重复声明

const c = 1;
let c = 1; //出错 let不可重复声明

　　（4）在块级作用域内，若存在用let命令声明的变量，则所在区块对该变量形成封闭作用域，也就是该变量无视外部的同名变量。而又因为不存在变量提升，所以在该区块中，不能在声明前使用该变量。

var a  = 1;
if(true){
  a = 2; //出错 not defined
  let a;
}

var a = 1;
if(true){
  a = 2; //var允许重复声明，而且变量提升，故a=2正常赋值
var a;
}

　　const 

　　const和let的区别在于const声明的变量不能修改，let声明的变量可以修改

　　　　　const name = "";
        //name = '2' //报错

        //但是也不是都不能变
        const person = {
            name:""
        }
        person.name="";

        console.log(person)

//const实际上保证的，并不是变量的值不得改动，而是变量指向的那个内存地址所保存的数据不得改动。
//对于简单类型的数据（数值、字符串、布尔值），值就保存在变量指向的那个内存地址，因此等同于常量。
//但对于复合类型的数据（主要是对象和数组），变量指向的内存地址，保存的只是一个指向实际数据的指针，
//const只能保证这个指针是固定的（即总是指向另一个固定的地址），
//至于它指向的数据结构是不是可变的，就完全不能控制了。因此，将一个对象声明为常量必须非常小心。

学会之后推荐声明变量时使用let，可以避免很多不必要的麻烦，const看个人需求

2、Symbol

ES6新增了一个基本数据类型：Symbol，至此ECMAScript的基本数据类型就有了6种： 字符串，数字，布尔，null，undefined,Symbol。

//Symbol 的定义不能使用new   他使用Symbol()函数生成
let a = Symbol();

typeof a   // "symbol"

//Symbol创建时可以传一个参数，表示对Symbol的描述

let s1 = Symbol('a');
let s2 = Symbol('b');

s1 // Symbol(a)
s2 // Symbol(b)

Symbol表示独一无二的值

 1 let s1 = Symbol('a');
 2 let s2 = Symbol('a');
 3
 4 //s1===s2  false;
 5 //既然Symbol的值都不相等  那么可以利用他的特性解决对象里同名覆盖的问题
 6
 7 let obj = {
 8   [Symbol()]: 1
 9 };
10 //或者
11 let s = Symbol();
12 let obj = {
13   [s]: 1
14 };

Symbol.for()       有时，我们希望重新使用同一个 Symbol 值，Symbol.for()方法可以做到这一点。 它接受一个字符串作为参数，然后搜索有没有以该参数作为名称的 Symbol 值。 如果有，就返回这个 Symbol 值，否则就新建一个以该字符串为名称的 Symbol 值，并将其注册到全局。

1 let s1 = Symbol.for('a');
2 let s2 = Symbol.for('a');
3
4 s1 === s2 // true
5
6 //两种写法区别
7 Symbol.for("a") === Symbol.for("a") // true
8
9 Symbol("a") === Symbol("a") //false

3、解构赋值（常用）

 1    let [a,b,c] = [1,2,3]
 2     var [a,,c]=[1,2,3];
 3      console.log(a+' | '+c);  //1 | 3
 4     var [a,...b]=[1,2,3];
 5     console.log(a+' | '+b);//1 | 2,3
 6     console.log(b);//[2, 3]
 7     //   ...将右侧多余的值以数组的形式赋值给左侧变量    rest
 8
 9     //设置默认值
10     var [a,b,c='default',d='default']=[1,2,3];
11      console.log(a+' | '+b+' | '+c+' | '+d);//1 | 2 | 3 | default
12
13      //找不到的会被赋值为undefined
14      var [a,b,c]=[1,2];
15      console.log(a+' | '+b+' | '+c);//1 | 2 | undefined

对象的解构赋值

 1 //对象的解构赋值
 2
 3       let obj={
 4             a:1,
 5             b:2
 6         }
 7         let {a,b}=obj;
 8         console.log(a+" | "+b);//1 | 2
 9
10       //重命名，把obj.a重命名为A
11        let obj={
12             a:1,
13             b:2
14         }
15         let {a:A,b}=obj;
16         console.log(A+" | "+b);//1 | 2
17         console.log(a);//Uncaught ReferenceError: a is not defined
18
19         //设置默认值
20
21         let {a=1,b=2}={a:10};
22          console.log(a+" | "+b);//10 | 2
23
24          //字符串也可以解构
25
26          var [a,b,c,d,e]='nihao';
27             console.log(a);//

4、函数默认值

 1     //es5写法
 2     function sum(a,b){
 3             b= b||0;
 4             console.log(a+b)
 5         }
 6
 7         sum(1)
 8
 9 //es6
10     function sum(a,b=0){
11         console.log(a+b)
12     }
13     sum(1)
14     function sum(a=2,b=0){
15         console.log(a+b)
16     }
17
18     sum() 

5、箭头函数（常用）

箭头函数都是匿名函数

 1     function show(num){
 2         return num*num
 3     }
 4     var show = function(num){
 5
 6         return num*num
 7     }
 8
 9     //如果箭头函数不需要参数或需要多个参数，就使用一个圆括号代表参数部分。  提个参数可以去掉括号
10     var show =(num)=>{
11         return num*num
12     }
13     //如果只有一条return语句，可以省略大括号和return   隐式返回
14
15     var show =num=>num*num;
16
17
18
19     //箭头函数的this继承自他的父作用域
20     //而且与我们原来普通函数不同，原来的函数this是调用时动态指定的，
21     //而箭头函数是词法作用域，他里的this是定义时就指定的 而且不会随着调用方式不同而改变
22
23     //如下例子
24     var log_this = ()=>{
25
26         console.log(this)
27     }
28     var log_this = function(){
29
30         console.log(this)
31     }
32
33     var obj = {
34         hobbies:['code','run','paly game'],
35         logHobbies:log_this
36     }
37
38
39     obj.logHobbies()
40
41
42     log_this()

　　有几点需要注意

1. 函数体内的this对象，就是定义时所在的对象，而不是使用时所在的对象。

2. 不可以当作构造函数，也就是说，不可以使用new命令，否则会抛出一个错误。

3. 不可以使用arguments对象，该对象在函数体内不存在。如果要用，可以用 rest 参数代替。

4. 不可以使用yield命令，因此箭头函数不能用作 Generator 函数。

• 上面四点中，第一点尤其值得注意。this对象的指向是可变的，但是在箭头函数中，它是固定的。

6、模板字符串（常用）

原来写字符串比较痛苦 特别是拼接变量时

1 const name="小";
2 const age = 2;
3
4  console.log('ta的名字是'+name+',它今年'+age+'了');
5   console.log('<div data-age="'+age+'">'+name+'</div>');//这种更难受
6  console.log(`ta的名字是${name},它今年${age}了`)
7  console.log(`<div data-age="${age}">${name}
8  </div>`)

模板字符串可以嵌套

 1 var arr = [{
 2             name:"苹果",
 3             price:11
 4         },{
 5             name:"香蕉",
 6             price:12
 7         }];
 8
 9
10         var template = `
11         <ul>
12         ${arr.map(v=>`
13         <li>${v.name}
14         <span>${v.price}</span>
15         </li>
16         `).join('')}
17         </ul>
18         `
19
20         console.log(template)
21
22         document.body.innerHTML = template;

7、数组

spread 展开运算符也是三个点（...）。它好比 rest 参数的逆运算，将一个数组转为用逗号分隔的参数序列。

 1 const a = [1, 2, 3];
 2 const b = [4,5,6];
 3 const c = [...a] // [1,2,3]
 4 //轻松拼接两个数组
 5 const d = [...a,...b] // [1,2,3,4,5,6]
 6
 7
 8 //类数组对象变成数组
 9 var list=document.getElementsByTagName('a');
10 var arr=[...list];

其实不单单是参数可以展开，对于对象和字符串同样可以展开

 1 const obj1 = { a: 111, b: 222 };
 2 const obj2 = { c: 333, d: 444 };
 3 const merged = { ...obj1, ...obj2 };
 4 console.log(merged); // -> { a: 111, b: 222, c: 333, d: 444 }
 5 //或者这样
 6 const others = {third: 3, fourth: 4, fifth: 5}
 7 const items = { first:1, second:1, ...others }
 8 items //{ first: 1, second: 2, third: 3, fourth: 4, fifth: 5 }
 9
10
11 //展开字符串
12
13 const str = 'hello'
14 const array_str_ = [...str] // 

• Array.from

1 //Array.from方法用于将两类对象转为真正的数组
2  var args = Array.from(arguments);
3  var list = Array.from(document.querySelectAll('li'));

• Array.of()

1 //这个方法的主要目的，是弥补数组构造函数Array()的不足。因为参数个数的不同，会导致Array()的行为有差异。
2 Array() // []
3 Array(3) // [, , ,]
4 Array(3, 11, 8) // [3, 11, 8]
5
6 Array.of(3, 11, 8) // [3,11,8]
7 Array.of(3) // [3]
8 Array.of(3).length // 1

8、for of 循环

 1   看一下咱们会的循环方法
 2   for 无法循环对象
 3   for in  存在问题 他会遍历所有可遍历属性  如果为原型加了一些属性，那也会遍历出来
 4   forEach 循环数组 无法终止
 5
 6   最终es6为了统一，也借鉴了c++,java,python语言引入了for of循环 作为遍历所有数据结构的统一的方法。
 7 for...of循环可以使用的范围包括数组、Set 和 Map 结构、
 8 某些类似数组的对象（比如arguments对象、DOM NodeList 对象）、
 9 后文的 Generator 对象，以及字符串。
10 -- 对象不能使用for of

1 for(let v of [1,2,3]) {
2   console.log(v); // 1 2 3
3 }
4 let p = document.querySelectorAll("p");
5 for (let x of p) {
6     console.log(x);
7   }

9、set

1 //ES6 提供了新的数据结构 Set。它类似于数组，但是成员的值都是唯一的，没有重复的值。
2
3 const set = new Set([1, 2, 2, 4, 4]);
4   [...set]
5   //用Set 去重非常方便 ，数组去重面试常考题
6
7   [...new Set(arr)]

今天先写这么多，剩下的面向对象、promise、模块化和map等以后有机会再补充，公司又有新需求了，我得去写代码了（表示是被迫停下来，不是故意留一些不写的），后边的这些都是个人感觉都是重点，等我代码写完再来补充，同时有哪些问题欢迎各位大佬提醒，毕竟我也还只是一只菜鸟，只是对自己的理解做一下总结