ES6函数新增了哪些扩展?

这篇具有很好参考价值的文章主要介绍了ES6函数新增了哪些扩展?。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

一、参数

ES6允许为函数的参数设置默认值

function log(x, y = 'World') {
  console.log(x, y);
}

console.log('Hello') // Hello World
console.log('Hello', 'China') // Hello China
console.log('Hello', '') // Hello

函数的形参是默认声明的,不能使用let或const再次声明

function foo(x = 5) {
    let x = 1; // error
    const x = 2; // error
}

参数默认值可以与解构赋值的默认值结合起来使用

function foo({x, y = 5}) {
  console.log(x, y);
}

foo({}) // undefined 5
foo({x: 1}) // 1 5
foo({x: 1, y: 2}) // 1 2
foo() // TypeError: Cannot read property 'x' of undefined

上面的foo函数,当参数为对象的时候才能进行解构,如果没有提供参数的时候,变量x和y就不会生成,从而报错,这里设置默认值避免

function foo({x, y = 5} = {}) {
  console.log(x, y);
}

foo() // undefined 5

参数默认值应该是函数的尾参数,如果不是非尾部的参数设置默认值,实际上这个参数是没发省略的

function f(x = 1, y) {
  return [x, y];
}

f() // [1, undefined]
f(2) // [2, undefined]
f(, 1) // 报错
f(undefined, 1) // [1, 1]

二、属性

函数的length属性

length将返回没有指定默认值的参数个数


```javascript
(function (a) {}).length // 1
(function (a = 5) {}).length // 0
(function (a, b, c = 5) {}).length // 2

rest 参数也不会计入length属性

```javascript
(function(...args) {}).length // 0

如果设置了默认值的参数不是尾参数,那么length属性也不再计入后面的参数了

(function (a = 0, b, c) {}).length // 0
(function (a, b = 1, c) {}).length // 1

name属性

返回该函数的函数名

var f = function () {};

// ES5
f.name // ""

// ES6
f.name // "f"

如果将一个具名函数赋值给一个变量,则 name属性都返回这个具名函数原本的名字

const bar = function baz() {};
bar.name // "baz"

Function构造函数返回的函数实例,name属性的值为anonymous

(new Function).name // "anonymous"

bind返回的函数,name属性值会加上bound前缀

function foo() {};
foo.bind({}).name // "bound foo"

(function(){}).bind({}).name // "bound "

三、作用域

一旦设置了参数的默认值,函数进行声明初始化时,参数会形成一个单独的作用域

等到初始化结束,这个作用域就会消失。这种语法行为,在不设置参数默认值时,是不会出现的

下面例子中,y=x会形成一个单独作用域,x没有被定义,所以指向全局变量x

let x = 1;

function f(y = x) { 
  // 等同于 let y = x  
  let x = 2; 
  console.log(y);
}

f() // 1

四、严格模式

只要函数参数使用了默认值、解构赋值、或者扩展运算符,那么函数内部就不能显式设定为严格模式,否则会报错

// 报错
function doSomething(a, b = a) {
  'use strict';
  // code
}

// 报错
const doSomething = function ({a, b}) {
  'use strict';
  // code
};

// 报错
const doSomething = (...a) => {
  'use strict';
  // code
};

const obj = {
  // 报错
  doSomething({a, b}) {
    'use strict';
    // code
  }
};

五、箭头函数

使用“箭头”(=>)定义函数

var f = v => v;

// 等同于
var f = function (v) {
  return v;
};

如果箭头函数不需要参数或需要多个参数,就使用一个圆括号代表参数部分

var f = () => 5;
// 等同于
var f = function () { return 5 };

var sum = (num1, num2) => num1 + num2;
// 等同于
var sum = function(num1, num2) {
  return num1 + num2;
};

如果箭头函数的代码块部分多于一条语句,就要使用大括号将它们括起来,并且使用return语句返回

var sum = (num1, num2) => { return num1 + num2; }

如果返回对象,需要加括号将对象包裹

let getTempItem = id => ({ id: id, name: "Temp" });

注意点:文章来源地址https://www.toymoban.com/news/detail-456037.html

  • 函数体内的this对象,就是定义时所在的对象,而不是使用时所在的对象
  • 不可以当作构造函数,也就是说,不可以使用new命令,否则会抛出一个错误
  • 不可以使用arguments对象,该对象在函数体内不存在。如果要用,可以用 rest 参数代替
  • 不可以使用yield命令,因此箭头函数不能用作 Generator 函数

