ES6---新增知识

一.let和const声明
(1).let声明具有以下4个特性:
1.let声明的变量不会挂在window中，不会造成全局变量的污染
2.新增了一个块级作用域{}，以前只有函数作用域，全局作用域
3.let是不允许重复声明
4.let不会有声明提前
eg:

{
  let a = 10;
  var b = 1;
  var a=1;//报错 let是不允许重复声明
}

console.log(a) //报错 ReferenceError: a is not defined.
console.log(b) // 1

(2).const
1.跟let完全相同 增加几个点
2.不允许被修改(不允许改变内存空间的地址)
3.const声明和赋值必须一次性完成，并且后期不允许改变存储空间的地址
eg:

const PI = 3.1415;
PI // 3.1415
PI = 3;// TypeError: Assignment to constant variable.
const PI=44;//报错
const a;//报错(const一旦声明变量，就必须立即初始化，不能留到以后赋值)

二.字符串模板
eg:插入字符串模板

var a = 5;
var b = 10;
console.log('Fifteen is ' + (a + b) + ' and\nnot ' + (2 * a + b) + '.');
// "Fifteen is 15 and
// not 20."

模板字符串使用反引号 (``) 来代替普通字符串中的用双引号和单引号。模板字符串可以包含特定语法（${expression}）的占位符。占位符中的表达式和周围的文本会一起传递给一个默认函数，该函数负责将所有的部分连接起来，如果一个模板字符串由表达式开头，则该字符串被称为带标签的模板字符串，该表达式通常是一个函数，它会在模板字符串处理后被调用，在输出最终结果前，你都可以通过该函数来对模板字符串进行操作处理。在模版字符串内使用反引号（`）时，需要在它前面加转义符（\）。

三.结构化赋值
可以简化书写的长度，提升效率
eg:

var a = 1;
var b = 2;
var c = 3;
//ES6允许写成下面这样。
var [a, b, c] = [1, 2, 3];
//这种写法属于“模式匹配”，只要等号两边的模式相同，左边的变量就会被赋予对应的值。下面是一些使用嵌套数组进行解构的例子。
let [foo, [[bar], baz]] = [1, [[2], 3]];
foo // 1
bar // 2
baz // 3

let [ , , third] = ["foo", "bar", "baz"];
third // "baz"

let [x, , y] = [1, 2, 3];
x // 1
y // 3

let [head, ...tail] = [1, 2, 3, 4];
head // 1
tail // [2, 3, 4]

let [x, y, ...z] = ['a'];
x // "a"
y // undefined
z // []

//如果解构不成功的话值为undefin
var [foo] = [];
var [bar, foo] = [1];
//foo值为undefin

…运算符
写 收集
运用在数组中，函数中 object是ES7新增的
eg:

//扩展运算符（ spread ）是三个点（...）。它好比 rest 参数的逆运算，将一个数组转为用逗号分隔的参数序列。
 console.log(...[1,2,3]); // 1 2 3 2 console.log(1,...[1,2,3],5); // 1 1 2 3 5 
 
 //扩展运算符提供了数组合并的新写法。
  var arr1 = [0,1,2];
 var arr2 = [3,4,5]; 
  arr1.push(...arr2); // [0,1,2,3,4,5]
console.log(arr1);

var arr4 = ['a','b'];
    var arr5 = ['c'];
  var arr6 = ['d','e'];
   // es5合并数组
   arr4.concat(arr5,arr6);
   // es6合并数组
   var newArr = [...arr4,...arr5,...arr6];
  console.log(newArr);
  
//求数组的的最大值
 console.log(Math.max(...[14,2,7])); // 14 
 
//如果将扩展运算符用于数组赋值，只能放在参数的最后一位，否则会报错
const [first,...rest] = [1,2,3,4,5];
  console.log(first); // 1
  console.log(rest); // [2,3,4,5]

 // 如果将扩展运算符用于数组赋值，只能放在参数的最后一位，否则会报错。
  const [f,...r] = [];
   console.log(f,r); // undfined,[]
   
  const [f1,...r1] = ["foo"];
    console.log(f1,r1); // foo,[]

函数的真正用途
1.普通函数 纯小写
2.构造函数 大驼峰命名 首字母大写
3.新增 new.target 构造函数必须使用new来进行调用
1()new.target的作用
限制类的调用方法，判断new.target是不是未定义和写出只能被继承使用的类
eg:

class Shape {
 constructor() {
  if (new.target === Shape) {
   throw new Error('本类不能实例化');
  }
 }
}
 
class Rectangle extends Shape {//继承
 constructor(length, width) {
  super();
  // ...
 }
}
 
var x = new Shape(); // 报错
var y = new Rectangle(3, 4); // 正确

箭头函数
语法：箭头函数是一个函数表达式，理论上，任何使用函数表达式的地方都可以改成箭头函数
(参数1,参数2…) => {
函数体
}

//在ES5中我们实现一个求和的函数：
var sum = function(x, y) {
    return x + y
}
//es6:
var sum = (x, y) => {
    return x + y
}
//函数体只有一条返回语句时， 我们可以省略括号{}和return关键词：
var sum = (x, y) => x + y
// ES5
var array = ['1', '2345', '567', '89'];
array = array.filter(function (item) {
    return item.length > 2;
});
// ["2345", "567"]
// ES6
let array = ['1', '2345', '567', '89'];
array = array.filter(item => item.length > 2); 
// ["2345", "567"]

箭头函数中的 this
箭头函数内的this值继承自外围作用域。运行时它会首先到它的父作用域找，如果父作用域还是箭头函数，那么接着向上找，直到找到我们要的this指向。
eg:经典面试题

// var name = 'leo';
// var teacher = {
//     name: "lilei",
//     showName: function () {
//     let showTest = ()=>alert(this.name);
//     showTest();
//     }
// };
// teacher.showName();//lilei

	 var name = 'leo';
	 var teacher = {
	 name: "lilei",
	 showName: function () {
	  function showTest() {
	     alert(this.name);
	    }
	     showTest();
	  }
	};
	teacher.showName()//leo

对象
ES6允许直接写入变量和函数，作为对象的属性和方法
eg:

var foo = 'bar';
var baz = {foo};
baz // {foo: "bar"}

// 等同于
var baz = {foo: foo};

//ES6允许在对象之中，直接写变量。这时，属性名为变量名, 属性值为变量的值
function f(x, y) {
  return {x, y};
}

// 等同于

function f(x, y) {
  return {x: x, y: y};
}
f(1, 2) // Object {x: 1, y: 2}
//方法也可以简写
var o = {
  method() {
    return "Hello!";
  }
};

// 等同于

var o = {
  method: function() {
    return "Hello!";
  }
};
//综合实际举例:
var birth = '2000/01/01';
var Person = {
  name: '张三',
  //等同于birth: birth
  birth,
  // 等同于hello: function ()...
  hello() { console.log('我的名字是', this.name); }

};

新增了API:
eg:

//1.is()     ===
Object.is('foo', 'foo')
// true
Object.is({}, {})
// false

//2.assign()  用于混合对象，带浅克隆
var obj1 = {a: {b: 1}};
var obj2 = Object.assign({}, obj1);
obj1.a.b = 2;
obj2.a.b // 2

//3..getOwnPropertyNames()返回一个数组，包含对象自身的所有属性
//4.setPrototypeOf()  等价于==