Javascript-ES6

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

一. 箭頭函數(shù)

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

箭頭函數(shù)的特性

1. 箭頭函數(shù)如果只有一個(gè)形參=> 那么可以省略小括號不寫=> (a) => {}-> a => {}2. 箭頭函數(shù)代碼段里面只有一句話, 可以省略大括號和 return 不寫=> 并且會自動 return 這一句話的結(jié)果=> () => { return 123 }=> () => 1233. 箭頭函數(shù)里面沒有 arguments=> 壓根沒有, 用不了4. 箭頭函數(shù)里面沒有 this 關(guān)鍵字=> 官方解釋: 箭頭函數(shù)里面的 this 是 上下文(context), 外部作用域的 this 就是箭頭函數(shù)內(nèi)的 this=> 私人解釋: 你的箭頭函數(shù)定義在哪一行, 上一行的 this 就是 箭頭函數(shù)里面的 this5. 箭頭函數(shù)里面的 this 任何方法都改變不了=> 因?yàn)榧^函數(shù)沒有 this=> call / apply / bind 不能改變箭頭函數(shù)的 this 指向 // 1. 一個(gè)形參可以省略小括號不寫 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 的結(jié)果當(dāng)作 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. 箭頭函數(shù)里面沒有 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. 箭頭函數(shù)里面沒有 this let div = document.querySelector('div') div.onclick = function(){console.log(this) // div }console.log(this) // 該行(箭頭函數(shù)定義的上一行)的 this 指向 window div.onclick = () => {console.log(this) // 箭頭函數(shù)的 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, 對象的成員用逗號隔開, 只是為了代碼書寫整齊, 實(shí)際上只是一行代碼, 所以此時(shí)箭頭函數(shù)的 this 是和 87 行保持一致 let div = document.querySelector('div')div.onclick = function(){// 箭頭函數(shù)的 this 在該行let obj = {name: '我是 obj 對象',fn: function(){ console.log(this) },fun: () => { console.log(this) }}obj.fn() // objobj.fun() // div } // 5. 箭頭函數(shù)改變不了 this 指向 let fn = () => { console.log(this) } fn() // window let obj = {name: 'Jack'} fn.call(obj) // 改不了, 還是 window

二. 函數(shù)的參數(shù)默認(rèn)值

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

三. 模板字符串

+ ES6 定義了一種聲明字符串的方式 + 使用 反引號(``) + 特點(diǎn):1. 可以換行書寫2. 可以直接進(jìn)行變量的拼接3. 模板字符串可以調(diào)用函數(shù)=> 字符串里面的內(nèi)容是函數(shù)的參數(shù)=> ${} 把字符串切開, 組合成一個(gè)數(shù)組當(dāng)作第一個(gè)參數(shù)=> 從左到右開始依次是每一個(gè) ${} 里面的內(nèi)容作為函數(shù)后面的參數(shù) // 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 就是函數(shù)的第二個(gè)參數(shù) // 3. ${ num2 } 里面的 num2 就是函數(shù)的第三個(gè)參數(shù)

四. 點(diǎn)點(diǎn)點(diǎn)(…)運(yùn)算符

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

1. 展開運(yùn)算符

// 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. 合并運(yùn)算符

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

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

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

五. 解構(gòu)賦值

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

1. 解構(gòu)數(shù)組

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

// 解構(gòu)多維數(shù)組 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)// 解構(gòu)賦值的形式 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. 解構(gòu)對象

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

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

// 解構(gòu)多維對象 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)// 解構(gòu)賦值 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 標(biāo)準(zhǔn)下, 有一個(gè)對象的簡寫方式1. 當(dāng) key 和 value 一模一樣的時(shí)候, 可以只寫一個(gè)2. 當(dāng)某一個(gè) key 的值是一個(gè)函數(shù), 并且不是箭頭函數(shù)的時(shí)候, 可以直接省略 function 關(guān)鍵字 和冒號 不寫 // 1. key 和 value 一樣, 可以省略一個(gè)不寫 let age = 18 let obj = {name: 'Jack',age, // 等價(jià)于 age : agegender: '男'// gender: 'gender' // 不能省略 } console.log(obj) // 2. 函數(shù)省略 let obj = {name: '我是 obj 對象',f1: function(){ console.log(this) }, // 可省略, 等價(jià)于 f3f2: () => { console.log(this) }, // 不可省略f3 (){ console.log(this) } } obj.f1() // obj obj.f2() // window obj.f3() // obj

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。