這篇文章主要介紹了es6有arguments嗎的相關(guān)知識(shí)，內(nèi)容詳細(xì)易懂，操作簡(jiǎn)單快捷，具有一定借鑒價(jià)值，相信大家閱讀完這篇es6有arguments嗎文章都會(huì)有所收獲，下面我們一起來看看吧。
創(chuàng)新互聯(lián)專注為客戶提供全方位的互聯(lián)網(wǎng)綜合服務(wù)，包含不限于成都網(wǎng)站制作、成都網(wǎng)站設(shè)計(jì)、外貿(mào)營(yíng)銷網(wǎng)站建設(shè)、巴宜網(wǎng)絡(luò)推廣、小程序開發(fā)、巴宜網(wǎng)絡(luò)營(yíng)銷、巴宜企業(yè)策劃、巴宜品牌公關(guān)、搜索引擎seo、人物專訪、企業(yè)宣傳片、企業(yè)代運(yùn)營(yíng)等，從售前售中售后，我們都將竭誠(chéng)為您服務(wù)，您的肯定，是我們最大的嘉獎(jiǎng)；創(chuàng)新互聯(lián)為所有大學(xué)生創(chuàng)業(yè)者提供巴宜建站搭建服務(wù)，24小時(shí)服務(wù)熱線：18980820575，官方網(wǎng)址：www.cdcxhl.com
es6有arguments，但箭頭函數(shù)是不識(shí)別arguments的，所以用rest（剩余參數(shù)）來取代arguments；剩余參數(shù)直接就固定到數(shù)組里了，而arguments是類數(shù)組（本質(zhì)是個(gè)對(duì)象），還需要轉(zhuǎn)換。剩余參數(shù)語法允許將一個(gè)不定數(shù)量的參數(shù)表示為一個(gè)數(shù)組，不定參數(shù)定義方式，這種方式很方便的去聲明不知道參數(shù)情況下的一個(gè)函數(shù)。
1. 說明
es6中箭頭函數(shù)是不識(shí)別arguments的。所以用rest來取代arguments。
ES6之后，都用剩余參數(shù)代替arguments了，剩余參數(shù)直接就固定到數(shù)組里了，而arguments是類數(shù)組(本質(zhì)是個(gè)對(duì)象)，還需要轉(zhuǎn)換。
2. arguments的常用操作
(1). 獲取參數(shù)長(zhǎng)度
(2). 根據(jù)索引獲取參數(shù)
(3). 獲取當(dāng)前arguments所在的函數(shù)
代碼分享：
{
console.log("----------------1. arguments常用操作-------------------");
function Test1() {
// arguments長(zhǎng)什么樣？---本質(zhì)是一個(gè)對(duì)象
// {
// '0': 1,
// '1': 2,
// '2': 3,
// '3': 4,
// '4': 5,
// '5': 6,
// '6': 7,
// '7': 8
// }
console.log(arguments);
// 常見的對(duì)arguments的操作是三個(gè)
// 1.獲取參數(shù)的長(zhǎng)度
console.log(arguments.length);
// 2.根據(jù)索引值獲取某一個(gè)參數(shù)
console.log(arguments[0]);
console.log(arguments[1]);
console.log(arguments[2]);
// 3.callee獲取當(dāng)前arguments所在的函數(shù)
console.log(arguments.callee);
}
//調(diào)用
Test1(1, 2, 3, 4, 5, 6, 7, 8);
}
3. 將arguments轉(zhuǎn)換成數(shù)組
{
console.log("----------------2. 將arguments轉(zhuǎn)換成數(shù)組-------------------");
function Test2() {
// 方案1-自己遍歷
{
let newArray = [];
for (let i = 0; i < arguments.length; i++) {
newArray.push(arguments[i]);
}
console.log(newArray);
}
// 方案2-Array.prototype.slice將arguments轉(zhuǎn)成array
{
let newArray2 = Array.prototype.slice.call(arguments);
console.log(newArray2);
}
// 方案3-ES6語法 Array.From
{
console.log(Array.from(arguments));
}
// 方案4-ES6語法 剩余參數(shù)
{
console.log([...arguments]);
}
}
//調(diào)用
Test2(1, 2, 3, 4, 5, 6, 7, 8);
}
4. 箭頭函數(shù)中沒有arguments
{
console.log("----------------3. 箭頭函數(shù)中沒有arguments-------------------");
let Test3 = () => {
console.log(arguments);
};
Test3(1, 2, 3, 4);
}
1. 剩余參數(shù)（Rest Parameter）
剩余參數(shù)語法允許我們將一個(gè)不定數(shù)量的參數(shù)表示為一個(gè)數(shù)組，不定參數(shù)定義方式，這種方式很方便的去聲明不知道參數(shù)情況下的一個(gè)函數(shù)。
代碼分享
{
console.log("-----------------1. 剩余參數(shù)---------------------");
function sum1(...nums) {
console.log(nums);
console.log(
nums.reduce((preValue, currentValue) => preValue + currentValue, 0)
); //求和
}
//調(diào)用
sum1(1, 2); //[1,2]
sum1(1, 2, 3); //[1,2,3]
sum1(1, 2, 3, 4); //[1,2,3,4]
function sum2(num1, num2, ...nums) {
console.log(nums);
console.log(
nums.reduce(
(preValue, currentValue) => preValue + currentValue,
num1 + num2
)
); //求和
}
//調(diào)用
sum2(1, 2); //[]
sum2(1, 2, 3); //[3]
sum2(1, 2, 3, 4); //[3,4]
}
2. 展開運(yùn)算符（Spread Operator）
把固定的數(shù)組內(nèi)容“打散”到對(duì)應(yīng)的參數(shù)。
代碼分享：
{
console.log("-----------------2. 展開運(yùn)算符---------------------");
function sum1(num1, num2) {
console.log(num1 + num2);
}
// 調(diào)用
let arry1 = [10, 20];
sum1(...arry1);
function sum2(num1, num2, num3) {
console.log(num1 + num2 + num3);
}
//調(diào)用
let arry2 = [10, 20, 30];
sum2(...arry2);
}
總結(jié)：
1. Spread Operator 和 Rest Parameter 是形似但相反意義的操作符，簡(jiǎn)單的來說 Rest Parameter 是把不定的參數(shù)“收斂”到數(shù)組，而 Spread Operator 是把固定的數(shù)組內(nèi)容“打散”到對(duì)應(yīng)的參數(shù)。
2. Rest Parameter 用來解決函數(shù)參數(shù)不確定的場(chǎng)景，Spread Operator 用來解決已知參數(shù)集合應(yīng)用到固定參數(shù)的函數(shù)上
1. apply 和 call都是為了改變被調(diào)用函數(shù)中this的指向, 同時(shí)立即執(zhí)行該函數(shù)
2. bind也是為了改變函數(shù)中this的指向，但它返回的是一個(gè)函數(shù)，需要被調(diào)用才能執(zhí)行
3. apply 和 call的第一個(gè)參數(shù)都是傳入綁定到對(duì)象，用于改變this指向，但是
(1). apply是將需要傳入函數(shù)的參數(shù)放到一個(gè)數(shù)組里，傳入到第二個(gè)參數(shù)的位置
(2). call是從第2,3,4.....位置依次傳入需要的參數(shù)
4. bind后續(xù)傳入?yún)?shù)的形式和call相同，從第2,3,4.....位置依次傳入需要的參數(shù)，bind返回的是一個(gè)函數(shù)，需要再次調(diào)用。
代碼分享：
// 案例1--隱式綁定
{
console.log("----------------案例1--------------------");
let name = "ypf1";
let age = 18;
let obj = {
name: "ypf2",
myAge: this.age,
getMsg: function () {
console.log(this.name, this.age);
},
};
// 調(diào)用
console.log(obj.myAge); //undefined （隱式綁定，this指向obj）
obj.getMsg(); //ypf2,undefined （隱式綁定，this指向obj）
}
//案例2--只綁定，不傳參
/*
注意1個(gè)細(xì)節(jié)，bind后面多了個(gè)(),bind返回的是一個(gè)新函數(shù)，必須調(diào)用才能執(zhí)行
*/
{
console.log("----------------案例2--------------------");
let name = "ypf1";
let age = 18;
let obj = {
name: "ypf2",
myAge: this.age,
getMsg: function () {
console.log(this.name, this.age);
},
};
let obj2 = { name: "ypf3", age: 35 };
// 調(diào)用
obj.getMsg.apply(obj2); //ypf 35 (apply顯式綁定優(yōu)先級(jí)高于隱式綁定，this指向obj2)
obj.getMsg.call(obj2); //ypf 35 (call顯式綁定優(yōu)先級(jí)高于隱式綁定，this指向obj2)
obj.getMsg.bind(obj2)(); //ypf 35 (bind顯式綁定優(yōu)先級(jí)高于隱式綁定，this指向obj2)
}
// 案例3--傳遞參數(shù)
/*
apply傳遞數(shù)組
call和bind都是依次寫參數(shù)
特別注意:bind可以多次傳遞參數(shù)
*/
{
console.log("----------------案例3--------------------");
let name = "ypf1";
let age = 18;
let obj = {
name: "ypf2",
myAge: this.age,
getMsg: function (msg1, msg2) {
console.log(this.name, this.age, msg1, msg2);
},
};
let obj2 = { name: "ypf3", age: 35 };
//調(diào)用
obj.getMsg.apply(obj2, ["消息1", "消息2"]);
obj.getMsg.call(obj2, "消息1", "消息2");
//bind用法1
obj.getMsg.bind(obj2, "消息1", "消息2")();
//bind用法2--多次傳參
let fn1 = obj.getMsg.bind(obj2, "消息1");
fn1("消息2");
}
1. apply
(1). xxFn.ypfapply()， 在ypfapply中，this指向xxFn函數(shù)
(2). 需要實(shí)現(xiàn)出入 null 或 undefined的時(shí)候，this指向window
(3). 使用 delete 可以刪除對(duì)象的某個(gè)屬性
(4). 通過Function.prototype原型添加
(5). || 用法
argArray = argArray?argArray:[] 等價(jià)于
argArray = argArray || []
代碼分享：
/**
* 利用js手寫call函數(shù)
* @param {Object|null|undefined} thisArg 待綁定的對(duì)象
* @param {Array} argArray 調(diào)用函數(shù)的數(shù)組參數(shù)
*/
Function.prototype.ypfapply = function (thisArg, argArray) {
// 1. this指向調(diào)用函數(shù)
let fn = this;
// 2. 獲取傳遞參數(shù)
thisArg = thisArg != null && thisArg != undefined ? Object(thisArg) : window;
//3. 賦值函數(shù)并調(diào)用
thisArg.fn1 = fn;
argArray = argArray || [];
let result = thisArg.fn1(...argArray);
//4. 刪除thisArg綁定的屬性
delete thisArg.fn1;
//5.返回結(jié)果
return result;
};
// 測(cè)試
function test1() {
console.log(this);
}
function sum(num1, num2) {
console.log(this, num1, num2);
return num1 + num2;
}
// 1. 利用系統(tǒng)自帶的apply測(cè)試
console.log("----------1.利用系統(tǒng)自帶的call測(cè)試---------------");
test1.apply(null);
let result1 = sum.apply("ypf1", [10, 20]);
console.log(result1);
// 2. 利用自己寫的測(cè)試
console.log("----------2.利用自己寫的測(cè)試---------------");
test1.ypfapply(null);
let result2 = sum.ypfapply("ypf1", [10, 20]);
console.log(result2);
2. call
(1). xxFn.ypfcall()， 在ypfcall中，this指向xxFn函數(shù)
(2). 需要實(shí)現(xiàn)出入 null 或 undefined的時(shí)候，this指向window
(3). 使用 delete 可以刪除對(duì)象的某個(gè)屬性
(4). 通過Function.prototype原型添加
代碼分享：
/**
* 利用js手寫call函數(shù)
* @param {Object|null|undefined} thisArg 待綁定的對(duì)象
* @param {...any} args 調(diào)用函數(shù)的參數(shù)
*/
Function.prototype.ypfcall = function (thisArg, ...args) {
// 1. 指向待調(diào)用的函數(shù)
let fn = this;
//2. 獲取綁定對(duì)象
thisArg = thisArg != null && thisArg != undefined ? Object(thisArg) : window;
//3.調(diào)用函數(shù)
thisArg.fn1 = fn;
let result = thisArg.fn1(...args);
//4. 刪除多余的屬性
delete thisArg.fn1;
//5. 最終返回
return result;
};
// 測(cè)試
function test1() {
console.log(this);
}
function sum(num1, num2) {
console.log(this, num1, num2);
return num1 + num2;
}
// 1. 利用系統(tǒng)自帶的call測(cè)試
console.log("----------1.利用系統(tǒng)自帶的call測(cè)試---------------");
test1.call(undefined);
let result1 = sum.call("ypf1", 10, 20);
console.log(result1);
// 2. 利用自己寫的測(cè)試
console.log("----------2.利用自己寫的測(cè)試---------------");
test1.ypfcall(undefined);
let result2 = sum.ypfcall("ypf1", 10, 20);
console.log(result2);
3. bind
(1). bind和call相同，接收到參數(shù)是依次傳遞，另外bind返回的是函數(shù)??！
(2). xxFn.ypfbind()， 在ypfbind中，this指向xxFn函數(shù)
(3). 需要實(shí)現(xiàn)出入 null 或 undefined的時(shí)候，this指向window
(4). 使用 delete 可以刪除對(duì)象的某個(gè)屬性
(5). 由于bind返回的是函數(shù)，所以需要聲明1個(gè)函數(shù), 并返回這個(gè)函數(shù)
函數(shù)內(nèi)部核心點(diǎn)：由于bind可以一次性傳遞參數(shù)，也可以多次傳遞參數(shù)，所以需要對(duì)兩個(gè)參數(shù)進(jìn)行一下合并
代碼分享：
Function.prototype.ypfbind = function (thisArg, ...argArray) {
// 1. this指向調(diào)用的函數(shù)
let fn = this;
// 2. 處理綁定參數(shù)
thisArg = thisArg != null && thisArg != undefined ? Object(thisArg) : window;
// 3. 聲明一個(gè)函數(shù)
function DyFun(...argArray2) {
// 綁定函數(shù)
thisArg.fn1 = fn;
// 合并參數(shù)
let finalArgArray = [...argArray, ...argArray2];
// 調(diào)用函數(shù)
let result = thisArg.fn1(...finalArgArray);
// 刪除用完的屬性
delete thisArg.fn1;
// 返回結(jié)果
return result;
}
//4. 返回一個(gè)函數(shù)
return DyFun;
};
// 測(cè)試
function test1() {
console.log(this);
}
function sum(num1, num2) {
console.log(this, num1, num2);
return num1 + num2;
}
// 1. 利用系統(tǒng)自帶的bind測(cè)試
console.log("----------1. 利用系統(tǒng)自帶的bind測(cè)試---------------");
test1.bind(undefined)();
let result1 = sum.bind("ypf1", 10, 20);
console.log(result1());
let result2 = sum.bind("ypf2", 10);
console.log(result2(30));
// 2. 利用自己寫的測(cè)試
console.log("----------2.利用自己寫的測(cè)試---------------");
test1.bind(undefined)();
let result3 = sum.bind("ypf1", 10, 20);
console.log(result3());
let result4 = sum.bind("ypf2", 10);
console.log(result4(30));
關(guān)于“es6有arguments嗎”這篇文章的內(nèi)容就介紹到這里，感謝各位的閱讀！相信大家對(duì)“es6有arguments嗎”知識(shí)都有一定的了解，大家如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。
重慶分公司
重慶分公司
