ES6

  • ES6已关闭评论
  • 103 次浏览
  • A+
所属分类:Web前端
摘要

ES5 中,使用 var 定义变量( var 是 variable 的简写)。ES6 中,新增了 let 和 const 来定义变量:


变量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 
  • 版权声明:本站原创文章,于2022年11月26日20:05:57,由 发表,共 4338 字。
  • 转载请注明:ES6 - 张拓的天空