es6中容易忽视的细节（二）

RayKr 发布于2019-08-21 18:44 / 712人阅读

摘要：变量的解构赋值结构赋值允许使用默认值内部使用严格相等运算符，判断一个位置是否有值。所以，只有当一个数组成员严格等于，默认值才会生效。这样的层层判断非常麻烦，因此现在有一个提案，引入了传导运算符，简化上面的写法。

变量的解构赋值

结构赋值允许使用默认值

let [foo = true] = [];
foo // true

ES6 内部使用严格相等运算符（===），判断一个位置是否有值。所以，只有当一个数组成员严格等于undefined，默认值才会生效。

let [x = 1] = [undefined];
x//1;
let [x=1] = [null];
x//null ;

对象的结构和数据的结构类似，但数组的结构是根据顺序决定的，对象的结构是根据未知决定的，变量名与键值对应才能取到值

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"

字符串也可以结构赋值

const [a, b, c, d, e] = "hello";
a // "h"
b // "e"
c // "l"
d // "l"
e // "o"

字符串和数组的结构还有一个属性

let {length:yx}=[1,2,3,,4,,5,]
yx // 7

结构赋值的用途
第一个用途交换变量的值

在es5中我们需要用一个中间变量来转换交换变量的值，但是在es6中不需要
var x=4,y=5,c;
c=x;x=y;y=c;
在es6中我们直接可以用结构的方式直接交换
[x,y]=[y,x]

第二个用途是给函数设置默认值

jQuery.ajax = function (url, {
  async = true,
  beforeSend = function () {},
  cache = true,
  complete = function () {},
  crossDomain = false,
  global = true,
  // ... more config
}) {
  // ... do stuff
};
指定参数的

第三个用途输入模块的制定的方法

const {set,index} = require("set-index");

es6给字符串提供了遍历的方法

for(let item of "sdfsdf"){
    console.log(item)
}

字符串方法中可以使用正则的是match、replace、search、split

es5中的正则修饰符g(全局匹配)/i(不区分大小写匹配)/m(多行匹配)，es6中新增的修饰符u用来正确处理大于uFFFF的 Unicode 字符

/?{2}/.test("??") // false
/?{2}/u.test("??") // true

es6中数组扩展运算符的用法

在es5中我们可以这样求取数组的最大值
var arr=[1,2,4,5,5]
Math.max.apply(null,arr)
在es6中我们可以直接
Math.max(...arr)

扩展运算发在字符串中也同样可以使用

var hello = "hello";
console.log(...hello)    //h e l l o

扩展运算符和Array.from()都可以将类数组(类数组说的广泛一点其实就含有length属性的对象)的对象转换为数组对象，但其内部实质调用时遍历器接口（Symbol.iterator）)[https://www.cnblogs.com/toulo...]

对象属性的书写：在es5中我们是不允许把对象的键写成变量或者是表达式，但是在es6中我们可以把对象的键写成表达式，以及函数名也可以写成表达式的形势

var a = "index"
var obj = {a:5}
obj    // {a:5}    es5中的写法
let obj = {[a]:5}
obj    // {index:5}    es6中的写法会得到这样的结果
function [a](){}

Object.assign方法实行的是浅拷贝，而不是深拷贝。也就是说，如果源对象某个属性的值是对象，那么目标对象拷贝得到的是这个对象的引用(只对嵌套的对象实现浅拷贝，对于非嵌套的对象实行的是深拷贝)。

var obj1={a:1,b:{c:2}}
var obj2=Object.assign({},obj1)
obj1.a++;
obj1.b.c++;
obj2    // {a:1,b:{c:3}}

Object.assign也可以用来处理数组，同位置的值进行替换，不同位置的源数组的值添加到目标数组

Object.assign([1,2,4],["sdfs",4,{a:5},4,6])
["sdfs",4,{a:5},4,6]    直接返回这样的结果

null运算符
编程实务中，如果读取对象内部的某个属性，往往需要判断一下该对象是否存在。比如，要读取message.body.user.firstName，安全的写法是写成下面这样。

const firstName = (message
  && message.body
  && message.body.user
  && message.body.user.firstName) || "default";

这样的层层判断非常麻烦，因此现在有一个提案，引入了“Null 传导运算符”（null propagation operator）?.，简化上面的写法。

const firstName = message?.body?.user?.firstName || "default";

扩展

// 如果 a 是 null 或 undefined, 返回 undefined
// 否则返回 a.b.c().d
a?.b.c().d

// 如果 a 是 null 或 undefined，下面的语句不产生任何效果
// 否则执行 a.b = 42
a?.b = 42

// 如果 a 是 null 或 undefined，下面的语句不产生任何效果
delete a?.b

GPU云服务器云服务器不能忽视的问题容易混淆的问题 webrtc的视频容易崩溃最容易实现的替换算法

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/90773.html

es6中容易忽视的细节（三）

摘要：模块就是对象，输入时必须查找对象属性模块不是对象，而是通过命令显式指定输出的代码，再通过命令输入。大括号里面的变量名，必须与被导入模块对外接口的名称相同。 proxy代理的坑 var obj = {index:index} var newObj = new Proxy(obj,{ get:(target,key)=>{ console.l...

Michael_Lin 2019-08-22 13:50 评论0 收藏0
es6中容易忽视的细节（一）

摘要：但是对于复杂类型的数据数组对象，保存的是一个指针，真正的数据是存储在堆区，只能保证这个指针不会变化，不能保证里面的数据不发生变化的变量声明方式在中声明的全局变量是和顶层对象的属性对等的获取全局对象的方法你可能不知道的let与const let var声明的变量会发生变量提升，在var声明之前调用该变量会数处undefined,但是let声明的变量不会发生提升，在声明之前调用就会...

baishancloud 2019-08-21 18:44 评论0 收藏0
Polyfill：Function.prototype.bind的四个阶段

摘要：第二阶段被忽略的细节函数的属性，用于表示函数的形参。第三阶段被忽视的细节通过生成的构造函数。五本文涉及的知识点的用法的用法除操作符外的构造函数的用法下诡异的命名函数表达式技术六总结在这之前从来没想过一个的会涉及这么多知识点，感谢给的启发。昨天边参考es5-shim边自己实现Function.prototype.bind，发现有不少以前忽视了的地方，这里就作为一个小总结吧。一、Fu...

mudiyouyou 2019-08-22 10:57 评论0 收藏0
CSS中的一些小细节

摘要：一排版原理改变盒模型计算方式取值初始值举个例子演示结果文档二一些容易被忽视的小细节下面代码，标签的高度是多少解析默认情况下是没有高度只有宽度。使用场景可以利用的百分比来做出一些固定宽高比的盒子。另外注意水平垂直居中的实现方式。一、CSS排版原理 showImg(https://segmentfault.com/img/remote/1460000015207778?w=1642&h=...

fxp 2019-08-29 15:38 评论0 收藏0
koa 实现 react-view 原理

摘要：今天，其实讲的是在实现同构过程中看到过，可能非常容易被忽视更小的一个点。每一个架构的框架都会涉及到层的展现，也不例外。这种说法即对也不对。总结其实，实现非常简单，我们也从一些维度看到了设计一个的一般方法。在之前我们有过一篇『React 同构实践与思考』的专栏文章，给读者实践了用 React 怎么实现同构。今天，其实讲的是在实现同构过程中看到过，可能非常容易被忽视更小的一个点 —— R...

zxhaaa 2019-08-19 18:24 评论0 收藏0