1.let(变量) 与 const(常量)
- 之前定义变量,用 var 关键字;有如下主要缺点:
- 存在变量提升问题,降低 js 代码的可阅读性
- 没有块级作用域,容易造成变量污染
- let 主要特性:
- 不存在变量提升问题,只有定义之后才能使用此变量
- 有
{ }
作用域
- const 主要特性:
- 不存在变量提升问题,只有定义之后才能使用此变量
- const 定义的常量,无法被重新赋值
- 当定义常量的时候,必须定义且初始化,否则报语法错误
- const 定义的常量,也有 块级作用域
2.解构赋值
ES6 允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为解构
2.1数组的解构赋值
es6之前,变量赋值:
let a = 1;
let b = 2;
let c = 3;
而es6,可以写成
let [a, b, c] = [1, 2, 3];
本质上,这种写法属于“模式匹配”,只要等号两边的模式相同,左边的变量就会被赋予对应的值。
如果解构不成功,变量的值就等于undefined(
等号左边项>右边项)
let [foo] = [];
let [bar, foo] = [1];
以上两种情况都属于解构不成功,foo
的值都会等于undefined
。
另一种情况是不完全解构,即等号左边的模式,只匹配一部分的等号右边的数组(等号左边项<=右边项)。这种情况下,解构依然可以成功。
let [x, y] = [1, 2, 3];
x // 1
y // 2
let [a, [b], d] = [1, [2, 3], 4];
a // 1
b // 2
d // 4
2.2 对象的解构赋值
解构不仅可以用于数组,还可以用于对象。
对象的解构与数组有一个重要的不同。数组的元素是按次序排列的,变量的取值由它的位置决定;而对象的属性没有次序,变量必须与属性同名,才能取到正确的值。
如果解构失败,变量的值等于undefined
let { bar, foo } = { foo: 'aaa', bar: 'bbb' };
foo // "aaa"
bar // "bbb"
let { baz } = { foo: 'aaa', bar: 'bbb' };
baz // undefined
当然,字符串,函数,布尔值,函数参数都可以结构赋值,这里就不做详细介绍了.
需要了解的,可以参考:ES6 入门教程
3.模板字符串
传统的 JavaScript 语言,输出模板写法相当繁琐不方便,在ES6 引入了模板字符串解决这个问题.
模板字符串(template string)是增强版的字符串,用反引号(`)标识。它可以当作普通字符串使用,也可以用来定义多行字符串,或者在字符串中嵌入变量。
// 普通字符串
`In JavaScript '\n' is a line-feed.`
// 多行字符串
`In JavaScript this is
not legal.`
console.log(`string text line 1
string text line 2`);
// 字符串中嵌入变量
let name = "Bob", time = "today";
`Hello ${name}, how are you ${time}?`
上面代码中的模板字符串,都是用反引号表示。如果在模板字符串中需要使用反引号,则前面要用反斜杠转义。
let greeting = `\`Yo\` World!`;
如果使用模板字符串表示多行字符串,所有的空格和缩进都会被保留在输出之中.如果不想要,可以使用trim
方法消除它
$('#list').html(`
<ul>
<li>first</li>
<li>second</li>
</ul>
`.trim());
模板字符串中嵌入变量,需要将变量名写在${}
之中。
function authorize(user, action) {
if (!user.hasPrivilege(action)) {
throw new Error(
// 传统写法为
// 'User '
// + user.name
// + ' is not authorized to do '
// + action
// + '.'
`User ${user.name} is not authorized to do ${action}.`);
}
}
4.箭头函数
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;
};
使用注意点
箭头函数有几个使用注意点。
(1)函数体内的this
对象,就是定义时所在的对象,而不是使用时所在的对象。
(2)不可以当作构造函数,也就是说,不可以使用new
命令,否则会抛出一个错误。
(3)不可以使用arguments
对象,该对象在函数体内不存在。如果要用,可以用 rest 参数代替。
(4)不可以使用yield
命令,因此箭头函数不能用作 Generator 函数。
注:Promise 对象将在下一篇文章单独讲解,等不及的,可以点击下方参考文档查阅
参考文档:ES6 入门教程 ECMAScript 6 入门 阮一峰
5.ES6+ 可选链操作符
日常开发中有时间需要取接口返回的数据最底层某个字段,一般情况下也没有和后端约定某个字段没有值是返回空还是null,因此有时需要前端一个个去判断每一层的字段是否有值。
row.car_source.selling_price&&row.car_source.selling_price
比如取selling_price这个字段,就需要一个个去判断,比较繁琐。当然也可以在开发之初和后端约定好。这里不做另外说明。简单说下另一个方法:es6新增的语法:可选链操作符,就可以很好的解决这个问题。上面代码可以简化为
row?.car_source?.selling_price&&row?.car_source?.selling_price
对,你没看错,只需要在.的前面加个?,英文状态下的就可以很好的解决这个问题
参考链接: