JS基礎(chǔ)入門篇（四十三）—ES6（二）

rozbo 發(fā)布于2019-08-30 15:54 / 2513人閱讀

摘要：對(duì)象簡(jiǎn)潔表示法原來寫法簡(jiǎn)潔寫法方法返回一個(gè)新數(shù)組，數(shù)組中的元素為原始數(shù)組元素調(diào)用函數(shù)處理后的值。方法按照原始數(shù)組元素順序依次處理元素。注意不會(huì)對(duì)空數(shù)組進(jìn)行檢測(cè)。運(yùn)行結(jié)果為舉例說明二其中是函數(shù)，當(dāng)沒有第二個(gè)參數(shù)時(shí)。有三個(gè)參數(shù)，并沒有深入研究。

1.對(duì)象簡(jiǎn)潔表示法

原來寫法

    var name = "lzf";
    var gender = "male";
    var fn = function(){console.log(1);}

    var obj = {
        name:name,
        gender:gender,
        fn:fn,
        fn2:function(){
            console.log(2)
        }
    };
    console.log( obj );
    obj.fn2();
    obj.fn();

簡(jiǎn)潔寫法

    var name = "zm";
    var gender = "male";
    var fn = function(){console.log(1);}

    var obj = {
        name,
        gender,
        fn,
        fn2(){
            console.log(2)
        }
    };
    console.log( obj );
    obj.fn2();
    obj.fn();

2.Array.map( )

map( ): 方法返回一個(gè)新數(shù)組，數(shù)組中的元素為原始數(shù)組元素調(diào)用函數(shù)處理后的值。
map( ): 方法按照原始數(shù)組元素順序依次處理元素。

注意： map() 不會(huì)對(duì)空數(shù)組進(jìn)行檢測(cè)。
注意： map() 不會(huì)改變?cè)紨?shù)組。

舉例一：

    var arr=[10,,12,13];
    //item：表示數(shù)組每一項(xiàng)的值
    //index：表示下標(biāo)
    //arr：表示數(shù)組
    var res=arr.map(function (item,index,arr) {
        console.log( item,index,arr );
    })

運(yùn)行結(jié)果：

舉例二：

var arr=[10,11,12];
var res=arr.map(function (item,index,arr) {
      console.log( item,index,arr );
      arr.shift();
})

運(yùn)行結(jié)果：

舉例三：

    var arr = [100,,300];

    arr[10] = 1000;


    var res = arr.map( function(item){
        return item * 10
    } );
    console.log( res );//[1000, empty, 3000, empty × 7, 10000]
    console.log( arr );//[100, empty, 300, empty × 7, 1000]

3.Array.filter( )

filter( ) : 方法創(chuàng)建一個(gè)新的數(shù)組，新數(shù)組中的元素是通過檢查指定數(shù)組中符合條件的所有元素。

注意： filter( ) 不會(huì)對(duì)空數(shù)組進(jìn)行檢測(cè)。
注意： filter( ) 不會(huì)改變?cè)紨?shù)組。

var arr = [1, 5, 8, 7, 2, 4];
var res = arr.filter(item => item < 5);
console.log(res);//[1, 2, 4]

4.Array.every( )

只要有一次回調(diào)函數(shù) 執(zhí)行返回值 為假 就立刻停止 并且 every返回值為假

    var arr = [1,-5,2,3,34,54,56];
    var res = arr.every( item => {
        console.log( item );
        return item > 0;
    });
    console.log( res );

運(yùn)行結(jié)果：

5.Array.some( )

只要有一次回調(diào)函數(shù) 執(zhí)行返回值為真，就立刻停止并且 some返回值為真

    var arr = [1,-5,2,3,34,54,56];
    var res = arr.some( item => {
        console.log( item );
        return item > 0
    } );
    console.log( res );

運(yùn)行結(jié)果：

6.Array.reduce( )

舉例說明一：

 //reduce（ fn[,attr1] ）
 //其中fn是函數(shù)，attr1是參數(shù)
 //fn函數(shù)有兩個(gè)參數(shù)a,b。
 //第一次執(zhí)行a的值為attr1,b的值為數(shù)組第0項(xiàng)
 //第二次執(zhí)行a指的是第一次執(zhí)行的返回值,b的值為數(shù)組第1項(xiàng)
 //第三次執(zhí)行a指的是第二次執(zhí)行的返回值,b的值為數(shù)組第2項(xiàng)
 //直到遍歷數(shù)組的全部?jī)?nèi)容，返回最終結(jié)果。
 var arr = [1,2,3,4,5];
 var res = arr.reduce( function( a,b ){
        console.log( a,b );
        return a+b
    },100);
    
