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"}
