Javascript ES6(一)

ECMAScript（ES）是 JavaScript 的标准。因为所有主流浏览器都遵循此规范，所以 ECMAScript 和 JavaScript 是可以互换的。
探索 var 和 let 关键字之间的差异
使用 var 关键字来声明变量，会出现重复声明导致变量被覆盖却不会报错的问题。

var camper = 'James';
var camper = 'David';
console.log(camper);

在 ES6 中引入了新的关键字 let 来解决 var 关键字带来的潜在问题。如果你在上面的代码中使用 let 关键字来代替 var 关键字，结果会是一个报错。

let camper = 'James';
let camper = 'David';

你可以在浏览器的控制台里看见这个错误。与 var 不同的是，当使用 let 的时候，同一名字的变量只能被声明一次。请注意 “use strict”。这代表着开启了严格模式，用于检测常见的代码错误以及“不安全”的行为。

比较 var 和 let 关键字的作用域
使用 var 关键字来声明一个变量的时候，这个变量会被声明成全局变量，或是函数内的局部变量。

let 关键字的作用与此类似，但会有一些额外的特性。如果在代码块、语句或表达式中使用关键字 let 声明变量，这个变量的作用域就被限制在当前的代码块、语句或表达式之中。

var printNumTwo;
for (var i = 0; i < 3; i++) {if (i === 2) {printNumTwo = function() {return i;};}
}
console.log(printNumTwo());

这里控制台将显示值 3。
可以看到，printNumTwo() 打印了 3，而不是 2。这是因为赋值给 i 的值已经更新，printNumTwo() 返回全局的 i，而不是在 for 循环中创建函数时 i 的值。 let 关键字就不会出现这种现象：

let printNumTwo;
for (let i = 0; i < 3; i++) {if (i === 2) {printNumTwo = function() {return i;};}
}
console.log(printNumTwo());
console.log(i);

在这里控制台将显示值 2 和一个错误提示 i is not defined。
i 未定义，因为它没有在全局范围内声明。它只在 for 循环语句中被声明。 printNumTwo() 返回了正确的值，因为 let 关键字在循环语句中使 i 变量产生了三个不同的值（分别为 0、1、2）。

防止对象改变
JavaScript 提供了一个函数 Object.freeze。
当一个对象被冻结的时候，你不能再对它的属性再进行增、删、改的操作。任何试图改变对象的操作都会被阻止，却不会报错。

let obj = {name:"FreeCodeCamp",review:"Awesome"
};
Object.freeze(obj);
obj.review = "bad";
obj.newProp = "Test";
console.log(obj);

obj.review 和 obj.newProp 赋值将导致错误，控制台将显示值 { name: “FreeCodeCamp”, review: “Awesome” }。

使用箭头函数编写简洁的匿名函数
在 JavaScript 里，我们会经常遇到不需要给函数命名的情况，尤其是在需要将一个函数作为参数传给另外一个函数的时候。这时，我们会创建匿名函数。因为这些函数不会在其他地方复用，所以我们不需要给它们命名。
这种情况下，我们通常会使用以下语法：

const myFunc = function() {const myVar = "value";return myVar;
}

ES6 提供了其他写匿名函数的方式的语法糖。你可以使用箭头函数：

const myFunc = () => {const myVar = "value";return myVar;
}

当不需要函数体，只返回一个值的时候，箭头函数允许你省略 return 关键字和外面的大括号。这样就可以将一个简单的函数简化成一个单行语句。

const myFunc = () => "value";

这段代码默认会返回字符串 value。

编写带参数的箭头函数
和一般的函数一样，你也可以给箭头函数传递参数。

const doubler = (item) => item * 2;
doubler(4);

doubler(4) 将返回 8。
如果箭头函数只有一个参数，则可以省略参数外面的括号。

const doubler = item => item * 2;

可以给箭头函数传递多个参数。

const multiplier = (item, multi) => item * multi;
multiplier(4, 2);

multiplier(4, 2) 将返回 8.

将 rest 操作符与函数参数一起使用
ES6 推出了用于函数参数的 rest 操作符帮助我们创建更加灵活的函数。 rest 操作符可以用于创建有一个变量来接受多个参数的函数。这些参数被储存在一个可以在函数内部读取的数组中。

function howMany(...args) {return "You have passed " + args.length + " arguments.";
}
console.log(howMany(0, 1, 2));
console.log(howMany("string", null, [1, 2, 3], { }));

控制台将显示字符串 You have passed 3 arguments. 和 You have passed 4 arguments.。

使用 spread 运算符展开数组项
ES6 引入了展开操作符，可以展开数组以及需要多个参数或元素的表达式。

下面的 ES5 代码使用了 apply() 来计算数组的最大值：

var arr = [6, 89, 3, 45];
var maximus = Math.max.apply(null, arr);

maximus 的值为 89。
我们必须使用 Math.max.apply(null, arr)，因为 Math.max(arr) 返回 NaN。 Math.max() 函数中需要传入的是一系列由逗号分隔的参数，而不是一个数组。展开操作符可以提升代码的可读性，使代码易于维护。

const arr = [6, 89, 3, 45];
const maximus = Math.max(...arr);

maximus 的值应该是 89。
…arr 返回一个解压的数组。也就是说，它展开数组。然而，展开操作符只能够在函数的参数中或者数组中使用。下面的代码将会报错：

const spreaded = ...arr;

