es6的相关新特性

82 阅读2分钟

本文已参与「新人创作礼」活动,一起开启掘金创作之路

1、let与const

// const 定义一个常量
const a = 1// let定义变量
let b = 1

2、字符串相关

// 字符串相关
const str = 'aaabbbcccddd'
​
// 1、startsWith 以什么开头
console.log(str.startsWith('aa')) // true
console.log(str.startsWith('b')) // false// 2、endsWith 以什么结尾
console.log(str.endsWith('cc')) // true
console.log(str.endsWith('b')) // false//3、includes 包含
console.log(str.includes('aa'))// true
console.log(str.includes('dd'))// false

3、解构表达式

// 1、数组结构
arr = [1, 2, 3]
const [x, y, z] = arr //x=1,y=2,z=3
​
// 2、对象结构
user = { username: 'zs', age: 18 }
const { username, age } = user // username='zs' age=18
​
// 函数相关
// 箭头函数
func = () => { }

4、map与reduce操作

// 1、map 操作数组中的每个元素,返回一个新的数组
arr = [1, 3, 5, 7, 9]
arr2 = arr.map(i => i * 2) //arr.map((i)=>{return i*2})
​
console.log(arr2) // [2,5,10,14,18]
​
// 2、reduce含有两个参数,第一个参数为函数,含有两个参数,第二个参数为可选值,为操作的默认值
let sum1 = arr.reduce((a, b) => a + b)//不含初始值的求和 1+3+5+7=9
let sum2 = arr.reduce((a, b) => a + b, 100)//含初始值100的求和 100+1+3+5+7=9

5、对象的扩展

// 对象的扩展
user = { name: 'zs', age: 23 }
​
// 1、keys 获取对象的key返回数组
console.log(Object.keys(user))//['name','age']
​
///2values 获取对象的value返回数组
console.log(Object.values(user))//['zs',23]
​
///3、entries 
console.log(Object.entries(user))//[['name','zs'],['age',23]]
// 4、assign合并对象到第一个对象中
console.log(Object.assign(user, { 'gender': '男' })) // { name: 'zs', age: 23, gender: '男' }
console.log(user) //{ name: 'zs', age: 23, gender: '男' }

6、数组的扩展

// 数组扩展
data = [{ name: 'zs', age: 23 }, { name: 'ls', age: 24 }, { name: 'ww', age: 25 }, { name: 'zl', age: 26 }]
​
// 1、find方法 ,返回第一个为真的对象
const u = data.find(user => user.name === 'ls')//data.find(user=>{return user.name ==='ls'})
console.log(u) //{ name: 'ls', age: 24 }// 2、findIndex方法,返回第一个为真的下标,如果没找到则返回-1
const pos = data.findIndex(user => user.name === 'ls')//data.findIndex(user=>{return user.name ==='ls'})
console.log(pos) //1// 3、includes方法 
data = [1, 2, 3, 4, 5]
console.log(data.includes(3)) //true