ES6 的基礎教程

時間 2019-11-12

原文原文鏈接

1、介紹

1.歷史

ECMAScript和JavaScript
- ECMA是標準，JS是實現
  - 相似於HTML5是標準，IE十、Chrome、FF都是實現
  - 換句話說，未來也能有其餘XXXScript來實現ECMA
- ECMAScript簡稱ECMA或ES
- 目前版本
  - 低級瀏覽器主要支持ES 3.1
  - 高級瀏覽器正在從ES 5過渡到ES 6
歷史版本

時間	ECMA	JS	解釋
1996.11	ES 1.0	JS穩定	Netscape將JS提交給ECMA組織，ES正式出現
1998.06	ES 2.0		ES2正式發佈
1999.12	ES 3.0		ES3被普遍支持
2007.10	ES 4.0		ES4過於激進，被廢了
2008.07	ES 3.1		4.0退化爲嚴重縮水版的3.1 由於吵得太厲害，因此ES 3.1代號爲Harmony(和諧)
2009.12	ES 5.0		ES 5.0正式發佈同時公佈了JavaScript.next也就是後來的ES 6.0
2011.06	ES 5.1		ES 5.1成爲了ISO國際標準
2013.03	ES 6.0		ES 6.0草案定稿
2013.12	ES 6.0		ES 6.0草案發布
2015.06	ES 6.0		ES 6.0預計發佈正式版 JavaScript.next開始指向ES 7.0

二丶兼容性

http://kangax.github.io/compat-table/es5/
http://kangax.github.io/compat-table/es6/javascript

ES6(ES2015)

支持IE10+、Chrome、FireFox、移動端、NodeJScss

不支持能夠:html

1.在線轉換java

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
    <script src="browser.js" charset="utf-8"></script>
    <script type="text/babel">
    let a=12;
    let b=5;

    alert(a+b);
    </script>
  </head>
  <body>
  </body>
</html>

2.NodeJS編譯node

安裝node 而且執行node init -yreact

npm i @babel/core @babel/cli @babel/preset-envwebpack

添加腳本git

"scripts":{
    "build":"babel src -d test"
}

添加.babelrc——聲明presetes6

{
  "presets": ["@babel/preset-env"]
}

ES7(ECMA 2016)

**求冪github

Array.includes()

ES8(ECMA 2017)

await/async

ES9(ECMA 2018)

rest/spread
異步迭代
Promise.finally()
正則

三丶變量數據類型

var

1.能夠重複聲明

2.沒法限制修改

3.沒有塊級做用域

if (true) {
var a = 12;
}
alert(a)

let (聲明變量)

不能重複聲明,能夠修改,支持塊級做用域

let a=12;
let a=123;
alert(a);//SyntaxError: redeclaration of let a

if (true) {
let a = 12;
}
alert(a);//ReferenceError: a is not defined

const(聲明常量)

不能重複聲明,不能修改,支持塊級做用域

const a = 12;
a = 123;
alert(a);//TypeError: invalid assignment to const `a'

做用域

1.傳統函數級

2.ES6塊級

語法塊

{}

if(){

}

for(){

}

{

}

Object數據類型

使用對象字面量表示法

var person = {
　　name : "Micheal",
　　age : 24
　　//不要使用箭頭函數
　　hello(){
　　  console.log("nigao");
　　}
};

使用對象字面量表示法

var person = new Object();
person.name = "Micheal";
person.age = 24;

定義對象的屬性

let name="yancy";
let age =20;
let es6={
    name,
    age
}

Object.is()

基本數據類型

console.log("具體值：", Object.is("hello", "hello")); //具體值： true

引用數據類型

console.log("具體值：", Object.is({}, {})); //具體值： false

Object.assign()

用於對象的合併，將源對象（source）的全部可枚舉屬性，複製到目標對象（target）。

const a = { a: 1 };
const b = { b: 2 };
const c = { c: 3 };
let d = Object.assign(a, b, c)
console.log(d);

Object.keys()，Object.values()，Object.entries()

let obj = { a: 1, b: 2, c: 3 };
for (let key of Object.keys(obj)) {
  console.log(key);
}
for (let value of Object.values(obj)) {
  console.log(value);
}
for (let [key, value] of Object.entries(obj)) {
  console.log([key, value]);
}

