文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

es6有arguments吗

2023-07-04 10:51

关注

这篇文章主要介绍了es6有arguments吗的相关知识,内容详细易懂,操作简单快捷,具有一定借鉴价值,相信大家阅读完这篇es6有arguments吗文章都会有所收获,下面我们一起来看看吧。

es6有arguments,但箭头函数是不识别arguments的,所以用rest(剩余参数)来取代arguments;剩余参数直接就固定到数组里了,而arguments是类数组(本质是个对象),还需要转换。剩余参数语法允许将一个不定数量的参数表示为一个数组,不定参数定义方式,这种方式很方便的去声明不知道参数情况下的一个函数。

一、arguments用法

1. 说明

es6中箭头函数是不识别arguments的。所以用rest来取代arguments。

ES6之后,都用剩余参数代替arguments了,剩余参数直接就固定到数组里了,而arguments是类数组(本质是个对象),还需要转换。

2. arguments的常用操作

(1). 获取参数长度

(2). 根据索引获取参数

(3). 获取当前arguments所在的函数

代码分享:

{  console.log("----------------1. arguments常用操作-------------------");  function Test1() {    // arguments长什么样?---本质是一个对象    // {    //     '0': 1,    //     '1': 2,    //     '2': 3,    //     '3': 4,    //     '4': 5,    //     '5': 6,    //     '6': 7,    //     '7': 8    //   }    console.log(arguments);    // 常见的对arguments的操作是三个    // 1.获取参数的长度    console.log(arguments.length);    // 2.根据索引值获取某一个参数    console.log(arguments[0]);    console.log(arguments[1]);    console.log(arguments[2]);    // 3.callee获取当前arguments所在的函数    console.log(arguments.callee);  }  //调用  Test1(1, 2, 3, 4, 5, 6, 7, 8);}

3. 将arguments转换成数组

{  console.log("----------------2. 将arguments转换成数组-------------------");  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转成array    {      let newArray2 = Array.prototype.slice.call(arguments);      console.log(newArray2);    }    // 方案3-ES6语法 Array.From    {      console.log(Array.from(arguments));    }    // 方案4-ES6语法 剩余参数    {      console.log([...arguments]);    }  }  //调用  Test2(1, 2, 3, 4, 5, 6, 7, 8);}

4.  箭头函数中没有arguments

{  console.log("----------------3. 箭头函数中没有arguments-------------------");  let Test3 = () => {    console.log(arguments);  };  Test3(1, 2, 3, 4);}

二. ES6剩余参数和展开运算符

1. 剩余参数(Rest Parameter)

 剩余参数语法允许我们将一个不定数量的参数表示为一个数组,不定参数定义方式,这种方式很方便的去声明不知道参数情况下的一个函数。

代码分享

{  console.log("-----------------1. 剩余参数---------------------");  function sum1(...nums) {    console.log(nums);    console.log(      nums.reduce((preValue, currentValue) => preValue + currentValue, 0)    ); //求和  }  //调用  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      )    ); //求和  }  //调用  sum2(1, 2); //[]  sum2(1, 2, 3); //[3]  sum2(1, 2, 3, 4); //[3,4]}

2.  展开运算符(Spread Operator)

 把固定的数组内容“打散”到对应的参数。

代码分享:

{  console.log("-----------------2. 展开运算符---------------------");  function sum1(num1, num2) {    console.log(num1 + num2);  }  // 调用  let arry1 = [10, 20];  sum1(...arry1);  function sum2(num1, num2, num3) {    console.log(num1 + num2 + num3);  }  //调用  let arry2 = [10, 20, 30];  sum2(...arry2);}

总结:

   1. Spread Operator 和 Rest Parameter 是形似但相反意义的操作符,简单的来说 Rest Parameter 是把不定的参数“收敛”到数组,而 Spread Operator 是把固定的数组内容“打散”到对应的参数。

   2. Rest Parameter 用来解决函数参数不确定的场景,Spread Operator 用来解决已知参数集合应用到固定参数的函数上

三. apply/call/bind用法总结

 1. apply 和 call都是为了改变被调用函数中this的指向, 同时立即执行该函数

 2. bind也是为了改变函数中this的指向,但它返回的是一个函数,需要被调用才能执行

 3. apply 和 call的第一个参数都是传入绑定到对象,用于改变this指向,但是

     (1). apply是将需要传入函数的参数放到一个数组里,传入到第二个参数的位置

     (2). call是从第2,3,4.....位置依次传入需要的参数

 4. bind 后续传入参数的形式和call相同,从第2,3,4.....位置依次传入需要的参数,bind返回的是一个函数,需要再次调用

代码分享:

// 案例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);    },  };  // 调用  console.log(obj.myAge); //undefined (隐式绑定,this指向obj)  obj.getMsg(); //ypf2,undefined  (隐式绑定,this指向obj)}//案例2--只绑定,不传参{  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 };  // 调用  obj.getMsg.apply(obj2); //ypf 35 (apply显式绑定优先级高于隐式绑定,this指向obj2)  obj.getMsg.call(obj2); //ypf 35 (call显式绑定优先级高于隐式绑定,this指向obj2)  obj.getMsg.bind(obj2)(); //ypf 35 (bind显式绑定优先级高于隐式绑定,this指向obj2)}// 案例3--传递参数{  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 };  //调用  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");}

四. apply/call/bind用js实现

1. apply

   (1). xxFn.ypfapply(), 在ypfapply中,this指向xxFn函数

   (2). 需要实现出入 null 或 undefined的时候,this指向window

   (3). 使用 delete 可以删除对象的某个属性

   (4). 通过Function.prototype原型添加

   (5). || 用法

     argArray = argArray?argArray:[]  等价于

     argArray = argArray || []

代码分享:

Function.prototype.ypfapply = function (thisArg, argArray) {  // 1. this指向调用函数  let fn = this;  // 2. 获取传递参数  thisArg = thisArg != null && thisArg != undefined ? Object(thisArg) : window;  //3. 赋值函数并调用  thisArg.fn1 = fn;  argArray = argArray || [];  let result = thisArg.fn1(...argArray);  //4. 删除thisArg绑定的属性  delete thisArg.fn1;  //5.返回结果  return result;};// 测试function test1() {  console.log(this);}function sum(num1, num2) {  console.log(this, num1, num2);  return num1 + num2;}// 1. 利用系统自带的apply测试console.log("----------1.利用系统自带的call测试---------------");test1.apply(null);let result1 = sum.apply("ypf1", [10, 20]);console.log(result1);// 2. 利用自己写的测试console.log("----------2.利用自己写的测试---------------");test1.ypfapply(null);let result2 = sum.ypfapply("ypf1", [10, 20]);console.log(result2);

2. call

(1). xxFn.ypfcall(), 在ypfcall中,this指向xxFn函数

(2). 需要实现出入 null 或 undefined的时候,this指向window

(3). 使用 delete 可以删除对象的某个属性

(4). 通过Function.prototype原型添加

代码分享:

Function.prototype.ypfcall = function (thisArg, ...args) {  // 1. 指向待调用的函数  let fn = this;  //2. 获取绑定对象  thisArg = thisArg != null && thisArg != undefined ? Object(thisArg) : window;  //3.调用函数  thisArg.fn1 = fn;  let result = thisArg.fn1(...args);  //4. 删除多余的属性  delete thisArg.fn1;  //5. 最终返回  return result;};// 测试function test1() {  console.log(this);}function sum(num1, num2) {  console.log(this, num1, num2);  return num1 + num2;}// 1. 利用系统自带的call测试console.log("----------1.利用系统自带的call测试---------------");test1.call(undefined);let result1 = sum.call("ypf1", 10, 20);console.log(result1);// 2. 利用自己写的测试console.log("----------2.利用自己写的测试---------------");test1.ypfcall(undefined);let result2 = sum.ypfcall("ypf1", 10, 20);console.log(result2);

3. bind

 (1). bind和call相同,接收到参数是依次传递,另外bind返回的是函数!!

 (2). xxFn.ypfbind(), 在ypfbind中,this指向xxFn函数

 (3). 需要实现出入 null 或 undefined的时候,this指向window

 (4). 使用 delete 可以删除对象的某个属性

 (5). 由于bind返回的是函数,所以需要声明1个函数, 并返回这个函数

      函数内部核心点:由于bind可以一次性传递参数,也可以多次传递参数,所以需要对两个参数进行一下合并    

代码分享:

Function.prototype.ypfbind = function (thisArg, ...argArray) {  // 1. this指向调用的函数  let fn = this;  // 2. 处理绑定参数  thisArg = thisArg != null && thisArg != undefined ? Object(thisArg) : window;  // 3. 声明一个函数  function DyFun(...argArray2) {    // 绑定函数    thisArg.fn1 = fn;    // 合并参数    let finalArgArray = [...argArray, ...argArray2];    // 调用函数    let result = thisArg.fn1(...finalArgArray);    // 删除用完的属性    delete thisArg.fn1;    // 返回结果    return result;  }  //4. 返回一个函数  return DyFun;};// 测试function test1() {  console.log(this);}function sum(num1, num2) {  console.log(this, num1, num2);  return num1 + num2;}// 1. 利用系统自带的bind测试console.log("----------1. 利用系统自带的bind测试---------------");test1.bind(undefined)();let result1 = sum.bind("ypf1", 10, 20);console.log(result1());let result2 = sum.bind("ypf2", 10);console.log(result2(30));// 2. 利用自己写的测试console.log("----------2.利用自己写的测试---------------");test1.bind(undefined)();let result3 = sum.bind("ypf1", 10, 20);console.log(result3());let result4 = sum.bind("ypf2", 10);console.log(result4(30));

关于“es6有arguments吗”这篇文章的内容就介绍到这里,感谢各位的阅读!相信大家对“es6有arguments吗”知识都有一定的了解,大家如果还想学习更多知识,欢迎关注编程网行业资讯频道。

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-后端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