原文在我的博客:https://github.com/YutHelloWo...
如果喜欢请start或者watch。这将是我继续写下去的动力。
这里梳理下React技术栈需要的最小知识集,让你可以最短时间掌握React,Redux,React-Router,ES6的相关知识,更快的上手React”全家桶“。预计会有ES6、React、Redux、React-Router、Webpack,实时更新目录。
ES6
变量声明
let 和 const
不要用var
,而是用let
和 const
。const
声明一个只读的常量,let
用来声明变量,const
和 let
都是块级作用域。
const PLUS = 'PLUS'; let availableId = 0; availableId ++;
模板字符串
模板字符串(template string)是增强版的字符串,用反引号(`)标识。它可以当作普通字符串使用,也可以用来定义多行字符串,或者在字符串中嵌入变量。
const user = 'world'; console.log(`hello ${user}`); // hello world // 多行(所有的空格和缩进都会被保留在输出之中) const content = ` Hello ${firstName},Thanks for ordering ${qty} tickets to ${event}. `;
默认参数
function log(user = 'World') { console.log(user); } log() // World
箭头函数
ES6 允许使用“箭头”(=>)定义函数。
函数的快捷写法,不需要通过 function
关键字创建函数,并且还可以省略 return
关键字。
同时,箭头函数还会继承当前上下文的 this
关键字,即:函数体内的this对象,就是定义时所在的对象,而不是使用时所在的对象。
// ES6 function Timer() { this.s1 = 0; setInterval(() => this.s1++,1000); } // 等同于ES5 function Timer() { this.s1 = 0; setInterval((function () { this.s1++; }).bind(this),1000); } const timer = new Timer(); setTimeout(() => console.log('s1: ',timer.s1),3100); // s1:3
模块的 Import 和 Export
import
用于引入模块,export
用于导出模块。
//导出默认,counter.js export default function counter() { // ... } import counter from 'counter'; // 普通导出和导入,reducer.js export const injectReducer = ( ) => { //... } import { injectReducer } from 'reducers' // 引入全部并作为 reducers 对象 import * as reducers from './reducers';
ES6 对象和数组
解构赋值
// 数组 let [a,b,c] = [1,2,3]; a // 1 //对象 let { foo,bar } = { foo: "aaa",bar: "bbb" }; foo // "aaa"
函数的参数也可以使用解构赋值。
function add ([x,y]) { return x + y; } add([1,2]); // 3
函数参数的逐层解析
const x = { a : { b : 1 },c : 2 } const counter = ({a : {b},c}) => b+c counter(x) // 3
属性的简洁表示法
const foo = 'bar'; const baz = {foo}; baz // {foo: "bar"} // 等同于 const baz = {foo: foo};
const o = { method() { return "Hello!"; } }; // 等同于 const o = { method: function() { return "Hello!"; } };
扩展运算符
扩展运算符(spread)是三个点(...)。它好比 rest 参数的逆运算,将一个数组转为用逗号分隔的参数序列。
组装数组
const a = [1,2]; const b = [...a,3]; b // [1,3]
获取数组部分
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','c'); // ['b','c'];
代替 apply。
function foo(x,y,z) {} const args = [1,3]; // 下面两句效果相同 foo.apply(null,args); foo(...args);
组装对象
const a = { x : 1,y : 2 } const b = { ...a,z : 3 } b // {x:1,y: 2,z: 3}
Promise
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常用特性总结,更全和更详尽的文档请参阅Learn ES2015
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。