1. 程式人生 > >es6知識總結

es6知識總結

默認 新聲 onf 個數 cit app 靜態方法 初始化 des

學習地址:http://web.jobbole.com/86441/
http://www.cnblogs.com/Wayou/p/es6_new_features.html
視頻地址:http://study.163.com/course/courseLearn.htm?courseId=1003938030#/learn/video?lessonId=1048001010&courseId=1003938030
http://study.163.com/course/courseMain.htm?courseId=1003606097

在網頁上使用
用法一:<script src=‘traceur.js‘></script>
<script src=‘bootstrap.js‘></script>
<script type=‘module‘></script>
用法二:在線編譯(用於測試)
http://babeljs.cn/repl/
用法三:直接在Node裏使用
直接用 需要添加‘use strict‘
node --harmony_destructuring xxx.js

1.聲明變量(let/const)
var:函數作用域

let:塊級作用域 以{}代碼塊作為作用域範圍 只能在代碼塊裏面使用
不存在變量提升: 先聲明後使用,否則報錯
暫時性死區:總之,在代碼塊內,使用let命令聲明變量之前,該變量都是不可用的。這在語法上,稱為“暫時性死區”(temporal dead zone,簡稱 TDZ)。
不允許重復聲明:不允許在相同作用域內,重復聲明同一個變量,不能在函數內部重新聲明參數
其實就是匿名函數立即調用相當於(function(i){})(i)

const:聲明一個只讀的常量。一旦聲明,常量的值就不能改變,必須立即初始化
如果嘗試修改變量或者沒有立即給變量賦值
但是對象內部的鍵值對可以改變

2.template string 模版字符串
反單引號``結合${xxxxx}

3.函數擴展
函數參數的默認值
傳統的:b=b||8
es6:function(a,b=8){}

箭頭函數(相當於匿名函數,並且簡化了函數的定義)
//只有一個返回值
var 函數名=(接收參數)=>返回值; 例如:var show=(a,b=7)=>a+b;
//有多行代碼
var 函數名=(接收參數)=>{
xxxxxxx
return 返回值
};
例如:var show=(a,b=7)=>{
console.log(‘我是其它的內容‘);
return a+b
}
arguments不能使用

箭頭函數中的this(始終指向箭頭函數定義時的this 最近的一個函數 如果沒有最近的函數就指向window)

箭頭函數的縮寫
對象單體模式:var name=‘李可馨‘;
var obj={
name,
showname(){}
}

4.對象擴展
對象的簡寫
屬性:鍵值相同的話可以只寫鍵名 a:a寫成a
方法:把:function去掉;例如:b:function(){} 寫成 b(){}

Object.keys(對象):獲取對象的所有鍵名
添加在對象的構造函數上

Object.assign(合並的對象,被合並的對象):合並對象
原始合並之前的對象也保留著

Object.defineProperty(對象,要添加的屬性,{
value:‘屬性的值‘,
writable:true/false,默認false(屬性值能不能重寫,false的話為只讀),
configurable:總開關,默認false,就不能再設置他的value writable configurable,
enumerable:是否能在for in 循環遍歷出來或者在Object.keys()出列舉出來,默認為false(讀取不到),
get:訪問器,
set:訪問器(用了訪問器前面的東西都不生效)
例如:Object.defineProperty(data,‘b‘,{
set(newValue){
console.log(newValue)
},
get(){
return 5
}
})
}):雙向數據綁定

5.類 Class(傳統的是面向對象的構造函數)
傳統構造函數:this.xxx=xxx;
es6構造函數: constructor:屬性 方法:直接寫外面
例如:constructor(name=默認值,sex){
this.name=name;
this.sex=sex
}
showName(){
alert(this.name)
}
傳統繼承:call(對象,參數1,參數2)或者apply(對象,[參數1,參數2]/arguments)
子類.prototype=new 父類()

es6繼承:extends + super(繼承的屬性1,屬性2)

靜態方法:static(不能被實例繼承,直接通過類來調用)

6.解構賦值(傳統賦值用=)
數組解構:
數組:let [a,b,c]=[1,2,3]
嵌套數組解構:let [a,[b,c],d]=[1,[2,3],4](可用空位填充)
默認值:let [a,[b,c],d=5]=[1,[2,3],4](若有值,可替代默認值)

對象解構:(跟順序無關)
let obj={
name:‘李可馨‘,
sex:‘女‘
}
//給變量重新起名
let {name:uname,sex:usex}=obj;
//如果鍵值對相同
let {name:name,sex:sex}=obj;可寫為let {name,sex}=obj或者({name,sex}=obj)可以重復定義賦值;
例如: var obj={a:1,b:2}
let a=0;
console.log(a)//0
({a,b}=obj)
console.log(a)//1

//結構對象中的數組
例如: var obj={
arr:[
‘go‘,
{
a:1
}
]
}
let {arr:[greet,{a}]}=obj;
//對象中自帶的方法
let {floor,pow}=Math;
console.log(floor(1.9))

字符串解構:
let [a,b,c]=‘李可馨‘
//獲取字符串的長度(字符串原生的屬性)
let {length}=‘yo.‘ console.log(length)//3

函數參數的解構
傳參數 function({a}){console.log(a)}
例如:
//對象(沒順序)
function show({a=默認值,b,c}){
console.log(a)
}
show({
//鍵名跟參數值能對上就行 不需要按著順序
b:2,
a:1,
c:3
})
//數組(有順序)
var arr=[1,2]
function show([a,b]){
console.log(a)
console.log(b)
}
show(arr)

