携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第8天，点击查看活动详情

ES6的含义：

ES是EcmaScript的缩写，这是一个制定脚本语言标准的组织

为了方便理解，可以把ES6理解为Javascript6。但是要知道ES的真正含义

ES7，ES8同理，可以理解为JavaScript7，JavaScript8

1、let/const/var的区别

函数作用域就是：变量在声明它们的函数体以及这个函数体嵌套的任意函数体内都是有定义的。

变量赋值规则

• 先在自己作用域查找，如果有就赋值
• 如果没有，就去上一级查找，有就赋值
• 。。。。。
• 依次向上一级查找，如果找到window都没有，那么这个变量就是全局变量，直接赋值

简而言之就是里面看得到外面，外面看不到里面。

如：可以这样

var price=1;
function setPrice(){
  console. log(price); 
}
  setPrice(); 
 

这样却不行：

//控制台会报错
function setPrice(){
  var price=1;
}
  setPrice(); 
console. log(price); 

块作用域：也叫局部作用域，局部作用域是在全局作用域下产生的一个较小的作用域，在这个作用域里面声明的变量，只能在这一块区域使用。比如一个if结构是一个块，一个for循环结构是一个块，一个函数是一个块。。。当使用let和const声明变量的时候只能在对应的块中使用。函数作用域是被包含于块作用域中的

2、箭头函数

2.1箭头函数的特点：

1.能够使函数的写法更简洁（一行写完一个函数！）

2.函数返回值可以被隐式返回（不需要写return了）

3.不重新绑定this的值

2.2箭头函数的写法：

1、箭头函数是匿名函数

2、箭头函数一般使用胖箭头=>

格式：

(参数1，参数2...)=>{

函数体...

}

如：

//例1
  const greeting=()=>{
    console. log("hello world"); 
    }
    greeting(); 
//例2
  const printName=(name)=>{
  return "hello "+name; 
  }；
    console. log(printName("Mike")); 
//例3
    const addNumbers=(a,b)=>{
      return a+b;
    }; 
    console. log(addNumbers(1,2));

当函数体只有一行时，可以用简化写法：

将return和花括号去掉并且可以用插件去掉包裹参数的括号，如

const printName = name=>"hello"+ name;
const addNumbers=(a,b)=>a+b;

又 如：

const companies=["google","huawei","samsung"];
const result = companies. map(company => company + "is a company"); 
console. log(result);

如果函数体超过一行则return和花括号都要保留，但是仍可以用箭头函数的写法改写原来的函数，只需要去掉function加上胖箭头即可。注意：没有参数则不能去掉参数的括号

如

const ages=[14,19,21]; 
const result2=ages. filter(age=>{
  const nextYearAge=age+1;
  return nextYearAge >18;
}); 
console. log(result2);

2.3箭头函数的使用场景

普通函数 会 重新绑定this指针的值，而箭头函数 不会 。

普通函数this会自动指向调用函数的对象

如调用setTimeout会把this指向window，如果后面想操作的是其他控件就不能用this指针了，而使用箭头函数则可以避免此类问题。

一般来说不牵扯到this指针绑定问题都使用箭头函数，因为写法比较简洁，当牵扯到this指针问题时再按需选择即可。

3、模板字符串

特点：

变量用${变量}的方式包裹，变量和文字用一个 全部包裹

如

const person={
  name:"老毕",
  hometown:"青岛",
  hobby:"打游戏",
  age:24
};
const intro2=`大家好,我是${person.name}
，今年${person.age}岁,我来自${person.hometown},我的爱好是${person.hobby}。我明年就${person.age + 1}岁了。`;
console.log(intro2);

ps:模板字符串支持换行，不需要像老版字符串那样加\n

4、set和map

4.1set

Set对象是值的集合，你可以按照插入的顺序迭代它的元素。Set 中的元素只会出现一次，即 Set 中的元素是唯一的。

另外，NaN 和 undefined 都可以被存储在 Set 中，NaN 之间被视为相同的值（NaN 被认为是相同的，尽管 NaN !== NaN）。

//创建一个set
const numset = new Set();
//在尾部添加一个元素 .add(value)
numset.add(1)
//移除所有元素 .clear()
numset.clear()
//移除值为value的元素并且返回是否被删除 .delete(value)
numset.delete(1)
//判断是否有值为value的元素 .has(value)
numset.has(2)
//返回数组的大小 .size  注意数组是用length的
numset.size
//遍历数组每一个元素 .forEach
numset.forEach(number=>console.log(number))

4.2Map

Map 对象保存键值对，并且能够记住键的原始插入顺序。任何值（对象或者基本类型）都可以作为一个键或一个值。

一个key对应一个value

比如

const person = new Map();
person.set("name","老毕");
person.set("age","18");
person.set("hobby",["看电影","读书","玩手游"]);
//当map中已经有某个key时，再给这个key赋值会替换原来的值
person.set("age","23");

获取数据要通过key来得到对应的value

如

person.get("name")
person.get("hobby")

//获取map的大小： .size
person.size
//map中是否含有某个key .has(key) 返回的是一个布尔值
person.has("age")
//删除某个key .delete
person.delete("age")
//遍历 forEach,用法和set一样

5、解构赋值

解构赋值是对赋值运算符的扩展。

他是一种针对数组或者对象进行模式匹配，然后对其中的变量进行赋值。

在代码书写上简洁且易读，语义更加清晰明了；也方便了复杂对象中数据字段获取。

对象的解构赋值

如

