**本文為千鋒資深前端教學老師帶來的【JavaScript全解析】系列,文章內含豐富的代碼案例及配圖,從0到1講解JavaScript相關知識點,致力於教會每一個人學會JS!** **文末有本文重點總結,可以收藏慢慢看\~ 更多技術類內容,主頁關註一波!** # ES6函數中參數的預設值 給函數的形 ...
本文為千鋒資深前端教學老師帶來的【JavaScript全解析】系列,文章內含豐富的代碼案例及配圖,從0到1講解JavaScript相關知識點,致力於教會每一個人學會JS!
文末有本文重點總結,可以收藏慢慢看~ 更多技術類內容,主頁關註一波!
ES6函數中參數的預設值
給函數的形參設置一個預設值, 當你沒有傳遞實參的時候, 使用預設值
直接使用 賦值符號(=) 給形參賦值即可
function fn(a, b = 100) {
console.log(a, b)
}
fn()
fn(10)
fn(10, 20)
ES6的函數預設值
在ES5之前是沒有函數預設值的。函數的預設值是ES6的新語法
函數的預設值是給函數的形參設置一個預設值, 當你沒有傳遞實參的時候來使用
書寫: 直接在書寫形參的時候, 以賦值符號(=) 給形參設置預設值就可以了
任何函數都可以使用
註意: 如果你給箭頭函數設置參數預設值, 那麼不管多少個形參, 都得寫小括弧
普通函數
<script>
// 給形參 a 設置了預設值為 10
// 給形參 b 設置了預設值為 20
function fn(a = 10, b = 20) {
console.log('fn 普通函數內的列印')
console.log('a : ', a)
console.log('b : ', b)
}
// // 第一次調用
// // 給 兩個形參 賦值了, 那麼就不使用預設值了
fn(100, 200)
// // 第二次調用
// // 沒有給 b 賦值, 那麼 b 就會使用 20 這個預設值
fn(1000)
// // 第三次調用
// // a 和 b 都沒有實參進行賦值, 都會使用 預設值
fn()
</script>
<script>
//給a設置了預設值,b 沒有設置預設值
function fn(a = 10, b) {
console.log('fn 普通函數內的列印')
console.log('a : ', a)
console.log('b : ', b)
}
//調用函數都不傳遞實參
fn()
</script>
箭頭函數
<script>
// 箭頭函數也可以設置預設值
// 給形參 a 設置了預設值為 10
// 給形參 b 設置了預設值為 20
const fn = (a = 10, b = 20) => {
console.log('fn 箭頭函數內的列印')
console.log('a : ', a)
console.log('b : ', b)
console.log('---------------------')
}
// // 第一次調用
// // 給 兩個形參 賦值了, 那麼就不使用預設值了
fn(100, 200)
// // 第二次調用
// // 沒有給 b 賦值, 那麼 b 就會使用 20 這個預設值
fn(1000)
// // 第三次調用
// // a 和 b 都沒有實參進行賦值, 都會使用 預設值
fn()
</script>
隨機數案例
<script>
// 範圍內的隨機數
// 定義函數, 兩個數字分別預設值設置成 0 和 255
const randomNum = (a = 255, b = 0) => Math.floor(Math.random() * (Math.abs(a - b) + 1)) + Math.min(a, b)
console.log(randomNum(20, 30))
</script>
ES6解構賦值
ES6允許按照一定的模式,從數組或對象中提取值,給變數進行賦值,稱為解構賦值。
解構賦值分為數組解構和對象解構
數組解構
快速的從數組拿到數組中的數據
語法:var [變數1,變數2, 變數3,....] = 數組
會按照數組的索引依次把數組中的數據拿出來,賦值給對應的變數
<script>
//定義一個數組
const arr = [100, 200, 300, 400, 500]
//需求: 單獨定義五個變數獲取五個數據
const a = arr[0]
const b = arr[1]
const c = arr[2]
const d = arr[3]
const e = arr[4]
console.log(a, b, c, d, e); //100 200 300 400 500
</script>
<script>
// 解構數組
const arr = [100, 200, 300, 400, 500]
//需求: 單獨定義五個變數獲取五個數據
const [a, b, c, d, e] = arr
console.log(a, b, c, d, e) // 100 200 300 400 500
</script>
解構多維數組
數組怎麼寫, 解構怎麼寫,把數據換成變數
<script>
// 1-2. 解構多維數組
const arr = [1, 2, [3, 4, [5, 6, [7, 8, [9]]]]]
console.log(arr)
//需求: 定義變數拿到數據 9
const a = arr[2][2][2][2][0]
console.log(a) //9
//解構
const [a,b, [c, d, [e, f, [g, h, [i]]]]] = arr
console.log(i) //9
</script>
對象解構
對象結構就是快速從對象中拿到對象中的數據
語法:var {鍵名1, 鍵名2, 鍵名3, ... } = 對象
按照鍵名, 依次定義變數從對象中獲取指定成員
之前獲取對象裡面的值
<script>
// 解構對象
const obj = {
name: 'Jack',
age: 18,
gender: '男'
}
const name = obj.name
const age = obj.age
const gender = obj.gender
console.log(name, age, gender) //Jack 18 男
</script>
解構獲取對象裡面的值
<script>
// 解構對象
const obj = {
name: 'Jack',
age: 18,
gender: '男'
}
// 解構
const {
name,
age,
gender
} = obj
console.log(name, age, gender) //Jack 18 男
</script>
解構的時候可以給變數起一個別名
語法:var { 鍵名: 別名, 鍵名2: 別名 } = 對象
註意: 當你起了別名以後, 原先的鍵名不能在當做變數名使用了, 需要使用這個別名
<script>
// 解構對象
const obj = {
name: 'Jack',
age: 18,
gender: '男'
}
// 解構的時候起一個別名
const {
name: a
} = obj //等價於 const a = obj.name
console.log(name, a); //Jake
//註意name是一個特殊的屬性,對象裡面自帶有改屬性所以不會報錯
const {
age: b
} = obj //等價一const b = obj.age
//console.log(age, b); //Uncaught ReferenceError: age is not
console.log(b); //18
</script>
<script>
// 解構對象
const obj = {
name: 'Jack',
age: 18,
gender: '男'
}
const {
name: a,
gender,
age: b
} = obj
console.log(a, b, gender) //Jack 18 男
</script>
以上就是我們這篇的全部內容啦!更多技術類乾貨,戳我主頁
視頻教程速戳:免費視頻教程