当前位置:首页 > 技术分析 > 正文内容

es6中函数默认参数、箭头函数、剩余参数-讲解

ruisui882个月前 (03-17)技术分析8

1.函数默认参数,调用时最后一个参数不传相应实参也可以执行

function show(a="哈哈",b="你好") {
    console.log(a,b);
}
show('啦啦',);//啦啦 你好
function show2({x,y=0}) {
    console.log(x,y)
}
show2({x:1});//1,0

2.函数的参数名默认已经定义了,不能再用let,const重复定义

function show3(a=18) {
    let a=100;
    console.log(a)
}
show3();//报错Identifier 'a' has already been declared

3.三个点... 扩展运算符、rest运算符,剩余运算符,可应用于展开数组 重置数组 排序

let arr=['apple','banana','orange'];
    console.log(...arr);//apple banana orange
//展开数组
function show4(...a) {
    console.log(a);
}
show4(1,2,3,4,5);//[1, 2, 3, 4, 5]
//重置数组
function show4(...arr1) {
    //let arr1=Array.prototype.slice.call(arguments);
    return arr1.sort();
}
console.log(show4(10,2,111,4,50));//按照首数字排序。非大小
//排序
function show5(a,b,c) {
      console.log(a,b,c);
}
show5(...[1,9,8]);//1 9 8
function show6(a,b,...c) {
      console.log(a,b);
      console.log(c)
}
show6(1,2,3,4,5);//1 2  //[3,4,5]
//接收剩余的参数为数组
let arr3=[1,2,3,4,5],
    arr4=[...arr3];
    //等同于
let arr5=Array.from(arr3);
console.log(arr3,arr4,arr5);
//复制数组
let str='a-b-c';
let arr6=Array.from(str);
console.log(arr6);//["a", "-", "b", "-", "c"];
//字符串拆成单个字符的数组

4.箭头函数

function show7() {
      return 1;
}
//等同于
let show8=()=>1;
console.log(show7(),show8()); //1 1
let show9=(d=8,f=12)=>{
     console.log(d,f);
     return d+f;
};
show9(5,12);
console.log(show9(5,12));//17
格式1:()=>return的东西,实用性不高
格式2:
()=>{
语句;
    return;
}
var id=10;//var 定义一个变量属于window
let json={
    id:1,
    show:function() {
        setTimeout(()=>{
            alert(this.id);//谁调用this,this就是谁的。即this为定义函数所在的对象,不是在运行时所在的对象。
        }//1而不是10
        ,2000);
        alert(this.id);
    }
};
json.show();

(1)当你用了箭头函数,this不属于当前函数,是属于当前定义的对象所在的范围。
(2)在箭头函数里面没有arguments,用...解决
(3)箭头函数不能当构造函数

let show10=(...args)=>{
    console.log(args);
};
show10(1,2,3,4,5);
let show11=()=>{
    this.name='abc';
};
let s=new show11();
alert(s.name);//报错
ajax(url,(res)=>{
    //当前函数没有this作用域
})

es5:this被谁调用this属于谁,箭头函数的this是定义函数所在的对象。

扫描二维码推送至手机访问。

版权声明:本文由ruisui88发布,如需转载请注明出处。

本文链接:http://www.ruisui88.com/post/2812.html

分享给朋友:

“es6中函数默认参数、箭头函数、剩余参数-讲解” 的相关文章

使用cgroup限制进程资源

这里使用containerd项目中的cgroup包来实现进程资源限制。先写一个耗费一个CPU并且一秒增加10m内存的测试进程package mainimport ( "fmt" "math/rand" "time")func main() { go f...

7 招教你轻松搭建以图搜图系统

作者 | 小龙责编 | 胡巍巍当您听到“以图搜图”时,是否首先想到了百度、Google 等搜索引擎的以图搜图功能呢?事实上,您完全可以搭建一个属于自己的以图搜图系统:自己建立图片库;自己选择一张图片到库中进行搜索,并得到与其相似的若干图片。Milvus 作为一款针对海量特征向量的相似性检索引擎,旨在...

一起学Vue:路由(vue-router)

前言学习vue-router就要先了解路由是什么?前端路由的实现原理?vue-router如何使用?等等这些问题,就是本篇要探讨的主要问题。vue-router是什么路由是什么?大概有两种说法:从路由的用途上来解释路由就是指随着浏览器地址栏的变化,展示给用户的页面也不相同。从路由的实现原理上来解释路...

Vue实现动态路由

通常我们在vue项目中都是前端配置好路由的,但在一些项目中我们可能会遇到权限控制,这样我们就涉及到动态路由的设置了。动态路由设置一般有两种:(1)、简单的角色路由设置: 比如只涉及到管理员和普通用户的权限。通常直接在前端进行简单的角色权限设置(2)、复杂的路由权限设置: 比如OA系统、多种角色的权限...

VUE 技术栈

官网链接:https://cn.vuejs.org/什么是vue:渐进式JavaScript 框架vue-cli链接:https://cli.vuejs.org/vue-cli安装:npm install -g @vue/clivue -V创建一个项目:vue create xxxxxx模版语法:文...

基于 vue3.0 小程序拖拽定制

今天给大家分享一个使用Vue3编写的自由DIY小程序页面。mbDIY 一款基于vue3.x构建的可拖拽定制小程序模板。支持新建页面、自由拖拽模块、复制/移动、自定义模块样式等功能。整个项目分为页面、模块、控件三大部分。模块里面的组件可拖拽至主面板区,编辑后保存即可预览效果。快速安装# 克隆项目 gi...