es6新特性

let关键字

1.let就是用来声明变量的

2.使用let关键字声明变量具有块级作用域

一个简单的理解:
我需要定义一个for循环

<script>
    for(var i=0;i<2;i++){
    }
    console.log(i)//在这里for里面的i的值是可以被for块级的外部访问的也就是 console.log(i)，打印结果为2
    </script>

声明for时使用let关键字

<script>
    for(leti=0;i<2;i++){
    }
    console.log(i)//这时候访问for中的i就会报错，使用let的好处：for一旦结束之后i的值就没必要存在了，这时候使用let达到块级作用域的效果，是不是更严谨了呢
    </script>

let的关键字不存在变量提升

console.log(a)
let a=10;//报错，不会进行变量提升

let的关键字具有暂时性死区
let关键字定义的变量，只能在块级区域内绑定，不会受外部影响

    var temp=100;//块级作用域外定义了全局变量
if(true){
    console.log(temp)//打印temp变量时，console之前并没有定义temp变量（console之后才定义），所以会报错
  let  temp=20;//定义let变量
}

const关键字

作用：声明常量，常量就是值（内存地址不可以更改），不能变化的量

1、const同样具有块级作用域
看如下代码：

<script>
if(true){
    const a=1000;//该a值只在第一个if块中有作用
    console.log(a)
    if(true){
        var s=100;//var定义后有函数的提升，下面console.log(s)可以访问到
        const a=10;//该a值只在第二个if块中有作用
        console.log(a)
    }
}
console.log(s)
console.log(a)//块级中没有找到a的值，报错
</script>

2、const声明常量是必须赋初始值

 const a;
    console.log(a)//报错。声明是为赋值
//报错：Uncaught SyntaxError: Missing initializer in const declaration

3、const定义的值不可以更改

 const a=100;
        a=10;//const声明后的值不可以更改
        console.log(a)
      报错：  Star.html:29 Uncaught TypeError: Assignment to constant variable.

对于（复杂数据类型）数组：
它值可以改变，但是给它重新直接赋值会报错

<script>

    const a=[1,2];
    console.log(a[0])
        a[0]=3;//可以改变a[0]的值，
        console.log(a[0])//打印3
        a=[1,5]//报错
        console.log(a)

数组结构：

es6中数组结构允许我们按照意义对应的关系从数组中提取值，然后将值复制给变量

let [a,b,c,d,e]=[1,50,80,10]
console.log(a)
console.log(b)
console.log(c)
console.log(d)
console.log(e)//注意：如果等左边的e找不到右边的值对应，就会打印undefined

对象结构：

跟数组结构差不多，匹配不到值同样式undefined

let obj={name:'隔壁张三',age:18,price:20}
let {name,age,price,password}=obj;
console.log(name)
console.log(age)
console.log(price)
console.log(password)

对象结构属性别名：
就是给对象属性取名字，没啥好说的啦，语法上的不同

let obj={name:'隔壁张三',age:18,price:20}
let {name: uName,age:uAge,price :uPrice,password:uPassword}=obj;
console.log(uName)
console.log(uAge)
console.log(uPrice)
console.log(uPassword)//undefined

箭头函数：
箭头函数是用来简化函数定义语法的

const fun=()=>{
    alert("?")
    //如果函数中只有一句代码，可以把{}去掉
}
fun();

const fun=()=>alert("?")
fun();

传递参数

const fun=(result)=>alert("?"+result)
//如果形参个数只有一个那么(result)可以省略()const fun=result=>alert("?"+result)
fun("eeeeee");

箭头函数的this指向。箭头函数没有自己的this关键字，如果在箭头函数中使用this，this关键字将指定箭头函数定义位置的this

function fn(){
    console.log(this);//
       let fun= ()=>{
            console.log(this)//箭头函数没有this，如果定义this那么指向它所在位置的this
        }
        fun();
}
let obj={name:'我是隔壁老王',age:18}
fn();//,两个this都将指向windown，打印windown对象
fn.call(obj)//改变this的指向,两个this都将指向obj，打印obj对象

经典面试题：
以下代码会输出什么？

     var obj={
         age:20,
         fun:()=>{
               alert(this.age)//undefined
         }
     }
     obj.fun();

结论：对象是不能产生作用域的