使用解构赋值来获取对象的值
解构赋值是 ES6 引入的新语法，用来从数组和对象中提取值，并优雅地对变量进行赋值。
有如下 ES5 代码：

const user = { name: 'John Doe', age: 34 };const name = user.name;
const age = user.age;

name 的值应该是字符串 John Doe， age 的值应该是数字 34。

下面是使用 ES6 解构赋值语句，实现相同效果：

const { name, age } = user;

同样，name 的值应该是字符串 John Doe， age 的值应该是数字 34。

在这里，自动创建 name 和 age 变量，并将 user 对象相应属性的值赋值给它们。这个方法简洁多了。

使用解构赋值从对象中分配变量
可以给解构的值赋予一个新的变量名，通过在赋值的时候将新的变量名放在冒号后面来实现。

还是以上个例子的对象来举例：

const user = { name: 'John Doe', age: 34 };

这是指定新的变量名的例子：

const { name: userName, age: userAge } = user;

你可以这么理解这段代码：获取 user.name 的值，将它赋给一个新的变量 userName，等等。 userName 的值将是字符串 John Doe，userAge 的值将是数字 34。

使用解构赋值从嵌套对象中分配变量
你可以使用前两节课程中相同的原则来解构嵌套对象中的值。

使用与前面的例子中类似的对象：

const user = {johnDoe: { age: 34,email: 'johnDoe@freeCodeCamp.com'}
};

这是解构对象的属性值赋值给具有相同名字的变量：

const { johnDoe: { age, email }} = user;

这是将对象的属性值赋值给具有不同名字的变量：

const { johnDoe: { age: userAge, email: userEmail }} = user;

使用解构赋值从数组中分配变量
在 ES6 里面，解构数组可以如同解构对象一样简单。

与数组解构不同，数组的扩展运算会将数组里的所有内容分解成一个由逗号分隔的列表。所以，你不能选择哪个元素来给变量赋值。

而对数组进行解构却可以让我们做到这一点：

const [a, b] = [1, 2, 3, 4, 5, 6];
console.log(a, b);

控制台将显示 a 和 b 的值为 1, 2。
数组的第一个值被赋值给变量 a，数组的第二个值被赋值给变量 b。我们甚至能在数组解构中使用逗号分隔符，来获取任意一个想要的值：

const [a, b,,, c] = [1, 2, 3, 4, 5, 6];
console.log(a, b, c);

控制台将显示 a、b 和 c 的值为 1, 2, 5。

Javascript ES6(一)相关推荐

[转]JavaScript ES6 class指南
[转]JavaScript ES6 class指南前言 EcmaScript 2015 (又称ES6)通过一些新的关键字,使类成为了JS中一个新的一等公民.但是目前为止,这些关于类的新关键字仅仅是建 ...
Javascript - ES6新语法概览
Javascript - ES6新语法概览简介 ES6是JavaScript语言的新一代标准,加入了一些新的功能和语法,正式发布于2015年6月,亦称ES2015:该标准由ECMA(欧洲计算机制造联 ...
es6字符串添加html标签,JavaScript_详解JavaScript ES6中的模板字符串，在 ES6 中引入了一种新的字符 - phpStudy...
详解JavaScript ES6中的模板字符串在 ES6 中引入了一种新的字符串字面量 - 模板字符串,除了使用反引号 (`) 表示,它们看上去和普通的字符串没有什么区别.在最简单的情况下,他们就是 ...
js模板字符串自定义类名_详解JavaScript ES6中的模板字符串
这篇文章主要介绍了详解JavaScript ES6中的模板字符串,JS的ES6版本带来诸多简洁化方面的重大改进,需要的朋友可以参考下在 ES6 中引入了一种新的字符串字面量 - 模板字符串,除了使用 ...
JavaScript ES6 特性
JavaScript ES6 特性下面的代码主要是描述以下内容: let是块区作用域,不会变量提升.var也是块做作用域,但是会变量提升. -展开操作符作用于数组. 数组解构赋值. 对象增强. -展 ...
JavaScript ES6函数：优点
by Bhuvan Malik 通过布凡·马利克(Bhuvan Malik) JavaScript ES6函数:优点 (JavaScript ES6 Functions: The Good Parts ...
前端面试+学习笔记（HTML+CSS+JavaScript+ES6+Vue+NodeJs）
前端面试+学习笔记(HTML+CSS+JavaScript+ES6+Vue+NodeJs) 一. HTML 1. 盒子模型是什么:每个元素被表示为一个矩形的盒子,有四个部分组成:内容(content ...
【视频教程】Javascript ES6 教程39— ES6 ba
在前面,我们一起学了前38节的内容,今天我们开始第39节的内容<ES6 Babel 简介>,希望对你有所帮助. 在这里,简单说明一下,这个系列的视频教程视均来源Youtube,一共有54个 ...
Javascript/ES6箭头函数
Javascript/ES6箭头函数文章目录 Javascript/ES6箭头函数一.箭头函数是什么? 二.箭头函数与普通函数的区别三.箭头函数的使用 1.箭头函数是匿名函数,不能作为构造函数, ...
视频教程-Javascript - Es6之Promise精讲系列-JavaScript
Javascript - Es6之Promise精讲系列全栈开发工程师,现职于北京一家学院的全栈教学主任. 8年前端开发经验.4年移动端开发经验.4年UI设计经验.3年一线教学经验. 精通Node. ...

Javascript ES6(一)

Javascript ES6(一)相关推荐

最新文章

热门文章