We read every piece of feedback, and take your input very seriously.
To see all available qualifiers, see our documentation.
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
这里梳理下React技术栈需要的最小知识集,让你可以最短时间掌握React,Redux,React-Router,ES6的相关知识,更快的上手React”全家桶“。预计会有ES6、React、Redux、React-Router、Webpack,实时更新目录。
不要用var,而是用let 和 const 。const声明一个只读的常量,let用来声明变量,const 和 let 都是块级作用域。
var
let
const
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对象,就是定义时所在的对象,而不是使用时所在的对象。
function
return
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';
// 数组 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
从作为函数实参的对象中提取数据
function userId({id}) { return id; } function whois({displayName: displayName, fullName: {firstName: name}}){ console.log(displayName + " is " + name); } var user = { id: 42, displayName: "jdoe", fullName: { firstName: "John", lastName: "Doe" } }; console.log("userId: " + userId(user)); // "userId: 42" whois(user); // "jdoe is John"
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,2,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', 'b', 'c'); // ['b', 'c'];
代替 apply。
function foo(x, y, z) {} const args = [1,2,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 用于更优雅地处理异步请求。比如发起异步请求:
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
The text was updated successfully, but these errors were encountered:
No branches or pull requests
ES6
这里梳理下React技术栈需要的最小知识集,让你可以最短时间掌握React,Redux,React-Router,ES6的相关知识,更快的上手React”全家桶“。预计会有ES6、React、Redux、React-Router、Webpack,实时更新目录。
变量声明
let 和 const
不要用
var
,而是用let
和const
。const
声明一个只读的常量,let
用来声明变量,const
和let
都是块级作用域。模板字符串
模板字符串(template string)是增强版的字符串,用反引号(`)标识。它可以当作普通字符串使用,也可以用来定义多行字符串,或者在字符串中嵌入变量。
默认参数
箭头函数
ES6 允许使用“箭头”(=>)定义函数。
函数的快捷写法,不需要通过
function
关键字创建函数,并且还可以省略return
关键字。同时,箭头函数还会继承当前上下文的
this
关键字,即:函数体内的this对象,就是定义时所在的对象,而不是使用时所在的对象。模块的 Import 和 Export
import
用于引入模块,export
用于导出模块。ES6 对象和数组
解构赋值
函数的参数也可以使用解构赋值。
从作为函数实参的对象中提取数据
属性的简洁表示法
除了属性简写,方法也可以简写。
扩展运算符
扩展运算符(spread)是三个点(...)。它好比 rest 参数的逆运算,将一个数组转为用逗号分隔的参数序列。
组装数组
获取数组部分
还可收集函数参数为数组。
代替 apply。
组装对象
Promise
Promise 用于更优雅地处理异步请求。比如发起异步请求:
定义 Promise 。
写在最后
这只是个简洁的ES6常用特性总结,更全和更详尽的文档请参阅Learn ES2015
The text was updated successfully, but these errors were encountered: