重学JS（二）----- ES6(上)

真难取名字
722 阅读27分钟

ES6

emmm,最近公司的事情太多了， 上个月后面自己的状态也不是很好，导致自己鸽了，我保证最近一段时间在补起来。。。。。 然后继续补充一下js的基础知识。这里es6主要读的是阮一峰老师的es6.然后自己小小的总结了一下es6中，常用到的以及容易被忽视的内容。真的不是故意咕咕咕的...

let 和const

1. let 命令

let 特点

  • let 作用于为块级作用域 如在for循环中中每一次循环则会创建一个i

  • 不存在变量提升，即声明的变量一定要在声明后使用，否则报错

console.log(a)
let a //Uncaught ReferenceError: a is not defined

  • 暂时性死区。如果块级作用域存在let命令，这个变量就绑定了这个块级作用域.例子如下

    var tmp =123
if(true){
    tmp = "abc"
    let tmp
   
}

    该代码会报错，因为块级作用域let绑定了这个作用域，所以在let声明变量前，对tmp赋值会报错

    • 同时这意味这，typeof不是一个百分百安全的操作
    • 在let 声明变量前，去typeof这个变量 会抛出ReferenceError的错误

  • 不允许重复声明

//报错
function func(){
    let a = 10
    var a = 1
}
//报错
function func(){
    let a = 10
    let a = 1
}

2.const命令

const命令声明了一个只读的常量，一旦声明，常量的值就不能改变

const PI = 3.1415
PI  //3.1415

PI = 3
//TypeError:Missing initializer in const declaration

上面代码表示，对于const来说，只声明不赋值就会报错

const声明的变量不得改变值，这意味着，const一旦声明变量，就必须立即初始化，不能留到以后赋值

  • const的作用域与let命令相同：只在声明所在的块级作用域内有效

  • const命令声明的变量也是不提升，同样存在暂时性死区，只能在声明的位置后面使用

  • const声明的变量和let一样不可重复声明

3.顶层对象的属性

顶层对象，在浏览器环境中指的是window对象，在Node指的是global对象。ES5中，顶层对象的属性和全局变量是等价的

window.a = 1;
a //1
a = 2;
window.a //2

上面代码中，顶层对象的属性赋值与全局变量的赋值，是同一件事

ES6中，var命令和function 命令声明的全局变量，依旧是顶层对象的属性。但是，let命令，const命令，class命令声明的全局变量，不属于顶层对象的属性，也就是说，从ES6开始，全局变量将逐步与顶层对象的属性脱钩

var a = 1;
window.a  //1
let b = 1;
window.b //undefined

上面的代码中，全局变量a由var命令声明，所以它是顶层对象的属性，全局变量b由let命令声明，所以它不是顶层对象的属性，返回undefined

4.globalThis 对象

Javascript 语言存在一个顶层地下，它提供全局环境（即全局作用域），所有代码都是在这个环境中运行，但是，顶层对象在 各种实现里面是不统一的。

  • 浏览器里面，顶层对象是window，但Node和Web Worker没有window
  • 浏览器和Web Worker里面，self也指向顶层对象，但是Node没有self
  • Node里面，顶层对象是global，但其他环境都不支持

同一段代码为了能够在各种环境，都能取到顶层对象，现在一般是使用this变量，但是有局限性。

  • 全局环境中，this会返回顶层对象，但是，Node模块和ES6模块中，this返回的是当前模块
  • 函数里面的this,如果函数不是作为对象的方法运行，而是单纯作为函数运行，this会指向顶层对象，但是，严格模式下，这时this会返回undefined
  • 不管是严格模式还是普通模式，new function（’return this‘）（）总是会返回全局对象，但是，如果浏览器使用了CSP（Content Security Policy,内容安全策略）,那么eval,new Function这些方法都可能无法使用

解构赋值

1.变量的解构赋值

基本用法

ES6 允许按照一定格式，从数组和对象中提取值，对变量进行赋值，这被称为解构

以前，为变量赋值，只能直接指定值

let a = 1;
let b = 2;
let c = 3;

ES6 允许写成下面这样

let [a,b,c] = [1,2,3];

上面代码表示，可以从数组中提取值，按照对应位置，对变量赋值

本质上，属于模式匹配，即等号两边模式相同，左边的变量就会被赋予对应的值。如下

let [foo,[[bar],baz]] = [1,[[2],3]]
foo //1
bar //2
baz //3

