有关ES6的一些语法笔记

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]);
   }