一、let和const申明變量和常量：
//作用域只限於當前代碼塊
//使用let申明的變量作用域不會提升
//在相同的作用域下不能申明相同的變量
//for循環體現let的父子作用域
如下示例可以看出let的優勢：
<button>按鈕一</button> <button>按鈕二</button> <button>按鈕三</button>
<script>
window.onload = function(){ const buttons = document.getElementsByTagName("button"); for(var i = 0; i<buttons.length; i++){ (function(i){ buttons[i].onclick = function(){ alert(i); } })(i); } } </script> window.onload = function(){ const buttons = document.getElementsByTagName("button"); for(let i = 0; i<buttons.length; i++){ buttons[i].onclick = function(){ alert(i); } } }二、es6的解構賦值：一一對應
數組：
let [name, age, sex] = ["Samve", 30, "men"];
console.log(name);
console.log(age);
console.log(sex);
對象：
let {name, age, sex} = {name: "張三" , age: 30, sex: "men"};
console.log(name);
console.log(age);
console.log(sex);
字符：
let [a, b, c, d, e] = "我是中國人！";
console.log(a);
console.log(b);
console.log(c);
console.log(d);
console.log(e);
三、Spread Operator 展開運算符：
ES6中另外一個好玩的特性就是Spread Operator 也是三個點兒...接下來就展示一下它的用途。
組裝對象或者數組
//數組 const color = ['red', 'yellow'] const colorful = [...color, 'green', 'pink'] console.log(colorful) //[red, yellow, green, pink] //對象 const alp = { fist: 'a', second: 'b'} const alphabets = { ...alp, third: 'c' } console.log(alphabets) //{ "fist": "a", "second": "b", "third": "c" }有時候我們想獲取數組或者對象除了前幾項或者除了某幾項的其他項
//數組 const number = [1,2,3,4,5] const [first, ...rest] = number console.log(rest) //2,3,4,5 //對象 const user = { username: 'lux', gender: 'female', age: 19, address: 'peking' } const { username, ...rest } = user console.log(rest) //{"address": "peking", "age": 19, "gender": "female" }對於 Object 而言，還可以用於組合成新的 Object 。(ES2017 stage-2 proposal) 當然如果有重復的屬性名，右邊覆蓋左邊
const first = { a: 1, b: 2, c: 6, } const second = { c: 3, d: 4 } const total = { ...first, ...second } console.log(total) // { a: 1, b: 2, c: 3, d: 4 }四、面向對象Class：
構造函數的另一種寫法，作用在於對象原型的寫法更加清晰，更加面向對象的編程方式
//1、構造函數 function Person(name, age){ this.name = name; this.age = age; } Person.prototype = { constructor: Person, print(){ console.log("我叫：" + this.name + ",今年：" + this.age + "!"); } }; let person = new Person("張三", 19); console.log(person); //2、通過Class面向對象 class Person{ constructor(name, age){ this.name = name; this.age = age; } print(){ console.log("我叫：" + this.name + ",今年：" + this.age + "!"); } } let person = new Person("張三", 19); console.log(person); person.print();五、字符串擴展：
1、模板字符串：
let str = '適合敲代碼'; let html = ` <html> <head></head> <body> <p>今天天氣不錯</p> <div>${str}</div> </body> </html> `; console.log(html);2、endsWith()：
3、startsWith()：
4、includes()：
5、repeat()：
六、對象擴展：
1、Object.assign()這個方法來實現淺復制：
Object.assign() 可以把任意多個源對象自身可枚舉的屬性拷貝給目標對象，然后返回目標對象。第一參數即為目標對象。在實際項目中，我們為了不改變源對象。一般會把目標對象傳為{}
const objA = { name: 'cc', age: 18 } const objB = { address: 'beijing' } const objC = {} // 這個為目標對象 const obj = Object.assign(objC, objA, objB) // 我們將 objA objB objC obj 分別輸出看看 console.log(objA) // { name: 'cc', age: 18 } console.log(objB) // { address: 'beijing' } console.log(objC) // { name: 'cc', age: 18, address: 'beijing' } console.log(obj) // { name: 'cc', age: 18, address: 'beijing' } // 是的，目標對象ObjC的值被改變了。 // so，如果objC也是你的一個源對象的話。請在objC前面填在一個目標對象{} Object.assign({}, objC, objA, objB)2、Object.is()：判斷兩個值是否相等
console.log(NaN === NaN); //false console.log(-0 === 0); //true console.log(Object.is(NaN, NaN));//true console.log(Object.is(0, -0));//false3、Object.keys()：
4、Object.values()：
5、Object.entries()：
6、對象中使用變量作為key：
const str = "name"; const obj = { ["my" + str]: "hello" } console.log(obj);七、對象初始化簡寫：
ES5我們對於對象都是以鍵值對的形式書寫，是有可能出現鍵值對重名的。例如：
function people(name, age) { return { name: name, age: age }; }鍵值對重名，ES6可以簡寫如下：
function people(name, age) { return { name, age }; }同樣，key和value一樣的，寫一個就夠了：
let name = "張三"; let age = "李四"; let person = { name, age } console.log(person);ES6 同樣改進了為對象字面量方法賦值的語法。ES5為對象添加方法：
const people = { name: 'lux', getName: function() { console.log(this.name) } }ES6通過省略冒號與 function 關鍵字，將這個語法變得更簡潔
const people = { name: 'lux', getName () { console.log(this.name) } }八、箭頭函數：
箭頭函數最直觀的三個特點。
不需要 function 關鍵字來創建函數
省略 return 關鍵字
繼承當前上下文的 this 關鍵字
this指向的固定化，並不是因為箭頭函數內部有綁定this的機制，實際原因是箭頭函數根本沒有自己的this，導致內部的this就是外層代碼塊的this。正是因為它沒有this，所以也就不能用作構造函數。
//例如： [1,2,3].map(x => x + 1) //等同於： [1,2,3].map((function(x){ return x + 1 }).bind(this))說個小細節。
當你的函數有且僅有一個參數的時候，是可以省略掉括號的。當你函數返回有且僅有一個表達式的時候可以省略{} 和 return；例如:
var people = name => 'hello' + name //參數name就沒有括號作為參考
var people = (name, age) => { const fullName = 'hello' + name return fullName } //如果缺少()或者{}就會報錯九、函數默認參數：
在ES5我們給函數定義參數默認值是怎么樣？
function action(num) { num = num || 200 //當傳入num時，num為傳入的值 //當沒傳入參數時，num即有了默認值200 return num }但細心觀察的同學們肯定會發現，num傳入為0的時候就是false，但是我們實際的需求就是要拿到num = 0，此時num = 200 明顯與我們的實際想要的效果明顯不一樣。
ES6為參數提供了默認值。在定義函數時便初始化了這個參數，以便在參數沒有被傳遞進去時使用。
function action(num = 200) { console.log(num) } action(0) // 0 action() //200 action(300) //300十、import 和 export：
import導入模塊、export導出模塊
//全部導入 import people from './example' //有一種特殊情況，即允許你將整個模塊當作單一對象進行導入 //該模塊的所有導出都會作為對象的屬性存在 import * as example from "./example.js" console.log(example.name) console.log(example.age) console.log(example.getName()) //導入部分 import {name, age} from './example' // 導出默認, 有且只有一個默認 export default App // 部分導出 export class App extend Component {};總結：
1.當用export default people導出時，就用 import people 導入（不帶大括號） 2.一個文件里，有且只能有一個export default。但可以有多個export。 3.當用export name 時，就用import { name }導入（記得帶上大括號） 4.當一個文件里，既有一個export default people, 又有多個export name 或者 export age時，導入就用 import people, { name, age } 5.當一個文件里出現n多個 export 導出很多模塊，導入時除了一個一個導入，也可以用import * as example十一、數組擴展：
使用console.dir(Array)和console.dir(Array.prototype)查看es6中新增的屬性的方法，比較常用的有：
1、Array.from()方法就是將一個類數組對象或者可遍歷對象轉換成一個真正的數組：
那么什么是類數組對象呢？所謂類數組對象，最基本的要求就是具有length屬性的對象。
1）將類數組對象轉換為真正數組：
let arrayLike = { 0: 'tom', 1: '65', 2: '男', 3: ['jane','john','Mary'], 'length': 4 } let arr = Array.from(arrayLike) console.log(arr) // ['tom','65','男',['jane','john','Mary']]那么，如果將上面代碼中length屬性去掉呢？實踐證明，答案會是一個長度為0的空數組。
這里將代碼再改一下，就是具有length屬性，但是對象的屬性名不再是數字類型的，而是其他字符串型的，代碼如下：
let arrayLike = { 'name': 'tom', 'age': '65', 'sex': '男', 'friends': ['jane','john','Mary'], length: 4 } let arr = Array.from(arrayLike) console.log(arr) // [ undefined, undefined, undefined, undefined ]會發現結果是長度為4，元素均為undefined的數組
由此可見，要將一個類數組對象轉換為一個真正的數組，必須具備以下條件：
a、 該類數組對象必須具有length屬性，用於指定數組的長度。如果沒有length屬性，那么轉換后的數組是一個空數組；
b、該類數組對象的屬性名必須為數值型或字符串型的數字。
ps: 該類數組對象的屬性名可以加引號，也可以不加引號。
2）將Set結構的數據轉換為真正的數組：
let arr = [12,45,97,9797,564,134,45642] let set = new Set(arr) console.log(Array.from(set)) // [ 12, 45, 97, 9797, 564, 134, 45642 ]Array.from還可以接受第二個參數，作用類似於數組的map方法，用來對每個元素進行處理，將處理后的值放入返回的數組。如下：
let arr = [12,45,97,9797,564,134,45642] let set = new Set(arr) console.log(Array.from(set, item => item + 1)) // [ 13, 46, 98, 9798, 565, 135, 45643 ]3）將字符串轉換為數組：
let str = 'hello world!'; console.log(Array.from(str)) // ["h", "e", "l", "l", "o", " ", "w", "o", "r", "l", "d", "!"]4）Array.from參數是一個真正的數組：
console.log(Array.from([12,45,47,56,213,4654,154]))像這種情況，Array.from會返回一個一模一樣的新數組。
2、Array.of()：
把一組織轉換成數組。
3、arr.find()與arr.findInex()：
arr.find()：找出第一個符合條件的數組成員，如果沒有找到則返回undefined。
arr.findIndex()：找到位置，沒有則返回-1。
4、.map()：
5、.reduce()：
6、.filter()：
7、forEach()：
8、.copyWithin：
9、every()：
10、some()：
11、map()：
12、filter()：
13、reduce()：
14、reduceRight()：
15、forEach()：
16、find()：
17、findIndex()：
18、includes()：
19、keys()：
20、values()：
21、entries()：