到了这里,关于ES6函数新增了哪些扩展?的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 【ES】笔记-ES6的函数rest参数用法

    es6中引入了rest参数,样式形如…xxx,用于获取函数的多余参数,这样就不需要使用arguments对象了。rest参数搭配的一个变量是一个数组,该变量将多余的参数放入数组中。例如: 上面代码的add函数是一个求和函数,利用rest参数,可以向该函数传入任意数目的参数。 下面是一

    2024年02月13日
    浏览(31)
  • JavaScript全解析——ES6函数中参数的默认值和解构赋值

    本文为千锋资深前端教学老师带来的【JavaScript全解析】系列,文章内含丰富的代码案例及配图,从0到1讲解JavaScript相关知识点,致力于教会每一个人学会JS! 文末有本文重点总结,可以收藏慢慢看~ 更多技术类内容,主页关注一波! 给函数的形参设置一个默认值, 当你没有传

    2024年02月05日
    浏览(30)
  • 【Javascript】ES6新增之类的认识

    在现代编程语言中,类是面向对象编程范式中的核心概念之一。 与函数类似,类本质上是一种特殊的函数,它允许我们将数据和操作封装在一起,以创建具有共同行为和状态的对象。 在类的世界里,我们有类表达式和类声明,它们各自具有自己的特性和用途。 ✨ 类本质上是

    2024年02月13日
    浏览(30)
  • ES6 - 对象新增的一些常用方法

    再ES5中 比较两个值是否相等,只有两个运算符:相等运算符( == )和严格相等运算符( === ) 但它们都有缺点,前者会 自动转换 数据类型,后者的 NaN 不等于自身,以及 +0 等于 -0 。 先说它们两个的比较过程: 双等号== : (1)如果两个值类型相同,再进行三个等号(===)的

    2024年02月13日
    浏览(23)
  • ES6对象扩展

    ES6对象扩展是指在ES6中新增的一些对象属性和方法,包括对象属性的简写、计算属性名、对象方法的简写、对象的可迭代性、拓展运算符等。 下面是一些常用的ES6对象扩展: 对象属性的简写 ES6中,当对象的属性名和赋值变量名相同时,可以简写属性名称,例如: 这里的na

    2024年02月07日
    浏览(26)
  • ES6基础知识五:你是怎么理解ES6新增Set、Map两种数据结构的?

    如果要用一句来描述,我们可以说 Set是一种叫做集合的数据结构,Map是一种叫做字典的数据结构 什么是集合?什么又是字典? 集合 是由一堆无序的、相关联的,且不重复的内存结构【数学中称为元素】组成的组合 字典 是一些元素的集合。每个元素有一个称作key 的域,不同

    2024年02月16日
    浏览(28)
  • 【ES6】—数组的扩展

    ES5 的 slice 方法 arguments 是一个对应于传递给函数的参数的类/伪数组对象 ES6的Array.from()方法 PS: 通过new Array的时候,参数为多个时,参数表示的是数组的值;参数为一个时,参数表示是数组的长度 参数:copyWithin(target, start, end) target: 从哪个索引开始替换 strat: 元素复制的起始

    2024年02月12日
    浏览(25)
  • ES6--》对象扩展方法

    目录 对象扩展 name 属性 属性的遍历 super Object.is() Object.assign() Object.getOwnPropertyDescriptors() Object.setPrototypeOf() Object.getPrototypeOf() Object.keys()、Object.values、Object.entries()、Object.fromEntries() Object.hasOwn() 本文简单介绍以下ES6对对象新增的方法: name 属性 函数的name属性,返回函数

    2024年02月21日
    浏览(28)
  • ES6-扩展运算符“...“

    … 称为 “展开运算符” (spread operator),它可以将数组或对象展开成一个列表或一组键值对,常用于组合两个或多个阵列。 说明:不会修改原数组 典型运用场景 求最大最小值 合并数组  组合对象 函数赋值  解构赋值

    2024年02月07日
    浏览(30)
  • ES6中的数值扩展

    二进制和八进制的前缀分别为0b(或0B)和0o(或0O)表示 在ES5的严格模式下,八进制不再允许使用前缀 0 表示 如果要将 0b 和 0x 前缀的字符串数值转为十进制,要使用Number方法 Number.isFinite() 用来检测一个数值是否是有限的(finite)。 Number.isNaN() 用来检测一个值是否为NaN 这两个方法与

    2024年02月07日
    浏览(30)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包