javascript的ES6學習總結(第二部分)

時間 2019-11-09

標籤 javascript es6 學習總結第二部分欄目 JavaScript 简体版

原文原文鏈接

1.數組循環javascript

介紹數組循環以前，先回顧一下ES5數組的循環css

(1)數組遍歷(代替普通的for)：arr.forEach(callback(val,index,arr){todo}) //val是數組的當前項，index是數組的鍵名(下標)，arr是整個數組html

let arr = ['today','tomorrow','the day after tommrrow','three days from now'];
arr.forEach(function(val,index,arr){
    console.log(val,index,arr);//today 0 (4) ["today", "tomorrow", "the day after tommrrow", "three days from now"]...
});

(2)數組映射：arr.map(callback(item,index,arr){todo... 正常狀況下，須要配合return，返回的是一個新數組，若沒有return，至關於forEach，通常用於在有return的狀況下}) //item是數組的當前項，index是數組的鍵名(下標)，arr是整個數組java

let arr = [
    {title:'aaaa',read:100,hot:true},
    {title:'bbbb',read:100,hot:true},
    {title:'cccc',read:100,hot:true},
    {title:'dddd',read:100,hot:true}
];
let newArr = arr.map((item,index,arr)=>{
    // console.log(val,index,arr);
    let json = {};
    json.t = item.title;
    json.r = item.read;
    json.h = item.hot == true && '真棒!!!';
    return json;
});
console.log(newArr);//(4) [Object, Object, Object, Object]

(3)數組過濾：arr.filter(callback(item,index,arr){todo... 正常狀況下，須要配合return，返回值爲true的元素，返回值爲false的元素則被過濾掉}) //item是數組的當前項，index是數組的鍵名(下標)，arr是整個數組node

let arr = [
    {title:'aaaa',read:100,hot:true},
    {title:'bbbb',read:100,hot:false},
    {title:'cccc',read:100,hot:true},
    {title:'dddd',read:100,hot:false}
];
let newArr = arr.filter((item,index,arr)=>{
    // return item.hot == true;
    return item.hot;
});
console.log(newArr);//(2) [Object, Object]

(4)數組單項檢測：arr.some(callback(item,index,arr){todo... 正常狀況下，須要配合return，若是有一個值爲true，則返回true，不然返回false}) //item是數組的當前項，index是數組的鍵名(下標)，arr是整個數組jquery

let arr = ['one','two','three','four'];
let b = arr.some((val,index,arr)=>val=='one');
console.log(b);//true

注：此方法可封裝成一個檢測數組中是否存在某一項的函數es6

let arr = ['apple','banana','orange'];
function findInArray(arr,item){
    return arr.some((val,index,arr)=> val == item);
}
console.log(findInArray(arr,'orange'));//true

(5)數組多項檢測：arr.every(callback(item,index,arr){todo... 正常狀況下，須要配合return，若是全部的值都爲true，則返回true，不然返回false}) //item是數組的當前項，index是數組的鍵名(下標)，arr是整個數組json

let arr = ['one','two','three','four',6,8,2];
let b = arr.every((val,index,arr)=>val);
console.log(b);//true

(6)數組簡化：arr.reduce(callback(prev,cur,index,arr){todo... 正常狀況下，須要配合return，返回計算後的結果},傳遞給函數的初始值(可選，默認爲第一項的值)) //prev是數組的前一項(若是第一次循環，則prev默認爲0)，cur是數組的當前項，index是數組的鍵名(下標)，arr是整個數組；數組

arr.reduceRight()用法和arr.reduce相似，只不過計算順序是從右向左promise

//數組求和
let arr = [1,2,3,4,5];
let res = arr.reduce((prev,cur,index,arr)=>{
    return prev+cur;
},0);
console.log(res);//15//數組求積
let arr = [1,2,3,4,5];
let res = arr.reduce((prev,cur,index,arr)=>{
    return prev*cur;
},1);
console.log(res);//120
// 數組求最大值
let arr = [1,2,3,298,4,5,199];
let res = arr.reduce((prev,cur,index,arr)=>{
    return (cur>prev?cur:prev);
});
console.log(res);//298
// 求階乘(ES2017新增冪運算符**，例如Math.pow(2,3)可寫成2**3。)
let arr = [2,2,3];
let res = arr.reduce((prev,cur,index,arr)=>{
return Math.pow(prev,cur);//也能夠寫成return prev**cur
});
console.log(res);//64

