ES6

变量let、const

ES5 中,使用 var 定义变量( var 是 variable 的简写)。

ES6 中,新增了 let 和 const 来定义变量:

  • let:定义变量,替代 var。

  • const:定义常量(定义后,不可修改)。

1、let:定义变量

举例 1:

{
 let a = 'hello';
}
console.log(a); // 打印结果报错:Uncaught ReferenceError: a is not defined

上方代码,打印报错。

举例 2:

var a = 2;
{
 let a = 3;
}
console.log(a); // 打印结果:2

通过上面两个例子可以看出,用块级作用域内, 用let 声明的变量,只在局部起作用

经典面试题

let 可以防止数据污染,我们来看下面这个 for 循环的经典面试题。

1、用 var 声明变量:

for (var i = 0; i < 10; i++) {
 console.log('循环体中:' + i);
}
console.log('循环体外:' + i);

上方代码的最后一行可以正常打印结果,且最后一行的打印结果是 10。说明循环体外定义的变量 i,是全局作用域下的 i。

2、用 let 声明变量:

for (let i = 0; i < 10; i++) {
 console.log('循环体中:' + i); // // 每循环一次,就会在 { } 所在的块级作用域中,重新定义一个新的变量 i
}
console.log('循环体外:' + i);

上方代码的关键在于:每次循环都会产生一个块级作用域,每个块级作用域中会重新定义一个新的变量 i

另外,上方代码的最后一行,打印会报错。因为用 let 定义的变量 i,只在{ }这个块级作用域里生效。

总结:我们要习惯用 let 声明,减少 var 声明带来的污染全局空间

为了进一步强调 let 不会带来污染,需要说明的是:当我们定义了let a = 1时,如果我们在同一个作用域内继续定义let a = 2,是会报错的。

2、const:定义常量

在程序开发中,有些变量是希望声明后,在业务层就不再发生变化,此时可以用 const 来定义常量。常量就是值(内存地址)不能变化的量。

举例:

const name = 'smyhvae'; //定义常量

用 const 声明的常量,只在局部(块级作用域内)起作用;而且,用 const 声明常量时,必须赋值,否则报错。

let 和 const 的特点【重要】

  • 不属于顶层对象 Window

  • 不允许重复声明

  • 不存在变量提升 必须先定义后使用

  • 暂时性死区 当内部变量与外部你变量同名时,内部变量屏蔽外部变量

  • 支持块级作用域 该变量在该作用域不会消失

相反, 用var声明的变量:存在变量提升、可以重复声明、没有块级作用域

var/let/const 的共同点

  • 全局作用域中定义的变量,可以在函数中使用。

  • 函数中声明的变量,只能在函数及其子函数中使用,外部无法使用。

this 指向

this:是函数体内的内置对象(this只能出现在函数体内)

1、以函数的形式(包括普通函数、定时器函数、立即执行函数)调用时,this 的指向永远都是 window。比如fun();相当于window.fun();

2、以方法的形式调用时,this 指向调用方法的那个对象

3、以构造函数的形式调用时,this 指向实例对象

4、以事件绑定函数的形式调用时,this 指向绑定事件的对象

5、使用 call 和 apply 调用时,this 指向指定的那个对象

第 1 条的举例

function fun() {
 console.log(this);
 console.log(this.name);
}
var obj1 = {
 name: 'smyh',
 sayName: fun,
};
var obj2 = {
 name: 'vae',
 sayName: fun,
};
var name = '全局的name属性';
//以函数形式调用,this是window
fun(); //可以理解成 window.fun()

打印结果:

 Window
 全局的name属性

上面的举例可以看出,this 指向的是 window 对象,所以 this.name 指的是全局的 name。

第 2 条的举例

function fun() {
 console.log(this);
 console.log(this.name);
}
var obj1 = {
 name: 'smyh',
 sayName: fun,
};
var obj2 = {
 name: 'vae',
 sayName: fun,
};
var name = '全局的name属性';
//以方法的形式调用,this是调用方法的对象
obj2.sayName();

打印结果:

 Object
 vae

上面的举例可以看出,this 指向的是 对象 obj2 ,所以 this.name 指的是 obj2.name。

ES6 箭头函数中 this 的指向

ES6 中的箭头函数并不使用上面的准则,而是会继承外层函数调用的 this 绑定(无论 this 绑定到什么)。

bind() 方法

bind() 方法的作用

bind() 方法不会调用函数,但是可以改变函数内部的 this 指向。

把call()、apply()、bind()这三个方法做一下对比,你会发现:实际开发中, bind() 方法使用得最为频繁。如果有些函数,我们不需要立即调用,但是又想改变这个函数内部的this指向,此时用 bind() 是最为合适的。

语法:

新函数 = fn1.bind(想要将this指向哪里, 函数实参1, 函数实参2);

参数:

  • 第一个参数:在 fn1 函数运行时,指定 fn1 函数的this 指向。如果不需要改变 this 指向,则传 null。

  • 其他参数:fn1 函数的实参。

