開發環境搭建
-
安裝babel-cli、babel-preset-env
-
根目錄下配置.babelrc
{ "presets": ["env"] } 複製程式碼 -
轉換
babel xx.js -o xx.js 複製程式碼
當然我們也可以藉助webpack、gulp來實現轉換
let、const
let關鍵字提供了除var以外另一種變數宣告方式，可以將變數繫結到所在的任意作用域中(通常是{...}內部)，換句話說，let為其宣告的變數隱式地劫持了所在的塊級作用域。
{
let bar = 2
}
console.log(bar) //ReferenceError
複製程式碼let進行的宣告不會在作用域中進行提升
{
console.log(bar) //ReferenceError
let bar = 2
}
複製程式碼let不允許重複命名
let bar = 2
let bar = 3 // error
複製程式碼let迴圈
for (let i=0; i<3; i++) {
console.log(i)
}
console.log(i) // ReferenceError
/*let不僅將i繫結到for迴圈塊中，並重新繫結到迴圈的每一迭代中，確保上一個迴圈迭代結束時的值重新賦值*/
複製程式碼const 同樣可以建立塊級作用域，但是之後任何試圖修改的操作都會報錯
const bar = 2
bar = 4 // ReferenceError
複製程式碼變數的解構賦值（模式匹配）
陣列：元素按次序排列，變數取值由位置決定
let [a, b, c] = [1, 2, 3] // a-1, b-2, c-3
let [a, ...b] = [1, 2, 3] // a-1, b-[2, 3]
複製程式碼物件：變數名必須和屬性名相同
let {foo, bar} = {foo: 1, bar: 2} // foo-1, bar-2
複製程式碼字串
const [a, b, c, d, e] = 'devin' // a-d, b-e, c-v, d-i, e-n
let {length: len} = 'devin' // len-5 length屬性
複製程式碼函式
function foo([x, y]) { do sth }
foo([1, 2])
複製程式碼擴充套件運算子和rest運算子
擴充套件運算子
let arr1 = [1, 2, 3]
let arr2 = [...arr1]
console.log(arr2) // [1, 2, 3]
let {x, y, ...z} = {x: 1, y: 2, a: 3, b: 4} // x-1, y-2, z-{a: 3, b: 4}
複製程式碼rest運算子
function foo (...arg) {
console.log(arg.length)
}
foo(1, 2, 3) // 3
複製程式碼字串擴充套件
模版字串
const name = 'welllee'
console.log(`hello ${name}, how r u ?`) // hello welllee, how r u ?
複製程式碼字串遍歷
const name = 'welllee'
for (let item of name) {console.log(item)} // w e l l l e e
// 補充for...of
1.區別於forEach(),可以正確響應return, break, continue
2.遍歷map, set物件（需解構）
for (let [key, value] of xxx) {console.log(key, value)}
3.不支援普通物件（使用Object.keys()）
for (let key of Object.keys(xxx)) {
console.log(key, xxx[key])
}
複製程式碼at
'welllee'.at(1) // e 類似charAt()
複製程式碼includes 查詢字串
'welllee'.includes('w') // true 類似indexOf()
複製程式碼startsWith & endsWith 開頭&結尾是否存在xxx
'welllee'.startsWith('w') // true
'welllee'.endsWith('e') // true
複製程式碼repeat 複製字串
'welllee'.repeat(2) // wellleewellee
複製程式碼數值的擴充套件
Number.isFinite() 數字驗證
Number.isNaN() NaN驗證
Number.parseInt() 整型轉換
Number.parseFloat() 浮點型轉換
Number.isInteger() 數值是否為整數
Math.trunc() 去除小數部分，返回整數部分
Math.sign() 判斷一個數是整數，負數，還是0。正數返回+1,負數返回-1，0返回0， -0返回-0，其他返回NaN
陣列的擴充套件
Array.from() 將偽陣列轉為陣列
還可以用[].slice.call()
複製程式碼Array.of() 將一組值專為陣列
Array.of(1, 2, 3) // [1, 2, 3]
複製程式碼find() 找出陣列中的成員
[1, 2, 3].find((value, index, array) => {
return value > 1
}) // 2
找到後就return,停止查詢
複製程式碼fill(value, start, end) 使用給定值填充陣列
[1, 2, 3].fill('a', 1, 2) // [1, 'a', 3]
複製程式碼entries()鍵值對遍歷、keys()鍵名遍歷、 values()鍵值遍歷
for (let [index, elem] of ['a', 'b'].entries()) {
console.log(index, elem) // 0 'a', 1 'b'
}
for (let index of ['a', 'b'].keys()) {
console.log(index) // 0, 1
}
for (let elem of ['a', 'b'].values()) {
console.log(elem) // 'a', 'b'
}
複製程式碼陣列的空位
forEach(), filter(), every() 和some()都會跳過空位
map()會跳過空位，但會保留這個值
join()和toString()會將空位視為undefined，而undefined和null會被處理成空字串
複製程式碼函式的擴充套件
預設引數
function foo (a, b = 1) {
return a + b
}
foo(1) // 2
複製程式碼擴充套件運算子和rest運算子(上文已提及)
主動丟擲錯誤
{
throw new Error('出錯啦～')
}
複製程式碼嚴格模式
'use strict'
在嚴格模式下使用預設引數會報錯
複製程式碼獲取需要傳遞引數的個數
function foo (a, b) {do sth}
foo.length // 2
複製程式碼箭頭函式
const foo = (a, b) => a + b
foo (1, 2) // 3
（1）函式體內的this物件，就是定義時所在的物件，而不是使用時所在的物件。
（2）不可以當作建構函式，也就是說，不可以使用new命令，否則會丟擲一個錯誤。
（3）不可以使用arguments物件，該物件在函式體內不存在。如果要用，可以用Rest引數代替。
（4）不可以使用yield命令，因此箭頭函式不能用作Generator函式。
複製程式碼物件的擴充套件
Object.is(val1, val2) 比較兩個值是否相等
let a = {xx: 1}
let b = {xx: 1}
console.log(Object.is(a.xx, b.xx)) // true
複製程式碼Object.assign() 物件的合併，實行的是淺拷貝
let a = {xx: 1}
let b = Object.assign({}, a)
console.log(b) // {xx: 1}
複製程式碼Object.keys() object.values() object.entries()
參考上文陣列的遍歷
複製程式碼set & map
set類似於陣列，但是成員的值都是唯一的，可以用來陣列去重，set本身是一個建構函式，用來生產set資料結構。
陣列去重複
const item =new Set([1,2,3,3])
console.log([...item]) // [1,2,3]
複製程式碼set屬性：
Set.prototype.constructor
Set.prototype.size
複製程式碼set方法:
add() delete() has() clear()
複製程式碼遍歷：
keys() values() entries()
複製程式碼map類似於物件，也是鍵值對的集合，但是“鍵”的範圍不限於字串，各種型別的值（包括物件）都可以當作鍵。
可以使用擴充套件運算子（...）將Map轉換為陣列，反過來，將陣列傳入 Map 建構函式，就可以轉為 Map了。
map方法：
set(key,value)
get(key)
delete(key)
has(key)
clear()
複製程式碼遍歷:
keys() values() entries() forEach()
複製程式碼symbol
1.symbol可以用symbol函式生成，可以作為物件的屬性名使用，保證不會與其他屬性重名
let a = Symbol()
let b = Symbol()
let obj = {
[a] : 'no 1'
}
obj[b] = 'no 2'
複製程式碼2.symbol函式可以接受一個字串作為引數
let s = Symbol('a')
let q = Symbol('a')
console.log(s === q) // false
複製程式碼3.symbol值不能與其他型別的值進行運算，但是可以轉為bool值
4.symbol作為屬性名,不會被for-in,for-of遍歷得到，不會被 object.keys(),json.stringify() object.getOwnPropertyNames()返回，但是可以通過object.getOwnPropertySymbols()方法獲取物件的所有symbol 屬性名
類
class People {
constructor (name) { //建構函式
this.name = name
}
say () { //方法
console.log('xxx')
}
}
繼承
class Student extends People {
constructor () {
}
}
複製程式碼promise
一個容器，儲存著未來才會結束的事件
promise建構函式接受一個函式作為引數，該函式的兩個引數(resolve,reject)也是函式
resolve 將promise物件狀態從未完成到成功，reject將promise物件狀態從未完成到失敗
function test (val) {
return new Promise(function (resolve, reject) {
if (條件) {
resolve(結果)
} else {
reject(錯誤)
}
})
}
test('xxx').then(res => {
//
})
複製程式碼generator
由function*來定義，除了return 語句，還可以用yield返回多次
直接呼叫generator僅僅是建立了一個generator物件，並沒有去執行它
執行它有2個方法：
-
不斷的呼叫next()，每次遇到yield就返回一個物件{value:,done:true/false},當done的值是true就是返回return的值
-
for....of迴圈迭代generator物件的方法
function* fib(max) { var t, a=0, b=1, n=1; while (n < max) { yield a; t = a +b; a = b; b =t; n ++; } return a; } for (let x of fib(5)) { console.log(x) // 0, 1, 1, 2, 3 } 複製程式碼
用Proxy進行預處理
var target = {
name: 'xxx'
};
var handler = {
get: function(target, key) {
console.log(`${key} 被讀取`);
return target[key];
},
set: function(target, key, value) {
console.log(`${key} 被設定為 ${value}`);
target[key] = value;
}
}
var aaa = new Proxy(target, handler)
aaa.name // name被讀取 'xxx'
aaa.name = 'welllee' // name被設定為welllee 'welllee'
補充：vuejs 資料雙向繫結原理
複製程式碼嚴格模式
變數必須宣告後再使用
函式的引數不能有同名屬性，否則報錯
不能使用with語句
不能對只讀屬性賦值，否則報錯
不能使用字首0表示八進位制數，否則報錯
不能刪除不可刪除的屬性，否則報錯
不能刪除變數delete prop，會報錯，只能刪除屬性delete global[prop]
eval不會在它的外層作用域引入變數
eval和arguments不能被重新賦值
arguments不會自動反映函式引數的變化
不能使用arguments.callee
不能使用arguments.caller
禁止this指向全域性物件
不能使用fn.caller和fn.arguments獲取函式呼叫的堆疊
增加了保留字（比如protected、static和interface）