ES5&ES6新特性
阿新 • • 發佈:2018-12-11
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,則返回該元素