es6非空判断

示例1

es5

if(value !== null && value !== undefined && value !== ''){
//...
}

es6改进后

if(value??'' !== ''){
//...
}

空值合并运算符

读取对象属性的时候,如果某个属性的值是nullundefined,有时候需要为它们指定默认值。常见做法是通过||运算符指定默认值。

const headerText = response.settings.headerText || 'Hello, world!';
const animationDuration = response.settings.animationDuration || 300;
const showSplashScreen = response.settings.showSplashScreen || true;

上面的三行代码都通过||运算符指定默认值,但是这样写是错的。开发者的原意是,只要属性的值为nullundefined,默认值就会生效,但是属性的值如果为空字符串或false0,默认值也会生效。

??: 空值合并运算符。空值合并运算符将会遍历列表,并返回第一个不是 nullundefined 的值。

举例

null      ?? 'hi'       // 'hi'
undefined ?? 'hey' // 'hey' false ?? 'hola' // false
0 ?? 'bonjour' // 0
'first' ?? 'second' // first

这个运算符的一个目的,就是跟链判断运算符?.配合使用,为nullundefined的值设置默认值。

const animationDuration = response.settings?.animationDuration ?? 300;

上面代码中,如果response.settingsnullundefined,或者response.settings.animationDurationnullundefined,就会返回默认值300。也就是说,这一行代码包括了两级属性的判断。

这个运算符很适合判断函数参数是否赋值。

