成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

React知識(shí)地圖--ES6

SillyMonkey / 2699人閱讀

摘要：預(yù)計(jì)會(huì)有，實(shí)時(shí)更新目錄。聲明一個(gè)只讀的常量，用來(lái)聲明變量，和都是塊級(jí)作用域。模板字符串模板字符串是增強(qiáng)版的字符串，用反引號(hào)標(biāo)識(shí)。

原文在我的博客：https://github.com/YutHelloWo...
如果喜歡請(qǐng)start或者watch。這將是我繼續(xù)寫下去的動(dòng)力。

這里梳理下React技術(shù)棧需要的最小知識(shí)集，讓你可以最短時(shí)間掌握React,Redux,React-Router,ES6的相關(guān)知識(shí)，更快的上手React”全家桶“。預(yù)計(jì)會(huì)有ES6、React、Redux、React-Router、Webpack，實(shí)時(shí)更新目錄。

ES6

React

Redux

ES6

變量聲明 let 和 const

不要用var，而是用let 和 const 。const聲明一個(gè)只讀的常量，let用來(lái)聲明變量，const 和 let 都是塊級(jí)作用域。

const PLUS = "PLUS";

let availableId = 0;
availableId ++;
模板字符串

模板字符串（template string）是增強(qiáng)版的字符串，用反引號(hào)（`）標(biāo)識(shí)。它可以當(dāng)作普通字符串使用，也可以用來(lái)定義多行字符串，或者在字符串中嵌入變量。

const user = "world";
console.log(`hello ${user}`);  // hello world

// 多行（所有的空格和縮進(jìn)都會(huì)被保留在輸出之中）
const content = `
  Hello ${firstName},
  Thanks for ordering ${qty} tickets to ${event}.
`;
默認(rèn)參數(shù) 
function log(user = "World") {
  console.log(user);
}

log() //  World
箭頭函數(shù)

ES6 允許使用“箭頭”（=>）定義函數(shù)。
函數(shù)的快捷寫法，不需要通過(guò) function 關(guān)鍵字創(chuàng)建函數(shù)，并且還可以省略 return 關(guān)鍵字。
同時(shí)，箭頭函數(shù)還會(huì)繼承當(dāng)前上下文的 this 關(guān)鍵字，即：函數(shù)體內(nèi)的this對(duì)象，就是定義時(shí)所在的對(duì)象，而不是使用時(shí)所在的對(duì)象。

// 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 用于導(dǎo)出模塊。

//導(dǎo)出默認(rèn), counter.js
export default function counter() { 
  // ...
}

import counter from "counter"; 

// 普通導(dǎo)出和導(dǎo)入，reducer.js
export const injectReducer = ( ) => {
  //...
}

import { injectReducer } from "reducers"

// 引入全部并作為 reducers 對(duì)象
import * as reducers from "./reducers";
ES6 對(duì)象和數(shù)組 解構(gòu)賦值 
// 數(shù)組
let [a, b, c] = [1, 2, 3];
a // 1

//對(duì)象
let { foo, bar } = { foo: "aaa", bar: "bbb" };
foo // "aaa"

函數(shù)的參數(shù)也可以使用解構(gòu)賦值。

function add ([x, y]) {
  return x + y;
}

add([1, 2]); // 3

函數(shù)參數(shù)的逐層解析

const x = {
  a : {
    b : 1
  },
  c : 2
}
const counter = ({a : , c}) => b+c
counter(x) // 3
屬性的簡(jiǎn)潔表示法 
const foo = "bar";
const baz = {foo};
baz // {foo: "bar"}

// 等同于
const baz = {foo: foo};

除了屬性簡(jiǎn)寫，方法也可以簡(jiǎn)寫。

const o = {
  method() {
    return "Hello!";
  }
};

// 等同于

const o = {
  method: function() {
    return "Hello!";
  }
};
擴(kuò)展運(yùn)算符

擴(kuò)展運(yùn)算符（spread）是三個(gè)點(diǎn)（...）。它好比 rest 參數(shù)的逆運(yùn)算，將一個(gè)數(shù)組轉(zhuǎn)為用逗號(hào)分隔的參數(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);

組裝對(duì)象

const a = { x : 1, y : 2 }
const b = { ...a, z : 3 }
b // {x:1, y: 2, z: 3}
Promise

Promise 用于更優(yōu)雅地處理異步請(qǐng)求。比如發(fā)起異步請(qǐng)求：

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");
});
寫在最后

這只是個(gè)簡(jiǎn)潔的ES6常用特性總結(jié)，更全和更詳盡的文檔請(qǐng)參閱Learn ES2015

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/84560.html

相關(guān)文章

  • web前端技術(shù)體系大全

    以下為個(gè)人目前接觸到的前端技術(shù)，歡迎大家補(bǔ)充。 一、前端技術(shù)框架 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/ 桌面應(yīng)用Electron：https:...

    RaoMeng 評(píng)論0 收藏0

  • 前端最實(shí)用書簽(持續(xù)更新)

    摘要：前言一直混跡社區(qū)突然發(fā)現(xiàn)自己收藏了不少好文但是管理起來(lái)有點(diǎn)混亂所以將前端主流技術(shù)做了一個(gè)書簽整理不求最多最全但求最實(shí)用。 前言 一直混跡社區(qū),突然發(fā)現(xiàn)自己收藏了不少好文但是管理起來(lái)有點(diǎn)混亂; 所以將前端主流技術(shù)做了一個(gè)書簽整理,不求最多最全,但求最實(shí)用。 書簽源碼 書簽導(dǎo)入瀏覽器效果截圖showImg(https://segmentfault.com/img/bVbg41b?w=107...

    sshe 評(píng)論0 收藏0

  • 前端人員必須知道的三個(gè)問(wèn)題

    摘要：第一個(gè)問(wèn)題前端都做哪些事呢，前端都需要哪些技術(shù)呢前端發(fā)展的三個(gè)階段初級(jí)階段入門常見(jiàn)標(biāo)簽，新增的，語(yǔ)義化標(biāo)簽等等選擇器，背景，文本，鏈接，列表，盒模型，定位，浮動(dòng)，新增的屬性柵格化系統(tǒng)，按鈕，表單，導(dǎo)航數(shù)據(jù)類型，對(duì)象，函數(shù)，運(yùn)算符，語(yǔ)句，，選 第一個(gè)問(wèn)題：前端都做哪些事呢，前端都需要哪些技術(shù)呢 前端發(fā)展的三個(gè)階段： 初級(jí)階段：（入門） html：常見(jiàn)標(biāo)簽，html5新增的，語(yǔ)義化標(biāo)簽等等...

    zollero 評(píng)論0 收藏0

  • 前端人員必須知道的三個(gè)問(wèn)題

    摘要：第一個(gè)問(wèn)題前端都做哪些事呢，前端都需要哪些技術(shù)呢前端發(fā)展的三個(gè)階段初級(jí)階段入門常見(jiàn)標(biāo)簽，新增的，語(yǔ)義化標(biāo)簽等等選擇器，背景，文本，鏈接，列表，盒模型，定位，浮動(dòng)，新增的屬性柵格化系統(tǒng)，按鈕，表單，導(dǎo)航數(shù)據(jù)類型，對(duì)象，函數(shù)，運(yùn)算符，語(yǔ)句，，選 第一個(gè)問(wèn)題：前端都做哪些事呢，前端都需要哪些技術(shù)呢 前端發(fā)展的三個(gè)階段： 初級(jí)階段：（入門） html：常見(jiàn)標(biāo)簽，html5新增的，語(yǔ)義化標(biāo)簽等等...

    王晗 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<