C語言 關於for迴圈裡定義的變數
函式進階
函式提升
函式提升與變數提升比較類似，是指函式在宣告之前即可被呼叫。
總結：
-
函式提升能夠使函式的宣告呼叫更靈活
-
函式表示式不存在提升的現象
-
函式提升出現在相同作用域當中
// 函式提升 fn() function fn () { console.log(123) } // 函式表示式不能提升，需要先宣告，再使用 // // const f = function () { // console.log(222) // } // f() // 函式優於變數 // 變數與函式同名時，函式優於變數 /* a:函式 a:變數 */ console.log(a) /* 控制檯列印 ƒ a () { console.log('a') } */ function a () { console.log('a') } var a = 1 console.log(a)//1
函式引數
動態引數
arguments 是函式內部內建的偽陣列變數，它包含/接收了呼叫函式時傳入的所有實參
使用場景：
如果引數個數不確定，無法設定形參個數
此時不用寫形參，可在函式中使用動態引數arguments
總結：
- arguments 是一個偽陣列，只存在於函式中
- arguments 的作用是動態獲取函式呼叫時傳入的所有實參
- 可以通過for迴圈依次得到傳遞過來的實參
function fn () { let sum = 0 for (let i = 0; i < arguments.length - 1; i++) { sum += arguments[i] console.log(arguments[i]) } console.log('總和為：' + sum) } fn(1,3,5,8,10)
剩餘引數
剩餘引數
允許我們將一個不定數量的引數表示為一個數組
... 是語法符號，置於函式最後一個形參之前，用於獲取多餘的實參
藉助 ... 獲取的剩餘實參，是個真陣列
function fn (a, b , ...c) { console.log(a, b, c)//1 3 [5,8,10] } fn(1,3,5,8,10) function getSum (...arr) { let sum = 0 for (let i = 0; i < arr.length ; i++) { sum += arr[i] } console.log(sum)//27 } getSum(1,3,5,8,10)
展開運算子
const arr = [1, 3, 5, 8, 10]
console.log(...arr)
// 求最大值
console.log(Math.max(...arr))
// 合併陣列
const arr1 = [1, 3, 5, 8, 10]
const arr2 = ['a', 'b', 'c']
const arr3 = [11, 31, 51, 81, 100]
const array = [...arr1, ...arr2, ...arr3]
console.log(array)
注意:
剩餘引數：用在函式最後一位形參前加...,在函式內部使用，作用：接收剩餘實參，是個真陣列
展開運算子：使用陣列時，在陣列前新增，作用：展開陣列，使用場景有：
求陣列最大/小值
合併陣列
注：...不會修改原陣列
箭頭函式
基本語法
簡單地說:箭頭函式是函式語法簡寫
目的：引入箭頭函式的目的是更簡短的函式寫法並且不繫結this，箭頭函式的語法比函式表示式更簡潔
使用場景：箭頭函式更適用於那些本來需要匿名函式的地方或者說回撥函式
語法1：基本寫法
/*
//普通函式
const fn = function () {
console.log(123)
}
*/
// 箭頭函式
const fn = () => {
console.log(123)
}
語法2：只有一個引數可以省略小括號
/*
//普通函式
const fn2 = function (x) {
return x
}
*/
// 箭頭函式
const fn2 = x => {
return x * x
}
console.log(fn2(2))
語法3：如果函式體只有一行程式碼，可以寫到一行上，並且無需寫 return 直接返回值
/*
//普通函式
const fn3 = function (x, y) {
return x + y
}
*/
// 箭頭函式
const fn3 = (x, y) => x + y
console.log(fn3(1, 2))
語法4：加括號的函式體返回物件字面量表達式
/*
//普通函式
const fn4 = function (uname) {
return {uname:uname}
}
*/
// 箭頭函式
const fn4 = uname => ({uname: uname})
console.log(fn4('小明'))
總結：
-
箭頭函式屬於表示式函式，因此不存在函式提升
-
箭頭函式只有一個引數時可以省略圓括號 ()，其他情況不可省略
-
箭頭函式函式體只有一行程式碼時可以省略花括號 {}，並自動做為返回值被返回
-
加小括號的函式體返回物件字面量表達式
箭頭函式引數
-
普通函式有arguments 動態引數
-
箭頭函式沒有 arguments 動態引數，但是有 剩餘引數 ..args
const getSum = (...other) => {
let sum = 0
for (let i = 0; i < other.length; i++) {
sum += other[i]
}
console.log(sum)
}
getSum(1, 4, 6)
箭頭函式this
箭頭函式不會建立自己的this,它只會從自己的作用域鏈的上一層沿用this。
- 普通函式中，this是指呼叫者
- 箭頭函式中，this是沿用自己的作用域鏈的上一層的this
在開發中【使用箭頭函式前需要考慮函式中 this 的值】，事件回撥函式使用箭頭函式時，this 為全域性的 window，因此
DOM事件回撥函式為了簡便，還是不太推薦使用箭頭函式
<input type="button" value="點選">
//普通函式
const btn = document.querySelector('input')
btn.addEventListener('click',function () {
console.log(this)//呼叫者
})
let obj = {
name : '小明',
fei : function () {
console.log(this)//呼叫者
}
}
obj.fei()
//箭頭函式
btn.addEventListener('click',() => {
console.log(this)//window
})
//箭頭函式不會建立自己的this,它只會從自己的作用域鏈的上一層沿用this。
let obj = {
name : '小明',
fei : () => {
console.log(this)//window
}
}
obj.fei()
解構賦值
解構賦值是一種快速為變數賦值的簡潔語法，本質上仍然是為變數賦值。
陣列解構
語法
陣列解構是將陣列的單元值快速批量賦值給一系列變數的簡潔語法。
基本語法：
-
賦值運算子 = 左側的 [] 用於批量宣告變數，右側陣列的單元值將被賦值給左側的變數
-
變數的順序對應陣列單元值的位置依次進行賦值操作
const arr = ['西施','王昭君','貂蟬', '楊貴妃']
const [a, b, c, d] = arr
console.log(a,b,c,d)//西施 王昭君 貂蟬 楊貴妃
基本語法：典型應用互動2個變數
let a = 1
let b = 2
;[b, a] = [a, b]
console.log(a, b)//2 1
注意： js 前面必須加分號情況
立即執行函式/自執行函式
let uname = '小明' ;(function() {})()或者
let uname = '小明'; (function() {})()陣列解構
let a = 1 let b = 2 // 如果前面有程式碼，需要新增分號;防粘連 ;[b, a] = [a, b]或者
let a = 1 let b = 2; // 如果前面有程式碼，需要新增分號;防粘連 [b, a] = [a, b]
變數與單元值不一數量致時
-
變數多 單元值少的情況：
變數的數量大於單元值數量時，多餘的變數將被賦值為 undefined
const [a, b, c, d, e, f ] = ['西施','王昭君','貂蟬', '楊貴妃'] console.log(a, b, c, d, e, f) -
變數少 單元值多的情況：
const [a, b, c, ] = ['西施','王昭君','貂蟬', '楊貴妃'] console.log(a, b, c) -
利用剩餘引數解決變數少 單元值多的情況：
剩餘引數返回的還是一個數組
const [a, b, ...c] = ['西施','王昭君','貂蟬', '楊貴妃'] console.log(a, b, c) -
防止有undefined傳遞單元值的情況，可以設定預設值：
允許初始化變數的預設值，且只有單元值為 undefined 時預設值才會生效
const [a, b, c, d, e = '1', f = '2'] = ['西施','王昭君','貂蟬', '楊貴妃'] console.log(a, b, c, d, e, f) -
按需匯入，忽略某些返回值：
const [,,,a,,b] = ['西施','王昭君','貂蟬', '楊貴妃', '1', '3', '6'] console.log(a,b) -
支援多維陣列的結構：
const [, a, , , [, , b]] = ['西施','王昭君','貂蟬', '楊貴妃', ['1', '3', '6']] console.log(a, b)
物件解構
物件解構是將物件屬性和方法快速批量賦值給一系列變數的簡潔語法
基本語法
- 賦值運算子 = 左側的 {} 用於批量宣告變數，右側物件的屬性值將被賦值給左側的變數
- 物件屬性的值將被賦值給與屬性名相同的變數
- 注意解構的變數名不要和外面的變數名衝突否則報錯
- 物件中找不到與變數名一致的屬性時變數值為 undefined
// 如果物件中不存在這個屬性，預設為undefined
// 剩餘值：包含剩餘屬性的物件
// 冒號修改變數名
const {name, gender, year,...arr} = {
name : '張三丰',
gender : 'man',
age : 18,
address : '武當山',
}
console.log(name, gender, year,arr)//張三丰 man undefined {age: 18,address: "武當山"}
給新的變數名賦值
可以從一個物件中提取變數並同時修改新的變數名
const {name , dog : {name : dogName, age}, cat : {name : catName}} = {
name : '張三丰',
gender : 'man',
age : 18,
address : '武當山',
dog : {
name : '小黑',
age : 1,
},
cat : {
name : '小白',
age : 2,
}
}
console.log(name, dogName,catName)
陣列物件解構
const arr =[{
name : '張三丰',
gender : 'man',
age : 18,
address : '武當山',
}]
const [{name, gender}] = arr
console.log(name,gender)
多級物件解構
const pig = {
name: '佩奇',
family: {
mother: '豬媽媽',
father: '豬爸爸',
sister: '喬治'
},
age: 6
}
const {name,family : {mother, father, sister}} = pig
console.log(name, mother, father, sister)