ES6基本语法及常用方法

1、展开运算符...

可将一个数组或对象展开。对象展开需要使用新对象去包含，且新对象不等于原对象。

javascript 复制代码

  const obj = {
    name: 'Tom',
    age: 18
  }
  const newObj = {...obj}
  console.log(newObj) // {name: 'Tom', age: 18}
  const compaire = obj == newObj
  console.log(compaire) // false

javascript 复制代码

const list = [1,2,3,4]
console.log(...list) // 1 2 3 4

2、解构赋值

可以将数组中的值或对象的属性取出，赋值给其他变量。

javascript 复制代码

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

注意：

a、变量多，值少，多出来的变量会默认赋值为undefined；

变量少，值多，多出来的值会被忽略掉。

javascript 复制代码

const [a,b,c] = [1]
console.log(a,b,c) // 1 undefined undefined
const [x,y,z] = [1,2,3,4,5]
console.log(x,y,z) // 1 2 3

b、防止有undefined的情况出现，可以设置默认值

javascript 复制代码

const [a=0,b=0,c=0] = [1]
console.log(a,b,c) // 1 0 0

c、可以用剩余函数解决变量少，值多的问题

javascript 复制代码

const [x,y,...z] = [1,2,3,4,5]
console.log(x,y,z) // 1 2 [3, 4, 5]

d、按需导入

javascript 复制代码

const [a,,c] = [1,2,4]
console.log(a,c) // 1 4

e、支持多维数组结构

javascript 复制代码

const [x,y,z] = [1,2,[3,4,5]]
console.log(x,y,z) // 1 2 [3, 4, 5]

f、给对象解构的时候，对象的属性名一定要和变量名相同

javascript 复制代码

const obj = {
  name: 'foo',
  age: 18,
  sex: 'male'
}
const {name:uname,sex} = obj
console.log(uname,sex) // foo male

g、变量名中如果没有和属性名相同的，默认为undefined

javascript 复制代码

const obj = {
  name: 'foo',
  age: 18,
  sex: 'male'
}
const {name,sex,ages} = obj
console.log(name,sex,ages) // foo male undefined

h、解构的变量名不要和已定义的变量名冲突，否则会报错

3、筛选数组filter

创建一个新数组，存放筛选出的满足条件的所有元素，不影响原数组。

javascript 复制代码

const list = [1,2,3,4,5,6,5]
console.log(list.filter(item=> item < 4)) // [1, 2, 3]
console.log(list) // [1, 2, 3, 4, 5, 6, 5]

4、reduce

reduce是一种数组的归并方法，会对数组进行遍历，reduce函数的第一个参数得到的是迭代计算后的结果。

a、求和--如果没有起始值，则上一次值，为数组的第一个元素的值

javascript 复制代码

const list = [1,2,3,4,5]
console.log(list.reduce((a,b) => a + b)) // 15

b、求和--如果有起始值，则上一次值，为初始值

javascript 复制代码

const list = [1,2,3,4,5]
console.log(list.reduce( function(a,b) { return a+b }, 10)) // 25

c、元素在数组中出现的次数

javascript 复制代码

let arr = ['tom','john','lily','tom','lily','tom','tom'] 
let arrResult1 = arr.reduce((pre,cur) =>{
    if(cur in pre){
        pre[cur]++
    }else{
        pre[cur] = 1
    }
    return pre
},{})
console.log(arrResult1) // {tom: 4, john: 1, lily: 2}

d、数组去重

javascript 复制代码

let arr = ['tom','john','lily','tom','lily','tom','tom'] 
let arrResult2 = arr.reduce((pre, cur) => {
	if (!pre.includes(cur)) {
		pre.push(cur)
	}
	return pre
}, [])
console.log(arrResult2) // ['tom', 'john', 'lily']

5、拼接字符串join

javascript 复制代码

let arr = ['tom','john','lily'] 
console.log(arr.join('和')) // tom和john和lily

6、find查找元素

find查找元素返回符合条件的第一个数组元素值

javascript 复制代码

let arr = [1,2,3,4,5,6,7] 
console.log(arr.find(item => item > 5)) // 6

7、findIndex查找元素索引值

find查找元素返回符合条件的第一个数组元素的索引值

javascript 复制代码

let arr = [1,2,3,4,5,6,7] 
console.log(arr.findIndex(item => item > 5)) // 5

8、every

检测数组所有元素是否都满足指定条件，如果是返回true，反之，返回false

javascript 复制代码

let arr = [1,2,3,4,5,6,7] 
console.log(arr.every(item => item > 5)) // false

9、some

检测数组中是否有元素满足指定条件，如果是返回true，反之，返回false

javascript 复制代码

let arr = [1,2,3,4,5,6,7] 
console.log(arr.some(item => item > 5)) // true

10、concat合并数组

生成的是新数组

javascript 复制代码

let arr = [1,2,3,4,5,6,7] 
let arr1 = [8,9,10] 
console.log(arr.concat(arr1)) //  [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]

11、sort排序

javascript 复制代码

let arr = [5,6,1,2,3,4,7] 
console.log(arr.sort()) //  [1, 2, 3, 4, 5, 6, 7]

12、splice删除或替换原数组单元

javascript 复制代码

const months = ['Jan', 'March', 'April', 'June'];
months.splice(1, 0, 'Feb');
console.log(months); // ['Jan', 'Feb', 'March', 'April', 'June']
months.splice(1, 2);
console.log(months); // ['Jan', 'April', 'June']

13、 reverse反转数组

javascript 复制代码

let arr = [5,6,1,2,3,4,7] 
console.log(arr.reverse()) // [7, 4, 3, 2, 1, 6, 5]

14、Array.from(伪数组)

伪数组转真数组

15、split('拆分符')

javascript 复制代码

let arr = 'h,e.l,lo,h'
console.log(arr.split(',')) // ['h', 'e.l', 'lo', 'h']

17、substring字符串截取

javascript 复制代码

let arr = 'h,e.l,lo,h'
console.log(arr.substring(2,4)) // e.

18、startsWith是否以某字符开头

javascript 复制代码

let arr = 'h,e.l,lo,h'
console.log(arr.startsWith('h')) // true
console.log(arr.startsWith('e')) // false

19、endsWith是否以某字符结尾

javascript 复制代码

let arr = 'h,e.l,lo,h'
console.log(arr.endsWith('h')) // true
console.log(arr.endsWith('e')) // false

20、indexOf是否包含某字符

javascript 复制代码

let arr = 'h,e.l,lo,h'
console.log(arr.indexOf('h')) // 0
console.log(arr.indexOf('a')) // -1

21、includes是否包含某字符

javascript 复制代码

let arr = 'h,e.l,lo,h'
console.log(arr.includes('h')) // true
console.log(arr.includes('a')) // false

22、replace替换字符串

javascript 复制代码

let arr = 'h,e.l,lo,h'
console.log(arr.replace('h','a')) // a,e.l,lo,h

23、match查找字符串

javascript 复制代码

let arr = 'h,e.l,lo,h'
console.log(arr.match('e.l')) // ['e.l', index: 2, input: 'h,e.l,lo,h', groups: undefined]