ES6,先知道这些必会的才行
变量声明
const 和 let
不要用 var,而是用 const 和 let,分别表示常量和变量。不同于 var 的函数作用域,const 和 let 都是块级作用域。
const DELAY = 1000; let count = 0;
count = count + 1;
模板字符串
模板字符串提供了另一种做字符串组合的方法。
const user = 'world';
console.log(`hello ${user}`); // hello world // 多行
const content = `
Hello ${firstName},
Thanks for ordering ${qty} tickets to ${event}.
`;
默认参数
function logActivity(activity = 'skiing') {
console.log(activity);
} logActivity(); // skiing
箭头函数
函数的快捷写法,不需要通过 function 关键字创建函数,并且还可以省略 return 关键字。
同时,箭头函数还会继承当前上下文的 this 关键字。
比如:
[1, 2, 3].map(x => x + 1); // [2, 3, 4] 等同于: [1, 2, 3].map((function(x) { return x + 1; }).bind(this));
模块的 Import 和 Export
import 用于引入模块,export 用于导出模块。
比如:
// 引入全部
import dva from 'dva'; // 引入部分
import { connect } from 'dva';
import { Link, Route } from 'dva/router'; // 引入全部并作为 github 对象
import * as github from './services/github'; // 导出默认
export default App;
// 部分导出,需 import { App } from './file'; 引入
export class App extend Component {};
析构赋值
析构赋值让我们从 Object 或 Array 里取部分数据存为变量。
// 对象
const user = { name: 'guanguan', age: 2 };
const { name, age } = user;
console.log(`${name} : ${age}`); // guanguan : 2 // 数组
const arr = [1, 2];
const [foo, bar] = arr;
console.log(foo); // 1
我们也可以析构传入的函数参数。
const add = (state, { payload }) => {
return state.concat(payload);
};
析构时还可以配 alias,让代码更具有语义。 const add = (state, { payload: todo }) => {
return state.concat(todo);
};
对象字面量改进
这是析构的反向操作,用于重新组织一个 Object 。
const name = 'duoduo';
const age = 8; const user = { name, age }; // { name: 'duoduo', age: 8 }
定义对象方法时,还可以省去 function 关键字。
app.model({
reducers: {
add() {} // 等同于 add: function() {}
},
effects: {
*addRemote() {} // 等同于 addRemote: function*() {}
},
});
Spread Operator
Spread Operator 即 3 个点 ...,有几种不同的使用方法。
可用于组装数组。
const todos = ['Learn dva'];
[...todos, 'Learn antd']; // ['Learn dva', 'Learn antd']
也可用于获取数组的部分项。 const arr = ['a', 'b', 'c'];
const [first, ...rest] = arr;
rest; // ['b', 'c'] // With ignore
const [first, , ...rest] = arr;
rest; // ['c']
还可收集函数参数为数组。
function directions(first, ...rest) {
console.log(rest);
}
directions('a', 'b', 'c'); // ['b', 'c'];
代替 apply。 function foo(x, y, z) {}
const args = [1,2,3]; // 下面两句效果相同
foo.apply(null, args);
foo(...args);
对于 Object 而言,用于组合成新的 Object 。(ES2017 stage-2 proposal)
const foo = {
a: 1,
b: 2,
};
const bar = {
b: 3,
c: 2,
};
const d = 4; const ret = { ...foo, ...bar, d }; // { a:1, b:3, c:2, d:4 }
此外,在 JSX 中 Spread Operator 还可用于扩展 props,详见 Spread Attributes。
Promises
Promise 用于更优雅地处理异步请求。比如发起异步请求:
fetch('/api/todos')
.then(res => res.json())
.then(data => ({ data }))
.catch(err => ({ err }));
定义 Promise 。
const delay = (timeout) => {
return new Promise(resolve => {
setTimeout(resolve, timeout);
});
}; delay(1000).then(_ => {
console.log('executed');
});
ES6,先知道这些必会的才行的更多相关文章
- 要做linux运维工程师的朋友,必须要掌握以下几个工具才行 ...
要做linux运维工程师的朋友,必须要掌握以下几个工具才行 ... [复制链接] 发表于 2013-12-13 15:59 | 来自 51CTO网页 [只看他] 楼主 本人 ...
- 【转】 要做linux运维工程师的朋友,必须要掌握以下几个工具才行
本人是linux运维工程师,对这方面有点心得,现在我说说要掌握哪方面的工具吧 说到工具,在行外可以说是技能,在行内我们一般称为工具,就是运维必须要掌握的工具. 我就大概列出这几方面,这样入 ...
- 适配i5,要加入i5的启动页才行,否则运行的效果还是i4
适配i5,要加入i5的启动页才行,否则运行的效果还是i4
- git rebase之前需要commit才行
更新好本地代码后,git fetch, 接着合并,但是git rebase 不行, git status一看,有很多更新的文件. 于是 git add --后,再rebase,还是不行. 注意,reb ...
- chrome谷歌浏览器用这种方式清除缓存比较方便了,必须是调试模式才行
chrome谷歌浏览器用这种方式清除缓存比较方便了 PS:必须是调试模式才行,可以不是手机模式 ,有些低版本浏览器可能没有这个功能. ----------------------------- ...
- 能把opencv的源码也进行调试吗?(需要pdb文件才行)
能把opencv的源码也进行调试吗?(需要pdb文件才行)1.我是用的Qt Creator,然后"工具\选项\调试器\概要\源码路径映射"中,选择"添加Qt源码" ...
- filter过滤器 默认情况下只对客户端发来的请求有过滤作用 对服务端的跳转不起作用 需要显示的在xml定义过滤的方式才行
filter过滤器 默认情况下只对客户端发来的请求有过滤作用 对服务端的跳转不起作用 需要显示的在xml定义过滤的方式才行
- jdk和Tomcat版本之间的关系,jdk尽量要比tomcat低才行
注:本文来源于:6860 <jdk和Tomcat版本之间的关系,jdk尽量要比tomcat低才行> 用的tomcat是低版本的,但是用的jdk却是高版本的,用Servlet做的项目运行都没 ...
- 小米miui5系统的webview在处理动画事件transitionEnd事件时,竟然要用transitionend才行
一般的安卓系统用的是webkitTransitionEnd, 而小米的系统我用了webkitTransitionEnd事件无法执行,只能用transitionend才会被执行,怪
随机推荐
- HDU3183 贪心/RMQ-ST表
A Magic Lamp Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others)Tota ...
- 二,php的错误处理
php处理错误的三种方式: 简单的die()语句: 自定义错误和错误触发器:错误日志: 1,简单的die()语句 if(!file_exists("aaa.txt")){ die( ...
- mysql 存储过程和游标
CREATE DEFINER=`root`@`localhost` PROCEDURE `NewProc`() BEGIN #Routine body goes here... DECLARE ite ...
- 3期浅析宽字节注入-----SQL注入
通过分类的名称,你就可以找到漏洞银行的hack show视频. 吸收这个知识的几个关键的信息. 1.通过视频得到知识源. [信息来源] 我怎么从不清楚到知道这个信息来源?这个过程没办法 ...
- appium+android各配置参数获取'platformName'、'platformVersion'、appActivity、deviceName、webdriver.Remote
图中1的获取--'platformName'.'platformVersion' 点击appium右上角的运行按钮,可通过上面查看platformName 和 platformVersion 平台版本 ...
- 简述Dubbo
目前处于实习期间,白天工作,网上自主学习.最近没事逛了一下当前招聘网上的招聘要求,其中dubbo这个关键字出现的比较多,因此花了点时间学习了一番,在这写写自己的理解. 说起Dubbo,得先聊聊RPC, ...
- AVL树插入(Python实现)
建立AVL树 class AVLNode(object): def __init__(self,data): self.data = data self.lchild = None self.rchi ...
- 2019 CCPC-Wannafly Winter Camp Day1 (Div2, onsite)
solve:4/11 补题:6/11 A 机器人 补题:zz 这是一道分类讨论的题目,有一个规律就是如果必须要从第一个区到第二个区,那么最多转区两次(1到2一次,2到1一次),然后分类讨论即可,只要细 ...
- Python——付费/版权歌曲下载
很多歌曲需要版权或者付费才能收听 正确食用方法: 1.找到歌曲编号 2.输入编号并点击下载歌曲 # coding:utf8 # author:Jery # datetime:2019/4/13 23: ...
- OAuth2 .net MVC实现获取token
OAuth2 的原理这里不多讲,可以看:https://www.cnblogs.com/icebutterfly/p/8066548.html 直奔主题:这里要实现的功能为,统计微软的Owin程序集实 ...