let [,,third] = ['foo','bar','baz']
third //"baz"

let [x,,y] = [1,2,3]
x //1
y //3

let [head,...tail] = [1,2,3,4]
head //1
tail //[2,3,4]

let [x,y,...z] = "a"
x //a
y //undefined
z //[]

如果解构不成功，变量的值就等于undefined

let [foo] = []
foo //undefined
let [bar,foo] = [1]
foo //undefined

另外一种情况就是不完全解析，即等号左边的模式，只匹配一部分等号右边的数组，这种情况下，解析依然可以成功

let [x,y] = [1,2,3]
x //1
y //2
let [a,[b],c] = [1,[2,3],4]
a //1
b //2
c //4

如果等号右边不是可遍历的结构，那么将会报错

let [foo] = 1;
let [foo] = false;
let [foo] = NaN;
let [foo] = undefined;
let [foo] = null;
let [foo] = {};

以上的语句都会报错，因为等号右边的值，要么转化成对象后不具备Iterator接口（前五个表达式），那么本身就不具备Iterator接口（最后一个表达式）

如果，某种数据结构具有Iterator接口，都可以采用数组形式的解构赋值。

let [x,y,z] = new Set(['a','b','c'])
x //a

function* fibs(){
    let a = 0;
    let b = 1;
    while(true){
        yield a;
        [a,b] = [b,a+b];
    }
}
let [first,second,third,fourth,fifth,sixth] = fibs();
sixth //5

上述代码中，fibs 是一个Generator函数，原生具有Iterator接口，解析赋值会依次从这个接口获取值。

默认值

解析赋值允许指定默认值

let [foo = true] = []
foo //true

let [x,y = 'b'] = ['a'] //x='a' , y='b'
let [x,y = 'b'] = ['a', undefined] //x='a' , y='b'

注意，ES6内部使用严格相等运算符（===）,判断一个位置是否有值。所以，只有当一个数组成员严格等于undefined,默认值才会生效

let [x = 1] = [undefined] 
x //1

let [x = 1] = [null]
x //null

如果默认值是一个表达式，那么这个表达式是惰性求值的，即只有在用到的时候，才会求职

function f(){
    console.log("aaa")
}

let [x = f()] = [1];

上述代码中，因为X能取到值，所以f函数不会执行，上面的代码等价于：

let x;
if([1][0] === undefined){
    x = f()
}else{
    x = [1][0]
}

默认值可以引用解析赋值的其他变量，但是该变量必须已经声明

let [x = 1, y = x] = [] // x = 1, y = 1
let [x = 1, y = x] = [2] // x = 2 , y = 2
let [x = 1, y = x] = [1,2] //x = 1, y = 2
let [x = y, y = 1] = [] //ReferenceError: y is not defined

最后一个报错的原因，x用y做默认值时，y还没有声明

2.对象的解构赋值

let {foo, bar } = { foo: "aaa", bar: "bbb"};
foo //"aaa"
bar //"bbb"

对象的解析与数组有一个重要的不同，数组的元素是按次序排列的，变量的取值由它的位置决定，而对象的属性没有次序，变量必须与属性同名，才能取到正确的值

let {bar, foo} = {foo: "aaa", bar: "bbb"}
foo // "aaa"
bar // "bbb"

let {baz} = {foo: "aaa", bar: "bbb"};
baz //undefined

如果解析失败，变量的值等于undefined

对象的解构赋值，可以方便的将现有对象的方法，赋值到某个变量

let {log,sin,cos} = Math

const {log} = console;
log("hello") //hello

上面的代码例一将Math对象的对数，正弦，余弦三个方法，赋值到对应的变量上，使用起来就会方便很多。例二将console.log赋值到log变量

如果变量名与属性不一致，必须写成下面这样

let { foo: baz } = { foo:'aaa', bar: 'bbb'};
baz //"aaa"

let obj = { first: 'hello', last: 'world'};
let { first: f, last: l} = obj
f // 'hello'
l // 'world'

和数组一样，解构也可以用于嵌套结构的对象

let obj = {
    p: [
        'hello',
        { y: 'world' }
    ]
}

let { p:[x,{ y }] } = obj;
x // 'hello'
y // 'world'

注意，这时p是模式，不是变量，因此不会被赋值。如果p也要作为变量赋值，可以写成下面这样

