Javascript-ES6

• 一. 箭頭函數
• • 箭頭函數的特性
• 二. 函數的參數默認值
• 三. 模板字符串
• 四. 點點點(...)運算符
• • 1. 展開運算符
  • 2. 合并運算符
• 五. 解構賦值
• • 1. 解構數組
  • 2. 解構對象
• 六. 對象的簡寫形式

一. 箭頭函數

+ 一種新的函數定義方式 + 對于函數表達式的簡寫方式(匿名函數) + 匿名函數=> var fn = function(){}=> var obj = { fn: function(){} }=> setTimeout( function(){}, 0)=> setInterval( function(){}, 0)=> [].forEach( function(){} )=> div.onclick = function(){}=> div.addEventListener('click', function(){})=> ... + 語法: () => {}=> (): 形參的位置=> =>: 箭頭函數的標志=> {}: 代碼段 var fn = function(){ console.log('我是一個函數')} fn()var fun = (a, b) => { console.log('我是一個 fun 函數')console.log(a)console.log(b)} fun(100, 200)

箭頭函數的特性

1. 箭頭函數如果只有一個形參=> 那么可以省略小括號不寫=> (a) => {}-> a => {}2. 箭頭函數代碼段里面只有一句話, 可以省略大括號和 return 不寫=> 并且會自動 return 這一句話的結果=> () => { return 123 }=> () => 1233. 箭頭函數里面沒有 arguments=> 壓根沒有, 用不了4. 箭頭函數里面沒有 this 關鍵字=> 官方解釋: 箭頭函數里面的 this 是 上下文(context), 外部作用域的 this 就是箭頭函數內的 this=> 私人解釋: 你的箭頭函數定義在哪一行, 上一行的 this 就是 箭頭函數里面的 this5. 箭頭函數里面的 this 任何方法都改變不了=> 因為箭頭函數沒有 this=> call / apply / bind 不能改變箭頭函數的 this 指向 // 1. 一個形參可以省略小括號不寫 let fn = (a) => { console.log(a) } let fun = a => { console.log(a) }fn(100) fun(200)let arr = [10, 20, 30, 40, 50] let res = arr.every( function(item){ return item >= 10} ) let res2 = arr.every(item => { return item >= 10} ) console.log(res, res2)

// 2. 一句話可以省略大括號不寫, 并且自動 return let fn = (a, b) => { return a + b } console.log(fn(10, 20)) // 把 a + b 的結果當作 fun 的返回值 let fun = (a, b) => a+b console.log(fun(20, 30))let arr = [10, 20, 30, 40, 50] let res3 = arr.every(item => item >= 10) console.log(res3)

// 3. 箭頭函數里面沒有 arguments let fun = function(){ console.log(arguments) } let fn = () => { console.log(arguments) } fun(100, 200, 300) fn(10, 20, 30) // Uncaught ReferenceError: arguments is not defined

// 4. 箭頭函數里面沒有 this let div = document.querySelector('div') div.onclick = function(){console.log(this) // div }console.log(this) // 該行(箭頭函數定義的上一行)的 this 指向 window div.onclick = () => {console.log(this) // 箭頭函數的 this 指向也和上一行保持一致, 是 window } div.onclick = function(){let fn = function(){console.log(this) }fn() // window// 該行是81行let fun = () => { // 就是 81 行的 thisconsole.log(this)}fun() // div } // 該行是87行 let obj = {name: '我是 obj 對象',fn: function(){ console.log(this) },fun: () => { console.log(this) } }obj.fn() // obj obj.fun() // window, 對象的成員用逗號隔開, 只是為了代碼書寫整齊, 實際上只是一行代碼, 所以此時箭頭函數的 this 是和 87 行保持一致 let div = document.querySelector('div')div.onclick = function(){// 箭頭函數的 this 在該行let obj = {name: '我是 obj 對象',fn: function(){ console.log(this) },fun: () => { console.log(this) }}obj.fn() // objobj.fun() // div } // 5. 箭頭函數改變不了 this 指向 let fn = () => { console.log(this) } fn() // window let obj = {name: 'Jack'} fn.call(obj) // 改不了, 還是 window

二. 函數的參數默認值

+ 給函數的形參設置一個默認值=> 如果你傳遞了實參, 就使用你傳遞的參數=> 如果你沒有傳遞實參, 那么就使用默認值+ 直接在形參后面使用 等于號(=) 進行賦值 // 1. 普通函數的參數默認值 function fn(a, b){console.log(a)console.log(b) } fn() // undefined undefinedfunction fn(a = 100, b){// 形參 a 的默認值是 100console.log(a)console.log(b) } fn() // 100 undefined fn(20) // 20 undefined fn(20, 30) // 20 30// 2. 箭頭參數也可以書寫參數默認值 let fun = (a = 1000, b = 2000) => {console.log(a, b) } fun() // 1000 2000 fun(100) // 100 2000 fun(100, 200) // 100 200// 箭頭函數只要你設置參數默認值, 不管你多少個形參, 都得寫小括號 // let f = a =100 => {} // 報錯 let f = (a =100) => {}

三. 模板字符串