console.log( res );

運(yùn)行結(jié)果為：

舉例說明二：

//reduce（ fn ）
//其中fn是函數(shù)，當(dāng)沒有第二個(gè)參數(shù)時(shí)。
//fn函數(shù)有兩個(gè)參數(shù)a,b。
//第一次執(zhí)行a的值為數(shù)組第0項(xiàng),b的值為數(shù)組第1項(xiàng)
//第二次執(zhí)行a指的是第一次執(zhí)行的返回值,b的值為數(shù)組第2項(xiàng)
//第三次執(zhí)行a指的是第二次執(zhí)行的返回值,b的值為數(shù)組第3項(xiàng)
//直到遍歷數(shù)組的全部?jī)?nèi)容，返回最終結(jié)果。
var arr = [1,2,3,4,5];
var res = arr.reduce( function( a,b ){
    console.log( a,b );
    return a+b
    });
console.log( res );

運(yùn)行結(jié)果為：

7.Array.includes( )

includes( ) 方法用來判斷一個(gè)數(shù)組是否包含一個(gè)指定的值，如果是返回 true，否則false。

var arr = [1,2,3,4,undefined,false,5,"a",null,NaN];

console.log( arr.includes( "a" ) );//true
console.log( arr.includes( NaN ) );//true
console.log( arr.includes( "1" ) );//false
console.log( arr.includes( null ) );//true
console.log( arr.includes( undefined ) );//true
console.log( arr.includes( false ) );//true

8.Array.fill( )

fill( )：填充數(shù)組，返回新數(shù)組，改變?cè)瓉頂?shù)組。

這個(gè)博客對(duì)fill（）的用法寫的更清楚，想進(jìn)一步了解請(qǐng)點(diǎn)擊

var arr = [1,2,4,3];
var res = arr.fill( ["a","b"]);
console.log( arr );
console.log( res );

運(yùn)行結(jié)果：

9.Array.of（）和Array.from（）

Array.of（）

var arr = Array.of( 4,5,6,7 );
console.log( arr );//?[4, 5, 6, 7]

Array.from（）：將類數(shù)組轉(zhuǎn)化為數(shù)組。有三個(gè)參數(shù)，并沒有深入研究。

運(yùn)行結(jié)果：

11.Array.find( )和Array.findIndex( )

find( )函數(shù)用來查找目標(biāo)元素，找到就返回該元素，找不到返回undefined。

findIndex( )函數(shù)也是查找目標(biāo)元素，找到就返回元素的位置，找不到就返回-1。

運(yùn)行結(jié)果：

GPU云服務(wù)器云服務(wù)器四十三 ES6入門 js零基礎(chǔ)入門視頻入門篇

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

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

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

登陸后可評(píng)論

0條評(píng)論

rozbo

男|高級(jí)講師

我要關(guān)注我要私信

TA的文章

ffmpeg圖片縮放

閱讀 2024·2021-11-24 09:39
極光KVM：中秋特別活動(dòng),美西洛杉磯cn2 gia vps,21元/月起;香港cn2+bgp直連vp

閱讀 1166·2021-09-10 11:25
LightNode：香港、臺(tái)灣、新加坡等亞洲多地機(jī)房，按小時(shí)計(jì)費(fèi)，月付$7.71起，注冊(cè)最高送$20

閱讀 1798·2021-09-08 10:42
LoRa模塊獲取光照值

閱讀 3760·2021-09-06 15:00
JS基礎(chǔ)入門篇（四十三）—ES6（二）

閱讀 2514·2019-08-30 15:54
前端如何高效的與后端協(xié)作開發(fā)

閱讀 3128·2019-08-29 17:08
css 實(shí)現(xiàn)豎直居中的 N 種場(chǎng)景及 N 種方法

閱讀 3288·2019-08-29 11:26
彈性盒子模型詳解

閱讀 2850·2019-08-28 18:27

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

資訊專欄INFORMATION COLUMN

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來選購(gòu)！

JS基礎(chǔ)入門篇（四十三）—ES6（二）

相關(guān)文章