ES6语法：

ES6语法：

1.展开运算符（…）

1.1 数组展开

let arr = [1,2,3,4]
let arr2 = ["a","b","c","d"];
#想要在arr2的b后面插入arr，使用ES6的方法
 let arr3 = ["a","b",...arr,"c","d"]
 #其中...就是展开运算符
 console.log(arr3)

• 剩余对象：跟解构赋值搭配使用，取出剩余参数

  let arr = [1,2,3,4];
  # 剩余参数
  let [a,b,...c] = arr;
  #...c相当于取出剩余部分
  console.log(a,b,c) // 1,2，[3,4]
  

1.2 对象展开

let obj = {
a:1,
b:2
}
let obj2 = {
...obj
c:3
d:4
}
console.log(obj2) //{a:1,b:2,c:3,d:4}
#同时对象之间进行赋值的时候会出现问题，
#eg
let obj3 = obj
obj3.a = 10;
console.log(obj) //这时候obj中的a 值改为了10，如果我们不想obj里面的值发生变化，可以通过下面的方式
let obj3 = {...obj};
obj3.a = 10;
console.log(obj)//不受影响

2.解构赋值

分为对象解构赋值

数组解构赋值

字符串解构赋值

• 对象解构赋值

  let obj = {‘a’ = 1,‘b’= 2}

  #在ES5中，要取到a和b的值肯定是通过 
  let a = obj.a
  let b = obj.b
  #但是在ES6中可以通过解构赋值的方式,其中a,b值跟对象中的值一一对应。
  let {a,b} = obj 
  console.log(a,b)
  

• 数组解构赋值

  let arr = [“a”,“b”,“c”];

  ES6 解构赋值
  let [e,f] = arr;
  console.log(e,f) //e,f分别取到数组中的a和b
  

  涉及到一道面试题

  let a = 0;
  let b = 1;
  #如何快速交换 a 和 b 的值
  #普通方式肯定就是增加一个变量来交换值
  #ES6解构赋值方式更为方便
  [a,b] = [b,a]
  

• 字符串解构赋值

  #第一种情况就是str是字符串
  let str = "abc";
  let [e,f] = str;
  console.log(e,f) //结果就是a和b
  #第二种情况就是nub 是数字型字符串
  let nub = '123';
  let [c,d] = nub
  console.log(c,d)//TypeError:nub is not iterable(迭代器)
  

3.构造函数

3.1 Set(arr)

let arr = [2,1,2,3,1,"a",4,4,5]
let s = new Set(arr)

​ Set()函数的一些方法：

• set.clear() //清空所有值，返回的是一个空数组

• set.delete(val) //删除某一项

  参数：val 要删除的某一项

  返回值： true|false 是否删除成功，（没有这个值才会出现删除不成功）

• set.has(val) //是否包含某一项

  参数： val要查找的值

  返回值：true|false 是否包含这个值

• set.add(val) //添加一项

  参数： val要添加的对象

  返回值 ：set对象本身

3.2 Map()

