es6中新特性(字符串扩展、解构表达式、map和reduce、Set)

字符串扩展

1. includes():返回布尔值，表示是否找到参数字符串
2. startsWith():返回布尔值，表示参数字符串是否在原字符串的头部
3. endsWith():返回布尔值，表示参数字符串是否在原字符串的尾部

let str = "hello world";

console.log("str中是否包含world",str.includes("world")) //true
console.log("str中是否包含worlds",str.includes("worlds")) //false

console.log("str中是否以hello开头",str.startsWith("hello")) //true
console.log("str中是否以world开头",str.startsWith("world")) //false

console.log("str中是否以world结尾",str.endsWith("world")) //true
console.log("str中是否以hello结尾",str.endsWith("hello")) //false

解构表达式

1. 数组解构

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

2. 对象解构

const person = {
  name: 'jack',
  age: 21,
  language: ['vue', 'react', 'js']
}
let { name, age, language } = person
console.log(name, age, language) //jack,21,['vue','react','js']
let { name: n, age: a, language: l } = person // 类似于取别名
console.log(n, a, l) //jack,21,['vue','react','js']

map和reduce

1. map()：会返回一个新数组，新数组中的元素为 “原数组调用函数处理过后的值”

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

let newArr = arr.map((s) => parseInt(s))
console.log(newArr) // [1, 2, 3, 4, 5]

2. reduce()：接收一个函数(必须)和一个初始值(可选),该函数接收两个参数：

• 第一个参数是上一次reduce处理的结果
• 第二个参数是数组中要处理的下一个元素
  reduce()会从左到右依次把数组中的元素用reduce处理，并把处理的结果作为下一次reduce的第一个参数。如果是第一次，会把前两个元素作为计算参数，或者把用户指定的初始值作为起始参数

let arr = [10,20,30]
// 没有初始值，第一次参数a是10,b是20，第二次参数a是上次处理的结果就是30=a+b，参数b就是下一个要处理的元素arr中的30
let result=arr.reduce((a,b)=>{
    return a+b
})
console.log(result) // 60
// 有初始值，第一个参数a是初始值5,第二个参数是下一个要处理的元素就是arr中的10
let result=arr.reduce((a,b)=>{
    return a+b
},5)
console.log(result) // 65

Set

1. Set,本质与数组类似。不同的是Set只能保存不同的元素，相同的元素会被忽略，所以可以用来去重

//Set构造函数可以接收一个数组或空
let arr = [1, 1, 2, 3, 4, 4, 5]
let set = new Set(arr)
console.log(set) //[1, 2, 3, 4, 5]

// set还有一些方法
set.add(1)//添加
set.clear();//清空
set.delete(2);//删除指定元素，不是下标
set.has(2)//判断是否存在
set.forEach(()=>{})//遍历元素
set.size()//元素个数，是属性，不是方法