JS基础入门篇（四十三）

1.对象简洁表示法

原来写法

    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() 不会改变原始数组。

举例一：

    var arr=[10,,12,13];

    //item：表示数组每一项的值

    //index：表示下标

    //arr：表示数组

    var res=arr.map(function (item,index,arr) {

        console.log( item,index,arr );

    })

运行结果：

举例二：

var arr=[10,11,12];

var res=arr.map(function (item,index,arr) {

      console.log( item,index,arr );

      arr.shift();

})

运行结果：

举例三：

    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( ) : 方法创建一个新的数组，新数组中的元素是通过检查指定数组中符合条件的所有元素。

注意： 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>

运行结果：