这篇文章主要介绍了es6有arguments吗的相关知识,内容详细易懂,操作简单快捷,具有一定借鉴价值,相信大家阅读完这篇es6有arguments吗文章都会有所收获,下面我们一起来看看吧。 es6有arguments,但箭头函数是不识别arguments的,所以用rest(剩余参数)来取代arguments;剩余参数直接就固定到数组里了,而arguments是类数组(本质是个对象),还需要转换。剩余参数语法允许将一个不定数量的参数表示为一个数组,不定参数定义方式,这种方式很方便的去声明不知道参数情况下的一个函数。1. 说明es6中箭头函数是不识别arguments的。所以用rest来取代arguments。ES6之后,都用剩余参数代替arguments了,剩余参数直接就固定到数组里了,而arguments是类数组(本质是个对象),还需要转换。2. arguments的常用操作(1). 获取参数长度(2). 根据索引获取参数(3). 获取当前arguments所在的函数代码分享:
{ console.log("----------------1.arguments常用操作-------------------"); functionTest1(){ //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转换成数组-------------------"); functionTest2(){ //方案1-自己遍历 { letnewArray=[]; for(leti=0;i
4. 箭头函数中没有arguments
{ console.log("----------------3.箭头函数中没有arguments-------------------"); letTest3=()=>{ console.log(arguments); }; Test3(1,2,3,4); }
1. 剩余参数(Rest Parameter) 剩余参数语法允许我们将一个不定数量的参数表示为一个数组,不定参数定义方式,这种方式很方便的去声明不知道参数情况下的一个函数。代码分享
{ console.log("-----------------1.剩余参数---------------------"); functionsum1(...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] functionsum2(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.展开运算符---------------------"); functionsum1(num1,num2){ console.log(num1+num2); } //调用 letarry1=[10,20]; sum1(...arry1); functionsum2(num1,num2,num3){ console.log(num1+num2+num3); } //调用 letarry2=[10,20,30]; sum2(...arry2); }
总结: 1. Spread Operator 和 Rest Parameter 是形似但相反意义的操作符,简单的来说 Rest Parameter 是把不定的参数“收敛”到数组,而 Spread Operator 是把固定的数组内容“打散”到对应的参数。 2. Rest Parameter 用来解决函数参数不确定的场景,Spread Operator 用来解决已知参数集合应用到固定参数的函数上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--------------------"); letname="ypf1"; letage=18; letobj={ 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--只绑定,不传参 /* 注意1个细节,bind后面多了个(),bind返回的是一个新函数,必须调用才能执行 */ { console.log("----------------案例2--------------------"); letname="ypf1"; letage=18; letobj={ name:"ypf2", myAge:this.age, getMsg:function(){ console.log(this.name,this.age); }, }; letobj2={name:"ypf3",age:35}; //调用 obj.getMsg.apply(obj2);//ypf35(apply显式绑定优先级高于隐式绑定,this指向obj2) obj.getMsg.call(obj2);//ypf35(call显式绑定优先级高于隐式绑定,this指向obj2) obj.getMsg.bind(obj2)();//ypf35(bind显式绑定优先级高于隐式绑定,this指向obj2) } //案例3--传递参数 /* apply传递数组 call和bind都是依次写参数 特别注意:bind可以多次传递参数 */ { console.log("----------------案例3--------------------"); letname="ypf1"; letage=18; letobj={ name:"ypf2", myAge:this.age, getMsg:function(msg1,msg2){ console.log(this.name,this.age,msg1,msg2); }, }; letobj2={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--多次传参 letfn1=obj.getMsg.bind(obj2,"消息1"); fn1("消息2"); }
1. apply (1). xxFn.ypfapply(), 在ypfapply中,this指向xxFn函数 (2). 需要实现出入 null 或 undefined的时候,this指向window (3). 使用 delete 可以删除对象的某个属性 (4). 通过Function.prototype原型添加 (5). || 用法 argArray = argArray?argArray:[] 等价于 argArray = argArray || []代码分享:
/** *利用js手写call函数 *@param{Object|null|undefined}thisArg待绑定的对象 *@param{Array}argArray调用函数的数组参数 */ Function.prototype.ypfapply=function(thisArg,argArray){ //1.this指向调用函数 letfn=this; //2.获取传递参数 thisArg=thisArg!=null&&thisArg!=undefined?Object(thisArg):window; //3.赋值函数并调用 thisArg.fn1=fn; argArray=argArray||[]; letresult=thisArg.fn1(...argArray); //4.删除thisArg绑定的属性 deletethisArg.fn1; //5.返回结果 returnresult; }; //测试 functiontest1(){ console.log(this); } functionsum(num1,num2){ console.log(this,num1,num2); returnnum1+num2; } //1.利用系统自带的apply测试 console.log("----------1.利用系统自带的call测试---------------"); test1.apply(null); letresult1=sum.apply("ypf1",[10,20]); console.log(result1); //2.利用自己写的测试 console.log("----------2.利用自己写的测试---------------"); test1.ypfapply(null); letresult2=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原型添加代码分享:
/** *利用js手写call函数 *@param{Object|null|undefined}thisArg待绑定的对象 *@param{...any}args调用函数的参数 */ Function.prototype.ypfcall=function(thisArg,...args){ //1.指向待调用的函数 letfn=this; //2.获取绑定对象 thisArg=thisArg!=null&&thisArg!=undefined?Object(thisArg):window; //3.调用函数 thisArg.fn1=fn; letresult=thisArg.fn1(...args); //4.删除多余的属性 deletethisArg.fn1; //5.最终返回 returnresult; }; //测试 functiontest1(){ console.log(this); } functionsum(num1,num2){ console.log(this,num1,num2); returnnum1+num2; } //1.利用系统自带的call测试 console.log("----------1.利用系统自带的call测试---------------"); test1.call(undefined); letresult1=sum.call("ypf1",10,20); console.log(result1); //2.利用自己写的测试 console.log("----------2.利用自己写的测试---------------"); test1.ypfcall(undefined); letresult2=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指向调用的函数 letfn=this; //2.处理绑定参数 thisArg=thisArg!=null&&thisArg!=undefined?Object(thisArg):window; //3.声明一个函数 functionDyFun(...argArray2){ //绑定函数 thisArg.fn1=fn; //合并参数 letfinalArgArray=[...argArray,...argArray2]; //调用函数 letresult=thisArg.fn1(...finalArgArray); //删除用完的属性 deletethisArg.fn1; //返回结果 returnresult; } //4.返回一个函数 returnDyFun; }; //测试 functiontest1(){ console.log(this); } functionsum(num1,num2){ console.log(this,num1,num2); returnnum1+num2; } //1.利用系统自带的bind测试 console.log("----------1.利用系统自带的bind测试---------------"); test1.bind(undefined)(); letresult1=sum.bind("ypf1",10,20); console.log(result1()); letresult2=sum.bind("ypf2",10); console.log(result2(30)); //2.利用自己写的测试 console.log("----------2.利用自己写的测试---------------"); test1.bind(undefined)(); letresult3=sum.bind("ypf1",10,20); console.log(result3()); letresult4=sum.bind("ypf2",10); console.log(result4(30));
关于“es6有arguments吗”这篇文章的内容就介绍到这里,感谢各位的阅读!相信大家对“es6有arguments吗”知识都有一定的了解,大家如果还想学习更多知识,欢迎关注云技术行业资讯频道。
本篇内容主要讲解“vue如何实现点击选中商品列表的功能”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“vue如何实现点击选中商品列表的功能”吧! 在Vue中,实现点击选中列表非常简单,只需要使用Vue提供的v-on指…