(7)ES6新增for...of循環：

let arr = ['a','b','c','d'];
// 遍歷值
for(let val of arr){
    console.log(val);
}
// 遍歷下標
for(let index of arr.keys()){
    console.log(index);
}
// 遍歷某一項
for(let item of arr.entries()){
    console.log(item[0],item[1]);
}
// or
for(let [key,val] of arr.entries()){
    console.log(key,val);
}

(8)ES6新增Array.from()方法：將類數組對象(只要有length屬性就能夠)轉換爲數組，也能夠複製數組

<ul>
    <li>11</li>
    <li>22</li>
    <li>33</li>
    <li>44</li>
</ul>

<script type="text/javascript">
window.onload= function(){
    let aLi = document.querySelectorAll('ul li');
    // let arrLi = Array.from(aLi);//ES6方法
　　// let arrLi = [...aLi];//ES6方法
    let arrLi = [].slice.call(aLi);//ES5方法
    arrLi.pop();
    console.log(arrLi);
}

</script>

function show(){
    let args = Array.from(arguments);
    // let args = [...arguments];//也能夠用拓展運算符
    args.push(6);
    console.log(args);//[1, 2, 3, 4, 5, 6]
}
show(1,2,3,4,5);

let str = 'hello';
// let arr = str.split('');
// let arr = [...str];
let arr = Array.from(str);
console.log(arr);//["h", "e", "l", "l", "o"]

let json = {
    0:'one',
    1:'two',
    2:'three',
    length:3
}
let arr = Array.from(json);
console.log(arr);//["one", "two", "three"]

(9)ES6新增Array.of()方法：把一組值轉成數組

let arr = Array.of('apple','banana','orange');
console.log(arr);//["apple", "banana", "orange"]

(10)ES6新增Array.find()查找元素方法：查找，找出第一個符合條件的數組成員，若是沒有找到返回undefined

let arr = [1,2221,344,876,55,56,78];
let res = arr.find((val,index,arr)=>{
    return val > 333;
});
console.log(res);//2221

(11)ES6新增Array.findIndex()查找元素索引方法：查找，找出第一個符合條件的數組成員的位置，若是沒有找到返回-1

let arr = [1,2221,344,876,55,56,78];
let res = arr.findIndex((val,index,arr)=>{
    return val > 333;
});
console.log(res);//1

(12)ES6新增Array.fill()填充數組方法：Array.fill(要填充的內容,開始填充的位置,結束的位置)

let arr = new Array(10);
arr.fill('默認',1,3);
console.log(arr);//[undefined × 1, "默認", "默認", undefined × 7]

(13)ES7(ES2016)新增Array.includes()查找數組中是否存在某一項方法，若是有返回true,不然返回false

let arr = [1,2,3,4];
let b = arr.includes(2);
console.log(b);//true

2.對象簡潔語法及對象新增

(1)對象簡潔語法

let name = 'pilot';
let age = 18;
let json = {
    name,//至關於name:name
    age//至關於age:age
}
console.log(json);//Object {name: "pilot", age: 18}

let name = 'pilot';
let age = 18;
let json = {
    name,//至關於name:name
    age,//至關於age:age
    showA(){//注意：不要替換爲箭頭函數
        return this.name;
    },
    showB(){
        return this.age;
    }
}
console.log(json.showA(),json.showB());//pilot 18

(2)ES6對象新增Object.is()方法：比較兩個值是否相等

console.log(NaN == NaN);//false
console.log(NaN != NaN);//true
console.log(NaN === NaN);//false
console.log(NaN !== NaN);//true
let b = Object.is(NaN,NaN);
console.log(b);//true

console.log(+0 == -0);//true
let b = Object.is(+0,-0);
console.log(b);//false
console.log(Object.is('aaa','aab'));//false

