ES6常见用法补充

ES6常见用法

• • 一、关于取值方面
  • 二、关于扩展运算符方面
  • 三、ES6 新增常见函数的操作
  • 四、ES6中新出的空值合并运算符

一、关于取值方面

ES6通过解构来取值

如果不用解构，我们平时是怎么取值的？以对象为例

const obj = {name:'flx',age:24,
}//  如果不用解构我们怎么取值？
const myName = obj.name; // flx
const myAge = obj.age; // 24

如果用解构，是怎样取值的呢？

const {name,age} = obj; // name  flx    age  24

是不是很方便，如果多个属性的话会更方便。

如果想自己创建一个变量名，但这个变量名和被解构对象的变量名不一致咋办？

const obj = {name:'flx',age:24,
}const { name, age:flxAge } = obj   // name flx   flxAge 24

二、关于扩展运算符方面

扩展运算符就是三个点“…”，就是将实现了Iterator 接口的对象中的每个元素都一个个的迭代并取出来变成单独的被使用。

const obj1 = {fname:'flx',fdate:'1997-12-07'
}
const obj2 = {zname:'zy',zdate:'1997-10-12'
}const obj = {...obj1,...obj2};//{fname:'flx',fdate:'1997-12-07',zname:'flx',zdate:'1997-12-07'}

三、ES6 新增常见函数的操作

Array.includes()函数判断是否包含某一元素。它直接返回true或者false表示是否包含元素，对NaN一样能有有效。
以if中常用判断条件举例

// 不用`includes()`方法时
if(type == 1 ||type == 2 ||type == 3 ||type == 4 ||
){//...
}// 用includes()方法时
const condition = [1,2,3,4];if( condition.includes(type) ){//...
}

Arr.filter() 检测数值元素，并返回符合条件所有元素的数组。
Arr.find() 返回符合测试条件的第一个数组元素值，如果没有符合条件的则返回 undefined。
这两个都是搜索用的，区别在于后者找到符合条件的项，就不会继续遍历数组。前者会遍历所有数据

代码例子：

//  filter 方法
const data = [{name:'flx',age:'24'},{name:'zy',age:'24'}];
const result = data.filter( item =>{return item.name === 'zy'}
)//  find方法
const data = [{name:'flx',age:'24'},{name:'zy',age:'24'}];
const result = data.find( item =>{return item.name === 'flx'}
)

一篇非常好的文章，推荐大家阅读： https://blog.csdn.net/qq_28875189/article/details/105673787

Array.flat() 扁平化数组

// flat()默认只会拉平一层，flat（n）拉平n层，Infinity无限次
var arr = [1, 2, [3, 4]].flat();
console.log(arr) // [1, 2, 3, 4]var arr = [1, 2, [3, [4, 5]]].flat(2)
console.log(arr) // [1, 2, 3, 4,5]

四、ES6中新出的空值合并运算符

//  没用空值合并运算符之前，判断空值的方法
if(value !== null && value !== undefined && value !== ''){//...
}//  用空值运算符以后的方法
if(value??'' !== ''){//...
}

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！