es6 --- 功能
标记的模板文字
1.模板文字!确实很棒。我们不再会这样做….
const concatenatedString = "I am the " + number + "person to recommend this article."
然而,当我们使用下面这种方式做的话:
const concatenatedString = `I am the ${number} person to recommend this article.`
2.标记的模板文字允许我们向前迈出一步 - 并使用字符串调用函数。
const consoleLogAstring = (string) => {
console.log(string)
}
consoleLogAstring`I am the string to be logged!`
// I am the string to be logged!
标记模板文字还有一个额外的好处;向目标函数传递一个从字符串生成的参数数组。这些参数的排列方式如下:首先,一个字符串数组包围内插值,然后是每个内插值。
我们来看一个例子:
function logOutValues(strings, value1, value2) {
console.log(strings, value1, value2)
}
logOutValues`Here is one value: ${1} and two: ${2}. Wow!`
// ["Here is one value: ", " and two: ", ". Wow!"] 1 2
您可以根据需要为尽可能多的内插值执行此操作,甚至可以像这样操作字符串⬇:
const person = {
name: "Scott",
age: 25
}
function experience(strings, name, age) {
const str0 = strings[0]; // "that "
const str1 = strings[1]; // " is a "
let ageStr = 'youngster';
if (age > 99){
ageStr = 'centenarian';
}
return str0 + name + str1 + ageStr;
}
const output = experience`that ${ person.name } is a ${ person.age }`;
console.log(output);
// that Scott is a youngster
隐式的return语句
1.你写了多少次返回值的函数?
const addOne = (num) => {
return num + 1
}
console.log(addOne(1))
// 2
答:几乎每一次的编写都是这样操作,浪费了那么多时间.
2.将那些大括号替换为普通的小括号,并利用隐式返回:
const addOne = (num) => (
num + 1
)
console.log(addOne(1))
// 2
3.接下来, 我们进一步进行操作!
const addOne = num => num + 1
console.log(addOne(1))
// 2
对默认参数进行参数解构
const person = { name: 'Scott', attractiveness: 8.5 }
const consoleLogAttributes = ({ name, attractiveness }) => {
console.log(name, attractiveness)
}
consoleLogAttributes(person)
// 'Scott', 8.5
1 是不是太有用了,但是如果我们在没有参数的情况下调用上面的函数呢?
consoleLogAttributes()
// TypeError: Cannot match against 'undefined' or 'null'.
2 让我们通过设置空对象的默认参数来保存此错误:
const consoleLogAttributes = ({ name, attractiveness } = {}) => {
console.log(name, attractiveness)
}
3 现在我们再来执行一下上面的程序:
consoleLogAttributes()
// undefined undefined
4 如果不使用任何参数调用consoleLogAttributes
,就不会再出现错误!我们何不更进一步进行操作呢,看下面这段代码:
const consoleLogAttributes = ({
name = 'Default name',
attractiveness = '10'
} = {}) => {
console.log(name, attractiveness)
}
5 到处都是默认值, 这意味着以下两种方法将产生相同的结果:
consoleLogAttributes()
// 'Default name', 10
consoleLogAttributes({})
// 'Default name', 10
您的函数将更具弹性,因为它们可以适应未被定义的参数传递。
属性值简写(包括函数)
1 让我们回到上面那个person
对象。这是一个常见模式: 您有一个变量(例如,name),并且您希望将名为name
的key
设置为name
的值。
const name = "Scott"
const person = { name: name }
// { name: "Scott" }
2.感谢ES6,您可以这样做:
const name = "Scott"
const person = { name }
// { name: "Scott" }
3 当使用多个值执行操作时⬇:
const name = "Scott"
const programmingAbility = "poor"
const person = { name, programmingAbility }
// { name: "Scott", programmingAbility: "poor" }
4.甚至可以用函数操作⬇:
const name = "Scott"
const sayName = function() { console.log(this.name) }
const person = { name, sayName }
// { name: “Scott”, sayName: function() { console.log(this.name) }
5.并且在对象声明中执行函数声明:
const name = "Scott"
const person = { name, sayName() { console.log(this.name) } }
// { name: “Scott”, sayName: function() { console.log(this.name) } }
请各路 大牛,指教。
es6 --- 功能的更多相关文章
- JavaScript ES6功能概述(ECMAScript 6和ES2015 +)
JavaScript在过去几年中发生了很大的变化.这些是您今天可以开始使用的12项新功能! 该语言的新增内容称为ECMAScript 6.它也称为ES6或ES2015 +. 自1995年JavaScr ...
- ES6,ES2105核心功能一览,js新特性详解
ES6,ES2105核心功能一览,js新特性详解 过去几年 JavaScript 发生了很大的变化.ES6(ECMAScript 6.ES2105)是 JavaScript 语言的新标准,2015 年 ...
- JavaScript ES6 核心功能一览
JavaScript 在过去几年里发生了很大的变化.这里介绍 12 个你马上就能用的新功能. JavaScript 历史 新的语言规范被称作 ECMAScript 6.也称为 ES6 或 ES2015 ...
- JavaScript ES6 核心功能一览(转)
原文地址:Overview of JavaScript ES6 features (a.k.a ECMAScript 6 and ES2015+) 原文作者:Adrian Mejia 译文出自:掘金翻 ...
- es6新增功能
声明命令 1. let命令 ES6新增了let命令,用来声明变量.它的用法类似于var,但是所声明的变量,只在let命令所在的代码块内有效.下面代码在代码块之中,分别用let和var声明了两个变量.然 ...
- ES6(一)ECMAscript6介绍
nvm-windows Node.js是JavaScript语言的服务器运行环境,对ES6的支持度比浏览器更高.通过Node,可以体验更多ES6的特性.建议使用版本管理工具nvm,来安装Node,因为 ...
- ES6中的var let const应如何选择
javascript世界里面的每个人都在说有关ECMAScript 6 (ES6,也称作ES 2015)的话题,对象的巨大变化 ( 类 , super() , 等), 函数 (默认参数等), 以及模块 ...
- 简单搭建ES6的环境
一.兼容情况 说到ECMAScript6,顺便提一下ECMAScript5,先看一下ES5的兼容情况.ES5浏览器支持情况: Opera 11.60:Internet Explorer 9*:Fire ...
- 34.js----JS 开发者必须知道的十个 ES6 新特性
JS 开发者必须知道的十个 ES6 新特性 这是为忙碌的开发者准备的ES6中最棒的十个特性(无特定顺序): 默认参数 模版表达式 多行字符串 拆包表达式 改进的对象表达式 箭头函数 =&> ...
随机推荐
- server.htaccess 具体解释以及 .htaccess 參数说明
.htaccess文件(或者"分布式配置文件")提供了针对文件夹改变配置的方法. 即.在一个特定的文档文件夹中放置一个包括一个或多个指令的文件, 以作用于此文件夹及其所有子文件夹. ...
- Oracle性能分析1:开启SQL跟踪和获取trace文件
当Oracle查询出现效率问题时,我们往往须要了解问题所在,这样才干针对问题给出解决方式.Oracle提供了SQL运行的trace信息,当中包括了SQL语句的文本信息.一些运行统计,处理过程中的等待, ...
- MFC 加入背景图片并让控件背景透明
/*加入背景图片*/ BOOL CTOOLDlg::OnEraseBkgnd(CDC* pDC) { // TODO: 在此加入消息处理程序代码和/或调用默认值 CDialog::OnEraseB ...
- [debug]重定义默认參数
编敲代码过程中遇到重定义默认參数的错误,例如以下例所看到的: #include<iostream> #include<stdlib.h> using namespace std ...
- codeforces Looksery Cup 2015 H Degenerate Matrix 二分 注意浮点数陷阱
#include <cstdio> #include <cstring> #include <algorithm> #include <string> ...
- bzoj2190: [SDOI2008]仪仗队(欧拉)
2190: [SDOI2008]仪仗队 题目:传送门 题解: 跟着企鹅大佬做题! 自己瞎搞搞就OK,不难发现,如果以C作为原点建立平面直角坐标系,那么在这个坐标系中,坐标为(x,y)且GCD(x,y) ...
- web forms page和control的生命周期life cycle交互,以及page生命周期中每个event中需要做什么事情
只有 page_load和page_init这些可以autoeventwireup RenderControl只提供override public override void RenderContro ...
- vue引入swiper vue使用swiper vue脚手架使用swiper /引入js文件/引入css文件
vue引入swiper vue使用swiper vue脚手架使用swiper /引入js文件/引入css文件 ------------------------------------------- ...
- [Codeforces 1051F] The Shortest Statement 解题报告(树+最短路)
题目链接: https://codeforces.com/contest/1051/problem/F 题目大意: 给出一张$n$个点,$m$条边的带权无向图,多次询问,每次给出$u,v$,要求输出$ ...
- SharePoint 使用Expression Web 设计网站
创建好网站以后可就可以开始发布了 possible causes : 1.The web server may not hava the FrontPage Server Extensions ins ...