1、let和const
与var不同,新的变量声明方式带来了一些不一样的特性,其中最重要的两个特性就是提供了块级作用域与不再具备变量提升
{ let a = 20; } console.log(a); // a is not defined
当然,代码编译成为了ES5之后,仍然会存在变量提升,因此这一点只需要我们记住即可。在实际使用中,尽量避免使用变量提升的特性带来的负面影响。
使用ES6,我们需要全面使用let/const替换var,什么时候用let,什么时候用const就成为了一个大家要熟练区分的一个知识点。
我们常常使用let来声明一个值会被改变的变量,而使用const来声明一个值不会被改变的变量,也可以称之为常量。
当值为基础数据类型时,那么这里的值,就是指值本身。
而当值对应的为引用数据类型时,那么我这里说的值,则表示指向该对象的引用。这里需要注意,正因为该值为一个引用,只需要保证引用不变就可以,我们仍然可以改变该引用所指向的对象。
当我们试图改变const声明的变量时,则会报错。
let a = null; a = 20; const obDev = { a: 20, b: 30 } obDev.a = 30; console.log(obDev); // Object {a: 30, b: 30} const fn = function() {} const a = obDev.a; ... ...
2、箭头函数
ES6颠覆了js的编码习惯,箭头函数的使用占了很大一部分。
首先是写法上的不同:
// es5 var fn = function(a, b) { return a + b; } // es6 箭头函数写法,当函数直接被return时,可以省略函数体的括号 const fn = (a, b) => a + b; // es5 var foo = function() { var a = 20; var b = 30; return a + b; } // es6 const foo = () => { const a = 20; const b = 30; return a + b; }
需要注意的是,箭头函数可以替换函数表达式,但是不能替换函数声明。
其次还有一点,箭头函数中,没有this。如果在箭头函数中使用了this,那么该this一定就是外层的this。
也正是因为箭头函数中没有this,也就无从谈起用call/apply/bind来改变this指向
var person = { name: 'tom', getName: function() { return this.name; } } // 如果试图用ES6的写法来重构上面的对象 const person = { name: 'tom', getName: () => this.name } // 编译结果却是 var person = { name: 'tom', getName: function getName() { return undefined.name; } };
在ES6中,会默认采用严格模式,因此this也不会自动指向window对象了,而箭头函数本身并没有this,因此this就只能是undefined,如果想用this,就不要用使用箭头函数的写法。
3、模板字符串
模板字符串是为了解决使用+号拼接字符串的不便利而出现的。它的功能很强大,但是使用它则非常简单。举个简单的小例子:
// es5 var a = 20; var b = 30; var string = a + "+" + b + "=" + (a + b); // es6 const a = 20; const b = 30; const string = `${a}+${b}=${a+b}`;
使用 `` 将整个字符串包裹起来,而在其中使用 ${} 来包裹一个变量或者一个表达式。
4、展开运算符
在ES6中用...
来表示展开运算符,它可以将数组方法或者对象进行展开。
const arr1 = [1, 2, 3]; const arr2 = [...arr1, 10, 20, 30]; // 这样,arr2 就变成了[1, 2, 3, 10, 20, 30];
展开运算符还用在函数的参数中,来表示函数的不定参。只有放在最后才能作为函数的不定参,否则会报错。
// 所有参数之和 const add = (a, b, ...more) => { return more.reduce((m, n) => m + n) + a + b } console.log(add(1, 23, 1, 2, 3, 4, 5)) // 39
5、class
ES6为我们创建对象提供了新的语法糖,这就是Class语法。
// ES5 // 构造函数 function Person(name, age) { this.name = name; this.age = age; } // 原型方法 Person.prototype.getName = function() { return this.name } // ES6 class Person { constructor(name, age) { // 构造函数 this.name = name; this.age = age; } getName() { // 原型方法 return this.name } }
原文地址:https://www.cnblogs.com/qsdf/p/10479424.html
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。