分享更有价值
被信任是一种快乐

es6有arguments吗

文章页正文上

这篇文章主要介绍了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中,实现点击选中列表非常简单,只需要使用Vue提供的v-on指…

文章页内容下
赞(0) 打赏
版权声明:本站采用知识共享、学习交流,不允许用于商业用途;文章由发布者自行承担一切责任,与本站无关。
文章页正文下
文章页评论上

云服务器、web空间可免费试用

宝塔面板主机、支持php,mysql等,SSL部署;安全高速企业专供99.999%稳定,另有高防主机、不限制内容等类型,具体可咨询QQ:360163164,Tel同微信:18905205712

主机选购导航云服务器试用

登录

找回密码

注册