《JS原理、方法与实践》- ES6新增语法

let 和const

var定义的变量是function级的作用域，let定义的变量属于块级作用域，而const定义的是常量，也就是定义之后不可修改
代码示例：

function testVariable() {
    var height = 172;
    const name = 'zzh';
    if (height === 172) {
        let height = 173;
        // name = 'zzz'; // 报错
    }   
    
    console.log(height); // 172
}

testVariable();

字符串模板

自负串模板用来创建字符串的一种方式，可以在字符串中添加变量，免去了之前的使用+号拼接字符串。
语法： ${变量}
代码示例：

const name = 'zzh';
const testStringTemplate = `Hello ${name}`;
console.log(testStringTemplate); // hello zzh

函数参数默认值

函数参数默认值，就是给一个函数的参数提供一个默认值，当该参数没有传入时，便使用默认值。
语法： function functionName(parameter1, parameter2, ...parametern = 'default value')
代码示例：

function getPersonInfo (name, age, sex = 'male') {
    console.log(`Person info: name: ${name}, age: ${age}, sex: ${sex}`);
}
getPersonInfo('zzh', 18); // Person info: name: zzh, age: 18, sex: male

参数扩展

参数扩展时使用三个点“...”来完成，主要有两种用法：在定义函数时将传入的多个参数封装到一个数组中；调用函数时将数组中的元素扩展为多个独立的参数。
代码示例：

function mailToPerson (...names) {
    for(let name of names) {
        console.log(`Send to ${name}`);
    }
}

mailToPerson('张三','李四','王五');
/*
[object Array]
Send to 张三
Send to 李四
Send to 王五
 * */

// 将数组[1,3,5]展开成1，3，5三个参数后传入max方法中
console.log(Math.max(...[1,3,5])); // 5
console.log(Math.max(1,3,5)); // 5

测试结果

箭头函数

语法： 参数=>函数体
如果只有一个参数不需要括号，当有多个参数时，使用括号括起来，例如：(a, b)=> 函数体，当函数体只有一条语句需要reutrn时，不需要写关键字return 且不需要使用大括号{}阔起来，其他情况需要大括号，且需要return时，需要写return关键字。
代码示例：

getName = () => 'zzh';
console.log(`name is: ${getName()}`); // name is: zzh

printInfo = (name, age) => {
    console.log(`name is: ${name}, age is: ${age}`);
}
printInfo('zzh', 18); // name is: zzh, age is: 18

for-of遍历

之前有提过for-in遍历，它可以遍历出对象的属性名。for-of遍历的结果是数组值的集合。
代码示例：

var person = {
    name: 'zzh',
    age: 18,
    sex: 'male'
};

var score = [98, 99, 100];

for(let p in person) {
    console.log(`for-in person: ${p}`);
}
// for(let p of person) {
//  console.log(`for-of person: ${p}`);
// } // 报错，对象不可遍历

for(var s in score) {
    console.log(`for-in score: ${s}`);
}

for(var s of score) {
    console.log(`for-of score: ${s}`);
}

测试结果

如果觉得文章写得还行，请点个赞。如果想与我进一步交流，可以关注我的公众号或者加我的微信。

个人微信
公众号_前端微说.jpg