+ ES6 定義了一種聲明字符串的方式 + 使用 反引號(``) + 特點:1. 可以換行書寫2. 可以直接進行變量的拼接3. 模板字符串可以調用函數=> 字符串里面的內容是函數的參數=> ${} 把字符串切開, 組合成一個數組當作第一個參數=> 從左到右開始依次是每一個 ${} 里面的內容作為函數后面的參數 // 1. 換行書寫 let str = `123456 ` // 2. 拼接變量 let age = 18 let str2 = `小明今年${ age }歲了 ` console.log(str2) // 面試題可能會有 function fn(a, b, c){console.log(a)console.log(b)console.log(c) }var num = 100 var num2 = 200fn`hello ${ num } world ${ num2 } 你好` // 1. ${} 切開字符串 ['hello', 'world', '你好'] // 2. ${ num } 里面的 num 就是函數的第二個參數 // 3. ${ num2 } 里面的 num2 就是函數的第三個參數

四. 點點點(…)運算符

+ 展開運算符=> 當你在函數的實參位置或者數組或者對象里面使用它的時候是展開=> 就是把包裹的內容全部開放 + 合并運算符=> 當你在函數的形參位置使用它的時候是合并=> 作用: 箭頭函數沒有 arguments, 我們就使用 合并運算符做一個

1. 展開運算符

// 1. 展開 let arr1 = [1, 2, 3, 4] console.log(arr1) console.log(...arr1) console.log(Math.max(...arr1))let arr2 = [...arr1, 5, 6, 7, 8] console.log(arr2)let obj = {name: 'Jack',age: 18 }let obj2 = {...obj,gender: '男' }console.log(obj, obj2)

2. 合并運算符

// 2. 合并 function fn(...a){// 定義一個 a 變量, 從第一個實參開始到最后一個實參全部獲取, 放在一個數組里, 給了 aconsole.log(a) }fn(100, 200, 300, 400, 500, 600)

function fn(a, ...b){// 定義一個 a 變量, 接收第一個實參// 定義一個變量 b, 從第二個開始到最后一個實參放在一個數組里, 給了 bconsole.log(a)console.log(b) }fn(100, 200, 300, 400, 500, 600)

// 點點點運算符的作用 let fn = (...arg) => {console.log(arg) } fn(10, 20, 30, 40, 50)

五. 解構賦值

+ 定義: 快速從 對象 或者 數組 里面獲取一些數據+ 分成兩種1. 解構對象=> 語法: let[變量1, 變量2, ...] = [數據1, 數據2, ...]=> 也可以解構多維數組2. 解構數組=> 語法: let { key1, key2, ...} = {鍵值對1, 鍵值對2, ...}=> 解構的時候可以給解構的變量起一個別名-> { key1: 別名 } = {}=> 也可以解構多維對象

1. 解構數組

// 1. 解構數組 let arr = [10, 20, 30, 40] // 通過獲取數組中的索引 [0] 來獲取數據 let a = arr[0] // let b = arr[1] // let c = arr[2] // let d = arr[3] // console.log(a, b, c, d)// 解構賦值獲取數組里面的數據 let [a, b, c, d] = arr console.log(a, b, c, d)

// 解構多維數組 let arr = [10, 20, [30, 40, [50]]] let d = arr[0] // 10 let d = arr[1] // 20 let d = arr[2][0] // 30 let d = arr[2][1] // 40 let e = arr[2][2][0] // 50 console.log(a, b, c, d, e)// 解構賦值的形式 let [a, b, [c, d, [e]]] = arr console.log(a, b, c, d, e) // 10 20 30 40 50 // 交換變量 var a = 5 var b = 6 console.log(a, b) // 5 6 var [b, a] = [a, b] console.log(a, b) // 6 5

2. 解構對象

// 2. 解構對象 let obj = { name: 'Jack', age: 18, gender: '男'} // let name = obj.name // let age = obj.age // let gender = obj.gender // console.log(name, age, gender)// 解構賦值 let { name, age, gender } = obj console.log(name, age, gender)

// 給解構的變量起別名 // let n = obj.name let { name: n, age: a, gender, score } = obj // 等價于 let n = obj.name console.log(n, a, gender, score)

// 解構多維對象 let o1 = {a: 100,b: 200,o2: {c: 300,o3: {d: 400}} }console.log(o1) // d // let d = o1.o2.o3.d // let c = o1.o2.c // let b = o1.b // let a = o1.a // console.log(a, b, c, d)// 解構賦值 let {a, b, o2: { c, o3: { d } } } = o1 console.log(a, b, c, d) // let { c, o3: { d } } = o1.o2 // let c = o1.o2.c // let { d } = o1.o2.o3 // let d = o1.o2.o3.d

六. 對象的簡寫形式

+ 在 ES6 標準下, 有一個對象的簡寫方式1. 當 key 和 value 一模一樣的時候, 可以只寫一個2. 當某一個 key 的值是一個函數, 并且不是箭頭函數的時候, 可以直接省略 function 關鍵字 和冒號 不寫 // 1. key 和 value 一樣, 可以省略一個不寫 let age = 18 let obj = {name: 'Jack',age, // 等價于 age : agegender: '男'// gender: 'gender' // 不能省略 } console.log(obj) // 2. 函數省略 let obj = {name: '我是 obj 對象',f1: function(){ console.log(this) }, // 可省略, 等價于 f3f2: () => { console.log(this) }, // 不可省略f3 (){ console.log(this) } } obj.f1() // obj obj.f2() // window obj.f3() // obj

總結

以上是生活随笔為你收集整理的JS-part12.3-ES6- 箭头函数 / 函数的参数默认值 / 模板字符串 / 点点点运算符 / 解构赋值 / 对象的简写形式的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。