function Component(props) {
const enable = props.enabled ?? true;
// …

注意

??本质上是逻辑运算,它与其他两个逻辑运算符&&||有一个优先级问题,它们之间的优先级到底孰高孰低。优先级的不同,往往会导致逻辑运算的结果不同。

现在的规则是,如果多个逻辑运算符一起使用,必须用括号表明优先级,否则会报错。

// 报错
lhs && middle ?? rhs
lhs ?? middle && rhs
lhs || middle ?? rhs
lhs ?? middle || rhs

上面四个表达式都会报错,必须加入表明优先级的括号。

(lhs && middle) ?? rhs;
lhs && (middle ?? rhs); (lhs ?? middle) && rhs;
lhs ?? (middle && rhs); (lhs || middle) ?? rhs;
lhs || (middle ?? rhs); (lhs ?? middle) || rhs;
lhs ?? (middle || rhs);

条件判断

es5

if(
type == 1 ||
type == 2 ||
type == 3 ||
type == 4 ||
){
//...
}

es6改进

ES6中数组实例方法includes

const condition = [1,2,3,4];
if( condition.includes(type) ){
//...
}

数组过滤

es5数组过滤一般用filter来实现

const a = [1,2,3,4,5];
const result = a.filter(
item =>{
return item === 3
}
)

es6

const a = [1,2,3,4,5];
const result = a.find(
item =>{
return item === 3
}
)

find性能更加优秀,find方法中找到符合条件的项就不会继续遍历数组。

扁平化数组

一个部门JSON数据中,属性名是部门id,属性值是个部门成员id数组集合,现在要把有部门的成员id都提取到一个数组集合中。

const deps = {
'采购部':[1,2,3],
'人事部':[5,8,12],
'行政部':[5,14,79],
'运输部':[3,64,105],
}
let member = [];
for (let item in deps){
const value = deps[item];
if(Array.isArray(value)){
member = [...member,...value]
}
}
member = [...new Set(member)]

改进后

const deps = {
'采购部':[1,2,3],
'人事部':[5,8,12],
'行政部':[5,14,79],
'运输部':[3,64,105],
}
let member = Object.values(deps).flat(Infinity);

获取对象的全部属性值Object.values。涉及到数组的扁平化处理,用ES6提供的flat方法,还好这次的数组的深度最多只到2维,还要是遇到4维、5维深度的数组,是不是得循环嵌套循环来扁平化?

取值

取值在程序中非常常见,比如从对象obj中取值。

const obj = {
a:1,
b:2,
c:3,
d:4,
e:5,
} const a = obj.a;
const b = obj.b;
const c = obj.c;
const d = obj.d;
const e = obj.e;

或者

const f = obj.a + obj.d;
const g = obj.c + obj.e;

改进

const {a,b,c,d,e} = obj;
const f = a + d;
const g = c + e;

如果想创建的变量名和对象的属性名不一致,可以这么写:

const {a:a1} = obj;
console.log(a1);// 1

补充

ES6的解构赋值虽然好用。但是要注意解构的对象不能为undefinednull。否则会报错,故要给被解构的对象一个默认值。

const {a,b,c,d,e} = obj || {};

对象取值

let { foo, bar } = { foo: 'aaa', bar: 'bbb' };
foo // "aaa"
bar // "bbb"

对象的解构与数组有一个重要的不同。数组的元素是按次序排列的,变量的取值由它的位置决定;而对象的属性没有次序,变量必须与属性同名,才能取到正确的值。

let { bar, foo } = { foo: 'aaa', bar: 'bbb' };
foo // "aaa"
bar // "bbb" let { baz } = { foo: 'aaa', bar: 'bbb' };
baz // undefined

上面代码的第一个例子,等号左边的两个变量的次序,与等号右边两个同名属性的次序不一致,但是对取值完全没有影响。第二个例子的变量没有对应的同名属性,导致取不到值,最后等于undefined

如果解构失败,变量的值等于undefined

let {foo} = {bar: 'baz'};
foo // undefined

上面代码中,等号右边的对象没有foo属性,所以变量foo取不到值,所以等于undefined

如果变量名与属性名不一致,必须写成下面这样。

let { foo: baz } = { foo: 'aaa', bar: 'bbb' };
baz // "aaa" let obj = { first: 'hello', last: 'world' };
let { first: f, last: l } = obj;
f // 'hello'
l // 'world'

这实际上说明,对象的解构赋值是下面形式的简写

let { foo: foo, bar: bar } = { foo: 'aaa', bar: 'bbb' };

也就是说,对象的解构赋值的内部机制,是先找到同名属性,然后再赋给对应的变量。真正被赋值的是后者,而不是前者。

let { foo: baz } = { foo: 'aaa', bar: 'bbb' };
baz // "aaa"
foo // error: foo is not defined

上面代码中,foo是匹配的模式,baz才是变量。真正被赋值的是变量baz,而不是模式foo

与数组一样,解构也可以用于嵌套结构的对象。

let obj = {
p: [
'Hello',
{ y: 'World' }
]
}; let { p: [x, { y }] } = obj;
x // "Hello"
y // "World"

注意,这时p是模式,不是变量,因此不会被赋值。如果p也要作为变量赋值,可以写成下面这样。

let obj = {
p: [
'Hello',
{ y: 'World' }
]
}; let { p, p: [x, { y }] } = obj;
x // "Hello"
y // "World"
p // ["Hello", {y: "World"}]

合并数据

es5

const a = [1,2,3];
const b = [1,5,6];
const c = a.concat(b);//[1,2,3,1,5,6] const obj1 = {
a:1,
}
const obj1 = {
b:1,
}
const obj = Object.assgin({}, obj1, obj2);//{a:1,b:1}

改进,考虑去重

const a = [1,2,3];
const b = [1,5,6];
const c = [...new Set([...a,...b])];//[1,2,3,5,6] const obj1 = {
a:1,
}
const obj2 = {
b:1,
}
const obj = {...obj1,...obj2};//{a:1,b:1}

