脚本宝典收集整理的这篇文章主要介绍了es6中容易忽视的细节(二),脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。
变量的解构赋值
-
结构赋值允许使用默认值
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
以上是脚本宝典为你收集整理的es6中容易忽视的细节(二)全部内容,希望文章能够帮你解决es6中容易忽视的细节(二)所遇到的问题。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。