7.babel(es6轉化成es5 兼容瀏覽器)
在線編譯:主要用於測試 http://babeljs.cn/repl/
安裝:npm install --save-dev babel-cli或者npm install cnpm;cnpm install babel-cli --save-dev
設定轉碼規則:npm install --save-dev babel-preset-es2015
配置.babelrc文件{
‘presets‘:[‘es2015‘]
}
轉化成es5:在package.json中配置 ‘scripts‘:{
‘bulid‘:bable index.js
}
打開終端:npm run bulid就轉化成了es5
通過--out-file或者-o生成新的es5文件(‘bulid‘:bable index.js --out-file demo.js)

8.vue-cli腳手架
安裝:npm install -g vue-cli
vue list可判斷有麽有安裝成功
vue init webpack 項目名稱

9.模塊 import export
export不能導出值 會報錯 export 1報錯 var m=1;export m也會報錯
正確的:export var m=1或者var m=1;export {m}
as:取別名 export {m as n} import {n}
export default function(){} import xxx(任意名)

10.字符串的新增方法
判斷字符串中是否有某一個字符: str.includes(‘包含的字符‘);
判斷字符串中是否以某一個字符開頭:str.startWith(‘字符‘);
判斷字符串中是否以某一個字符結束:str.endWith(‘字符‘);
把一個字符串重復多少次: str.repeat(‘重復次數‘);

11.新的數據類型(原始的undefined,null,boolean,string,number,object)Symbol
每創建一個值都是不同的 防止對象的屬性被重寫 防止下遊更改上遊的屬性
let a=Symbol(‘this is symbol‘);//傳描述對值無影響
可以臨時的重寫 不能更改全局的屬性

12.proxy:代理 對照4的Object.defineProperty來學習
var user=new Proxy({原對象obj},{
get:function(obj,prop){
/*if(prop==‘fullname‘){
return obj.fname+‘ ‘+obj.lname
}*/
switch (prop){
case ‘fullname‘:
return obj.fname+‘ ‘+obj.lname
}
},
set:function(obj,prop){

}
})
user.fname=‘bob‘;
user.lname=‘wood‘;
console.log(user.fullname)

13.set 數據結構
每一個值都是唯一的 如果傳入了相同的值 只取一個(數組去重)
var s=new set([1,2,3,4]);
s.size;//長度
s.add(5);//添加一個值
s.delete(3);//刪除一個值
s.has(5);//是否擁有哪個值
s.clear();//清空所有的值

14.數組
復制數組:傳統:for循環賦值
es6:var arr1=Array.form(arr)
var arr1=[...arr]//超引用

...:可以傳參
function(...args){
console.log(args)//是一個數組 可以直接用push 若不用... arguements是一個類數組不能用數組的方法
}

for of循環 (值):遍歷(叠代)整個對象 表現類似for in (索引)
可以循環數組不能循環json 真正目的是為了循環map對象
循環數組只循環值: for(var value of arr)不支持arr.values()
只循環索引: for(var value of arr.keys())
循環值跟索引: for(var value of arr.entries())

map對象:跟json相似 也是key-value的形式 為了和for of配合生成的
var map=new Map();
//設置
map.set(name,value);
//獲取
map.get(name);
//刪除
map.delete(name);
遍歷map不能使用for in 無效 用for of循環出來格式為name,value鍵值都有
for(var [key,value] of map){console.log(key,value)}或者
for(var name of map){console.log(key,value)}本質是循環map.entries整體
//只循環key map.keys()
//只循壞value map.values()

15.promise
就是一個對象,用來傳遞異步操作的數據(消息)
狀態:pending(等待/處理中) Resolve/fullFilled(成功、完成) Rejected(失敗、拒絕)
var fn=new Promise(function(resolve,reject){
if(異步處理成功了){
resolve(成功數據)
}else{
reject(失敗原因)
}
})

方法: then :接收數據 fn.then(function(value){成功(resolve)},function(value){失敗(reject)}).then()返回的也是一個promise對象 鏈式調用;
catch: 捕獲錯誤 fn.catch();跟throw結合使用
all: 將多個Promise對象組合包裝成一個全新的promise對象 Promise.all([p,p1,true]).then() 如果所有的promise對象都正確才走成功 只要有一個錯誤就失敗了;
race: 返回的也是一個對象 返回的最先能執行的promise結果 哪個最快就用哪個; Promise.race([p1,p2]).then();
reject: 生成錯誤的promise對象 Promise.reject();
resolve: 生成成功的promise對象
Promise.resolve(value);
Promise.resolve(promise);

結合ajax使用:
let p=new Promise(function(resolve,reject){
ajax(‘1.txt‘,funcition(str){
resolve(str)
},function(err){
reject(err)
})
})
p.then(function(str){},function(err){})

16.Generrator 生成器
是一個函數(狀態機) 狀態可以遍歷
function* show(){
yield xxx
}
函數前面有*號 函數內部用的是yield語句

返回值有next()方法 返回{value:yield後面的值,done:布爾值(是否遍歷完畢)} next也可以帶參數 參數就是給上一個yield賦值

yield語句本身沒有返回值,或者每次返回undefined

for of也可以循環Generrator函數 只能循環yiled語句 不能循環return語句

Generrator如果放在對象中 var obj={*show(){yield}}

es6知識總結