let obj = {
    P : [
        'hello',
        {y : 'world'}
    ]
}

let {p,p:[x,{ y }] } = obj;
x // "hello"
y // "world"
p // ["hello",{y:'world'}]

另一个列子

const node = {
    loc: {
        start: {
            line: 1,
            column: 5
        }
    }
};

let {loc,loc:{ start }, loc: { start: {line}} } = node;
line // 1
loc // Object {start: Object}
start //Object {line: 1, column: 5}

上面的代码由三次解构赋值，分别是对 loc``start``line三个属性的解构赋值。注意，最后一次对line属性的解构赋值中，只有line是变量，loc和start都是模式，不是变量

嵌套赋值的例子

let obj = {};
let arr = [];
({ foo: obj.prop, bar: arr[0]}) = {foo: 123, bar: true}
obj //{prop: 123}
arr //[true]

如果解构模式是嵌套对象，而且子对象所在的父属性不存在，那么将会报错

let {foo: {bar}} = {baz: "baz"}

左边等号foo属性对象一个子对象，但是右边没有foo属性 因此 {bar} = undefined

对undefined取子属性bar，则会报错

注意，对象的解析赋值可以取到继承的属性

const obj1 = {}
const obj2 = { foo : 'bar' }
Object.setPrototypeOf(obj1,obj2)

const { foo } = obj1;
foo // "bar"

默认值

对象的解构可以指定默认值

var { x = 3} = {}
x //3
var {x, y = 5} = {x :1}
x //1
y //5

var {x: y =3} = {}
y //3

var {x: y =3} = {x :5}
y //5

var {message: msg = "Somethings went wrong"} = {};
msg // "Something went wrong"

默认值生效的条件是，对象的属性值严格等于undefined

var {x = 3} = {x : undefined}
x // 3
var {x = 3} = { x : null};
x //null

注意点

  1. 如果要将一个已经声明的变量用于解构赋值，必须非常小心
let x;
{x} = {x:1}
//SyntaxError: stntax error

上面代码的写法会报错，因为javaScript 引擎会将{x}理解成一个代码块，从而发生语法错误。只有不将大括号写在行首，避免javascript将其解释为代码块，才能解决这个问题

//正确的写法
let x;
({x} = {x:1});

上面代码将整个解析赋值语句，放在一个圆括号里面，就可以正确执行，关于圆括号与解析赋值的关系，参见下文。

  1. 解析赋值允许等号左边的模式之中，不放置任何变量名。因此，可以写出非常古怪的赋值表达式。
({} = [true,false])
({} = 'abc')
({} = [])

上面的表达式毫无意义，但是是合法的，可以执行

  1. 数组本质是特殊的对象，因此可以对数组进行对象属性的解构
let arr = [1,2,3]
let {0: first, [arr.length - 1 ] : last} = arr
first // 1
last //3

3.字符串的解构赋值

字符串也可以解构赋值。这是因为此时，字符串被转换成了一个类似数组的对象。

const [a,b,c,d,e] = 'hello';
a // 'h'
b // 'e'
c // 'l'
d // 'l'
e // 'o'

let {length : len} = 'hello'
len // 5

4.数值和布尔值的解构赋值

解构赋值时，如果等号右边是数值和布尔值，则会先转为对象

let {toString: s } = 123
s === Number.prototype.toString //true

let {toString: s} = true
s === Boolean.prototype.toString //true

上面代码中，数值和布尔值的包装对象都有toString属性，因此变量s都能取到值。

解构赋值的规则是，只要等号右边的值不是对象或者数组，就先将其转为对象。由于undefined和null无法转为对象，所以对他们进行解构赋值。都会报错

let {prop: x} = undefined;//TypeError
let {prop: y} = null; // TypeError

5.函数参数的解构赋值

函数的参数也可以使用解构赋值

function add([x,y]){
    return x + y;
}

add([1,2]); //3

上面的代码中，函数add的参数表面上是一个数组，但是传入参数的那一刻，数组参数就被解构成变量x和y。对于函数内部的代码来说，他们能感受到的参数就是x和y

function move({x = 0,y = 0} = {}){
    return [x,y];
}
move({x: 3, y: 8}); // [3,8]
move({x: 3}); // [3,0]
move({}); // [0,0]
move(); // [0,0]

如下写法则为另一种结果