Symbol數據類型

表示獨一無二的值。

不能用了new
Symbol()返回一個惟一的值，經常使用來做爲對象的私有屬性

let sym = Symbol(124);

console.log(sym); ////Symbol(124)
console.log(typeof sym);// symbol

//返回惟一的值
let s1 = Symbol();
let s2 = Symbol('another symbol');
let s3 = Symbol('another symbol');

console.log(s1 === s2); // false
console.log(s2 === s3); // false

應用

使用Symbol來做爲對象屬性名(key)

使用Symbol來替代常量3

Set

存儲無重複值的有序列表

let set1 = new Set();
set.add(1);
set.add('1');
set.delete('1');
set.has(1);//true
console.log(set.size);//2
set.clear();

遍歷

keys（）：返回鍵名的遍歷器
values（）：返回鍵值的遍歷器
entries(）：返回鍵值對的遍歷器
forEach(）：使用回調函數遍歷每一個成員
for...of：直接遍歷每一個成員

WeakSet

成員是對象

垃圾回收機制不用考慮存在於WeakSet中

不能迭代(沒有 for of keys vaules forEach size

let ws = new WeakSet();

Map

鍵值對的集合

const m = new Map();
const obj = { p: ' Hello world' };
console.log(m.set(obj, ' content'));
//Map { { p: ' Hello world' } => ' content' }
console.log(m.get(obj)); //content
console.log(m.has(obj)); //true
console.log(m.delete(obj)); //true
console.log(m.has(obj)); //false

經常使用方法

set  返回整個map結構
get  找不到返回undefined
delete
has
clear

keys
values
entries
forEach
for of

WeakMap

WeakMap只接受對象做爲鍵名（null除外），不接受其餘類型的值做爲鍵名。
WeakMap的鍵名所指向的對象，不計入垃圾回收機制。

Itertor遍歷器

遍歷器（lterator）就是這樣一種機制。它是一種接口，爲各類不一樣的數據結構提供統一的訪問機制。任何數據結構只要部署terator接口，就能夠完成遍歷操做（即依次處理該數據結構的全部成員）。

爲各類數據結構，提供一個統一的、簡便的訪問接口；
使得數據結構的成員可以按某種次序排列；
ES6創造了一種新的遍歷命令for..of循環，lterator接口主要供for..of消費。
Array
Object
Map
Set
String
NodeList
TypedArray

四丶函數

函數默認值

簡潔；
閱讀代碼的人，能夠馬上意識到哪些參數是能夠省略的，不用查看函數體或文檔；
有利於未來的代碼優化，即便將來的版本在對外接口中，完全拿掉這個參數，也不會致使之前的代碼沒法運行。

參數默認值不是傳值的，而是每次都從新計算默認值表達式的值。也就是說，參數默認值是惰性求值的。

function log(x, y = 'World') {
  console.log(x, y);
}
console.log('Hello');
console.log('Hello', 'China');

參數默認值能夠與解構賦值的默認值，結合起來使用。

function foo({ x, y = 5 }) {
  console.log(x, y);
}
foo({}); //undefined 5
foo({ x: 1 }); //1 5
foo({ x: 1, y: 2 }); //1 2
//  foo(); //TypeError: Cannot destructure property `x` of 'undefined' or 'null'.
//上面代碼只使用了對象的解構賦值默認值，沒有使用函數參數的默認值。只有 當函數 foo 的參數是一個對象時，變量 x 和 y 纔會經過解構賦值生成。若是函數 foo 調用時沒提供參數，變量 x 和 y 就不會生成，從而報錯。經過提供函數 參數的默認值，就能夠避免這種狀況。 


function foo({ x, y = 5 } = {}) {
  console.log(x, y);
}
foo(); //undefined 5
//上面代碼指定，若是沒有提供參數，函數 foo 的參數默認爲一個空對象。 經過解構賦值取得默認值。 



function Point(x = 1, y = 2) {
  this.x = x;
  this.y = y;
}
const p = new Point();
console.log(p.x, p.y);//1 2

區別

function m1({ x = 0, y = 0 } = {}) {
  console.log(x, y);
  return [x, y];
}

function m2({ x, y } = { x: 0, y: 0 }) {
  console.log(x, y);
  return [x, y];
}
m1(); //0 0
m2(); //0 0

m1({ x: 3, y: 8 }); //3 8
m2({ x: 3, y: 8 }); //3 8

m1({ x: 3 }); //3 0
m2({ x: 3 }); //3 undefined

m1({ z: 3 }); //0 0
m2({ z: 3 }); //undefined undefined

函數的 length 屬性

指定了默認值之後，函數的 length 屬性，將返回沒有指定默認值的參數個數。也就是說，指定了默認值後，length 屬性將失真。

箭頭函數(能夠修復this)

只是簡寫

function 名字(參數){

}
(參數)=>{

}

若是，有且僅有1個參數，()也能夠省
無參數多參數括號不能省略
若是，有且僅有1條語句-return，{}能夠省(json通常不簡寫)
多行語句 {} 不能省略

let show=a=>a*2;
    alert(show(12));

函數的 rest參數

用於獲取函數的多餘參數，這樣就不須要使用 arguments 對象了。rest 參數搭配的變量是一個數組，該變量將多餘的參數放入數組中。

function show(a, b, ...args){}

function show(a, b, ...args, c){
alert(args);
}

show(12, 15, 8, 9, 20, 21, 90);//Uncaught SyntaxError: Rest parameter must be last formal parameter

Rest Parameter必須是最後一個

擴展運算符(...)

將一個數組轉爲用逗號分隔的參數序列，或將一個類數組轉換成真正的數組。

let arr = [1, 2, 3];
      show(...arr);
      //...arr
      //1,2,3
      //show(1,2,3);
      function show(a, b, c) {
        alert(a);
        alert(b);
        alert(c);
      }

let arr1=[1,2,3];
    let arr2=[5,6,7];

    let arr=[...arr1, ...arr2];

    alert(arr);

展開後的效果，跟直接把數組的內容寫在這兒同樣

let a;
    let arr=[1,2,3];

    a=...arr;//Uncaught SyntaxError: Unexpected token ...

    alert(a);

嚴格模式

ES2016 作了一點修改，規定只要函數參數使用了默認值、

解構賦值、或者擴展運算符，那麼函數內部就不能顯式設定爲嚴格模式，不然會報錯。

'use strict'

全局嚴格模式
放在無參數的函數裏

name屬性

函數的 name 屬性，返回該函數的函數名。

var f = function fun() {}
console.log(f.name); //fun

五丶解構賦值

1.左右兩邊結構必須同樣
2.右邊必須是個東西
3.聲明和賦值不能分開(必須在一句話裏完成)

數組:

let [a,b,c]=[1,2,3];
    console.log(a, b, c);

//...表達式    
    let [ head,... tail]=[1,2,3,4]; 
    console. log(head, tail);//[2,3,4]

//默認值
    let [ foo=true]=[]; 
    console. log(foo);//true

    let [bar, foo] = [1];
    console.log(bar, foo); //1 undefined

    let [x, y = 'b'] = ['a'];
    console.log(x, y);//a b

    let [x, y = 'b'] = ['a', undefined];
    console.log(x, y); //a b

    let [x = 1] = [null];
    console.log(x); //null

    function f() {
      console.log(' aaa');
      return 10;
    }
    let [x = f()] = [99];
    console.log(x);//99

function f() {
  console.log(' aaa');
  return 10;
}
let [x = f()] = [];
console.log(x); //aaa 10

//有length屬性會自動轉換


let [foo, a] = "string";
console.log(a); //t

json:

let {a, c, d}={a: 12, c: 5, d: 6};
    console.log(a, c, d);

let [{a, b}, [n1, n2, n3], num, str]=[{a: 12, b: 5}, [12,5,8], 8, 'cxzcv'];

    console.log(a,b,n1,n2,n3,num,str);

注意

let [a,b]={a: 12, b: 45};

    console.log(a,b);//Uncaught TypeError: {(intermediate value)(intermediate value)} is not iterable

let {a,b}={12,5};

    console.log(a,b);//Uncaught SyntaxError: Unexpected token ,

let [a,b];
    [a,b]=[12,5];
    console.log(a,b);//Uncaught SyntaxError: Missing initializer in destructuring declaration

對象

沒有次序
與屬性同名

let { foo: foo, bar: bar } = { foo: "aaa", bar: "bbb" };
  console.log(foo, bar);//aaa bbb

//沒有對象名
  let { foo, bar } = { foo: "aaa", bar: "bbb" };
  console.log(foo, bar);//aaa bbb

let obj = { first: ' hello', last: ' world' };
let { first: h, last: w } = obj;
console.log(h, w); // hello  world

//默認值
var { x = 3 } = {};
console.log(x); //3
var { x, y = 5 } = { x: 1 };
console.log(x, y);//1 5
var { x: y = 3 } = {};
console.log(x, y);//1 3

var { x = 3 } = {};
console.log(x); //3
var { y = 3 } = { y: undefined };
console.log(y); //3
var { z = 3 } = { z: null };
console.log(z); //null

//分行 塊級作域不行
let a, b;
[a, b] = [1, 2];
console.log(a, b);//1 2

//圓括號能夠 儘可能不要用
let a, b;
({ a, b } = { a: 1, b: 2 });
console.log(a, b);

字符串:

const [a, b, c, d, e] = 'hello';
console.log(a, b, c, d, e); //h e l l o

//長度屬性
let { length: len } = 'hello';
console.log(len); //5

布爾值

let { toString: s } = false;
console.log(s === Boolean.prototype.toString); //true

函數參數的解構賦值

function add([x, y]) {
  return x + y;
}
res = add([1, 2]);
console.log(res); //3

let n = [
  [1, 2],
  [3, 4]
].map(([a, b]) => a + b);
console.log(n); //[3,7]

//默認值
function move({ x = 0, y = 0 } = {}) {
  return [x, y];
}
console.log(move({ x: 3, y: 8 })); //[3,8]
console.log(move({ x: 3 })); //[3,0]
console.log(move({})); //[0,0]
console.log(move()); //[0,0]

應用

//交換變量
let x = 1,
  y = 3;
[x, y] = [y, x];
console.log(x, y);//3 1

//返回多個值
function example() {
  return [1, 2, 3];
}
let [a, b, c] =
example();
console.log(a, b, c);//1 2 3

function example() {
  return {
    foo: 1,
    bar: 2
  };
}
let { foo, bar } =
example();
console.log(foo, bar);//1 2

//統一參數變量
function f([x, y, z]) {
  console.log(x, y, z);
};
f([1, 2, 3]);//1 2 3

function f({ x, y, z }) {
  console.log(x, y, z);
};
f({ z: 3, y: 2, x: 1 });//1 2 3

//提取JSON
let jsonData = { id: 42, status: "OK", data: [867, 5309] };
let { id, status, data: number } =
jsonData;
console.log(id, status, number); //42 OK [ 867, 5309 ]

//函數默認值

//遍歷map
const map = new Map();
map.set(' first', ' hello');
map.set(' second', ' world');
//獲取鍵名
for (let [key, value] of map) { console.log(key + "is" + value) }; // firstis hel1o secondis world

//模塊的制定輸入

六丶數組的擴展

map 映射

返回一個新數組；如沒有return，就至關於forEach，因此，在使用map時，必定要有return。

一個對一個
[12, 58, 99, 86, 45, 91]
[不及格, 不及格, 及格, 及格, 不及格, 及格]

let arr=[19, 85, 99, 25, 90];
//用item分別存儲
let result=arr.map(item=>item>=60?'及格':'不及格');

alert(score);
alert(result);

[45, 57, 135, 28]
[
{name: 'blue', level: 0, role: 0},
{name: 'zhangsan', level: 99, role: 3},
{name: 'aaa', level: 0, role: 0},
{name: 'blue', level: 0, role: 0},
]

let arrMap = [1, 2, 3, 4];
let resMap = arrMap.map((item, index, arrMap) => {
  return item * 2;
});
console.log(resMap); //[2,4,6,8]

reduce 彙總

接收一個函數做爲累加器，數組中的每一個值（從左到右）開始縮減，最終計算爲一個值。

reduce() 能夠做爲一個高階函數，用於函數的 compose。

一堆出來一個
算個總數
[12, 8000000, 599999] => 80060011

let arr=[12,69,180,8763];
//tmp爲前面的和 12+69  item=180
let result=arr.reduce( (tmp, item, index)=>{
      //alert(tmp+','+item+','+index);
      return tmp+item; //tmp爲前面的和 12+69  item=180
});

alert(result);

算個平均數
[12, 59, 99] => 56.67

let arr=[12,69,180,8763];

    let result=arr.reduce(function (tmp, item, index)=>{
      if(index!=arr.length-1){ //不是最後一次
        return tmp+item;
      }else{                    //最後一次
        return (tmp+item)/arr.length;
      }
    });

    alert(result);

filter 過濾器

過濾掉不知足條件的數據。

let arr=[12,5,8,99,27,36,75,11];

    let result=arr.filter(item=>item%3==0);

    alert(result);

let arr=[
      {title: '男士襯衫', price: 75},
      {title: '女士包', price: 57842},
      {title: '男士包', price: 65},
      {title: '女士鞋', price: 27531}
    ];

    let result=arr.filter(item=>item.price>=10000);

    console.log(result);

forEach 循環(迭代)

let arr=[12,5,8,9];

arr.forEach((item,index)=>{
alert(index+': '+item);
    });

<button onclick="numbers.forEach(myFunction)">點我</button>
<p id="demo"></p>
<script>
demoP = document.getElementById("demo");
var numbers = [4, 9, 16, 25];
function myFunction(item, index) {
    demoP.innerHTML = demoP.innerHTML + "index[" +    index + "]: " + item + "<br>"; 
}
</script>

every每個

數組裏所有元素知足條件，則返回true

用於檢測數組全部元素是否都符合指定條件（經過函數提供）
- 若是數組中檢測到有一個元素不知足，則整個表達式返回 false
- 若是全部元素都知足條件，則返回 true。

var numbers = [5, 9, 11, 25, 11];
var res = numbers.every((item, index) => {
    return item % 2 == 1;
});
alert(`every:${res}`); //every:ture

判斷是否所有爲奇數

some一個

數組裏某一元素知足條件，則返回

用於檢測數組中的元素是否知足指定條件（函數提供）。
會依次執行數組的每一個元
- 若是有一個元素知足條件，則表達式返回true
- 若是沒有知足條件的元素，則返回false。

var numbers = [5, 9, 2, 25, 11];
var res = numbers.some((item, index) => {
    return item % 2 == 1;
});
alert(`some:${res}`); //some:ture

判斷一個爲偶數數

for…of

一個循環來迭代可迭代的對象。

用來替代 for...in 和 forEach() ，並支持新的迭代協議。

for...of 容許遍歷 Arrays（數組）, Strings（字符串）, Maps（映射）, Sets（集合）等可迭代的數據結構等。

let arr2 = ["apple", "pear", "strawbeey"];
for (let val of arr2) {
  console.log(` for (let val of arr2): ${val}`);
} // for (let val of arr2): apple
//for (let val of arr2): pear
//for (let val of arr2): strawbeey

entries()

返回一個數組的迭代對象，該對象包含數組的鍵值對 (key/value)。

for (let item of arr2.entries()) {
  console.log(item);
} //[ 0, 'apple' ]
//[1, 'pear']
//[2, 'strawbeey']
for (let [key, value] of arr2.entries()) {
  console.log(key, value);
}//0 apple 1 pear 2 strawbeey

Array.from()

具備length屬性可遍歷對象轉換爲數組

let str = "hello";
let strEx = [...str];
let strFrom = Array.from(str);

console.log(strEx); //["h","e","1","1",o"]
console.log(strFrom); //["h","e","1","1",o"]

//數組輸入參數
function foo() {
  const args = [...arguments];
  const args1 = Array.from(arguments);
  console.log(args);
  console.log(args1);
}
foo(1, 2, 4564, "m", 65);

Array.of()

用於將一組值，轉換爲數組,彌補數組構造函數Array()的不足。由於參數個數的不一樣，會致使Array()的行爲有差別。

let a= Array.of(3,11,8);
console.log(a);//[3.11.8]

find()

找出第一個符合條件的數組成員。

它的參數是一個回調函數，全部數組成員依次執行該回調函數，直到找出第一個返回值爲true的成員，而後返回該成員。若是沒有符合條件的成員，則返回undefined。

let arrFind = [1, 22, 354, 480, 99];
let resFind = arrFind.find(
  (val, index, arrFind) => {
    return val > 100;
  });
console.log(resFind); //354

findIndex()

找出第一個符合條件的數組成員的位置

它的參數是一個回調函數，全部數組成員依次執行該回調函數，直到找出第一個返回值爲true的成員，而後返回該成員。若是沒有符合條件的成員，則返回-1。

let arrFindIndex = [1, 22, 354, 480, 99];
let resFindIndex = arrFindIndex.findIndex(
  (val, index, arrFindIndex) => {
    return val > 100;
  });
console.log(resFindIndex); //2

fill()

fill方法使用給定值，填充一個數組。

fill(填的數，開始位置，結束位置)

console.log(['a', 'b', 'c'].fill(7, 1, 2)); //[ 'a', 7, 'c' ]

includes()

返回一個布爾值，表示某個數組是否包含給定的值

a = ['a', 'b', 'c'];
console.log(a.includes('b')); //true

七丶字符串擴展

include

從一個字符串中找查自動字符串

let str = "myHello world!";
console.log(str.includes('world')); //true
console.log(str.includes('yes'));//false
console.log(str.includes('world', 9));//false

startsWith

返回布爾值，表示參數字符串是否在原字符串的頭部。

let str='git://www.baidu.com/2123123';

    if(str.startsWith('http://')){
      alert('普通網址');
    }else if(str.startsWith('https://')){
      alert('加密網址');
    }else if(str.startsWith('git://')){
      alert('git地址');
    }else if(str.startsWith('svn://')){
      alert('svn地址');
    }else{
      alert('其餘');
    }

endsWith

返回布爾值，表示參數字符串是否在原字符串的尾部。

let str='1.png';

    if(str.endsWith('.txt')){
      alert('文本文件');
    }else if(str.endsWith('.jpg')){
      alert('JPG圖片');
    }else{
      alert('其餘');
    }

repeat

返回一個新字符串，表示將原字符串重複n次

console.log('x'.repeat(3));
//小數會取整數
console.log('x'.repeat(2.5));
//NaM 是 0
console.log('x'.repeat(NaN));
//字符串會轉爲數字
console.log('x'.repeat('5'));

padStart padEnd

用於頭部尾部補全

console.log('x'.padStart(5, 'ab'));//ababx
console.log('x'.padStart(4, 'ab'));//abax

console.log('x'.padEnd(5, 'ab'));//xabab
console.log('x'.padEnd(4, 'ab'));//xabao

//若是省略第二個參數，默認使用空格補全長度。
console.log('x'.padStart(4));//   x
console.log('x'.padEnd(4));//x

2.字符串模板

模板字符串（template
string）是加強版的字符串，用反引號（`）標識。它能夠看成普通字符串使用，也能夠用來定義多行字符串，或者在字符串中嵌入變量。

直接把東西塞到字符串裏面 ${東西}
能夠折行

let title='標題';
let content='內容';
let str='<div>\
  <h1>'+title+'</h1>\
  <p>'+content+'</p>\
</div>';

let str2=`<div>
  <h1>${title}</h1>
  <p>${content}</p>
</div>`;

八丶ES6的面向對象

1.類,繼承

//原來的
function User(name, pass){
this.name=name;
this.pass=pass;
}
//外掛方法
User.prototype.showName=function (){
alert(this.name);
};
User.prototype.showPass=function (){
alert(this.pass);
};
//繼承
function VipUser(name, pass, level){
      User.call(this, name, pass);//繼承屬性
      this.level=level;
    }

    VipUser.prototype=new User();
    VipUser.prototype.constructor=VipUser;
    VipUser.prototype.showLevel=function (){
      alert(this.level);
    };

    var v1=new VipUser('blue', '123456', 3);

    v1.showName();
    v1.showPass();
    v1.showLevel();

//如今的
class User{
constructor(name, pass){
this.name=name;
this.pass=pass;
}

showName(){
alert(this.name);
}
showPass(){
alert(this.pass);
}
}
//繼承
class VipUser extends User{
constructor(name, pass, level){
super(name, pass);
this.level=level;
}

showLevel(){
alert(this.level);
}
}

var v1=new VipUser('blue', '123456', 3);

v1.showName();
v1.showPass();
v1.showLevel();

1.class關鍵字、構造器和類分開了
2.class裏面直接加方法

繼承：

super=超類==父類

2.應用--react

React：
1.組件化——class
2.JSX=babel==browser.js

基礎的東西

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
    <script src="react.js" charset="utf-8"></script>
    <script src="react-dom.js" charset="utf-8"></script>
    <script src="browser.js" charset="utf-8"></script>
    <script type="text/babel">
    window.onload=function (){
      let oDiv=document.getElementById('div1');

      ReactDOM.render(
        <span>123</span>,
        oDiv
      );
    };
    </script>
  </head>
  <body>
    <div id="div1">

    </div>
  </body>
</html>

組件

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
    <script src="react.js" charset="utf-8"></script>
    <script src="react-dom.js" charset="utf-8"></script>
    <script src="browser.js" charset="utf-8"></script>
    <script type="text/babel">
    class Item extends React.Component{
      constructor(...args){
        super(...args);
      }

      render(){
        return <li>{this.props.str}</li>;
      }
    }

    class List extends React.Component{
      constructor(...args){
        super(...args);
      }

      render(){
        return <ul>
          {this.props.arr.map(a=><Item str={a}></Item>)}
        </ul>;
      }
    }

    window.onload=function (){
      let oDiv=document.getElementById('div1');

      ReactDOM.render(
        <List arr={['abc', 'erw', 'sdfasdf', 'dfasdfsdfds']}></List>,
        oDiv
      );
    };
    </script>
  </head>
  <body>
    <div id="div1">

    </div>
  </body>
</html>

九丶json

1.標準寫法

{"key": "aaa", "key2": 12}

2.JSON對象

stringify 把json轉換成字符串

let json={a: 12, b: 5, c: 'aaa'};

    console.log(JSON.stringify(json));

parse 字符串轉換json

let str='{"a":12,"b":5,"c":"aaa"}';
    let json=JSON.parse(str);

    console.log(json);

十丶異步處理

異步——多個操做能夠一塊兒進行，互不干擾 √

$.ajax({
  url: 'data/1.json',
  dataType: 'json',
  success(data1){
    $.ajax({
      url: 'data/2.json',
      dataType: 'json',
      success(data2){
        $.ajax({
          url: 'data/3.json',
          dataType: 'json',
          success(data3){
            console.log(data1, data2, data3);
          }
        });
      }
    });
  }
});

同步——操做一個個進行

let data1=$.ajax('data/1.json');
let data2=$.ajax('data/2.json');
let data3=$.ajax('data/3.json');

Promise

Promise.all([
      $.ajax({url: 'data/1.json', dataType: 'json'}),
      $.ajax({url: 'data/2.json', dataType: 'json'}),
      $.ajax({url: 'data/3.json', dataType: 'json'}),
    ]).then(([data1, data2, data3])=>{
      console.log(data1, data2, data3);
    }, (res)=>{
      alert('錯了');
    });

async/await

async function show(){
      let data1=await $.ajax({url: 'data/1.json', dataType: 'json'});
      if(data1.a<10){
        let data2=await $.ajax({url: 'data/2.json', dataType: 'json'});
        alert('a');
      }else{
        let data3=await $.ajax({url: 'data/3.json', dataType: 'json'});
        alert('b');
      }
    }

十一丶閉包

1.底層：棧
2.高層：函數看成對象處理

十二丶模塊化

webpack

安裝 npm i webpack -g

新建配置文件

webpack.config.js

const path=require('path');

module.exports={
  mode: 'production',
  entry: './index.js',
  output: {
    path: path.resolve(__dirname, 'build'),
    filename: 'bundle.js'
  }
};

1.entry——入口地址
2.output——輸出
path：絕對路徑
filename：文件名
3.mode——模式
4.全部當前路徑前面加./

export

export let a=xx;
  export const a=xx;

  export function xxx(){

  };

  export class xxx{

  }

  export {xxx, xxx, xxx, ...};

  export default xx;

導入模塊

import * as mod from "./xxx";
import {a, b, c, ...} from "./xxx";

//從另外一個模塊導出
  export * from './m2';
  export {x,x,x,x} from './m2';
  export {default} from './m2';

import

import * as mod from "./xxx";
  import {a, b, c, ...} from "./xxx";

  //引入默認成員
  import xxx from './mod';

  //模塊的代碼引入進來，不引入內部成員
  import "./1.jpg";
  import "./1.css";

  //異步引入
  let promise=import("./mod1");

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。