ES6入門到進階（二）：循環、數組、對象

時間  2019-11-08
標籤 es6 入門 進階 循環 數組 對象 欄目 JavaScript 简体版
原文   原文鏈接

上一篇：ES6入門到進階（一）：let、解構賦值、字符串模板、函數

1、循環

ES5裏面新增一些東西vue

1.1 arr.forEach()(經常使用)

1. for
        for(let i=0; i<arr.length; i++)
    2. while

arr.forEach()  //  代替普通for
    arr.forEach(function(val, index, arr){
        console.log(val, index, arr);
    });

1.2 arr.map()(經常使用)

arr.map()  //  `很是有用，作數據交互`  "映射"
    正常狀況下，須要配合return，返回是一個新的數組
    如果沒有return，至關於forEach

    注意：平時只要用map，必定是要有return
    
    從新整理數據結構:
        [{title:'aaa'}]   ->  [{t:'aaaa'}]
<script>
        let arr = [
            {title:'aaaaa', 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)=>{
            let json={}
            json.t = `^_^${item.title}-----`;
            json.r = item.read+200;
            json.hot = item.hot == true && '真棒!!!';
            return json;
        });

        console.log(newArr);
        
</script>

1.3 arr.filter(): 過濾，過濾一些不合格「元素」， 若是回調函數返回true，就留下來

<script>
        let arr = [
            {title:'aaaaa', 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==false;
        });  

        console.log(newArr);
    </script>

1.4 arr.some() 和 arr.every()

arr.some(): 相似查找,  數組裏面某一個元素符合條件，返回true
arr.every(): 數組裏面全部的元素都要符合條件，才返回true
<script>
        let arr = [1,3,5,7,9,10];

        var b = arr.every((val, index, arr)=>{
            return val%2==1;
        });

        console.log(b);
    </script>
其實他們能夠接收兩個參數:
    arr.forEach/map...(循環回調函數, this指向誰);
------------------------------------------------------------
arr.reduce()   //從左往右
    求數組的和、階乘
<script>
        let arr = [1,2,3,4,5,6,7,8,9,10];

        //prev：上一次返回的結果值，cur：當前值
        let res = arr.reduce((prev, cur, index, arr) =>{
            return prev+cur;
        });

        console.log(res);

    </script>
arr.reduceRight()  //從右往左
------------------------------------------------------------

ES2017新增一個運算符:**node

冪
    Math.pow(2,3)等價於：2 ** 3

======================================================
for....of....：python

arr.keys()    數組下標
arr.entries()    數組某一項

for(let val of arr){
    console.log(val);
}

2、數組

2.1 擴展運算符:

...

let arr =[1,2,3];
複製數組：let arr2 = [...arr];

let arr2 = Array.from(arr);

2.2 Array.from

做用: 把類數組(獲取一組元素、arguments...) 對象轉成數組jquery

我的觀點： 具有 length這個東西，就靠譜
<script>
        let str = 'Strive';

        //let arr = str.split('');
        let arr = Array.from(str);

        console.log(arr);
</script>

Array.of(): 把一組值，轉成數組es6

let arr = Array.of('apple','banana','orange');

console.log(arr);

2.3 find,findIndex,fill

arr.find(): 查找，找出第一個符合條件的數組成員，若是沒有找到，返回undefinedajax

<script>
        let arr = [23,900,101,80,100];

        let res = arr.find((val, index, arr) =>{
            return val>1000;
        });

        console.log(res);
</script>

arr.findIndex(): 找的是位置， 沒找到返回-1vuex

arr.fill()：填充
arr.fill(填充的東西, 開始位置, 結束位置);json

在ES2016裏面新增:segmentfault

arr.indexOf()
arr.includes()
    str.includes()

3、對象

3.1 對象簡潔語法(至關有用)

<script>
        let name = 'Strive';
        let age = 18;

        let json ={
            name,   //name:name,
            age,     //age:age
            /* showA:function(){
                return this.name;
            } */
            showA(){  //我的建議: 必定注意，不要用箭頭函數
                return this.name;
            },
            showB(){
                return this.age;
            }
        };

        console.log(json.showA(), json.showB());

</script>

===>數組

new Vuex.Store({
    state,
    mutation,
    types,
    actions
});

new Vue({
    router,
    App,
    vuex
})

3.2 Object.is()

用來比較兩個值是否相等

<script>
        console.log(NaN == NaN); //false

        console.log(Number.isNaN(NaN)); //true

        let b = Object.is(NaN, NaN); //true

        console.log(b);

        
    </script>
Object.is('a','a');

比較兩個東西相等:
    ==
    ===

Object.is(NaN, NaN); //true

Object.is(+0, -0); //false

Object.assign(): 用來合併對象