剩余参数 ...
剩余参数就是接受函数传参数时的值，不管多少个都可以接收，本质上是一个数组

       var sum= (...result)=>{//...result就是接受函数调用时传递过来的参数，不管传递多少个参数都会被接受
           let total =0;
            result.forEach((item)=>{//将函数接受到的值进行遍历， result.forEach()j即可遍历
                total+=item;//将传递过来的所有值进行相加
            })
            return total;//返回结果集出去
        }
       var result= sum(20,50,30);//接受函数的返回值
        console.log(result)//打印函数返回值

剩余参数结合结构数组使用

  let students=[10,50,35,90,5,88,10]//定义一个数组
    var [s ,...result]=students;//书中结构数组加上剩余参数配合使用
    console.log(s)//打印结构数组的第一个值
    result.forEach(item=>{console.log(item)})//除了第一个值外 ...result都可以把数组剩余的值全部接收完

扩展运算符：

扩展运算符可以将数组或者对象转为用逗号分隔的参数序列

      let arr=["A","B","C"]
        console.log(...arr)//打印A B C

利用扩展运算符合并数组

    let arr=["a","b","c"];
    let array=["1","2","3"]
    let arrays=[...arr,...array];//...arr的结果为 a b c ...array的结果为 1 2 3 ，在结合arrays数组，不就合并成新的数组了吗？
    //合并数组的第二种方法：
	arr.push(...array);//完美
    console.log(arr)
    console.log(arrays);//打印：["a","b","c","1","2","3"];

将伪数组转换为真正的数组

<ul class="ul">
<li>我要吃包子</li>
<li>我要吃馒头</li>
<li>我要吃饺子</li>
<li>我要吃闭包</li>
</ul>
<script>
    var result =document.querySelector(".ul").querySelectorAll("li");
    let arr=[...result]
    console.log(arr)
    </script>

Array.from()方法
该方法一样可以将一个伪数组转换成真正的数组

var arrayLike={
    "0":"1",
   "1":"2",
    "length":2
}
var result=Array.from(arrayLike,item=>{
   return  item*=2;
})
console.log(result)

Arrays.find()相当于过滤方法

  let arr=[
        {id:2,name:'我是隔壁李四'},
        {id:3,name:'我是隔壁张三'}
    ]
    var result=arr.find(item=>item.id==2)//数组.find()，将arr[i].id!=2的值过滤掉，留下id=2的对象
console.log(result)

Arrays.findIndex()找出第一个符合条件数组成员的位置，如果没有找到则返回-1

    let arr=[
        {id:2,name:'我是隔壁李四'},
        {id:3,name:'我是隔壁张三'}
    ]
    var result=arr.findIndex(item=>item.id>0)//只返回数组的第一个符合条件的索引下标
console.log(result)

Array.includes()表示某个数组时是否包含给定的值，返回布尔值

    let arr=[
      "2","3"
    ]
    var result=arr.includes("2")//只返回数组的第一个符合条件的索引下标
console.log(result)

模板字符串：~~

调用对象属性

 let str=`我是模板字符串`;
 let str1={name:'我也是模板字符串'};
 let result=`${str1.name}`;//调用对象中的name属性
 console.log(result)

调用方法

let fun=()=>{
    return "我是匿名方法，我将被模板字符串解析调用";
}
console.log(`${fun()}`)

startWidtn()判断字符串是否在原字符串导入头部，如果存在返回true
endWidth()判断字符串是否在原字符串导入头部，如果存在返回true

//   startWidtn()`判断字符串是否在原字符串导入头部，如果存在返回true
    console.log("abc".startsWith("a"))//true
// `endWidth()`判断字符串是否在原字符串导入头部，如果存在返回true
console.log("abc".endsWith("a"))//false

repeat()是将原字符串重复n次，返回一个新字符串

    console.log( "ab".repeat(3))//打印ababab

set数据结构：
es6提供了新的数据结构Set。他类似于数组，但成员变量是唯一的，没有重复值
Set本身是一个构造函数，用来生成set数据结构

创建Set数组

const s=new Set();

初始化Set值：

const s=new Set([10,500,10]);
    console.log(s)//打印10 50 

Set中的函数（过于简单就举例了）
add():添加
delete()修改
has("1"):是否有1这个值，如果有返回true
clear() 清空Set集合的所有值

遍历Set 集合需要用

forEach(value=>{console.log(valie)})