function move({x,y} = {x : 0, y: 0}){
    return [x,y];
}
move({x: 3,y: 8}); // [3,8]
move({x: 3}) // [3,undefined]
move({}) // [undefined,undefined]
move() //[0,0]

[1,undefined,3].map((x = 'yes') => x); 
// [ 1, 'yes', 3]

函数参数的默认值

ES6 之前，不能直接为函数的参数指定默认值，只能采用变通的方法。

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

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

上面的代码却带你在于，如果参数赋值了，但是对应的布尔值为false,则该赋值不起作用。就像上面的代码的最后一行，参数y等于空字符，结果被改为默认值。

为了避免这个问题，通常需要先判断一下参数y是否被赋值，如果没有，再等于默认值。

if(typeof y==='undefined'){
    y = 'World'
}

ES6 允许为函数的参数设置默认值，即直接写在参数定义的后面。

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

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

可以看到，ES6的写法比ES5简洁许多，而且非常自然。下面是另一个例子

function Point(x = 0, y = 0){
    this.x = x;
    this.y = y;
}

const p = new Point();
p //{ x:0, y: 0}

除了简介，还有以下两个好处。

  1. 阅读代码的人，可以立刻意识到哪些参数是可以省略的，不用查看函数体或文档；
  2. 有利于将来的代码优化，即使未来的版本再对外接口中，彻底拿掉这个参数，也不会导致以前的代码无法运行。

参数变量是默认声明的，所以不能用let 或const 再次声明。

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

上面的代码中，参数变量x是默认声明的，在函数体中，不能用let或const再次声明，否则会报错。

使用参数默认值时，函数不能有同名参数。

// right
function foo(x,x,y){
    //...
}

//error
function foo(x,x,y = 1){
    //....
}

另外，一个容易忽略的地方是，参数默认值不是传值的，而是每次都重新计算默认值表达式的值。也就是说，参数默认值是惰性求值的。

let x =99;
function foo(p = x + 1){
    console.log(p);
}

foo() // 100

x = 100;
foo() //101

上面代码中，参数p的默认值是x+1。这时，每次调用函数foo，都会重新计算x+1,而不是默认p等于100

与解构赋值默认值结合使用

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

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才会通过解构赋值生成。如果函数foo调用时没提供参数，变量x和y就不会生成，从而报错。通过提供函数参数的默认值，就可以避免这种情况。

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

上面的代码指定，如果没有提供参数，函数foo的参数默认为一个空对象。

下面是另一个解构赋值默认值的例子。

function fetch(url,{ body = '', method = "GET", headers = {} }) {
    console.log(method);
}

fetch('http://example.com',{})
// "GET"

fetch('http://example.com')
//报错

// 写法一
function m1({x = 0, y = 0} = {}){
    return [x,y];
}

//写法二
function m2({x,y} = {x:0,y:0}) {
    return [x,y];
}

//没有参数
m1() //[0,0]
m2() //[0,0]

// x 和 y 都有值的情况
m1({x: 3, y: 8}) //[3, 8]
m2({x: 3, y: 8}) //[3, 8]

//x 有值，y 无值的情况
m1({x:3}) //[3, 0]
m2({x:3}) //[3,undefined]

//x和y都无值的情况
m1({}) // [0,0]
m2({}) // [undefined,undefined]

m1({z: 3}) //[0, 0]
m2({z: 3}) //[undefined, undefined]

上面两种写法都对函数的参数设定了默认值，区别是写法一函数参数的默认值是空对象，但是设置了对象解构赋值的默认值；写法二函数参数的默认值是一个有具体属性的对象，但是没有设置对象解构赋值的默认值。

参数默认值的位置

通常情况下，定义了默认值的参数，应该是函数的尾参数。因为这样比较容易看出来，到底省略了那些参数。如果非尾部的参数设置默认值，实际上这个参数是没法省略的。

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

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

//例2
function f(x,y = 5,z){
    return [x,y,z]
}

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

上面的代码中，有默认值的参数都不是尾参数。这时，无法只省略该参数，而不省略它后面的参数，除非显示输入undefined.

如果传入undefined，将触发该参数等于默认值，null则没有这个结果。

function foo(x = 5, y = 6){
    console.log(x,y);
}
foo(undefined,null){
    // 5 null
}

上面的代码中，x参数对应undefined,结果触发了默认值，y参数等于null，就没有触发默认值。

函数的length属性

