let和const

let和const的出现是为了能够替代var，因为var有着比较严重的污染

let

定义变量使用let替代var

 // let
{
    var name = "胡爸爸"
    let name1 = "胡妈妈"
}
console.log(name) //胡爸爸
console.log(name1) //报错  name1 is not defined

const

const 定义不可修饰的变量（常量）

// const
const app = "APP"
app = "ADD"
console.log(app) //报错 Assignment to constant variable.  （常量不能被修改的意思）

箭头函数

作用：

1.减少代码书写

2.保持this指向（保持this作用域）

对比普通函数

function hello( name ) {
      console.log(`hello ${name}`)
}
const hello1 = name => {
      console.log(`hello ${name}`)
}
hello('胡')
hello1('胡')

函数只有一条return语句

// 如果函数只有一条return语句
const double = x=>x*2  //只有一条return 语句可以简写成这样
console.log(double(5))  // 10

函数参数赋值

 // 参数赋值
const fuzhi = ( name = "胡庆虎") => {
      console.log(`hello ${name}`)
}
fuzhi()
fuzhi("假的胡庆虎")

函数参数展开

//函数参数展开
function zhankai (name1,name2) {
     console.log( name1,name2)
}
let arr = ['小明','小王']
// zhankai.apply(null,arr) //小明 小王
zhankai(...arr) //小明 小王

模板字符串

拼接字符串过于繁琐，用模板字符串非常简单！

let name = "虎宝宝"
course = "在总结es6"
console.log('hello ' + name + '现在' + course)  
console.log(`hello ${name} 现在 ${course}`)  

解构赋值

let [x,y] = [4,8]
console.log(...[4,8])//4 8

let arr1 = [1,3]
let arr2 = [4,6]
console.log(`concat:${arr1.concat(arr2)}`)//[1,3,4,6]
// [...arr1,...arr2] //[1,3,4,6]

//对数组的解构
let [a,...b] = [1,2,3,4]  //a:1,b:[2,3,4]
const arr = ['hello','immoc']
let [arg1,arg2] = arr //批量赋值
console.log(arg1,arg2) //hello immoc
//对对象的解构
 const obj = {
      name : 'immoc',
      course : '在学习'
}
let {name,course} = obj
console.log(name,course) //immoc 在学习
//对字符串的解构
let [c,d,f] = "ES6"  //c:E,d:S,f:6
let xy = [...'ES6']  //["E", "S", "6"]

对象的拓展

知识点：

1.Object.keys values entries

2.对象方法简写，计算属性

3.展开运算符（不是es6标准，但是bable支持

Object.keys values entries

let obj = {
     name:"杨柳",
     age:20
}
//获取obj的所有key
console.log(Object.keys(obj)) //["name", "age"]
//获取obj的所有values
console.log(Object.values(obj)) //["杨柳", 20]
//获取obj的key和values注意，结果是个二维数组
console.log(Object.entries(obj)) //[["name", "杨柳"],["age", 20]]

对象计算属性

//计算属性
const name = 'imooc'
let obj1 = {
       [name]:'hello' //不加[]就输出{name: "hello", imooc: "hello imooc"},加了输出{imooc: "hello imooc"}
}
obj1[name] = 'hello imooc'
console.log(obj1)

let obj2 = {
     name,//就是name:name
     hello:function(){

     },
     hello1(){//等价于上面的hello

     },
}

let obj3 = {
    name:"杨柳",
    age:20
}
let obj4 = {
    type:"test",
 name:'woniu'
}
// console.log(obj3)
console.log({...obj3,...obj4,data:2017}) //{name: "woniu", age: 20, type: "test", data: 2017}

Class的用法

class MyApp {
       constructor () {
         this.name = 'immoc'
       }
       sayHello(){
         console.log(`hello ${this.name}`)
       }
}
const app = new MyApp
app.sayHello() //hello immoc

Promise的用处

let checkLogin = () => {
            return new Promise((resolve,reject)=>{
                let flag = document.cookie.indexOf("userId") > -1 ? true : false;
                if(flag=true){
                    resolve({
                        status:0,
                        result:true
                    })
                }else{
                    reject("error")
                }
            })
        }

        let getUserInfo = () => {
            return new Promise (( resolve,reject)=>{
                let userInfo = {
                    userId: '101',
                }
                resolve(userInfo)
            })
        }

        checkLogin().then((res)=>{
            if(res.status == 0){
                console.log('login success')
                return getUserInfo()
            }
        }).catch((err)=>{
            console.log(`err:${err}`)
        }).then((res2)=>{//链式调用
            console.log(`userId:${res2.userId}`)
        })

        Promise.all([checkLogin(),getUserInfo()]).then(([res1,res2]) => {
            console.log(`res1:${res1.result},res2:${res2.userId}`)
        })

常见代码片段

数组的：

/* 数组 */

        //映射新数组
        let arr = [1,2,3,4,5,6]
        console.log(arr.map(function(v){//老的写法
            return v*2
        }))
        console.log(arr.map(v=>v*2)) //新的写法

        //遍历数组
        arr.forEach(function(value,index){// 遍历输出每一项
            console.log(value)
        })

        //所有元素是否通过测试
        console.log(arr.every(v=>v>3)) //false

        //能否有元素通过测试
        console.log(arr.some(v=>v>3)) //true

        //过滤数组
        console.log(arr.filter(v=>v>3)) //[4,5,6]

        //查找符合条件的元素

        //查找索引
        console.log(arr.indexOf(2)) //1

        //连接数组
        let arr2 = [7,8,9]
        console.log([...arr,...arr2,10]) //[1, 2, 3, 4, 5, 6, 7, 8, 9, 10]

        //数组去重
        let arr3 = [1,2,1,2,3,4,5,6,5]
        console.log([...new Set(arr3)]) //[1, 2, 3, 4, 5, 6]

        //获取列表的头和尾
        const [head,...tail] = [1,2,3]
        const [last,...initial] = [1,2,3].reverse()
        console.log(head,tail)
        console.log(last,initial)

对象的：

/* 对象 */

        //获取对象的key
        let obj = {
            name: 'imooc',
            age: 20
        }
        console.log(Object.keys(obj)) //["name", "age"]

        //获取对象的key的数量
        console.log(Object.keys(obj).length) //2

        //遍历对象
        console.log(Object.entries(obj)) //[["name", "imooc"],["age", 20]]

        //extend功能
        const newObj = {...obj,job:'IT',age:30}
        console.log(newObj)//{name: "imooc", age: 30, job: "IT"}

cs