es6常用的方法
1.let/const
let 聲明的變量只在 let 命令所在的代碼塊內有效。
只能聲明一次，否則會報錯，而var能聲明多次
不存在變量提升
const 聲明一個只讀的常量，一旦聲明，常量的值就不能改變。
ps: 應在使用變量之錢聲明變量，否則會出現暫時性死區
2.箭頭函數
es6允許使用箭頭（=>）定義函數
var f = v =>v; //等同於 var f = function(v){ return v; } //參數只有一個時省略括號 var people = nama =>"hello"+name //參數為多個時 var people = (name,age)=>{ const fullName = "h"+name }
箭頭函數相對於普通函數有幾下幾個特點
-
- 沒有arguments參數,取而代之的是rest參數
- 函數體內的this對象，就是定義時所在的對象，而不是使用時所在的對象
- 沒有原型屬性
- 不能使用call,aplly改變指針方向
- 不能作為構造函數，不能使用new
3.字符串
3.1 includes(),startsWith(),endsWith()
- includes()： 返回布爾值，表示是否找到了參數字符串
- startsWith()：返回布爾值 ，表示字符串是否在源字符串的頭部
- endsWith()：返回布爾值 ，表示字符串是否在源字符串的頭部
var s = "helllo world"; s.starsWith("hello")//true s.endsWith("rld")//true s.includes("o")//true /*第二個參數表示開始搜索的位置*/ var s = 'Hello world'; s.startsWith('world', 6) // true s.endsWith('Hello', 5) // true 第二個參數代表截取到前5 個 s.includes('Hello', 6) // false
3.2 repeat()
該方法返回一個新的字符串，講源字符串重復拼接n次
var s = 'a' s.repeat(2)//"aa" s.repeat(3.6)//"aaa" 會向下取整 s.repeat('4')//"aaaa"會將字符串轉換成數字 s.repeat("hh")//''''相當於0次 s.repeat("NAN")//""相當於0次 s.repeat("-1")//報錯
3.3模板字符串
var firstname="meng"; var lastname = "tong"; console.log(`我的名字叫${firstname}${lastname}`） //模板字符串要用反引號，如果在字符串中需要用到反引號，則需要進行轉義
字符串模板還可以在大括號中調用函數等操作。如
${fistname()}//調用函數
${firstname+lastname}//運算
4. 解構
4.1 解構的基本用法
只要左右模式相同，就會被賦對應值
var [a,b,c]=[1,2,3]；//a=1;b=2;c=3 var [a,[b,c],d]=[1,[2,3],4];//a=1,b=2,c=3,d=4
解構賦值可以有默認值，賦值為不嚴格等於undefined時生效
var [a = 1,b] = [,2]//a=1,b=2 var[a = b,b = 3] = [4,undefined]//a=4,b=3
4.1.1對象的解構賦值
對象解構賦值和數組類似，只不過對象需要嚴格按照對象名來對應，因為對象不像數組是有順序的，沒有對應的則解構不成功
var {aa,bb}={aa:'abc',bb=456}//aa="abc",bb=456
4.1.2字符串的解構賦值
字符串類似數組，可以對他的長度進行解構
var {length:len}="nishuosha"//len=9
4.1.2參數的解構賦值
[[1, 2], [3, 4]].map(([a, b]) => a + b);// [ 3, 7 ]
4.1 解構的常用方法
[a,b]=[b,a]//交換變量的值 const { SourceMapConsumer, SourceNode } = require("source-map");//模塊加載 /*返回數組*/ function aa(){ return [a,b,c] } [a,b,c] = aa() /*提取json數據*/ var jsonData = { id: 42, status: "OK", data: [867, 5309 }; let { id, status, data: number } = jsonData;
5. set和map數據結構
5.1 set
set是類似於數組的構造函數，但是成員中沒有重復的值
/*set結構不會填加重復的值 */ var s= new Set(); [1,2,2,2,4,3].map(x=>s.add(x));//s中有1,2,4,3 var set = new Set([1,2,3,3,4]); [...set]//[1,2,3,4]//會自動刪除重復的項
5.2weakset
weakset與set類似，但是與set有兩個區別
1.weakset的成員只能是對象，不能有其他類型的值
2.weakset中的對象都是弱引用，垃圾回收機制不考慮是否被引，無法引用weakset的成員，是不可遍歷的。
5.3map
map是類似於對象，是鍵值對的集合，但鍵不僅可以是字符串，還可以包括對象，除非想抽離出一個現實的類使用object， 如果只是需要key: value的數據結構，使用Map結構。因為Map有內建的遍歷機制。
var map = new Map(); var o = {p:"Hello World" }; map.set(o,'content') map.get(o)//‘content’ map.has(o)//true map.delete(o)//true map.has(o)//false
map的鍵是根據內存地址綁定的，因此值相同的兩個鍵在map解構中可能被視為兩個鍵
5.4WeakMap
weakMap和map類似，唯一的區別是只接受對象作為鍵值，不會被垃圾回收
6 symbol
symbol值是通過symbol函數生成的，所有的symbol的屬性名都是獨一無二的，保證了屬性名不會沖突
let s = symbol(); typeof s //symbol
Symbol函數的參數只是表示對當前Symbol值的描述，因此相同參數的Symbol函數的返回值是不相等的
//沒有參數的情況 var s1 = Symbol(); var s2 = Symbol(); s1===s2//false //有參數的情況 var s1 = Symbol('a'); var s2 = Symbol("a"); s1===s2//false
7 Module
使用import取代require
import {func1,func2} from "moduleA"
使用export取代module.exports
import Vue from "vue"
const A = 2
export default A
8 promise
promise直觀上的優點是解決了函數層層嵌套的坑，變成了垂直編碼，promise對象有以下兩個特點
/*代替層層嵌套*/
func1(value1) .then(func2) .then(func3) .then(func4) .then(func5, value5 => { // Do something with value 5 })
（1）對象的狀態不受外界的影響，promise對象代表一個異步操作，有三種狀態：Pending（進行中）、Resolved（已完成，又稱Fulfilled）和Rejected（已失敗）。只有異步操作的結果可以改變這個狀態。
（2）一旦狀態改變就不會在變。
new Promise((resolve, reject) => reject(new Error('Failed to fulfill Promise'))) .catch(reason => console.log(reason))
）
8.1 reject的用法
reject是在回調失敗的情況下調用的
8.1 all的用法
並行執行多個異步操作
Promise.all(promises) .then((results) => { // Do something with results of all our promises })
9 Async await
async可以看做多個異步操作，包裝成的一個promise對象，使異步操作變得更加方便。
await后面緊跟的函數表示需要等待的結果
async返回一個promise對象，
async function f() { return 'hello world';//返回的值將會成為then 回調的參數 } f().then(v => console.log(v)) // "hello world" async function f() { throw new Error('出錯了');//如果內部拋出錯誤，會導致將promise對象編程reject狀態。因此最好使用catch接收 } f().then( v => console.log(v), e => console.log(e) ) // Error: 出錯了
async中必須等到await命令的promise對象執行完，才會執行then中的回調
async function f() { return await 123; } f().then(v => console.log(v))
async function getStockPriceByName(name) { var symbol = await getStockSymbol(name); var stockPrice = await getStockPrice(symbol); return stockPrice; } getStockPriceByName('goog').then(function (result) { console.log(result); });
10 數組的擴展
10.1Array.from()
將類數組轉換成真正的數組
let arr = { '0': 'a', '1': 'b', '2': 'c', length: 3 }; // ES5的寫法 var arr1 = [].slice.call(arr); // ['a', 'b', 'c'] // ES6的寫法 let arr2 = Array.from(arr); // ['a', 'b', 'c']
將set對象生成的類數組轉換成真正的數組
let namesSet = new Set(['a', 'b']) Array.from(namesSet) // ['a', 'b'] /*以下方法也可以轉換*/ [...namesSet]
任何有length的屬性都可以轉換成數組
Array.from({ length: 3 }); // [ undefined, undefined, undefined ]
10.2 Array.of()
將一組值轉換為數組
Array.of(2,3,4)//[2,3,4]
Array.of基本上可以代替Array()或者new Array()
Arrayy.of()//[]
10.3 copyWithin()
數組實例的方法，在當前數組內部，將指定位置的成員復制到其他位置（覆蓋原來的），會改變原數組；
他接受三個參數。
- target（必需）：從該位置開始替換數據
-
start（可選）：從該位置開始讀取數據，默認為0。如果為負值，表示倒數。
- end（可選）：到該位置前停止讀取數據，默認等於數組長度。如果為負值，表示倒數
[1, 2, 3, 4, 5].copyWithin(0, 3) // [4, 5, 3, 4, 5]從0位置開始替換數據，從3位置開始讀取數據（4,5）替換了1，2
10.4 數組實例的find()和findIndex()
find返回第一個符合條件的數組成員，返回該成員，如果沒有undefinds
[1,2,3,4,5].find((n)=>n<2)//1
findindex()返回第一個符合條件的索引值,如果沒有-1
[1, 5, 10, 15].findIndex(function(value, index, arr) { return value > 9; }) // 2
10.5 數組實例的fill()
使用給定值，填充一個數組。在初始化一個數組是十分方便。第二個和第三個參數分表表示起始位置和結束位置
['a', 'b', 'c'].fill(7) // [7, 7, 7] new Array(3).fill(7) // [7, 7, 7] 填充 ['a', 'b', 'c'].fill(7, 1, 2) // ['a', 7, 'c']
10.6 數組實例的entries()，keys()和values()
用for...of遍歷
entries()鍵值對遍歷、keys()健明遍歷、values()鍵值遍歷
10.7 數組實例的includes()
數組中是否包含，第二個參數表示搜索的起始位置，如果為負數，則為倒數位置。
[1, 2, 3].includes(2); // true [1, 2, 3].includes(4); // false [1, 2, NaN].includes(NaN); // true
10.8數組的空位
es6數組方法明確會將空位置轉換為undefined