制定了默认值之后，函数的length属性，将返回没有指定默认值的参数个数。也就是说，制定了默认值后，length属性将失真。

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

上面代码中，length属性的返回值，等于函数的参数个数减去指定了默认值的参数个数.比如，上面最后一个函数，定义了3个参数，其中有一个参数c指定了默认值，因此length属性等于3减去1，最后得到2。

这是因为length属性的含义是，该函数预期传入的参数个数。某个参数指定默认值以后，预期传入的参数个数就不包括这个参数了。同理，后文的rest参数也不会计入length属性。

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

(function(...arg){}).length // 0

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

作用域

一旦设置了参数的默认值，函数进行声明初始化时，参数会形成一个单独的作用域（context）。等到初始化结束，这个作用域就会消失。这种语法行为，在不设置参数默认值时，是不会出现的。

var x = 1;
function f(x,y = x){
    console.log(y);
}

f(2) //2

上面的代码，参数y的默认值等于变量x.调用函数f时，参数形成一个单独的作用域。在这个作用域里面，默认值x指向第一个参数x,而不是全局变量x,所以输出是2.

再看下面的列子。

let x = 1;
function f(y = x){
    let x = 2;
    console.log(y);
}

f() // 1

上面的代码中，函数f调用时，参数y = x形成一个单独的作用域。这个作用域里面，变量x本身没有定义，所以指向外层的全局变量x.函数调用时，函数体内部的局部变量x影响不到默认值变量x.

如果此时，全局变量x不存在，就会报错

function f(y = x){
    let x = 2;
    console.log(y);
}

f() //ReferenceError: x is not defined

下面这样写，也会报错

var x = 1
function foo(x = x){
    // ...
}
foo() //ReferenceError: x is not defined

上面代码中，参数x = x形成一个单独的作用域。实际执行的是let x = x ,由于暂时性死区的原因，这行代码会报错”x 未定义“。

如果参数的默认值是一个函数，该函数的作用域也遵守这个规则。请看下面的例子。

let foo = 'outer';

function bar(func = () => foo){
    let foo = 'inner';
    console.log(func());
}

bar(); //outer

上面代码中，函数bar的参数func是一个匿名函数，返回值为foo。函数参数形成的单独作用域里面，没有foo,所以foo指向外层的全局变量foo，因此输出outer

var x =1;
function foo(x, y = function(){ x = 2}){
    var x = 3;
    y();
    console.log(x);
}

foo() //3
x //1

上面代码中，函数foo的参数形成了一个单独的作用域。这个作用域里面，首先声明了变量x,然后声明了变量y，y的默认值是一个匿名函数。这个匿名函数内部的变量x，指向同一个作用域的第一个参数x.函数foo内部又声明了一个内部变量x，该变量与第一个参数x由于不是同一个作用域，所以不是同一个变量，因此执行y后，内部变量x和外部全局变量x的值都没变

如果将var x = 3的var去除，函数foo的内部变量x就指向第一个参数x，与匿名函数内部的x是一致的，所以最后输出的就是2，而外层的全局变量x依然不受影响。

var x = 1;
function foo(x,y = function(){ x = 2;}){
    x = 3;
    y();
    console.log(x);
}

foo() //2 
x // 1

rest参数

ES6引入rest参数（形式为...变量名），用于获取函数的多余参数，这样就不需要使用arguments对象了。rest参数搭配的变量是一个数组，该变量将多余的参数放入数组中。

function add(...values){
    let sum = 0;
    
    for(var val of values){
        sum += val;
	}
    
    return sum;
}

add(2, 5, 3) //10

add函数为求和函数,利用rest 参数，可以传入任意数目的参数。

下面是一个 rest参数代替arguments变量的例子。

// arguments 变量写法
function sortNumbers(){
    return Array.prototype.slice.call(arguments).sort();
}

//rest参数的写法
const sortNumber = (...numbers)=>number.sort();

arguments对象不是数组，而是一个类似数组的对象。所以为了使用数组的方法，必须使用Array.prototype.slice.call先将其转为数组。rest参数就不存在这个问题，它就是一个真正的数组，数组特有的方法都可以使用。

function push(array,...items){
    items.forEach(function(item){
        array.push(item);
        console.log(item);
    })
}

var a = [];
push(a, 1, 2, 3)
  • rest参数之后不能再有其他参数(即只能是最后一个参数)，否则会报错
  • 函数length属性包括 rest参数
