1. 程式人生 > >ES5&ES6新特性

ES5&ES6新特性

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、模組化

模組化就是把程式碼進行拆分,方便重複利用 、模組功能主要由兩個命令構成:exportimport

  • 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,則返回該元素