const person={
name:"老毕",
  age:18，
  city:"青岛"
};

//如果要将对象里的属性分别赋值给三个变量可用如下写法
const {name,age,city}=person;

情况二：

const person2={
name:"老毕”,
  age:18，
  city:"青岛"，
  social:{
  bilibili:"455848380",youtube:"老毕Js"}
};
//如果想获取哔站id可以这样写：

const {name,social:{bilibili} = person2;

如果不想用属性自带的名，想自己改名可以这样：

const{
name: personName, 
  social:{ bilibili: bili}
} = person; 
console. log(personName, bili);

当你想要获取一个对象原本的属性里没有的属性值时，可以通过解构赋值或老式赋值的方式，先给这个属性赋默认值。

如

const person2={
  age:18，
  city:"青岛"，
  social:{
  bilibili:"455848380",youtube:"老毕Js"}
};
const{
name: personName ="guest"”, 
  social:{ bilibili: bili}
} = person; 
//注意：如果在解构里赋值时该属性原本是有值的，那么得到的是原来的值而不是在解构里赋的值

数组的解构赋值

方法和对象的差不多

如

const person=["老毕"，18，
"455848380"];
const[name，age，bilibili]=
person;

应用场景：得到一串字符串之后，用split分割然后解构赋值给不同的变量

如

const info="老毕，18，455848380";
const person = split(",");
const[name，age，bilibili] = person;
console.log(name，age，bilibili);

数组的解构可以用来做变量值的互换：

let a = 1;
let b = 2;
[a,b] = [b,a];
console.log(a,b);

6、剩余参数和扩展参数

剩余参数：将数组的前几个参数分别赋值给几个变量，将剩余的参数合并赋值给另外一个数组

如

const team=["易建联","郭艾伦","翟晓川","赵继伟","周琦"];
const [captain, assistant,...players]=team;
console. log(captain, assistant, players);

也可以用在不知道函数的参数有几个的情况

如

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

扩展参数：

将几个零散的数组或参数合并成一个数组

如

const captain="易建联";
const assistant="郭艾伦";
const players=["翟晓川","赵继伟","周琦"];

const team = [captain,assistant,...players]
console.log(team);

再举个例子：

const food=[
"香辣鸡腿堡",
"老北京鸡肉卷",
"吮指原味鸡",
"新奥尔良烤鸡腿堡"
  ]
const drink=["百事可乐","七喜","橙汁"];
const kfc=[...food,"圣代","脆皮甜筒",...drink,"葡式蛋挞"];
console.log(kfc);

用字符串拼接 方法concat也可以实现，但用参数扩展的好处是方便且灵活

7、函数参数默认值/字符串方法和for of

7.1函数参数默认值

当函数的参数传递不完整时，有时候需要我们设置一个默认参数

如

function orderCombo(comboName,drink)
{
  //写法一
 /*if(drink===undefined){
drink="可口可乐";}*/
  //写法二
  drink=drink ||"可口可乐";
  //但是方法二在有多个参数需要设置多个默认值时不好处理
  //ES6写法：
  console.log(`您点了${comboName},饮料是:${drink}。`);
}

orderCombo("巨无霸套餐");

ES6写法：

function orderCombo(comboName,drink = "可口可乐")
{

  console.log(`您点了${comboName},饮料是:${drink}。`);
}

orderCombo("巨无霸套餐");

7.2字符串方法

7.2.1 includes

include（） 方法确定数组是否在其条目中包含某个值，返回或根据需要返回。true or false

语法

includes(searchElement)（要搜索的值）

includes(searchElement,fromIndex )（要搜索的值，开始搜索的位置）

如果fromindex大于等于数组的长度就会停止搜索

如

const string="abc"; 
const substring="ab";
console. log(string. includes(substring));
console. log(string. includes('d'));
console. log(string. includes('c',2));

7.2.2startwith

判断字符串是否以某个字符开头

如

const string="abc"; 
console. log(string. startsWith('d'));
//还可以判断从第几位开始是否以某个字符开头,不加默认是判断第0位
console. log(string. startsWith('c',2));

7.2.3endsWith

判断字符串是否以某个字符结尾

用法和startsWith一模一样

7.3for in 和for of

object的遍历用for in，其余用for of

for of创建一个循环，迭代可迭代对象，包括：内置字符串、数组、类似数组的对象（例如，参数或 NodeList）、TypedArray、Map、Set 和用户定义的可迭代对象。

语法：

for (variable of iterable) { statement }

iterable：迭代其可迭代属性的对象。

variable ：变量。在每次迭代中，不同属性的值被分配给变量。变量可以用const、let或var声明。

例：

const person=new Map();
person.set("name","老毕");
person.set("age",18);
person.set("hobby",["看电影","读书","玩手游"]);
 for(const [key,value] of person){
console.log(key,value);
 }

同样可以用在数组中：

const foods=[
"香辣鸡腿堡",
"老北京鸡肉卷",
"吮指原味鸡",
"新奥尔良烤鸡腿堡"
  ]
for(const food of foods){
console.log(food);
}
//如果不仅想知道数组里的名称还想知道位置可以用数组的.entries方法
for(const [index,food]of foods.entries()){
console.log(`第${index+1}号套餐的汉堡是${food}`);
}

结果：

for in：

用于对对象的遍历，通过key值遍历value值

如

const person={
  name:"老毕",
  hobby:"打手游",
  age:18，
  city:"青岛"
};
for(const key in person){
    console.log(key,person[key]);
}

结果：