// 报错
function f(a,...b,c){
    // ...
}


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

箭头函数

基本用法

ES6 允许使用"箭头"（=>）定义函数

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" };

//不报错
let getTempItem = id => ({ id: id, name: "Temp" });

下面是一种特殊情况，虽然可以运行，但会得到错误的结果。

let foo = () => { a: 1 };
foo() // undefined

上面代码中，原示意图是返回一个对象{ a: 1},但是由于引擎认为大括号是代码块，所以执行了一行语句a: 1。这时a可以被解释为语句的标签，因此实际执行的语句是1;，然后函数就结束了，没有返回值。

如果箭头函数只有一行语句，且不需要返回值，可以采用下面的写法，就不用写大括号了。

let fn = () => void doesNotReturn();

箭头函数可以与变量解构结合使用。

const full = ({ first, last }) => first + ' ' + last;

//等同于
function full(person) {
    return person.first + ' ' + person.last;
}

箭头函数使得表达更加简介。

const isEven = n => n % 2 === 0;
const square = n => n * n;

上面代码只用了两行，就定义了两个简单的工具函数。如果不用箭头函数，可能就要占用多行，而且还不如现在这样醒目

箭头函数的一个用处是简化回调函数

// 正常函数写法
[1,2,3].map(function(x) {
    return x * x;
});

// 箭头函数的写法
[1,2,3].map(x => x * x);

另一个例子是

// 正常函数的写法
var result = values.sort(function(a,b) {
    return a - b;
})

//箭头函数写法
var result = values.sort((a,b) => a - b);


const numbers = (...nums) => nums;

number(1, 2, 3, 4, 5)
// [1,2,3,4,5]

const headAndTail = (head,...tail) => [head,tail];

headAndTail(1, 2, 3, 4, 5)
// [1,[2,3,4,5]]

使用注意点

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

上面四点中，第一点尤其值得注意。this对象的指向是可变的，但是在箭头函数中，他是固定的。

function foo(){
    setTimeout(() => {
        console.log('id', this.id)
    }, 100);
}

var id = 21;

foo.call({ id: 42 });
// id: 42

上面代码中，setTimeout的参数是一个箭头函数，这个箭头函数的定义生效是在foo函数生成时，而它真正执行要等到100毫秒之后。如果是普通函数，执行时this应该指向全局对象window,这时应该输出21。但是，箭头函数导致this总是指向函数定义生效所在的对象（本例是{id: 42}）,所以输出的是42

箭头函数可以让setTimeout里面的this，绑定定义时所在的作用域，而不是指向运行时所在的作用域。下面是另一个例子。

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

var timer = new Timer();

setTimeout(() => console.log('s1: ', timer.s1), 3100);
setTimeout(() => console.log('s2: ', timer.s2), 3100);
// s1: 3
// s2: 0

上面的代码中，Timer函数内部设置了两个定时器，分别使用了箭头函数和普通函数。

前者的this绑定定义时所在的作用域(即Timer函数) ，后者的this指向运行时所在的作用域(即全局对象) 。所以，3100 毫秒之后，timer.s1被更新3次，而time,s2一次都没更新。

箭头函数可以让this指向固定化，这种特性很有利于封装回调函数。下面是一个例子，DOM 事件的回调函数封装在一个对象里面。

var handler = {
    id: '123456',
    
    init: function() {
        document.addEventListener('click',
          event => this.doSomething(event,type),false);
    },
    
    doSomething: function(type) {
        console.log('Handing' + type + ' for ' + this.id);
    }
};

上面代码的init方法中，使用了箭头函数，这导致这个箭头函数里面的this，总是指向handler对象。否则，回调函数运行时，this.doSomething这一行会报错，因为此时this指向document对象。

this指向的固定化，并不是因为箭头函数内部有绑定this的机制，实际原因是箭头函数根本没有自己的this，导致内部的this就是外层代码块的this.正是因为它没有this,所以也就不能用作构造函数。

箭头函数转成ES5 代码如下

// ES6 
function foo() {
    setTimeout(() => {
        console.log('id: ', this.id);
    },100)
}

// ES5
function foo() {
    var _this = this;
    
    setTimeout(function () {
        console.log("id",_this.id);
    },100);
}

上面的代码中，转化后的ES5 版本清楚的说明了，箭头函数里面根本没有自己的this,而是应用外层的this

