一文大白话讲清楚ES6关于函数的扩展

文章目录

一文大白话讲清楚ES6关于函数的扩展

1. 允许给形参设置默认值

  1. 允许给参数设置默认值,但必须是尾参,如果不在尾参的位置,则无法省略
js 复制代码
function sum(x,y=6){
    return x+y
}
console.log(sum(2))//8
  1. 形参默认是声明的,不能通过let和const重复声明
js 复制代码
function sum(x,y=6){
    let x=5;// Identifier 'x' has already been declared
    return x+y
}
console.log(sum(2))
  1. 参数默认值可以和结构赋值的默认值相结合
js 复制代码
function sum({x,y=6}){
    return x+y
}
console.log(sum({x:2}))//8

2.新增了函数的属性

2.1 函数的length属性

  • 函数的length属性返回从第一次遇到有默认值的之前的没有指定默认参数的个数,说白了,就是在第一次遇到有默认值值之前,有几个没有默认值的
js 复制代码
let fn=function (a,b,c,d=1,f=2){}
console.log(fn.length)//3
 let fn2=function (a,b=1,c,d,f=5){}
console.log(fn2.length)//1

2.2 name属性

  • 返回该函数的名字
js 复制代码
//匿名函数返回的name为空
console.log((function (){}).name)

//匿名变量函数name返回变量的名
let fn1=function (){}
console.log(fn1.name)//fn1

// 具名变量函数,name返回函数的名
let fn2=function fnName(){}
console.log(fn2.name)//fnName

//new Function创建的函数返回anonymoous
console.log((new Function()).name)//anonymoous

let fn3=new Function()
console.log(fn3.name)//anonymoous

// bind绑定的函数返回bound+函数名称
function fnBind(){}
let fn4=fnBind.bind({})
console.log(fn4.name)//bound fnBind

3.参数作用域

  • 如果参数设置了默认值,那么在函数进行声明初始化时,参数会形成单独的作用域
  • 初始化结束后,这个作用域会消失
js 复制代码
const out=5;
function fn(arg=out){
    const out=25;
    console.log(arg)
}
fn()//25

4. 限定严格模式

  • 如果参数中使用了默认值,解构赋值,扩展运算符等,函数内部禁止设为严格模式
js 复制代码
const out=5;
function fn(arg=out,{a,b},...c){
    'use strict'//报错 Illegal 'use strict' directive in function with non-simple parameter list
    const out=25;
    console.log(arg)
}
fn()//25

5. 箭头函数

  • 使用=>定义函数
  1. 如果函数只有一个参数,可以省略()
js 复制代码
let fn=x=>{
    console.log(x)
}
fn(5)//5
  1. 如果函数主题只有一行代码,可以省略{}和 return
js 复制代码
let fn=x=>console.log(x)
// let fn=(x)=>{
//     console.log(x)
// }
fn(5)//5

let fn1=x=>x;
// let fn1=(x)=>{
//     return x
// }
console.log(fn1(10))//10
  1. 如果函数主体只有一行代码,且返回的是对象,则需要把对象用()包起来
js 复制代码
let fn=x=>({a:2})
console.log(fn())//5
  1. 箭头函数内没有this对象
  2. 箭头函数不可以当做构造函数,不可以使用new关键字创建
  3. 箭头函数不可以使用arguments对象
  4. 箭头函数不可以使用yeild命令,所以,不能用作Generator函数
相关推荐
qq. 28040339843 小时前
CSS层叠顺序
前端·css
喝拿铁写前端3 小时前
SmartField AI:让每个字段都找到归属!
前端·算法
猫猫不是喵喵.3 小时前
vue 路由
前端·javascript·vue.js
烛阴4 小时前
JavaScript Import/Export:告别混乱,拥抱模块化!
前端·javascript
bin91534 小时前
DeepSeek 助力 Vue3 开发:打造丝滑的表格(Table)之添加行拖拽排序功能示例12,TableView16_12 拖拽动画示例
前端·javascript·vue.js·ecmascript·deepseek
GISer_Jing4 小时前
[Html]overflow: auto 失效原因,flex 1却未设置min-height &overflow的几个属性以及应用场景
前端·html
程序员黄同学4 小时前
解释 Webpack 中的模块打包机制,如何配置 Webpack 进行项目构建?
前端·webpack·node.js
拉不动的猪4 小时前
vue自定义“权限控制”指令
前端·javascript·vue.js
再学一点就睡4 小时前
浏览器页面渲染机制深度解析:从构建 DOM 到 transform 高效渲染的底层逻辑
前端·css
拉不动的猪5 小时前
刷刷题48 (setState常规问答)
前端·react.js·面试