es6使用场景的更多相关文章

  1. 动态修改JS对象的值及React setState

    一.在JS里使用(非ES6) 实现场景: 给一个空对象填充某一指定数组内的值 并随机生成数量 const fruit = ['apple', 'banana', 'orange'] let fruit ...

  2. ES6 Generator的应用场景

    一.基础知识 API文档 ES6 诞生以前,异步编程的方法,大概有下面四种. 回调函数 事件监听 发布/订阅 Promise 对象 Generator 函数将 JavaScript 异步编程带入了一个 ...

  3. ES6 Symbol的应用场景

    一.简介 具体使用请参考:API ES6 引入了一种新的原始数据类型Symbol,表示独一无二的值.它是 JavaScript 语言的第七种数据类型,前六种是:undefined.null.布尔值(B ...

  4. ES6 Proxy的应用场景

    一.相关API Proxy Reflect 二.Proxy应用场景 1.数据校验 表单提交的时候做数据校验,例如年龄是不是满足条件,数据类型是不是满足要求等等,这场场景非常适合使用Proxy. 下面展 ...

  5. ES6原生Promise的所有方法介绍(附一道应用场景题目)

    JS的ES6已经出来很久了,作为前端工程师如果对此还不熟悉有点说不过去.不过如果要问,Promise原生的api一共有哪几个?好像真的可以难倒一票人,包括我自己也忽略了其中一个不常用的API Prom ...

  6. ES6 WeakMap和WeakSet的使用场景

    JavaScript垃圾回收是一种内存管理技术.在这种技术中,不再被引用的对象会被自动删除,而与其相关的资源也会被一同回收. Map和Set中对象的引用都是强类型化的,并不会允许垃圾回收.这样一来,如 ...

  7. ES6解构赋值的应用场景

    一.变量交换 1.ES6的方式 { let a=; let b=; [a,b]=[b,a]; console.log(a,b); } 输出为 2.ES5的方式 采用中间变量的方式进行存储 二.获取函数 ...

  8. js数组去重方法包括Es6(方法有很多,但是需要考虑兼容性和数据类型场景)

    1.Es6提供的方法 <script type="text/javascript"> //ES6里新添加了两个方法,set(set是一种新的数据结构,它可以接收一个数组 ...

  9. es6 let介绍及应用场景

    关于更多es6建议去看阮一峰的博客~ es6入门:http://es6.ruanyifeng.com/ 源码仓库:https://github.com/ruanyf/es6tutorial let介绍 ...

随机推荐

  1. AngularJS的简单实用

    Angular Js 的初步认识和使用    一:        1.模块化            定义模块和控制器  ng-app="myapp"  controller=&qu ...

  2. 5分钟实现用docker搭建Redis集群模式和哨兵模式

    如果让你为开发.测试环境分别搭一套哨兵和集群模式的redis,你最快需要多久,或许你需要一天?2小时?事实是可以更短. 是的,你已经猜到了,用docker部署,真的只需要十几分钟. 一.准备工作 拉取 ...

  3. 基于预计算的全局光照(Global Illumination Based On Precomputation)

    目录 基于图像的光照(Image Based Lighting,IBL) The Split Sum Approximation 过滤环境贴图 预计算BRDF积分 预计算辐射度传输(Precomput ...

  4. uniapp内嵌H5页面和uniapp页面相互传值

    最近项目有一个需求 -- 做一个百人抽奖的模块,要求展示百人的头像并且不断变化排列组合 先展示一部分的用户头像,然后每增加一个用户就增加一个头像在百人排列里面 我整一个gif图来展示一下 大概就是这种 ...

  5. CSS写一个圣诞树Chrome浏览器小插件

    一时兴起,突然想写一个Chrome浏览器插件,不知道写啥,就写了一个圣诞树小插件.项目源码>> Chrome浏览器插件 Chrome浏览器插件最主要的是:index.html.manife ...

  6. (googlechrome)未知错误导致安装失败,如果googlechrome....

    ​https://jingyan.baidu.com/article/ea24bc39ffb699da63b33147.html#5827690-tsina-1-63512-fe183374908e7 ...

  7. VS2019中安装2017,2015

    VS2019中安装2017,2015

  8. gin 源码阅读(5) - 灵活的返回值处理

    gin 源码阅读系列文章列表: gin 源码阅读(1) - gin 与 net/http 的关系 gin 源码阅读(2) - http请求是如何流入gin的? gin 源码阅读(3) - gin 路由 ...

  9. float 与 double 类型区别

    https://www.runoob.com/w3cnote/float-and-double-different.html float 单精度浮点数在机内占 4 个字节,用 32 位二进制描述. d ...

  10. 数据结构与算法-基础(十一)AVL 树

    AVL 树 是最早时期发明的自平衡二叉搜索树之一.是依据它的两位发明者的名称命名. AVL 树有一个重要的属性,即平衡因子(Balance Factor),平衡因子 == 某个节点的左右子树高度差. ...