自学总结：ES6新特性（一）

目前各大浏览器基本上都支持 ES6 的新特性，其中 Chrome 和 Firefox 浏览器对 ES6 新特性最友好，IE7~11 基本不支持 ES6。

对于浏览器的兼容问题ES6可以通过 babel 转化成ES5.

webpack里面有添加babel进行转化

1. let和const

let 声明的变量只在 let 命令所在的代码块内有效。

const 声明一个只读的常量，一旦声明，常量的值就不能改变。

let var的区别

1. let：在代码块内有效，声明的变量只会声明在当前作用域内.
   var: 在全局范围内有效.

   {
     let a = 0;
     var b = 1;
   }
   a  // ReferenceError: a is not defined
   b  // 1
   

   for循环中加入异步交互时，先同步后异步，for循环执行完之后，就行setTimeout方法。

    for(var i=0;i<3;i++){
            setTimeout(function(){
                console.log(i) // 3个3
            })
    }
   

   let和{}配合可以产生一个作用域，每次遍历会生成新的变量，一旦生成新的变量 就执行seTimeout方法。

   for(let i=0;i<3;i++){
            setTimeout(function(){
                console.log(i)  //0 1 2
           })
    }
    console.log(i)//i is not undifined
   

2. let只能声明一次。var可以重复声明

   let a = 1;
   let a = 2;
   var b = 3;
   var b = 4;
   a  // 'a' has already been declared
   b  // 4
   

3. let不做变量提升，var可做变量提升

   console.log(a);  //ReferenceError: a is not defined
   let a = 1;
    
   console.log(b);  //undefined
   var b = 2;
   

const 命令

1. 通过const声明的变量不能被修改,不能修改引用空间

   	  const a = 1;
   	 a = 2;//Assignment to constant variable.
   

2. 暂时性死区
   ES6 明确规定，代码块内如果存在 let 或者 const，代码块会对这些命令声明的变量从块的开始就形成一个封闭作用域。代码块内，在声明变量 PI 之前使用它会报错。

    var a =1
    {
        console.log(a)  //a is not undifined
        let a = 2
    }
   	  ```
   

解构赋值

它是一种针对数组或者对象进行模式匹配，然后对其中的变量进行赋值。声明和赋值都放到一起了。
let 解构目标 = 解构的源
解构表示等号左边和右边结构类似。
解构数组或者对象都可忽略、可嵌套、不完全解构、剩余运算符、结构默认值。

1.数组的必须位置相同

	let [a,b] = [1,2]
	console.log(a,b) //1 2
	//1.可忽略
	let [,b] = [1,2]
	console.log(b) //2
	//2.可嵌套
	let [a,[[b],c]] = [1,[[2],3]]
	console.log(a,b,c) //1 2 3
	//3.不完全解构
	let [a = 1, b] = []; 
	console.log(a,b)//1 undefined
	//4.剩余运算符
	let [a, ...b] = [1, 2, 3]
	console.log(a,b)//1  [2, 3]
	//5.解构默认值
	let [a = 2] = [undefined]
	console.log(a)//2
	
	let [a = 3, b = a] = [];     // a = 3, b = 3
	let [a = 3, b = a] = [1];    // a = 1, b = 1
	let [a = 3, b = a] = [1, 2]; // a = 1, b = 2
	//a 与 b 匹配结果为 undefined ，触发默认值：a = 3; b = a =3
	//a 正常解构赋值，匹配结果：a = 1，b 匹配结果 undefined ，触发默认值：b = a =1
	//a 与 b 正常解构赋值，匹配结果：a = 1，b = 2

注意：在数组的解构中，解构的目标若为可遍历对象，皆可进行解构赋值。

	//如字符串等
	let [a, b, c, d, e] = 'hello';
	// a = 'h'
	// b = 'e'
	// c = 'l'
	// d = 'l'
	// e = 'o'

2.对象解构时名字必须相同

	let {length} = [1,2]
	console.log(length) //2

3.如果有关键字 可以采用’:'的形式进行更改名字

let {a,b,default:c} = {a:1,b:2,default:3}
console.log(a,b,c) //1 2 3

问题1
//取到下列数组中的arr[1]项 //2
let [] = [{name:1},{age:2,arr:[1,2,3]}]

let [,{arr:[,a]}] = [{name:1},{age:2,arr:[1,2,3]}]
console.log(a)// 2

4.如果想设置某个属性的默认值，必须采用’='的方式

let[ ,{arr:[,a]},hobby='游泳'] = [{name:1},{age:2,arr:[1,2,3]}]
console.log(hobby) // 游泳

5. 解构的应用

function ajax({url=new Error('no url'),type='get', data='no data'}){
	console.log(url,type,data)// /test get {}
}
ajax({
    url:'/test',
    type:'get',
    data:{}
})

function test() {
    return [1,2,3]
}
let [a,b,c] = test()
console.log(a,b,c) // 1 2 3

字符串新增方法

includes 是否包含

let str = 'aabbcc'
console.log(str.includes('a'))  //true

startWith 以xxx开头

console.log(str.startsWith('aa')) //true

endWith 以xxx结尾

console.log(str.endsWith('cc')) //true

注意：这三个方法如果传入了正则表达式而不是字符串，会抛出错误。而 indexOf 和 lastIndexOf 这两个方法，它们会将正则表达式转换为字符串并搜索它。

padStart padEnd 补全

常用于进制转化

setInterval(function(){
  let date = new Date()
  let hour = date.getHours()
  let minutes = date.getMinutes()
  let seconds = date.getSeconds()
  let str = `${hour.toString().padStart(2,0)}:`
  str += `${minutes.toString().padStart(2,0)}:`
  str += `${seconds.toString().padStart(2,0)}:`
  console.log(str) //11:02:01
},1000)

字符串重复

repeat()：返回新的字符串，表示将字符串重复指定次数返回

console.log("Hello,".repeat(2));  // "Hello,Hello,"

//如果参数是小数，向下取整

console.log("Hello,".repeat(3.2));  // "Hello,Hello,Hello,"

//如果参数是 -1到0 之间的小数，会进行取整运算，取整得到 -0

console.log("Hello,".repeat(-0.5));  // "" 

//如果参数是 NaN，等同于 repeat 零次

console.log("Hello,".repeat(NaN));  // "" 

//如果参数是负数或者 Infinity ，会报错:
//如果传入的参数是字符串，则会先将字符串转化为数字

console.log("Hello,".repeat("hh")); // ""
console.log("Hello,".repeat("2"));  // "Hello,Hello,"

模板字符串

模板字符串与普通字符串的区别？
模板字符串中的换行和空格都是会被保留的，
普通字符串需加入代码，比如\n,\t, ，才能对字符串进行换行或空格。

可以自定义模板字符串的实现

 //hello~*xiao*今年*9*岁了
 let name ="xiao"
 let age = 9
 function jw() {//第一个参数是字符串的数组  第二个参数是第一个变量...
    let strings = arguments[0]
    let values=[].slice.call(arguments,1)
    let str = ''
     console.log(strings,values)
     for(let i = 0;i < values.length;i++) {
        str += `${strings[i]}*${values[i]}*`
     }
     str += strings[strings.length - 1]
     return str
 }
 let str = jw`hello~${name}今年${age}岁了`
 return str