(3)ES6對象新增Object.assign()方法：用來合併對象，Object.assign(目標對象，source1,source2...)，後面的值會覆蓋前面的值

let json = {a:1};
let json2 = {b:2,a:2};
let json3 = {c:3};
let obj = Object.assign({},json,json2,json3);
console.log(obj);//{a: 2, b: 2, c: 3}

// 複製數組
let a = [1,2,3,4];
let b = Object.assign([],a);
console.log(b);//[1, 2, 3, 4]

(4)ES8(ES2017)新增Object.keys()、Object.entries()、Object.values()方法

let json = {
    a:1,
    b:2,
    c:3
}
for(let key of Object.keys(json)){
    console.log(key);//a,b,c
}

let {keys,values,entries} = Object;//解構
let json = {
    a:1,
    b:2,
    c:3
}
for(let key of keys(json)){
    console.log(key);//a,b,c
}
for(let value of values(json)){
    console.log(value);//1,2,3
}
for(let item of entries(json)){
    console.log(item);//["a", 1],["b", 2],["c", 3]
}
for(let [key,val] of entries(json)){
console.log(key,val);//a, 1,b, 2,c, 3
}

(5)ES9(ES2018)新增對象的」…「運算符

let {x,y,...z} = {x:1,y:2,a:3,b:4};//在Chrome最新版本測試
console.log(x,y,z);//1 2 {a: 3, b: 4}

let json = {a:3,b:4};
let json2 = {...json};//複製json對象(在Chrome最新版本測試)
delete json2.b;
console.log(json);//{a: 3, b: 4}
console.log(json2);//{a: 3}

3.Promise：解決異步回調問題

(1)Promise.resolve('aa'):將現有的東西，轉成一個promis對象，resolve狀態，成功狀態；

Promise.reject('aa'):將現有的東西，轉成一個promis對象，reject狀態，失敗狀態；

Promise.all([p1,p2,p3]):把promise打包，扔到一個數組裏面，打包完仍是一個promise對象，必須確保全部的promise對象，都是resolve狀態，都是成功狀態；

Promise.race([p1,p2,p3]):把promise打包，扔到一個數組裏面，打包完仍是一個promise對象，只要有一個成功，就返回成功狀態。

let p1 = Promise.resolve('aaa');
//等價於 let p1 = new Promise(resolve=>{resolve('aaa')});
p1.then(res=>{
    console.log(res);//aaa
});

let p1 = Promise.reject('aaa');
//等價於 let p1 = new Promise((resolve,reject)=>{reject('aaa')});
p1.then(res=>{
    console.log(res);
}).catch(err=>{
    console.log(err);//aaa
});

let p1 = Promise.resolve('aaa');
let p2 = Promise.resolve('bbb');
let p3 = Promise.resolve('ccc');
Promise.all([p1,p2,p3]).then(res=>{
    // console.log(res);//["aaa", "bbb", "ccc"]
    let [res1,res2,res3] = res;
    console.log(res1,res2,res3);//aaa bbb ccc
});

let p1 = Promise.resolve('aaa');
let p2 = Promise.reject('bbb');
let p3 = Promise.reject('ccc');
Promise.race([p1,p2,p3]).then(res=>{
    console.log(res);//aaa
});

new Promise(function(resolve,reject){
    //resolve,成功調用
    //reject,失敗調用
})

let a = 103;
let promise = new Promise(function(resolve,reject){
    if(a == 10){
        resolve('成功');
    }else{
        reject('失敗');
    }
});
// promise.then(success,fail);
promise.then(res=>{
    console.log(res);//成功
},err=>{
    console.log(err);//失敗
})

let a = 103;
let promise = new Promise(function(resolve,reject){
    if(a == 10){
        resolve('成功');
    }else{
        reject('失敗');
    }
});
// promise.then(success,fail);
// promise.then(res=>{
//     console.log(res);//成功
// },err=>{
//     console.log(err);//失敗
// });
// promise.catch(err=>{//reject,發生錯誤，別名
//     console.log(err);//失敗
// });