let arr = [
	[“a",1],
	["b",2],
	["c",3]
];
let m = new Map(arr);
m.clear(); //清空所有值
console.log(m.delete("a"));//删除某一项的值
console.log(m.get("b"));//得到某一项的值
console.log(m.set("d",5))//设置某一项的值，也可以修改值

4.函数对象的扩展

4.1箭头函数

#箭头函数当有一个形参时，这个时候可以不带括号
let fn = nub => nub*2

#箭头函数有两个形参时，这个时候必须带括号
let fn = (nub,nub2) => nub*nub2

#当箭头函数没有形参时，这时候也需要带上括号
let fn = () => console.log(111)

• 箭头函数没有不定参，arguements

  let fn = () => console.log(arguements) //undefined
  
  fn(1,2,3,4)  //  ---->结论箭头函数没有arguments
  
  #可以通过展开运算符，来显示
  let fn = (...arg) => console.log(arg)
  fn(1,2,3,4) // 结果是：[1,2,3,4]
  

• 箭头函数的this指向问题

  箭头函数本身没有this，调用箭头函数的this时，指向的是其声明时，所在的作用域的this。

4.2 数组新增方法

4.21.Array 构造函数下的3个方法

​ 不能用数组，会报错（arr.from -->error）

• Array.from(类数组)：把一个类数组转换成真正的数组。

  let lis = document.querySelectorAll("#list li");
  # 因为通过querySelectorAll()获取到的是类数组，即只有小标和长度length 但是不能调用数组的方法。
  lis = Array.from(lis)//这个时候LIS 才是真的数组，可以使用数组的方法。
  

  • 也可以通过另外一种方式实现对类数组的转换：

    #通过展开运算符的方式
    lis = [...lis];
    

• Array.of(element1,element2,element3…): 将参数转成一个数组，返回值是一个新的数组。

  let arr = Array.of('2','3','4','a')
  console.log(arr) //[2,3,4,a]
  

• Array.isArray(arr) :检测数据是否是数组

  let lis = document.querySelectorAll("#list li");
  console.log(Array.isArray(lis)) //false
  

4.22.array 数组下的3个方法

arr.find(callback):查找数组中的参数，当满足条件是就返回值，退出。（找到一个就返回并退出）

let arr = [1,2,3,4];
console.log(arr.find(item => item >=3)) //3

**arr.findIndex()😗*查找数组中的参数，当满足条件时就返回值对应的索引值，并退出。

let arr = [1,2,3,4];
console.log(arr.findIndex(item => item >=3)) //2

**arr.flat() 😗*扁平化多维数组

#当时二维数组的时候
let arr = [
	["小明"，"18"],
	["小刚","18"]
]
console.log(arr.flat())//["小明","18","小刚","18"]

#当时多维数组时，而且我们无法判断里面嵌套了多少层的时候，我们可以通过以下方法实现
let arr1 = [
	["小明"，"18"],
	["小刚","18"],
	[
		[2,[3,4]],
		[5,6],
	]
]
#传入一个参数Infinaty就可以了
console.log(arr1.flat(Infinaty))//全部转换出来

arr.flatMap(): 返回新数组元素，跟上面的flat深度值为1的方式相同。但是flatMap通常在合并成一种方法的效率稍微高一点。

参数值，是回调函数，可选参数是index，和被调用的array数组

let arr = [
	["小明"，"18"],
	["小刚","18"]
]
let newArr = arr.flatMap((item,index) =>console.log(item,index));//["小明"，"18"],0
["小刚","18"],1
console.log(newArr) //["小明"，"18","小刚","18"]

• 当我们只想返回第一个值的时候，不想要第二个值。

let newArray = arr.flatMap((item) =>{
	item = item.filter((item,index) =>{
	return index == 0;
	})
	retrun item;
})
console.log(newArray) // ["小明","小刚"]

arr.fill():用一个固定值填充一个数组中从起始索引到终止索引的全部元素。不包括终止索引。

Array arr.fill(value [,start [ ,end ]])

参数：用来填充数组的值。

可选参数：

​ start：起始索引，默认值为0

​ end ：终止索引，默认值为arr.length

#默认只有一个参数的时候
let arr = [0,1,2,3];
arr.fill('a');
cosole.log(arr);//["a","a","a","a"]
#
arr.fill('a',1,2)
console.log(arr);//[0,"a","a",3]

arr.include():

Boolean arr.includes(valueToFind[, fromIndex ]) 判断数组中是否包含一个指定的值。

• 参数：valueToFind 需要查找的值。
• 可选参数：从from处开始向后查找。(索引值)
• 返回值：true 代表数组中包含valueToFind, false代表数组中不包含valueToFind。

let arr = ["a","b","c","d"]
console.log(arr.includes("d")) //true

#当有两个参数时
console.log(arr.includes("c",3))//false

4.3 字符串方法

str.startsWidth

Boolean str.startsWidth(searchString [, position]) 判断当前字符串是否以另外一个给定的子字符串开头。

• 参数：searchString 要搜索的子字符串。
• 可选参数：position 在str中搜素 searchString的开始位置，默认值为0，也就是真正的字符串开头处。
• 返回值：如果传入的子字符串在搜索的字符串的开始则返回true，否则返回false。

str.endsWidth

这个方法使用方法跟上面相同。

repeat

repeat 方法可以复制字符串

let str = "a";
#参数为复制的次数
console.log(str.repeat(3)) // "aaa"

4.31.模板字符串

基本使用：

let p = document.querySelector('p');
let name = "小明";
let age = "18";
let school = "初中";
# 这是ES5的插入变量的一种写法，这种方式比较普通，而且不方便。
p.innerHTML = "今年<strong> '+name+'</strong>就要<strong> '+age+'</strong>岁了，终于升入了<strong>'+school+'<strong>了";
#ES6的写法,首先外面要使用分号，然后变量使用插值表达式${变量}
p.innerHTML = `今年<strong> ${name}</strong>就要<strong> ${age}</strong>岁了，终于升入了<strong>${school}<strong>了`

4.4 对象方法

• 对象的简洁表示法

  let a = 0;
  let b = 1;
  #ES5对象写法：
  let obj = {
  	a:a,
  	b:b,
  	c:function(){
  	console.log(a)
  	}
  }
  #ES6写法：简洁表示法
  let obj = {
  	a,
  	b,
  	c(){
  	console.log(a)
  	}
  }
  

• 对象的属性名表达式：通过ES6可以给对象的属性名赋值

  let name = "小明";
  let obj ={
  	c(){
  	console.log("a")
  	},
  	[name]:111  //这种方式相当于把"小明"的值给了name
  }
  

• Object.assign

  Object Object.assign(target,…sources) 将所有的可枚举属性的值从一个或多个源对象复制到目标对象。

  • 参数：target 目标对象
  • sources :源对象
  • 返回值：目标对象。

  let obj = {
  	a:1,
  	b:2
  };
  let obj2 = {
  	#...obj  这是第一种方式合并两个对象
  	c:3,
  	d:4
  };
  #合并obj 和obj2有两种方式，第一种就是使用展开运算符的方式(可以选择插入位置，好用)
  
  #第二种方式就是使用Object 方法
  obj2 = Object.assign(obj2,obj);
  console.log(obj2) //[a:1,b:2,c:3,d:4]
  

• Object.is

  Boolean Object.is(value,value2) 判断两个值是否是相同的值。

  • 规则：

    两个值都是undefined

    两个值都是null

    两个值都是true 或者都是false

    两个值都是由相同个数的字符按照相同的顺序组成的字符串

    两个值指向同一个对象

    两个值都是数字并且

    ​ 都是正零 +0

    ​ 都是负零 -0

    ​ 都是NaN

4.5 babel 的使用

主要的作用就是为了兼容IE浏览器，需要把ES6代码转换成ES5的代码，这时候就需要使用babel来进行转化。

使用的方法

1. 首先在引入babel.min.js文件

   <script src="babel.min.js"> </script> 
   

2. 在script标签中加入style样式

   <script style="text/babel"> </script>