解释:它不会调用 fn1 函数,但会返回 由指定this 和指定实参的原函数拷贝。可以看出, bind() 方法是有返回值的。

箭头函数

定义箭头函数的语法

语法:

(参数1, 参数2 ...) => { 函数体 }

解释:

  • 如果有且仅有 1 个形参,则()可以省略

  • 如果函数体内有且仅有 1 条语句,则{}可以省略,但前提是,这条语句必须是 return 语句。

    举例

    写法 1、定义和调用函数:(传统写法)

    function fn1(a, b) {
     console.log('haha');
     return a + b;
    }
    console.log(fn1(1, 2)); //输出结果:3
    

    写法 2、定义和调用函数:(ES6 中的写法)

    const fn2 = (a, b) => {
     console.log('haha');
     return a + b;
    };
    console.log(fn2(1, 2)); //输出结果:3
    

    上面的两种写法,效果是一样的。

    从上面的箭头函数中,我们可以很清晰地看到变量名、参数名、函数体。

    【重要】在箭头函数中,如果方法体内只有一句话,且这句话是 return 语句,那就可以把 {}省略。写法如下:

    const fn2 = (a, b) => a + b;
    console.log(fn2(1, 2)); //输出结果:3
    

    在箭头函数中,如果形参只有一个参数,则可以把()省略。写法如下:

    const fn2 = (a) => {
     console.log('haha');
     return a + 1;
    };
    console.log(fn2(1)); //输出结果:2
    

    箭头函数的 this 的指向

    ES6 之前的普通函数中:this 指向的是函数被调用的对象(也就是说,谁调用了函数,this 就指向谁)。

    而 ES6 的箭头函数中:箭头函数本身不绑定 this,this 指向的是箭头函数定义位置的 this(也就是说,箭头函数在哪个位置定义的,this 就跟这个位置的 this 指向相同)。

    const obj = { name: '123' };
    function fn1() {
     console.log(this); // 第一个 this
     return () => {
     console.log(this); // 第二个 this
     };
    }
    const fn2 = fn1.call(obj);
    fn2();
    

    打印结果:

    obj
    obj
    

    代码解释:

    上面的代码中,箭头函数是在 fn1()函数里面定义的,所以第二个 this 跟 第一个 this 指向的是同一个位置。又因为,在执行 fn1.call(obj)之后,第一个 this 就指向了 obj,所以第二个 this 也是指向 了 obj。

变量的解构赋值

解构赋值:ES6 允许我们,按照一一对应的方式,从数组或者对象中提取值,再将提取出来的值赋值给变量。

解构:分解数据结构;赋值:给变量赋值。

解构赋值在实际开发中可以大量减少我们的代码量,并且让程序结构更清晰。

数组的解构赋值

数组的结构赋值:将数组中的值按照位置提取出来,然后赋值给变量。

语法

在 ES6 之前,当我们在为一组变量赋值时,一般是这样写:

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

或者是这样写:

var arr = [1, 2, 3];
var a = arr[0];
var b = arr[1];
var c = arr[2];

现在有了 ES6 之后,我们可以通过数组解构的方式进行赋值:(根据位置进行一一对应)

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

二者的效果是一样的,但明显后者的代码更简洁优雅。

对象的解构赋值

对象的结构赋值:将对象中的值按照属性匹配的方式提取出来,然后赋值给变量。

语法

在 ES6 之前,我们从接口拿到 json 数据后,一般这么赋值:

var name = json.name;
var age = json.age;
var sex = json.sex;

上面这种写法,过于麻烦了。

现在,有了 ES6 之后,我们可以使用对象解构的方式进行赋值。举例如下:

const person = { name: 'qianfan', age: 25, sex: '男' };
let { name, age, sex } = person; // 对象的结构赋值
console.log(name); // 打印结果:qianguyihao
console.log(age); // 打印结果:28
console.log(sex); // 打印结果:男

上方代码可以看出,对象的解构与数组的结构,有一个重要的区别:数组的元素是按次序排列的,变量的取值由它的位置决定;而对象的属性没有次序,是根据键来取值的。

圆括号的使用

如果变量 foo 在解构之前就已经定义了,此时你再去解构,就会出现问题。下面是错误的代码,编译会报错:

	let foo = 'haha';
	{ foo } = { foo: 'smyhvae' };
	console.log(foo);

要解决报错,只要在解构的语句外边,加一个圆括号即可:

let foo = 'haha';
({ foo } = { foo: 'smyhvae' });
console.log(foo); //输出结果:smyhvae

字符串解构

字符串也可以解构,这是因为,此时字符串被转换成了一个类似数组的对象。举例如下:

const [a, b, c, d] = 'hello';
console.log(a);
console.log(b);
console.log(c);
console.log(typeof a); //输出结果:string

打印结果:

h
e
l
string
作者:千帆qf原文地址:https://www.cnblogs.com/qianfanqf/p/16928069.html

%s 个评论

要回复文章请先登录注册