摘要:預計會有,實時更新目錄。聲明一個只讀的常量,用來聲明變量,和都是塊級作用域。模板字符串模板字符串是增強版的字符串,用反引號標識。
原文在我的博客:https://github.com/YutHelloWo...
如果喜歡請start或者watch。這將是我繼續(xù)寫下去的動力。
這里梳理下React技術棧需要的最小知識集,讓你可以最短時間掌握React,Redux,React-Router,ES6的相關知識,更快的上手React”全家桶“。預計會有ES6、React、Redux、React-Router、Webpack,實時更新目錄。
ES6
React
Redux
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}. `;默認參數(shù)
function log(user = "World") { console.log(user); } log() // World箭頭函數(shù)
ES6 允許使用“箭頭”(=>)定義函數(shù)。
函數(shù)的快捷寫法,不需要通過 function 關鍵字創(chuàng)建函數(shù),并且還可以省略 return 關鍵字。
同時,箭頭函數(shù)還會繼承當前上下文的 this 關鍵字,即:函數(shù)體內(nèi)的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 對象和數(shù)組 解構賦值
// 數(shù)組 let [a, b, c] = [1, 2, 3]; a // 1 //對象 let { foo, bar } = { foo: "aaa", bar: "bbb" }; foo // "aaa"
函數(shù)的參數(shù)也可以使用解構賦值。
function add ([x, y]) { return x + y; } add([1, 2]); // 3
函數(shù)參數(shù)的逐層解析
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 參數(shù)的逆運算,將一個數(shù)組轉(zhuǎn)為用逗號分隔的參數(shù)序列。
組裝數(shù)組
const a = [1, 2]; const b = [...a, 3]; b // [1,2,3]
獲取數(shù)組部分
const arr = ["a", "b", "c"]; const [first, ...rest] = arr; rest; // ["b", "c"] // With ignore const [first, , ...rest] = arr; rest; // ["c"]
還可收集函數(shù)參數(shù)為數(shù)組。
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
Promise 用于更優(yōu)雅地處理異步請求。比如發(fā)起異步請求:
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
文章版權歸作者所有,未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址:http://specialneedsforspecialkids.com/yun/84560.html
以下為個人目前接觸到的前端技術,歡迎大家補充。 一、前端技術框架 1、Vue.js 官網(wǎng):https://cn.vuejs.org/ Vue CLI:https://cli.vuejs.org/ 菜鳥教程:http://www.runoob.com/w3cnote... Nuxt.js:https://zh.nuxtjs.org/ 桌面應用Electron:https:...
摘要:前言一直混跡社區(qū)突然發(fā)現(xiàn)自己收藏了不少好文但是管理起來有點混亂所以將前端主流技術做了一個書簽整理不求最多最全但求最實用。 前言 一直混跡社區(qū),突然發(fā)現(xiàn)自己收藏了不少好文但是管理起來有點混亂; 所以將前端主流技術做了一個書簽整理,不求最多最全,但求最實用。 書簽源碼 書簽導入瀏覽器效果截圖showImg(https://segmentfault.com/img/bVbg41b?w=107...
摘要:第一個問題前端都做哪些事呢,前端都需要哪些技術呢前端發(fā)展的三個階段初級階段入門常見標簽,新增的,語義化標簽等等選擇器,背景,文本,鏈接,列表,盒模型,定位,浮動,新增的屬性柵格化系統(tǒng),按鈕,表單,導航數(shù)據(jù)類型,對象,函數(shù),運算符,語句,,選 第一個問題:前端都做哪些事呢,前端都需要哪些技術呢 前端發(fā)展的三個階段: 初級階段:(入門) html:常見標簽,html5新增的,語義化標簽等等...
閱讀 1867·2019-08-29 16:44
閱讀 2172·2019-08-29 16:30
閱讀 780·2019-08-29 15:12
閱讀 3531·2019-08-26 10:48
閱讀 2659·2019-08-23 18:33
閱讀 3780·2019-08-23 17:01
閱讀 1943·2019-08-23 15:54
閱讀 1302·2019-08-23 15:05