function foo() {
    return () => {
        return () => {
            return () => {
                console.log('id: ', this.id)
            }
        }
    }
}

var f = foo.call({id: 1});

var t1 = f.call({id: 2})()(); // id: 1
var t2 = f().call({id: 3})(); // id: 1
var t3 = f()().call({id: 4}); // id: 1

上面代码中，只有一个this,就是函数foo的this，所以t1,t2,t3都输出同样的结果。因为所有的内层函数都是箭头函数，都没有自己的this，他们的this其实都是最外层foo函数的this。

除了this，以下三个变量在箭头函数之中也是不存在的，指向外层函数的对应变量：arguments,super,new.target

function foo() {
    setTimeout(() => {
        console.log('args:', arguments);
    }, 100);
}

foo(2, 4, 6, 8)
// args: [2, 4, 6, 8]

上面的代码中，箭头函数内部的变量arguments，其实是函数foo的arguments变量。

另外，由于箭头函数没有自己的this，所以当然也就不能用call(),apply(),bind()这些方法去改变this指向。

(function() {
    return [
        (() => this.x).bind({ x: 'inner' })()
    ];
}).call({ x: 'outer' });
// ['outer']

上面的代码中，箭头函数没有自己的this，所以bind方法无效，内部的this指向外部的this。

长期以来，Javascript语言this对象一直是一个令人头疼的问题，在对象方法中使用this，必须非常小心。箭头函数"绑定"this，很大程度上解决了这个困扰。

不适合场合

由于箭头函数使得this从"动态"变成"静态"，下面两个场合不应该使用箭头函数。

第一个场合时定义对象的方法，且该方法内部包括this。

const cat = {
    lives: 9,
    jumps: () => {
        this.lives--;
    }
}

上述代码中，cat.jumps()方法是一个箭头，这是错误的。调用cat.jumps()时，如果是普通函数，该方法内部的this指向cat；如果写成上面那样的箭头函数，使得this指向全局对象，因此不会得到预期结果。这时因为对象不构成单独的作用域，导致jumps箭头函数定义时的作用域就是全局作用域。

第二个场景是需要动态this的时候，也不应使用箭头函数。

var button  = document.getElementById('press');
button.addEventListener('click',() => {
    this.classList.toggle('on');
})

上面代码运行时，点击按钮会报错，因为button的监听函数是一个箭头函数，导致里面的this就是全局对象。如果改成普通函数，this就会动态指向被点击的按钮对象。

另外，如果函数体很复杂，有许多行，或者函数内部有大量的读写操作，不单纯是为了计算值，这时 也不应该使用箭头函数，而是要使用普通函数，这样可以提高代码的可读性。

嵌套的箭头函数

箭头函数的内部，还可以再使用箭头函数。下面是一个ES5 语法的多重嵌套函数。

function insert(value) {
    return {into: function(array) {
        return {after: function(afterValue) {
            array.splice(array.indexOf(afterValue) + 1, 0, value);
        }};
    }};
}

insert(2).into([1, 3]).after(1); //[1, 2, 3]

//用箭头函数改写
let insert = (value) => ({into: (array) => ({after: (afterValue) => {
    array.splice(array.indexOf(afterValue) + 1, 0, value);
    return array;
}})})

insert(2).into([1,3]).after(1);// [1, 2, 3]

下面是一个部署管道机制(pipeline)的例子，即前一个函数的输出是后一个函数的输入。

const pipeline = (...funcs) =>
	val => funcs.reduce((a,b) => b(a), val);

const plus1 = a => a + 1;
const mults = a => a * 2;
const addThenMult = pipeline(plus1,mult2);

addThenMult(5)
// 12

//等价于
const plus1 = a => a + 1；
const mult2 = a => a * 2;

mult2(plus1(5)) // 12

catch命令的参数省略

Javascript语言的try...catch结构，以前明确要求catch命令后面必须跟参数，接受try代码块抛出的错误对象。

try {
    // ...
} catch(err) {
    // 处理错误
}

上面代码中，catch命令后面带有参数err。

很多时候，catch代码块可能用不到这个参数。但是为了确保 语法正确，还是必须写。ES2019做出了改变，允许catch语法省略参数

try {
    // ...
} catch {
    // ...
}

在这个月尽量吧ES6(下)以及Vue3源码解析4给写完，然后就开始，写一些Vue相关生态的相关源码解析内容~

avatar
文章
阅读
粉丝