修炼js 7 es6新特性2 网页三栏布局常用方法 wordpress必须禁用REST API和移除WP-JSON链接的方法 面试官让我用纯css做一个下拉菜单,一分钟搞定!! CSS常用样式(二):绘制双箭头 住建部重申“房子是用来住的”;商务部公布禁塑时间表;在线旅游网站不得大数据杀熟 给大数据杀熟戴上“紧箍咒” RT-Thread推物联网操作系统!300秒启动安防摄像机 如何用一句话激怒程序员! 吉利在青岛成立物联网、卫星技术新公司 统计学和大数据之间有哪些联系 图说:九月开门红 大数据揭示A股九月行情走向 物联网时代下的“芯机遇”,「芯来科技」打造国产RISC-V生态 汇顶科技:指纹芯片巨头半年研发投入增八成,拓展物联网、汽车电子等领域应对风险 新华网|福州:树立物联网产业“马尾坐标” 「行走自贸区」福州:树立物联网产业“马尾坐标” k8s跨namespace访问服务 Mysql关键字和保留字(注意) ALTER command denied to user 'dev'@'192.168.10.xxx' for table 'xx_fanv_fail' oracle授权查询 ffmpeg vsync参数分析 小程序云函数中用group分组查询,只能查询20条,怎么解决? 【MyBatis&MyBatis-plus】分页查询避免两次查询同时返回总数和数据 数据库执行update语句没有反应,一直转圈,数据库锁表处理解决方法 按键精灵-自定义函数time(),datetime(),diff() 在Vue+Element中,Select选项值动态从后台接口获取的实现方法 mongoTemplate的方法和update() 欧科云链OKLink推出“链上天眼”功能 区块链+大数据全面助力链上安全 第二届微热点大数据论坛将于9月5日开幕 网龙参与全国教育大数据统计 构建五级服务支撑体系 无代码app制作崛起,app开发已不再是程序员的专利了 torch深入学习之凤飞九天torch.nn.MarginRankingLoss 【机器学习】—各类梯度下降算法 简要介绍 隐马尔可夫模型(HMM)来龙去脉(二) 单智能体、多智能体强化学习基本概念及算法分类?为啥提出多智能体强化学习,现状? 张量网络算法基础(八、张量网络机器学习【上】) MapReduce 简介 Python爬虫入门教程 81-100 小众爬虫框架looter,框架作者竟然在官方手册开车 机器人二维导航教程汇总 mapper 使用示例 Redis的概念及关系型与非关系型数据库对比 MySQL必知必会:使用WHERE、正则表达式、通配符过滤数据 Solr的增量更新和全量更新对比 MYSQL数据库维护 MATLAB与Mysql数据库连接并数据交换(基于ODBC) 数据库:PostgreSQL:基础功能使用介绍 MYSQL 5.7 高级SQL语句(3)——数据库函数和存储过程 mysql导出数据到表格讲解大全(导出数据带表头,导出数据中文乱码问题解决) SpringBoot升级/指定jackson版本 JAVA - EnumMap与EnumSet简单总结
您的位置:首页 >开发 >

修炼js 7 es6新特性2

1、模板字符串

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

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

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

let name = "zyx";let len = 20console.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)

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

郑重声明:本文版权归原作者所有,转载文章仅为传播更多信息之目的,如作者信息标记有误,请第一时间联系我们修改或删除,多谢。