JS基础入门篇（四十三）—ES6（二）

头像
梁志芳
    阅读 5 分钟
    4

    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>

    运行结果：

    图片描述

    htmlcssjavascript
    梁志芳
    159 声望58 粉丝

    正在学习CSS+HTML+JS

    « 上一篇
    JS基础入门篇（四十三）— ES6（一）
    下一篇 »
    JS知识—面试准备（一）

    引用和评论

    推荐阅读
    头像
    git 基本命令

    梁志芳赞 3阅读 1.7k

    头像
    网页设计的垂直居中

    寒青赞 41阅读 5.2k评论 3

    头像
    CSS团队协作规范

    寒青赞 38阅读 7.4k

    头像
    前端如何入门 Go 语言

    robin赞 28阅读 8.3k评论 9

    头像
    100个React最佳实践小技巧

    夕水赞 25阅读 6.5k评论 4

    头像
    前端开发工具

    寒青赞 19阅读 5.2k

    头像
    开发插件集合

    寒青赞 14阅读 3.5k

    0 条评论
    得票最新