ES5和6的一些新特性

1、let和const

var有一個問題，就是定義的變數有時會莫名奇妙的成為全域性變數。 

for(var i = 0; i < 5; i++){
    console.log(i);
}
console.log("迴圈外：" + i)

1、let所宣告的變數，只在let命令所在的程式碼塊內有效。
2、const宣告的變數是常量，不能被修改

 會報錯：

for(let i = 0; i < 5; i++){
    console.log(i);
}
console.log("迴圈外：" + i)

2、字串擴充套件

ES6為字串擴充套件了幾個新的API：

- includes()：返回布林值，表示是否找到了引數字串。
- startsWith()：返回布林值，表示引數字串是否在原字串的頭部。
- endsWith()：返回布林值，表示引數字串是否在原字串的尾部。

3、解構表示式

陣列解構:

let arr = [1,2,3]
const [x,y,z] = arr;// x，y，z將與arr中的每個位置對應來取值
// 然後列印
console.log(x,y,z);

物件解構：

const person = {
    name:"jack",
    age:21,
    language: ['java','js','css']
}

// 解構表示式獲取值
const {name,age,language} = person;
// 列印
console.log(name);
console.log(age);
console.log(language);
 

4、函式優化

現在的寫法： 

function add(a=2 , b = 1) {
    return a + b;
}
// 傳一個引數
console.log(add(10));

箭頭函式：

一個引數：

let print = function (obj) {
    console.log(obj);
}
// 簡寫為：
let print2 = obj => console.log(obj);

多個引數：

// 兩個引數的情況：
var sum = function (a , b) {
    return a + b;
}
// 簡寫為：
var sum2 = (a,b) => a+b;
 

程式碼不止一行，可以用{}括起來

var sum3 = (a,b) => {
    return a + b;
}

物件的函式屬性簡寫、person物件、有eat方法

let person = {
    name: "jack",
    // 以前：
    eat: function (food) {
        console.log(this.name + "在吃" + food);
    },
    // 箭頭函式版：
    eat2: food => console.log(person.name + "在吃" + food),// 這裡拿不到this
    // 簡寫版：
    eat3(food){
        console.log(this.name + "在吃" + food);
    }
}

箭頭函索結合解構表示式：

const person = {
    name:"jack",
    age:21,
    language: ['java','js','css']
}

function hello(person) {
    console.log("hello," + person.name)
}

或寫成
var  hi = ({name}) => console.log("hello,"+ name);

5、map和reduce

map()：接收一個函式，將原陣列中的所有元素用這個函式處理後放入新陣列返回。

reduce()：接收一個函式（必須）和一個初始值（可選），該函式接收兩個引數：

- 第一個引數是上一次reduce處理的結果
- 第二個引數是陣列中要處理的下一個元素

轉為int陣列
let arr = ['1','20','-5','3'];
console.log(arr)

arr = arr.map(s => parseInt(s));

console.log(arr)

const arr = [1,2,-3,3];
arr.reduce((a,b)=> a+b)
顯示：3

6、promise

所謂Promise，簡單說就是一個容器，裡面儲存著某個未來才會結束的事件（通常是一個非同步操作）的結果。

7、set和map

Set，本質與陣列類似。不同在於Set中只能儲存不同元素，如果元素相同會被忽略。

map，本質是與Object類似的結構。不同在於，Object強制規定key只能是字串。而Map結構的key可以是任意物件。即：

• object是 <string,object>集合

• map是<object,object>集合

• // map接收一個數組，陣列中的元素是鍵值對陣列
  const map = new Map([
      ['key1','value1'],
      ['key2','value2'],
  ])
  // 或者接收一個set
  const set = new Set([
      ['key1','value1'],
      ['key2','value2'],
  ])
  const map2 = new Map(set)
  // 或者其它map
  const map3 = new Map(map);

  8、模組化

模組化就是把程式碼進行拆分，方便重複利用 、模組功能主要由兩個命令構成：export和import。

• export命令用於規定模組的對外介面，

• import命令用於匯入其他模組提供的功能。

定義一個物件：

const util = {
    sum(a,b){
        return a + b;
    }
}

使用export將這個物件匯出：

const util = {
    sum(a,b){
        return a + b;
    }
}
export util;

可簡寫：
export const util = {
    sum(a,b){
        return a + b;
    }
}

匯出多個值時

var name = "jack"
var age = 21
export {name,age}

可簡寫
// 無需宣告物件的名字
export default {
	sum(a,b){
        return a + b;
    }
}

匯入上面的util

// 匯入util
import util from 'hello.js'
// 呼叫util中的屬性
util.sum(1,2)

導放name和age屬性

import {name, age} from 'user.js'

console.log(name + " , 今年"+ age +"歲了")

9、物件擴充套件

- keys(obj)：獲取物件的所有key形成的陣列
- values(obj)：獲取物件的所有value形成的陣列

10、陣列擴充套件

find(callback)：把陣列中的元素逐個傳遞給函式callback執行，如果返回true，則返回該元素