1、let与var关键字之间的差异
在使用 var 关键字来声明变量时,会出现重复声明导致变量被覆盖却不会报错的问题。在es6中引入了新的关键字 let 来解决 var 关键字带来的潜在问题。“use strict” 这代表着开启了严格模式,用于检测常见的代码错误以及“不安全”的行为。
let catName;
let quote;
function catTalk() {
"use strict";
catName = "Oliver";
quote = catName + " says Meow!";
}
catTalk();
2、比较 var 和 let 关键字的作用域
使用 var 关键字来声明一个变量的时候,这个变量会被声明成全局变量,或是函数内的局部变量。let 关键字的作用与此类似,但会有一些额外的特性。 如果在代码块、语句或表达式中使用关键字 let 声明变量,这个变量的作用域就被限制在当前的代码块、语句或表达式之中。
function checkScope() {
let i = 'function scope';
if (true) {
let i = 'block scope';
console.log('Block scope i is: ', i);
}
console.log('Function scope i is: ', i);
return i;
}
3、用 const 关键字声明只读变量
let 并不是唯一的新的声明变量的方式。 在 ES6 里面,你还可以使用 const 关键字来声明变量。const 拥有 let 的所有优点,不同的是,通过 const 声明的变量是只读的。 这意味着通过 const 声明的变量只能被赋值一次,而不能被再次赋值。
function printManyTimes(str) {
// 只修改这一行下面的代码
const SENTENCE = str + " is cool!";
for (let i = 0; i < str.length; i+=2) {
console.log(SENTENCE);
}
// 只修改这一行上面的代码
}
printManyTimes("freeCodeCamp");
4、改变一个用 const 声明的数组
一些开发者倾向于默认使用 const 来声明所有变量,除非他们打算后续重新给变量赋值, 那么他们在声明的时候就会用 let。然而,你要注意,对象(包括数组和函数)在使用 const 声明的时候依然是可变的。 使用 const 来声明只会保证变量不会被重新赋值。
const s = [5, 7, 2];
function editInPlace() {
// 只修改这一行下面的代码
// 使用 s = [2, 5, 7] 将无效
//s.sort((a,b) => {
// return a - b
//})
s[0] = 2
s[1] = 5
s[2] = 7
console.log(s)
// 只修改这一行上面的代码
}
editInPlace();
因为对象和数组是引用类型,s中保存的只是数组的指针,这就意味着,const仅保证指针不发生改变,修改数组的值并不会改变数组的指针,所以是被允许的。也就是说const定义的引用类型只要指针不发生改变,其他的不论如何改变都是允许的。
5、防止对象改变
const 声明并不会真的保护数据不被改变。 为了确保数据不被改变,JavaScript 提供了一个函数 Object.freeze。当一个对象被冻结的时候,你不能再对它的属性再进行增、删、改的操作。 任何试图改变对象的操作都会被阻止,却不会报错。
function freezeObj() {
const MATH_CONSTANTS = {
PI: 3.14
};
// 只修改这一行下面的代码
Object.freeze(MATH_CONSTANTS)
// 只修改这一行上面的代码
try {
MATH_CONSTANTS.PI = 99;
} catch(ex) {
console.log(ex);
}
return MATH_CONSTANTS.PI;
}
const PI = freezeObj();
6、使用箭头函数编写简洁的匿名函数
在 JavaScript 里,我们会经常遇到不需要给函数命名的情况,尤其是在需要将一个函数作为参数传给另外一个函数的时候。 这时,我们会创建匿名函数。 因为这些函数不会在其他地方复用,所以我们不需要给它们命名。
var magic = function() {
return new Date();
};
ES6 提供了其他写匿名函数的方式的语法糖。 你可以使用箭头函数:当不需要函数体,只返回一个值的时候,箭头函数允许你省略 return 关键字和外面的大括号。 这样就可以将一个简单的函数简化成一个单行语句。
const magic = () => new Date()
7、编写带参数的箭头函数
和一般的函数一样,你也可以给箭头函数传递参数。如果箭头函数只有一个参数,则可以省略参数外面的括号。
const myConcat = (arr1,arr2) => {
return arr1.concat(...arr2)
}
console.log(myConcat([1, 2], [3, 4, 5]));
8、设置函数的默认参数
ES6 里允许给函数传入默认参数,来构建更加灵活的函数。默认参数会在参数没有被指定(值为 undefined)的时候起作用。
//在value没有赋值的情况下默认为1
const increment = (number, value = 1) => number + value;
9、将 rest 操作符与函数参数一起使用
ES6 推出了用于函数参数的 rest 操作符帮助我们创建更加灵活的函数。 rest 操作符可以用于创建有一个变量来接受多个参数的函数。 这些参数被储存在一个可以在函数内部读取的数组中。与arguments的作用相似。使用 rest 参数,就不需要查看 args 数组,并且允许我们在参数数组