ES6-函数拓展

• 1. rest操作符和拓展运算符
  • rest操作符
  • …拓展运算符
    • 用途
• 2. 解构赋值和默认赋值
  • 解构赋值
  • 默认赋值
  • 解构赋值和默认赋值配合使用
• 3. 箭头函数
  • 示例
  • 定义
  • 使用方法
  • 注意事项

1. rest操作符和拓展运算符

rest操作符

ES6引入 rest参数, 代替arguments变量, 用于获取函数的实参

// ES5获取函数实参的方法
function add() {
    // 类数组
    console.log(arguments)
}
add(1, 2)

// ES6获取函数实参的方法
function add(...args) {
    // 数组 可以使用数组的方法
    consol.log(args)
}
add(1, 2)

rest参数必须放到函数参数声明的最后一个 代表剩余的所有的实参的集合

function add (a, b, ...args) {
    console.log(a, b, args)
}
add(1, 2, 3, 4, 5, 6) // success a = 1, b = 2, c = [3, 4, 5, 6]

function add (a, ...args, b) {
    console.log(a, b, args)
}
add(1, 2, 3, 4, 5, 6) // error  Rest parameter must be last formal parameter

…拓展运算符

... 拓展运算符能将数组转换为逗号分隔的参数序列

const arr = ['1', '2', '3']
console.log(...arr) // success 1 2 3;

let nums = [1, 2, 3]
function add() {
    console.log(arguments)
}
add(...nums) // success {0: 1, 1: 2, 2: 3, callee: xxx}; 类数组

用途

数组的合并(浅克隆)

const nums1 = ['1', '2', '3']
const nums2 = ['4', '5', '6']

// ES5的操作方法concat
const nums3 = nums1.concat(nums2)
console,log(nums3) // success ['1', '2', '3', '4', '5', '6']

// ES6的操作方法 ...拓展运算符
const nums3 = [...nums1, ...nums2]
console,log(nums3) // success ['1', '2', '3', '4', '5', '6']

将伪数组转换为真正的数组

const divs = document.querySeleclAll('div');
console.log(divs) // success 类数组

const divArr = [...divs]
console.log(divArr) /// success 数组 可以使用some map filter等数组函数

2. 解构赋值和默认赋值

解构赋值

函数add的参数表面上是一个数组,但在传入参数的那一刻,数组参数就被结构成变量 x 和 y

function add([x,y]) {
    console.log(x , y)
}
add() // x = 1; y = 2;

let arr = [[1,2],[3,4]].map(function([a,b]){
    return a + b;
    // 第一次: [1,2] [a,b] 模式匹配 return 3
    // 第二次: [3,4] [a,b] 模式匹配 return 7
})
console.log(arr) // success [3, 7]

默认赋值

函数参数的默认赋值用到了iterator迭代器遍历, 因此传参必须是可迭代的, 否则会报错

function fn({x, y = 5}){
    console.log(x,y)
}
//没有传对象 为null 没有Symbol.iterator属性 无法遍历
fn() // error Cannot destructure property 'x' of 'undefined' as it is undefined.

具有默认值的参数 一般放在最后的位置

解构赋值和默认赋值是ES6的语法, 所以会使用let声明变量, 因此不允许重复声明变量

// 没有默认值
function add(a, a, b) {
    console.log(a, a, b)
}
// 变量重复定义 不会报错 但是相同变量 后面的值会覆盖前面的值
add(1, 2, 3) // success 2, 2, 3

// 存在默认值
function add(a, b, b = 3) {
    console.log(a, b, b)
}
// 变量重复定义 存在默认值 浏览器报错
add(1, 2, 3) // error Duplicate parameter name not allowed in this context

解构赋值和默认赋值配合使用

function deal({x,y} = {x: 1 , y: 2}) {
    console.log(x, y);
}
//deal函数在调用的时候 参数严格等于undefined 默认赋值生效
deal() // success x = 1; y = 2

function move({x = 0,y = 0} = {}) {
    console.log(x, y);
}
// move函数在调用的时候 没有传参 满足默认赋值的条件(严格等于undefined) 默认赋值了一个空对象 
// move函数接收到空对象 x和y的默认赋值生效(严格等于undefined) 像x = 0; y = 0;
move() // success x = 0; y = 0

3. 箭头函数

示例

function Car(){
    var name = 'xw';
    var fn = () => {console.log(this.name)}
    fn();
}
Car() // success 'xw'; 此时F()函数内this的指向为Window
new Car() //success 'undefined'; 此时this的指向为隐式创建的this对象

定义

箭头函数适用于与this无关的定时器、数据操作方法的回调函数

箭头函数不适应与和this有关的回调函数 DOM元素事件的回调 对象的方法（不指向对象，指向外层作用域的this）

var arrowFunc = ([arg1, arg2, ...]) => { ... }

// 定时器
dom.addEventListener('click', function () {
    let _this = this
    setTimeout(function(){
        // 此时this指向的是window 只能使用_this(指向当前dom元素)
        _this.style.background = 'pink'
    }, 2000)

    setTimeout(() => {
        // this的指向为当前dom元素
        this.style.background = 'pink'
    }, 2000)
})

// 对象的方法
var sayHello = {
    ctn : 'Hello World!',
    say : () => {
        console.log(this.ctn)
    },
    say1 : function () {
        console.log(this.ctn)
    }
}
sayHello.say() // undefined; this指向window window对象上没有ctn变量
sayHello.say1() // Hello World!; this指向sayHello

使用方法

箭头函数只有一个参数的时候 ()可以省略

var add = n => {return n * n }

箭头函数的代码体只有一条语句的时候, {}可以省略, 此时return也必须省略,语句的执行结果就是箭头函数的返回值

var add = n => n * n

箭头函数return对象的时候比较特殊, 需要用()包裹, 否则会被优先识别成代码块

// error 编辑器报错 识别成代码块 两条语句之间不能用,
var add = () => {a: 1, b: 2}

// success 成功返回一个对象
var add = () => ({a: 1, b: 2}) 

注意事项

箭头函数的this指向的是定义时作用域的this, 而不是使用时的this, 无法用call和apply

var name = 'Hello World!'
var hello = {
    name : 'GoodMorning!'
}

var sayHello = function () {
    console.log(this.name)
}
var sayHello1 = () => console.log(this.name)

// 实例一
sayHello() // Hello World!; this指向window对象
sayHello1() // Hello World!; this指向window对象

// 实例二
sayHello.call(hello) // GoodMorning!; this指向hello对象
sayHello1.calc(hello) // Hello World!; this指向window对象

箭头函数无法当作构造函数

var Hello = () => {
    return {
        name : 'xxx',
        age : 12
    }
}
new Hello() // error Uncaught TypeError: Hello is not a constructor

箭头函数无法使用arguments变量, 需要使用...拓展运算符来代替

var add = () => {
    console.log(arguments)
}
add(1, 2, 3) // error Uncaught ReferenceError: arguments is not defined

var add = (...args) => {
    // args 类数组
    console.log(args)
}
add(1, 2, 3) // success [1, 2, 3]

箭头函数无法使用yield命令,不能当作Generator函数