ES6语法笔记

在ES6(ECMAScript 2015)中,… 是所谓的展开运算符(spread operator)或剩余运算符(rest operator),它有几个用途。
1.展开运算符(Spread Operator):
当你看到…在函数调用、数组字面量或对象字面量前时,它用作展开运算符。
数组:用于将一个数组的元素展开到另一个数组中,或者用于函数调用时传递数组的元素作为单独的参数。

const arr1 = [1, 2, 3];  
const arr2 = [...arr1, 4, 5]; // [1, 2, 3, 4, 5]   
function myFunction(a, b, c) {  
  console.log(a, b, c);  
  const args = [1, 2, 3];  
myFunction(...args); // 输出: 1 2 3
}  

对象:用于将一个对象的所有可枚举属性复制到另一个对象中。

const obj1 = { a: 1, b: 2 };  
const obj2 = { ...obj1, c: 3 }; // { a: 1, b: 2, c: 3 }

2.剩余运算符(Rest Operator):
在函数参数或解构赋值中,…用作剩余运算符,用于收集一个函数的不定数量的参数到一个数组中,或者在解构赋值时收集剩余的属性到一个对象中。
函数参数:用于收集一个函数的不定数量的参数到一个数组中。

function myFunction(...args) {  
  console.log(args); // 数组形式,包含所有参数  
}  
myFunction(1, 2, 3); // 输出: [1, 2, 3]

解构赋值:用于在解构数组或对象时收集剩余的元素或属性。

const [first, ...rest] = [1, 2, 3, 4]; // first: 1, rest: [2, 3, 4]  
const { a, ...others } = { a: 1, b: 2, c: 3 }; // a: 1, others: { b: 2, c: 3 }

通过结合这些功能,ES6中的…运算符为处理数组和对象提供了更加灵活和简洁的方式。

箭头函数(Arrow Function)是ES6中引入的一种新的函数语法,它使用=>符号来定义函数。箭头函数提供了更简洁的语法,并且不绑定自己的this,arguments,super或new.target。这使得箭头函数在回调函数中特别有用,因为它可以更容易地处理this的上下文。
箭头函数的基本格式如下:

(parameters) => { functionBody }

无参数:

() => { console.log('Hello, World!'); }
单个参数:
javascript
x => { console.log(x); }

如果函数体只有一条语句,并且这条语句是一个返回语句,你还可以进一步简化箭头函数:

x => console.log(x)
多个参数:
javascript
(x, y) => { console.log(x, y); }

立即执行的函数表达式(IIFE):
虽然箭头函数不能用作构造函数(即不能使用new关键字),但它们可以用作立即执行的函数表达式(IIFE):

(() => {  
    console.log('This will run immediately.');  
})();

返回值:
当箭头函数返回一个值时,可以省略花括号,并且如果返回的是一个对象字面量,需要用圆括号包围对象,以避免与函数体的花括号混淆:

// 返回数字  
x => x * x  
// 返回一个对象  
x => ({ key: x })

使用this:
箭头函数不绑定自己的this,它会捕获其所在上下文的this值,作为自己的this值:

function OuterFunction() {  
    this.value = 1;  
    this.innerFunction = () => {  
        console.log(this.value); // 输出:1  
    };  
    this.innerFunction2 = function() {  
        console.log(this.value); // 输出:1  
    };  
}  
  
const outer = new OuterFunction();  
outer.innerFunction(); // 使用箭头函数  
outer.innerFunction2(); // 使用传统函数

注意,箭头函数没有arguments对象。如果需要访问类似arguments的东西,可以使用剩余参数(rest parameters):

(...args) => {  
    for (let arg of args) {  
        console.log(arg);  
    }  
}

总之,箭头函数提供了一种更简洁、更直观的方式来编写函数,尤其是在处理回调函数和this上下文时。

相关推荐

  1. ES6语法笔记

    2024-04-09 22:52:04       15 阅读
  2. ES6基础语法

    2024-04-09 22:52:04       40 阅读
  3. ES6 - 语法

    2024-04-09 22:52:04       15 阅读
  4. es6基础语法

    2024-04-09 22:52:04       8 阅读
  5. ES6笔记总结

    2024-04-09 22:52:04       27 阅读
  6. ES6笔记-symbol

    2024-04-09 22:52:04       29 阅读

最近更新

  1. TCP协议是安全的吗?

    2024-04-09 22:52:04       16 阅读
  2. 阿里云服务器执行yum,一直下载docker-ce-stable失败

    2024-04-09 22:52:04       16 阅读
  3. 【Python教程】压缩PDF文件大小

    2024-04-09 22:52:04       15 阅读
  4. 通过文章id递归查询所有评论(xml)

    2024-04-09 22:52:04       18 阅读

热门阅读

  1. 计算机网络技术-TCP传输连接的建立和释放过程;

    2024-04-09 22:52:04       14 阅读
  2. 津津的储蓄计划

    2024-04-09 22:52:04       16 阅读
  3. HBase详解(4)

    2024-04-09 22:52:04       11 阅读
  4. Git汇总

    2024-04-09 22:52:04       11 阅读
  5. MSsql数据库 sql注入

    2024-04-09 22:52:04       15 阅读
  6. 进程替换exec系列介绍

    2024-04-09 22:52:04       14 阅读
  7. Linux C++ 022-函数模板

    2024-04-09 22:52:04       10 阅读
  8. python把视频按帧转化为图片并保存

    2024-04-09 22:52:04       15 阅读
  9. Linux下I2C驱动框架:I2C 设备驱动

    2024-04-09 22:52:04       16 阅读
  10. 【Linux篇】makefile一次形成两个可执行

    2024-04-09 22:52:04       17 阅读
  11. Kubernetes统一管理vGPU:原理、实现与挑战

    2024-04-09 22:52:04       17 阅读