ES6 的一些语法笔记

箭头函数

1.有且仅有一个参数的时候，括号可以去掉；没有参数的时候括号也不可以去掉 示例一：

// An highlighted block const companies = [“google”, ”huawei”, ”samsung”] const result = companies.map(company => company + “is a company”) console.log(result)

输出结果：

// An highlighted block Google is a company, huawei is a company, samsung is a company

如果改成箭头函数的写法：

// An highlighted block const result = companies.map(function (company) { return company + “is a company”})

示例二：

const result3 = ages.filter(function(age) { const nextYearAge = age + 1 return nextYearAge > 18 })

改为箭头函数为：

// An highlighted block const result3 = ages.filter(age => { const nextYearAge = age + 1 return nextYearAge > 18 })

箭头函数的作用：可以使代码变得简洁；箭头函数不会重新绑定调用它的对象，其中的this依旧是箭头函数使用前的值，这个和普通函数是不同的，普通函数会重新绑定的，箭头函数不重新绑定this的值 总结 1.将function去掉 2.添加胖括号 3.看函数有几个参数，决定是否保留参数的括号 4.根据花括号的里边的内容，决定是否去掉花括号，如果只有一行return的表达式，则可以去掉花括号。

模板字符串

// An highlighted block onst intro2 = `大家好，我是${person.name} , 今年${person.age}岁，我来自 ${person.hometown}, 我的爱好是 ${person.hobby}。 我明年就${person.age + 1}岁了， 我是${person.age > 18 ? "成年人":"少年"}。` console.log(intro2)

总结 ES6中，使用· $变量\cdot ，这一形式，并且支持换行。在使用到变量的时候${} 这种格式可以更直观的看代码，修改代码来更便捷，并且在{ }中支持表达式，及一些判断语句

SET和MAP

1.有关set的一些函数： Set：可以保证添加不重复的值，当add已经存在的值时，则无法再添加 Set.add()添加 Set.has() 判断是否含有这个值，没有则返回false Set.delete() 删除这个值，如果已经有这个值，则删除成功，否则则返回undefined Set.forEach(number => console.log(number))遍历每个元素 2.有关map的一些函数： map.size 查看map有多少个元素 Map.has() 查看是否含有某个元素，有则返回true，否则返回false 当往map里面添加已有的值，如将age添加为20，则map里会保存新的值，不会将两个都保存，会更新 map.delete() 删除某个元素，删除成功则返回true，如果没有这个元素，则返回undefined 其中，添加用.set， 获取用.get 代码示例：

// An highlighted block const person = new Map() person.set("name", "zqq") person.set("age", 18) person.set("hobby", ["睡觉", "看电影"]) console.log(person)

解构赋值

解构赋值的意思是对应的位置,对应的 key 自动赋值。 示例代码：

// An highlighted block const person2 = { name: "zqq", age: 19, city: "杭州", social: { bilibili: "11111111", youtube: "zqq111" } } // 如果是数组，则用[] const { bilibili, youtube } = person2.social console.log(bilibili, youtube); // An highlighted block const person = { name: "zqq", age: 19, city: "杭州", social: { bilibili: "11111111", youtube: "zqq111" } } const { name, social:{bilibili}} = person console.log(name, bilibili);

如何重命名：

// An highlighted block const person = { name: "zqq", age: 19, city: "杭州", social: { bilibili: "11111111", youtube: "zqq111" } } const { name: personName, social:{bilibili:bili}} = person console.log(personName, bili);

如何设置默认值：

// An highlighted block const person = { name: "zqq", age: 19, city: "杭州", social: { bilibili: "11111111", youtube: "zqq111" } } // 设置默认值，如果没有值，则默认这个 const { name: personName = "guest", social:{bilibili:bili}} = person console.log(personName, bili);

数组的解构赋值：

// An highlighted block const info = "zqq, 16, 111111" // 将字符串转换为数组，并且用逗号隔开 const person = info.split(",") const [name, age, bilibili] = person console.log(name, age, bilibili);

互换变量的值：

// An highlighted block let a = 1; let b = -1; [a, b] = [b, a]; console.log(a, b);

剩余和扩展参数

扩展参数示例代码：

// An highlighted block const captain = "aaa"; const assistant = "bbb"; const players = ["ccc", "ddd", "eee"]; const team = [captain, assistant, ...players] console.log(team);

剩余参数的示例代码：

// An highlighted block function sortNumber(...nums) { if (nums.length === 0) { return []; } else { return nums.sort((a, b) => a - b); } } console.log(sortNumber(1, 2, 10, 7, 3));

总结 剩余参数和扩展参数一样，都是在参数前面加…三个点 有时候，使用剩余和扩展参数的方法，可以达到和函数一样的效果 示例代码：

// An highlighted block // const food = [ // "香辣鸡腿堡", // "老北京鸡肉卷", // "新奥尔良烤鸡腿堡" // ]; // const drink = ["百事可乐", "七喜", "橙汁"]; // const kfc = food.concat(drink); // console.log(kfc); const food = [ "香辣鸡腿堡", "老北京鸡肉卷", "新奥尔良烤鸡腿堡" ]; const drink = ["百事可乐", "七喜", "橙汁"]; const kfc = [...food, ...drink]; console.log(kfc);

函数参数默认值，字符串方法和for …of

Includes：检验一个字符串中是否包含另外一个字符串或者字符，包含，则返回true startsWith ：检查一个字符串是否以另外一个字符或字符串开头，若是，则返回true endsWith： 检查一个字符串是否以另外一个字符串或者字符结尾，若是，则返回true 示例代码：

// An highlighted block // 2.字符串includes, startsWith,endsWith const string = "abc"; const substring = "ab"; console.log(string.includes(substring)); console.log(string.startsWith(substring)); // string 中，第三位是不是a开头，不是，则返回false console.log(string.startsWith("a", 2)); // string 中，是否以c结尾，是，返回true console.log(string.endsWith("c")); // 前三位是否是以a结尾的，不是，返回false console.log(string.endsWith("a", 2));

使用for …of实现遍历： 示例代码：

// An highlighted block // 3.for。。。of 遍历数组 const foods = [ "香辣鸡腿堡", "老北京鸡肉卷", "新奥尔良烤鸡腿堡" ]; for (const food of foods) { console.log(food); }

for … . of 并不是万能的，当对象是object的时候，要想遍历，还是应该使用for … in 示例代码：

// An highlighted block const person = { name: "zqq", age: 16, hobby: "睡觉", hometown: "安徽" }; for (const key in person) { console.log(key, person[key]); }