iT邦幫忙

2021 iThome 鐵人賽

DAY 17
0
Modern Web

追求JS小姊姊30天系列 第 17

追求JS小姊姊系列 Day17 -- 方函式的能力展現:有小弟真好:函式隱含參數 arguments

前情提要

方函式也有流程分工,參數負責收東西

方函式:(電話再響)喂,你說參數不在東西誰要收嗎?直接放著沒關係,還是有人會幫我收
:果然是經營物流嗎?這樣誰會收呢?


參數不在怎麼辦?

function whoIsParameters(){
    console.log(arguments);
}

whoIsParameters("Rex","Ray");

猜猜上面最後會印出什麼?undefined嗎?

不是沒有參數接收嗎?怎麼會?都是arguments暗地裡接收的。


Arguments

它跟...restParameter同樣會將資料存入陣列中,並可以透過[i]查詢內容跟length長度,但它只是個類陣列(Array-like-object)

檢測它是否為陣列

function trys(){
    console.log(Array.isArray(arguments));
}
trys()

這裡顯示的false代表的是:它並不是真正的Array,結果看下圖:

function convertToArray(){
    
    //類陣列使用array.forEach
    arguments.forEach((i)=>console.log(i));
}
convertToArray(1,2,3,4,5,6)

在上圖,我們嘗試讓所謂類陣列使用Array.methods,結果如上。

讓它成為真正的鄭列
可透過Array.from(),就能將類陣列轉換為真正的Array

function convertToArray(){
    //將類陣列的轉換結果存入變數x
    let x = Array.from(arguments);
    //接著使用Array.methods
    x.forEach((i)=>console.log(i));
}
convertToArray(1,2,3,4,5,6)

結果就能順利使用了!

關於arguments你還可以知道的事

非嚴格模式
下它可作為參數別名,什麼意思呢?

function useArgumentsToParameter(input){
    console.log(input,"這裡是隱含參數調整前的");
    console.log(arguments[0]);
    
    //我們修改`arguments`的值
    arguments[0] = 2486;
    console.log(input,"這裡是隱含參數調整後的");
    
}
useArgumentsToParameter(8+9)

這時你調整arguments的值,會影響原本的引數值。

嚴格模式下:

  1. agruments不能作為參數別名
  2. 先說結論:嚴格模式下,參數跟arguments互不受影響,什麼意思?

這裡分別修改參數arguments的值為例:

function useArgumentsToParameter(input){
    //新增嚴格模式
    `use strict`
    
    console.log(input,"這裡是隱含參數調整前的");
    console.log(arguments[0]);
    
    //修改`arguments`的值
    arguments[0] = 2486;
    
    //發現不受影響
    console.log(input,"這裡是隱含參數調整後的");
    console.log(arguments[0]);
    
    //修改參數值
    input = 530;
    console.log(input,"這裡是參數調整後的");
    console.log(arguments[0]);
}
useArgumentsToParameter(8+9);

欲知更多嚴格模式的規範,可參考隊友所寫的:D4 - 加鹽不加價 嚴格模式開啟,讓你吃一吃就認識嚴格模式~

-- to be continued --


那今天就到這邊摟!今天分享喜歡的歌是:
無妄合作社 No-nonsense Collective〈青春之歌 The Grand Tour〉Official Music Video
https://www.youtube.com/watch?v=qRCnF7SMufo

每天的休息,是為了後面的追求,明天見。


reference:

忍者2
MDN


上一篇
追求JS小姊姊系列 Day16 -- 方函式的能力展現:有小弟真好 -- 函式參數
下一篇
追求JS小姊姊系列 Day18 -- 方函式的能力展現:第三型態 Constructor function 登場
系列文
追求JS小姊姊30天30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言