修炼js 7 es6新特性2

时间:2020-9-1 作者:admin


1、模板字符串

在es5是通常是这样拼接字符串的

let str = "test";
console.log("你好"+str);

这种方式拼接也不是不行,如果只需要拼接一两个变量这样写也不复杂,但是如果有5~6个变量及以上呢?这种方式就很繁琐,es6提供了一种新的方式,模板字符串
`使用方式${}`

let name = 'zyx';
let len = 20
console.log(`你好${name},我是xxx,你多大,${len}cm`);

哈哈哈,开个小玩笑😏😏,这就是模板字符串的用法,比字符串拼接简洁不少。

2、Spread / Rest 操作符(…)

spread/rest 操作符就是这个 (…)那么他们有什么用呢,又该如何区分呢?我们先看看如何使用它。

function user(name,age,sex){
	console.log(`名字:${name},年龄:${age},性别:${sex}`)	
}
let arrs1 = ['zyx','age']
let arrs = [...arrs1, '男'];
user(arrs);

在这个例子中通过 spread来合并了一个数组,… 操作符将arrs1数组展开了,样子大概是这样的'zyx','age',接下来是rest操作符。

function user(...args){
	console.log(args);   // 数组 ['zyx','age','sex']
}
user('zyx','age','sex');

这里通过rest把传入的参数收集成了一个数组。这让我想起了 arguments ,当然二者还是有差距的,arguments是一个类数组并非数组,而通过rest操作符收集的数组是真正意义上的数组,认识了它们,我们该如何区分?我总结的一句话:在函数声明/定义时参数中使用 … 操作符是rest操作,其余地方使用为spread操作,如果有问题请私信或评论。Spread / Rest 只能这样而已吗??当然不是,解构赋值时你也可以使用它们

let [a,b,...c] = [1,2,3,4,5,6];
console.log(a,b,c)  // 1,2 [3,4,5,6]

可以看到除了 第一个和第二个元素剩余的元素都被装进了c,就这就完了??当然不止,你也可以用Spread / Rest实现数组的深拷贝

let arr1 = ['zyx',20]
let arr2 = [...arr1]; // arr1 直接赋值为浅拷贝,直接赋值实际上就是
//将指向数组的指针赋值给了arr2,
//实际上arr1和arr2指向同一块内存所以arr1改变会导致arr2也改变
arr1.push('男')

3、Reflect对象

Reflect是es6提供给我们操作对象的一种新方式,将原本是Object.prototype上的方法放到Reflect上,目前并不会取代Object(未来会的所以赶紧学习一下),现在有部分方法既会在Object上部署又会在Reflect上部署,未来的新方法将只部署在Reflect对象上。也就是说,从Reflect对象上可以拿到语言内部的方法。

// 以前的写法
Object.defineProperty(target, property, attributes)

// 新写法
Reflect.defineProperty(target, property, attributes)

例子节选自阮大神
Reflect有13个静态方法

Reflect.apply(target, thisArg, args)
Reflect.construct(target, args)
Reflect.get(target, name, receiver)
Reflect.set(target, name, value, receiver)
Reflect.defineProperty(target, name, desc)
Reflect.deleteProperty(target, name)
Reflect.has(target, name)
Reflect.ownKeys(target)
Reflect.isExtensible(target)
Reflect.preventExtensions(target)
Reflect.getOwnPropertyDescriptor(target, name)
Reflect.getPrototypeOf(target)
Reflect.setPrototypeOf(target, prototype)

对上述新特性有疑问或质疑请留言。如果觉得写的不错请点个赞支持一下,蟹蟹。

声明:本文内容由互联网用户自发贡献自行上传,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任。如果您发现有涉嫌版权的内容,欢迎进行举报,并提供相关证据,工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。