JS基礎入門篇（四十三）—ES6（二）

時間 2019-12-04

原文原文鏈接

1.對象簡潔表示法

原來寫法html

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();

簡潔寫法數組

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( ): 方法返回一個新數組，數組中的元素爲原始數組元素調用函數處理後的值。
map( ): 方法按照原始數組元素順序依次處理元素。函數

注意： map() 不會對空數組進行檢測。
注意： map() 不會改變原始數組。spa

舉例一：code

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

運行結果：htm

舉例二：對象

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

運行結果：blog

舉例三：圖片

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( ) : 方法建立一個新的數組，新數組中的元素是經過檢查指定數組中符合條件的全部元素。ip

注意： filter( ) 不會對空數組進行檢測。
注意： filter( ) 不會改變原始數組。

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

4.Array.every( )

只要有一次回調函數執行返回值 爲假 就馬上中止 而且 every返回值爲假

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

運行結果：

5.Array.some( )

只要有一次回調函數執行返回值爲 真 ，就馬上中止而且 some返回值爲真

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

運行結果：

6.Array.reduce( )

舉例說明一：

//reduce（ fn[,attr1] ）
 //其中fn是函數，attr1是參數
 //fn函數有兩個參數a,b。
 //第一次執行a的值爲attr1,b的值爲數組第0項
 //第二次執行a指的是第一次執行的返回值,b的值爲數組第1項
 //第三次執行a指的是第二次執行的返回值,b的值爲數組第2項
 //直到遍歷數組的所有內容，返回最終結果。
 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 );

運行結果爲：

舉例說明二：

//reduce（ fn ）
//其中fn是函數，當沒有第二個參數時。
//fn函數有兩個參數a,b。
//第一次執行a的值爲數組第0項,b的值爲數組第1項
//第二次執行a指的是第一次執行的返回值,b的值爲數組第2項
//第三次執行a指的是第二次執行的返回值,b的值爲數組第3項
//直到遍歷數組的所有內容，返回最終結果。
var arr = [1,2,3,4,5];
var res = arr.reduce( function( a,b ){
    console.log( a,b );
    return a+b
    });
console.log( res );

運行結果爲：

7.Array.includes( )

includes( ) 方法用來判斷一個數組是否包含一個指定的值，若是是返回 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( )：填充數組，返回新數組，改變原來數組。

這個博客對fill（）的用法寫的更清楚，想進一步瞭解請點擊

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

運行結果：

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

Array.of（）

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

Array.from（）：將類數組轉化爲數組。有三個參數，並無深刻研究。

<body>
    <ul>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
<script>
    var lis = document.getElementsByTagName("li");
    var res = Array.from( lis );
    console.log( res );
    res.push( 2 );
    console.log( res );
</script>

運行結果：

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

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

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

<body>
<ul>
    <li>1</li>
    <li>2</li>
    <li>5</li>
    <li>3</li>
    <li>5</li>
</ul>
<script>
    var lis = document.getElementsByTagName("li");
    var res1 = Array.from(lis).find( function( item,index,arr ){
        console.log( item,index,arr );
        return item.innerHTML === "50";
    } );
    console.log( res1 );
    //------------------------------------------
    var res2 = Array.from(lis).findIndex( function( item,index,arr ){
        console.log( item,index,arr );
        return item.innerHTML === "5";
    } )
    console.log( res2 );
</script>
</body>

運行結果：