// promise.then(success,fail);
promise.then(res=>{
    console.log(res);//成功
}).catch(err=>{//reject,發生錯誤，別名
    console.log(err);//失敗
});

4.模塊化

(1)在es6以前，是不支持模塊化的，可是社區制定一套模塊規範：

Commonjs 主要服務端 nodeJa require('http')

AMD requireJs，curlJs

CMD seaJs

ES6模塊化出來後，統一服務端和客戶端模塊規範：

import {xx} from ddd;

(2)基本概念：

注：須要放服務器環境

>如何定義模塊?

export 東西

export const a = 12;

export{

　　a as aaa,

　　a as bbb

}

>如何使用?

import

import './modules/1.js';

import {aaa as a,bbb as b} from 'xxx'

使用模塊：

</script>

import特色:

1.import能夠是相對路徑，也能夠是絕對路徑

import 'https://cdn.bootcss.com/jquery/2.2.2/jquery.js'

2.import模塊只會導入一次，不管引入多少次

3.import './modules/1.js';若是這麼用，至關於引入文件

4.有提高效果，import會自動提高到頂部，首先執行

5.導出去模塊內容，若是裏面有定時器更改，外面也會改動

* 6.import動態引入：

import()，相似於node裏面的require，能夠動態引入，默認import語法不能寫到if之類的語法裏

優勢：

1.按需加載

2.能夠寫if中

3.路徑也能夠寫動態

4.由於返回值是promise對象，因此能夠用then方法

例子：

one.html

<script type="module">
import {a,b,c} from './modules/1.js';
console.log(a,b,c);//12 15 65
</script>

1.js

export const a = 12;
export const b = 15;
export let c = 65;

two.html

<script type="module">
import {aaa as a,bbb as b,ccc as c} from './modules/2.js';
console.log(a,b,c);//12 5 102
</script>

2.js

const a =12;
const b =5;
const c =102;
export {
    a as aaa,//起別名
    b as bbb,
    c as ccc
}

three.html

<script type="module">
import * as modTwo from './modules/3.js';
console.log(modTwo.aaa);//125
</script>

3.js

const a =125;
const b =25;
const c =1012;
export {
    a as aaa,//起別名
    b as bbb,
    c as ccc
}

four.html

<script type="module">
import a,{cc,dd} from './modules/4.js';
console.log(a,cc,dd);//12 21 23
</script>

4.js

export default 12;
export const cc = 21;
export const dd = 23;

five.html

<script type="module">
//import有提高效果，import會自動提高到頂部，首先執行
console.log(a,cc,dd);//12 21 23
import a,{cc,dd} from './modules/5.js';
</script>

5.js

export default 12;
export const cc = 21;
export const dd = 23;

six.html

<script type="module">
//導出去模塊內容，若是裏面有定時器更改，外面也會改動
import {a,b} from './modules/6.js';
console.log(a);
setTimeout(() => {
    console.log(a);
}, 3000);
</script>

6.js

let a = 6;
let b = 12;
setTimeout(()=>{
    a = 12345;
},2000);
export {
    a,
    b
}

seven.html

<script type="module">
//動態加載模塊,按需加載，能夠寫if中，路徑能夠是動態
import('./modules/7.js').then(res=>{
    console.log(res.a+res.b);//27
});
</script>

7.js

console.log('7模塊加載了');
export const a = 12;
export const b = 22;

eight.html

<script type="module">
//動態加載模塊結合Promise使用
Promise.all([
    import('./modules/1.js'),
    import('./modules/2.js')
]).then(([mod1,mod2])=>{
    console.log(mod1);
    console.log(mod2);
})
</script>

nine.html

<script type="module">
//動態加載模塊結合async、await函數使用
async function main(){
    /* 方法1 */
    const mod1 = await import('./modules/1.js');
    const mod2 = await import('./modules/2.js');
    console.log(mod1,mod2);
    /* 方法2 */
    const [m1,m2] = await Promise.all([
        import('./modules/1.js'),
        import('./modules/2.js')
    ]);
    console.log(m1,m2);
}
main();
</script>