拓展运算符

...运算符

用来拆数组和类数组结构，将其拆为参数序列

eg

拆数组


let arr1 = [1,2,3,4]
let arr2 = [5,6,7]
console.log([...arr1,...arr2])//将arr1,arr2由...拓展运算符拆为参数序列，再合并为一个数组

拆对象


let obj1 = {name:"a"}
let obj2 = {gender:"1"}
console.log({...obj1,...obj2})
//{name:"a",gender:"1"}

模板字符串

说明

包裹在``反引号之间的内容，可以作为普通字符串使用也可以用来定义多行字符串，或者在字符串中嵌入变量，使用模板字符串则不需要拼接字符


`模板字符串内容`

模板字符串中书写变量

${}

函数参数的默认值

说明

直接将默认值写在函数形参数后面即可

语法Eg


function fn(x=7) {
    console.log(x)
}
fn()//没有传递实参则采用默认值,  7
fn(9)//传递实参， 9

注意

参数变量是默认声明的，所以不能用let或const再次声明
使用参数默认值时，函数不能有同名参数
参数默认值不是传值的，而是每次都重新计算默认值表达式的值

箭头函数

说明

使用箭头() => {}定义函数

语法

javascript
var fn = (parameter1,parameter2) => {function statement}
//ES5中为  
//  function fn(parameter1,parameter2) {
//      function statement
//  }

Eg

当函数需要直接返回一个值(表达式)时可以直接省略大花括号，当函数形参只有一个时可以省略小括号


// function fn(x) {
//    return x
// }
let fn = x => x;
console.log(fn(10)) //输出结果 10

注意

若需要返回一个对象时，需要再对象外层加上小括号避免歧义


var fn = (parameter1,parameter2) => ({key:value,key:value})

箭头函数中this指向问题

说明

箭头函数中this指向：谁创建箭头函数就指向谁

Eg


function Timer() {
  this.s1 = 0;
  this.s2 = 0;
  // 箭头函数
  setInterval(() => this.s1++, 1000);
  // 普通函数
  setInterval(function () {
    this.s2++;
  }, 1000);
}

var timer = new Timer(); 
/* 
创建Timer实例，此时箭头函数创建,普通函数
是window方法，由window调用
*/
setTimeout(() => console.log('s1: ', timer.s1), 3100); // 3
setTimeout(() => console.log('s2: ', timer.s2), 3100); // 0

箭头函数不适用场景

自定义对象方法时，对象不构成单独作用域，箭头函数中的this会指向全局作用域
需要使用动态this时，不应该使用箭头函数
若函数体比较复杂，多行或函数内部有大量读写操作，不单纯为了计算值，也不应该使用箭头函数

目录