一.ES6的新增
- 新增了canvas 繪畫視圖
- 新增了定義class的語法糖
- 函式的新增了箭頭函式、函式引數的默認值
- 陣列實體新增了 keys()，values()，entries()
- 新增了基本資料型別(symbol)
- 變數的解構賦值
- 新增了Map資料結構 和 Set資料結構
- 新增了模塊化(import/export)
- 陣列和物件新增了擴展運算子
- 陣列新增了一些API介面 例如 api/app
- 新增了generator(生產器) 和 iterator(遍歷器)
- 塊級作用域(let,const)
- Object.assign()
- 新增了模板字串
二.常用的es6方法
1. 箭頭函式，函式引數的默認值
let arr=[1,2,3,4,5,6,7,8,9,10]
arr.forEach((i,k)=>{
console.log('箭頭函式')
})
function log(x,y=10)=>{ //默認值 沒有傳遞引數的時候使用默認值 如果傳遞引數就使用傳遞的引數
console.log(x,y)
}
log(5)
2.解構賦值
- 陣列方式
let [a,b,c] = [1,2,3] //a=1,b=2,c=3
let [a,b,c] = [1,2] //a=1,b=2,c=undefined
let [a,b,c] = [1,2,3,4,5,6,7] // a=1,b=2,c=3
let [a,b,[c]] = [1,2,3,4,5,6,7] // a=1,b=2,c=3
let [a,b,[...c]] = [1,2,3,4,5,6,7] // a=1,b=2,c=[3,4,5,6,7]
let [a,b,c=7] = [1,2] // a=1,b=2,c=7 沒有賦值就使用默認值
- 物件方式
let {a:a,b:b} = {a:10,b:30} // a=10,b=30
let {a:a,b:b} = {b:10,a:30} // a=30,b=10
let {a,b} = {a:10,b:30} // a=10,b=30
let {a:c,b:d} = {a:10,b:30} // a=10,b=30
let {c,d} = {a:10,b:30} //c=undefined,d=undefined
- 物件的嵌套使用
let obj={p:['hello',{x:'world'}]}
let {p:[a,{x:b}]} = obj
let {p:[a,{x}]} = obj
console.log(a,b) //a=hello b=world
console.log(x) //x=world
let obj={p:['hello',{x:'world'}]}
let {p:[a,{b}]} = obj
console.log(b) //undefined
- 默認值
let {a:y=20} ={b:10}
console.log(y) //20
let {a:y=20} ={b:10,a=11}
console.log(y) //11
var {foo: {bar}} = {baz: 'baz'};
foo //報錯
- 字串方式
let [a,b,c,d,e] = 'hello'
console.log(a,b,c) // h e l
let [a,b,[...c]] = 'hello'
console.log(a,b,c) // h e [llo]
3.塊級作用域(let,const)
-
什么是let呢？
let和var差不多，都是用來宣告變數的，區別就在于：
1、 let宣告的變數只在所處于的塊級有效；
2、 let沒有‘變數提升’的特性，而是‘暫時性死區（temporal dead zone）特性， -
let宣告的變數只在所處于的塊級有效；
'use strict';
function func(args){
if(true){
//let宣告i
let i = 6;
//在if內列印i值
console.log('inside: ' + i);
}
//在if外，再次列印i值
console.log('outside: ' + i);
};
func();
- let沒有‘變數提升’的特性，而是‘暫時性死區（temporal dead zone）特性，
'use strict';
function func(){
//在let宣告前，列印i
console.log(i);
let i;
};
func();
const命令：
- const命令與let命令一樣，宣告的變數，其作用域都是塊級，
所以const遵循的規則與let相差無二，只是，const是用來宣告恒定變數的，
且，用const宣告恒定變數，宣告的同時就必須賦值，否則會報錯，
'use strict';
function func(){
const PI;
PI = 3.14;
console.log(PI);
};
func();
轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/212475.html
標籤：其他
上一篇：webpack + vuecli多頁面打包基于（vue-template-admin）修改
下一篇：18個圖片視頻音頻素材網站