国庆摆烂第二天，我总结了项目中常用的ES6语法（一）

前言

ES6语法，这几乎是一个面试必考的问题，而每次遇到这个问题的时候，如果不特意准备的话，回答的总是不太理想，不是这儿忘了就是那儿忘了，以前总觉得这没什么，到了要用的时候再百度一下就好了，但是每次遇到都百度，这就很浪费时间了。下面就我工作中常用到的ES语法做一下总结，加深一下印象，以后少百度一次就证明这次总结是成功的。

1.let和const声明

关于let和const的用法，网上有一大堆描述，简单来说分为三个方面：1.块级作用域、2、没有变量提升、3.不允许重复声明。其中let和const又有一些差别，let变量在声明的时候可以不用初始化，之后可以修改变量值，而const变量声明时必须初始化，而且之后不允许修改。const实际上保证的，并不是变量的值不得改动，而是变量指向的那个内存地址所保存的数据不得改动，也就是基础数据类型值不可修改，引用类型值可以修改

// 变量提升
console.log(a)  // undefined
var a

console.log(b) //  ReferenceError: b is not defined
let b

console.log(c // ReferenceError: c is not defined
const c = 1 

// 重复声明

let a = 1
let a = 2  // Identifier 'a' has already been declared

const b = 1
const b = 2 // Uncaught SyntaxError: Identifier 'b' has already been declared

// 块级作用域
var  a = 1 
if(a == 1){
   let b = 1
   const c = 2
}
console.log(b) // Uncaught ReferenceError: b is not defined
console.log(c) // Uncaught ReferenceError: c is not defined

const a = 1
const b = []
a = 2
b.push(2)
console.log(a) // TypeError: Assignment to constant variable
console.log(b)  // [2]

2.变量的结构赋值

ES6 允许按照一定模式，从数组和对象中提取值，对变量进行赋值，这被称为解构

const arr = [1,3,4,5,6]
const [a,b,c,d] = arr
console.log(a,b,c,d) // 1 3 4 5  

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

除此之外，数组和对象还支持嵌套解构：

const arr = [1,[2,3],5]

const [a,[b],c] = arr
console.log(a,b,c) // 1 2 5

const obj = {
   a:1,
   b:{
     m:2,
     n:3
   },
   c:4
}

const {a,b:{m,n},c} = obj
console.log(a,m,n,c) // 1 2 3 4

3.模板字符串

模板字符串是字符串拼接常用的方法，比以前用+拼接要好用太多了。

const name = 'lili'
const age = 22

console.log(`我的名字是${name},我今年${age}岁了`)  // 我的名字是lili,我今年22岁了
console.log('我的名字是'+name+',我今年'+age+'岁了') // 我的名字是lili,我今年22岁了

4.字符串新增方法

includes(), startsWith(), endsWith()、repeat()、 padStart()，padEnd()、replaceAll()这些方法看名字基本都知道怎么用，我项目中实际用到的就只有一个replaceAll，我几乎不会正则，所以这个方法还是挺香的。

5. 扩展运算符（…）

这个方法常用来展平数组，合并数组，与解构赋值结合过滤或者筛选特殊变量

console.log(...[1, 2, 3])  // 1 2 3

console.log([...[1,2],...[3,4]) // [1，2，3，4]

const [a,...b] = [1,2,3,4,5]
console.log(a,b) // 1  [2,3,4,5]

const {a,b,...c} = {a:1,b:2,c:3,d:4}
console.log(a,b,c)  // 1 2  {c:3,d:4}

6.数组新增方法

find()，findIndex()，findLast()，findLastIndex()、fill()、includes()、map()、forEach()、filter()、some()、evrey()、reduce()。这些方法可以单独使用，也可以组合使用。

const t1 = data.find(item => item.id == 2)
console.log(t1) // { id: 2, name: '李四', age: 19 }
const t2 = data.findIndex(item => item.id == 2)
console.log(t2)  // 1
const t3 = data.filter(item => item.age>=20)
console.log(t3)  // [{ id: 3, name: '王五', age: 20 },{ id: 4, name: '赵六', age: 21 },{ id: 5, name: '陈七', age: 22 }]
const t4 = data.some(item => item.age > 19)
console.log(t4)  // true
const t5 = data.every(item => item.age>=19) 
console.log(t5) // false

这些是项目中比较常用的，除此之外，forEach和map也常用于数组的遍历，可以理解为forEach没有返回值，
不改变数组值，map有返回值可以改变数字的值。
未完待续。。

相关链接

国庆摆烂第三天，我总结了项目中常用的ES6语法(二)