es6常用知识点(2)

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)

结尾

学习html5、css、javascript这些基础知识，学习的渠道很多，就不多说了，例如，一些其他的优秀博客。但是本人觉得看书也很必要，可以节省很多时间，常见的javascript的书，例如：javascript的高级程序设计，是每位前端工程师必不可少的一本书，边看边用，了解js的一些基本知识，基本上很全面了，如果有时间可以读一些，js性能相关的书籍，以及设计者模式，在实践中都会用的到。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

高级程序设计，是每位前端工程师必不可少的一本书，边看边用，了解js的一些基本知识，基本上很全面了，如果有时间可以读一些，js性能相关的书籍，以及设计者模式，在实践中都会用的到。