ES6新特性

1.增加Symbol类型

ES6 引入了一种新的原始数据类型Symbol，表示独一无二的值

let s = Symbol();

typeof s
// "symbol"

symbol类型一般作用于对象的k值

两个symbol出来的值一定不相等

let s=Symbol()
let s2=Symbol();

if(s === s2) //输出false

Symbol.for()方法首先在全局Symbol注册表中搜索键为‘uid’的Symbol是否存在，如果存在，直接返回已有的Symbol；否则，创建一个新的Symbol，并使用这个键在Symbol全局注册表中注册，随机返回新创建的Symbol。
后续如果再传入同样的键调用Symbol.for()会返回相同的Symbol：

let uid = Symbol.for('uid');
let uid2 = Symbol.for('uid');
let object = {
     [uid] : '12345' 
} ;
console.log(uid === uid2); //true
console.log(object[uid]);  //12345
console.log(object[uid2]);  //12345

Symbol有一个常用的属性Iterator主要用于for of 遍历 ，像String Array都实现了Iterator可以实现for of 循环

Symbol.iterator

在没有Symbol.iterator方法下运行会报错

let obj = {
    0: 'a',
    1: 'b',
    2: 'c',
}
 
console.log([...obj])//报错obj is not iterable 
　　　　　在没有Symbol.iterator方法下运行

实现一个object的iterator函数

let obj = {
          0: 'a',
          1: 'b',
          2: 'c',
          length: 3,
          [Symbol.iterator]: function () {
              // index用来记遍历圈数
              let index = 0;
              let next = () => {
                  return {
                      value: this[index],
                      done: this.length == ++index
                  }
              }
              return {
                  next
              }
          }
      }
 
      // console.log(obj.length)
      console.log([...obj]);//(2) ["a", "b"]
 
      for(let p of obj){
          console.log(p) //"a"  "b"
      }

返回一个next函数 next函数被调用返回一个对象{value,done}

value 每次for of 获得的值

done 是否最后一个数据的标识 如果最后一个数据了则为true退出循环

2.新增加let const关键字

被let声明的类型是不存在变量提升，也不能重复定义 必须先声明再定义，let是有块级作用域

被 var 声明的变量是存在变量提升所以再下列函数里 a()所有值都会是10

var a = [];
for (var i = 0; i < 10; i++) {
  a[i] = function () {
    console.log(i);
  };
}
a[6](); // 10

用let去定义i就会正常输出，因为i有块级作用域的感念

var a = [];
for (let i = 0; i < 10; i++) {
  a[i] = function () {
    console.log(i);
  };
}
a[6](); // 6

被const修饰的变量不能改变 修饰的是一个常量

被const修饰只不能改变浅值 而被修饰的对象里面的对象可以改变

如果有完全不能改变的需求用Object.free(obj)函数实现

const foo = {};

// 为 foo 添加一个属性，可以成功
foo.prop = 123;
foo.prop // 123

// 将 foo 指向另一个对象，就会报错
foo = {}; // TypeError: "foo" is read-only

模板字符串

模板字符串的使用可以让我们不再去字符串拼接的方式去合并字符串

以前拼接方式

var firstname='张三';
var lastname='陈';
var split='-';
var fullname=firstname+split+lastname;

console.log(fullname)//输出张三-陈

使用模板字符串必须用``这个符号取包裹

var firstname='张三';
var lastname='陈';
var split='-';
var fullname= `${firstname}${split}${lastname}`;
console.log(fullname)//输出张三-陈

新增加箭头函数

x => x * x

类似于普通函数

function (x) {
    return x * x;
}

多参数箭头函数,函数体是表达式默认会返回可以这样写

(x,y) => x+y

有函数体的箭头函数这样写

(x,y) =>{
    x=y+10;
    return x+y;
}

箭头函数的this指向 不是指向对象的本身而是外部对象

var handler = {
        id: '111',
        doSomething: function(e) {
            console.log(e);
        },
        init: function() {
            document.addEventListener('click', (event) => { // 这里绑定事件，函数this就可以访问到handler的方法doSomething
                this.doSomething(event);
            }, false);
        }
    }

    handler.init();

新增加函数默认参数

function test(flag,name='zhangsan',age=18){
    
}

新增加对象和数组结构 和三点运算符

1.对象结构

const Asher = {
    name: 'Asher Zhang',
    age: 5,
    family: {
        mother: 'North Zhang',
        father: 'Richard Zhang',
        brother: 'Howard Zhang'
    }
}
第一种方式
const {name,age} = Asher;

//获取对象上并没有的属性会返回undefined
const {father,mother,brother,sister} = Asher.family;
//可以给没有的属性加上默认值
const {father,mother,brother,sister = 'have no sister'} = Asher.family;
console.log(sister); 
第二种方式用...运算符来获取
const {mother,...a} = Asher.family;
console.log(a);
输出{
     father: 'Richard Zhang',
    brother: 'Howard Zhang'
}

2.数组结构

const fruits = ['apple','coconut','mango','durian'];

//原始获取数组项的写法
const durian = fruits[3];      //durian

//数组解构写法，和对象解构类似
const [apple,coconut] = fruits;
console.log(apple,coconut);           //apple coconut  
//可以把剩余部分用...运算符变量来接受

const [a,b,...c]=fruits;
console.log(c)
//输出['mango','durian']

3.三点运算符

在函数的传参数过程。作用将剩余的参数放入一个数组中。

function f(a,...arr){
    console.log(arr);
}
f(1,2,3,4,4); //[2,3,4,5]复制代码

复制数组：

// 通常情况 浅拷贝
let a1 = [1, 2];
let a2 = a1; 
a2[0] = 3;
console.log(a1,a2); // [3,2] [3,2]
 
// 拓展运算符 深拷贝
let a1 = [1, 2];
let a2 = [...a1];
// let [...a2] = a1; // 作用相同
a2[0] = 3;
console.log(a1,a2); // [1,2] [3,2]复制代码

for…of 和 for…in

for of 遍历数组种的变量

for of 只能遍历实现 Symbol.iterator的对象

像Array String 都实现了 Symbol.iterator函数，所以可以遍历

let letters = ['a', 'b', 'c'];
letters.size = 3;
for (let letter of letters) {
  console.log(letter);
}
// 结果: a, b, c

新增 for in 只遍历对象的K值

 let stus = ["Sam", "22", "男"];
 for (let stu in stus) {
   console.log(stus[stu]);
  }
// 结果: Sam, 22, 男

ES6中的类

class Student {
  constructor() {
    console.log("I'm a student.");
  }
 
  study() {
    console.log('study!');
  }
 
  static read() {
    console.log("Reading Now.");
  }
}
 
console.log(typeof Student); // function
let stu = new Student(); // "I'm a student."
stu.study(); // "study!"
stu.read(); // "Reading Now."

继承类

class Phone {
  constructor() {
    console.log("I'm a phone.");
  }
}
 
class MI extends Phone {
  constructor() {
    super();
    console.log("I'm a phone designed by xiaomi");
  }
}
 
let mi8 = new MI();

extends 允许一个子类继承父类，需要注意的是，子类的constructor 函数中需要执行 super() 函数。
当然，你也可以在子类方法中调用父类的方法，如super.parentMethodName()。