let 新的對象 = Object.assign(目標對象, source1, srouce2....)

function ajax(options){  //用戶傳
    let defaults={
        type:'get',
        header:
        data:{}
        ....
    };

    let json = Object.assign({}, defaults, options);
    .....
}


用途:
    1. 複製一個對象
    2. 合併參數

ES2017引入:

Object.keys()
Object.entries();
Object.values();

    let {keys, values, entries} = Object;let {keys, values, entries} = Object;

對象身上: 計劃在ES2018引入

...

let json = {a:3, b:4};
        let json2 = {...json};

4、Promise

承諾，許諾

做用: 解決 異步回調問題

傳統方式，大部分用回調函數，事件

ajax(url,{  //獲取token
    ajax(url,()=>{  //獲取用戶信息
        ajax(url, ()=>{
            //獲取用戶相關新聞
        })
    })
})

4.1 語法

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

    promise.then(res=>{

    }, err=>{
        
    })

//捕獲錯誤
promise.catch(err=>{})

本人用法:

new Promise().then(res=>{

    }).catch(err=>{
        
    })

Promise.resolve('aa') :  將現有的東西，轉成一個promise對象， resolve狀態，成功狀態
    等價於:
    new Promise(resolve =>{
        resolve('aaa')
    });
Promise.reject('aaa'):   將現有的東西，轉成一個promise對象，reject狀態，失敗狀態
    等價於:
    new Promise((resolve, reject) =>{
        reject('aaa')
    });

√ Promise.all([p1, p2, p3]): 把promise打包，扔到一個數組裏面，打包完仍是一個promise對象

必須確保，全部的promise對象，都是resolve狀態，都是成功狀態
Promise.race([p1, p2, p3]): 只要有一個成功，就返回

4.2 案例：用戶登陸 -> 用戶信息

<script>
        let status = 1;
        let userLogin = (resolve, reject) =>{
            setTimeout(()=>{
                if(status == 1){
                    resolve({data:'登陸成功', msg:'xxx', token:'xxsadfsadfas'});
                }else{
                    reject('失敗了');
                }
            },2000);
        };

        let getUserInfo = (resolve, reject) =>{
            setTimeout(()=>{
                if(status == 1){
                    resolve({data:'獲取用戶信息成功', msg:'asdfasdf', token:'xxsadfsadfas'});
                }else{
                    reject('失敗了');
                }
            },1000);
        }

        new Promise(userLogin).then(res=>{
            console.log('用戶登陸成功');
            return new Promise(getUserInfo);
        }).then(res=>{
            console.log('獲取用戶信息成功');
            console.log(res);
        })
    </script>

5、模塊化

JavaScript不支持模塊化

ruby   require
    python  import

在ES6以前，社區制定一套模塊規範:
    Commonjs        主要服務端  nodeJs    require('http')
    AMD            requireJs, curlJs
    CMD            seaJs

ES6出來，統一服務端和客戶端模塊規範:
    import {xx} ddd

5.1 模塊化

注意： 須要放到服務器環境

a). 如何定義模塊？
        export  東西
        export const a =12;
        export{
            a as aaa,
            b as banana
        }
        export default 12; //import a 不須要加花括號
b). 如何使用?
        import
        import './modules/1.js'; 
        import {a as a, banana, c} from './modules/2.js'
        import * as modTwo from './modules/2.js';
        import a,[cc,dd} from '/.modules/3.js';
使用模塊:
    <script type="module"></script>

5.2 import: 特色

a). import 能夠是相對路徑，也能夠是絕對路徑
        import 'https://code.jquery.com/jquery-3.3.1.js';
    b). import模塊只會導入一次，不管你引入多少次
    c). import './modules/1.js';  若是這麼用，至關於引入文件
    d). 有提高效果，import會自動提高到頂部，'首先執行'
<script type="module">
        console.log(a+b);
        import mod,{show, sum, a, b} from './modules/4.js';
    </script>
e). 導出去模塊內容，若是裏面有定時器更改，外面也會改動

5.3 import()

相似node裏面require， 能夠動態引入, 默認import語法不能寫到if之類裏面,返回值，是個promise對象。

import('./modules/1.js').then(res=>{
        console.log(res.a+res.b);
    });  

    優勢:
        1. 按需加載
        2. 能夠寫if中
        3. 路徑也能夠動態

    Promise.all([])
<script type="module">
        Promise.all([
            import('./modules/1.js'),
            import('./modules/2.js')
        ]).then(([mod1,mod2])=>{
            console.log(mod1);
            console.log(mod2);
        })
</script>

ES2017加 async await:

'use strict'        之後默認就是嚴格模式，es6默認嚴格模式

完！

參考視頻資料：ES6經典入門到進階

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程