ES6 数组新增语法

ES6新增语法

/*
    Array.from(类数组); 把一个类数组转换成一个真正的数组
        类数组: 有下标有length;
        返回值:转换之后的新数组
        属于Array构造函数下面的方法,不是数组方法;

*/
{
    let aLis = document.querySelectorAll("#list li");
    console.log(aLis);

    // {
    //     aLis.map(item=>{
    //         return item;
    //     });
    // }

    {
        aLis = Array.from(aLis);
        aLis.map(item=>{
            return item;
        })
    }
}

Array.from方法详解:

{
    let aLis = document.querySelectorAll("#list li");
    let arr = [];
    // aLis = Array.from(aLis,(item,index)=>{
    //     console.log(item,index,this);
    //     return index;
    // },arr);//this指向了window;

    aLis = Array.from(aLis,function(item,index){
        console.log(item,index,this);
        return index;
    },arr);//this指向了arr;

    // 第二种方法:展开运算符
    aLis = [...aLis];

    console.log(aLis);//0,1,2,3
}

Array.of方法:

{
    console.log(Array.of(1,2,3,4,"a"));//把里面的东西转成一个新数组
}

Array.isArray():

{
    let aLis = document.querySelectorAll("#list li");
    aLis = Array.from(aLis);
    console.log(Array.isArray(aLis));//检测是否是数组
}

数组下的方法:

arr.find(); arr.findIndex();

{
    let arr = [1,2,3,4]//["a","b","c","d"];
    let val = arr.find((item,index)=>{
        if(item>=3){
            return true;
        }
    });
    val = arr.find(item=>item>=3);
    console.log(val);
    // 查找数组中满足要求的第一个元素的值

    let index = arr.findIndex(item=>item>=3);
    console.log(index);
    // 查找数组中满足要求的第一个元素的值的索引值;
}

arr.flat();数组扁平化

{
    // 数组扁平化:把二维数组改为一维数组;
    let arr = [
        ["小明",18],
        ["小刚",20],
        [
            1,
            [2,3],
            [4,5,
                [
                    [6,7]
                ]
            ]
        ]
    ];
    // console.log(arr.flat(1));//["小明", 18, "小刚", 20]
    // console.log(arr.flat(3));
    console.log(arr.flat(Infinity));//无限层
}

arr.flatMap();数组扁平化,包含了filter方法

{
    let arr = [
        ["小明",18],
        ["小刚",20]
    ];
    let newArr = arr.flatMap((item,index)=>{
        // console.log(item,index);
        item = item.filter((item,index)=>{
            return index == 0;
        });
        return item;
    });
    console.log(newArr);
}

arr.fill();

{
    let arr = [1,2,3,4];
    arr.fill("a",1,2);//填充,第几位,结束
    console.log(arr);
}

arr.includes();

{
    let arr = ["a","b","c","d","e"];
    console.log(arr.includes("a",0));//判断数组中是否包含一个指定的值
}

原文地址:https://www.cnblogs.com/Afanadmin/p/12343904.html

时间: 2024-10-05 12:35:26

ES6 数组新增语法的相关文章

ECMAScript简介以及es6新增语法

ECMAScript简介 ECMAScript与JavaScript的关系 ECMAScript是JavaScript语言的国际化标准,JavaScript是ECMAScript的实现.(前者是后者的规格,后者是前者的实现.但通常两者是可互换的.) ESMAScript的历史 1996年11月,Netscape公司将Js提交给国际化标准组织ECMA,当初该语言能够成为国际化标准. 1997年,ECMAScript 1.0版本推出.(在这年,ECMA发布262号标准文件(ECMA-262)的第一版

【ES6新增语法详述】 𳞰

目录 1. 变量的定义 let const 2. 模版字符串 3. 数据解构 4. 函数扩展 设置默认值 箭头函数 5. 类的定义 class 6. 对象的单体模式 原文: http://blog.gqylpy.com/gqy/275 "@ ES6新增了关于变量的定义,函数扩展,数据结构,类,模块等概念,本文将详细介绍常用的ES6语法. *** 1. 变量的定义 let ES6中新增了let语法,用来声明变量,用法类似var. ==let定义的变量只在当前代码块内有效.== 如下示例: <

ES6 新增语法

为什么是 ES6 每一次标准的诞生都意味着语言的完善,功能的加强, JavaScript 语言本身也有一些令人不满意的地方 变量提升特性增加了程序运行时的不可预测性 语法过于松散,实现相同的功能,不同的人可能会写出不同的代码 ES6 新增语法 let ES6 中新增的用于声明变量的关键字 let 声明的变量只在所处的块级有效 防止循环变量变成全局变量 不存在变量提升 暂时性死区 和 let 所在的块级区域进行绑定 注意:使用 let 关键字声明的变量才具有块级作用域,使用 var 声明的变量不具

ES6数组扩展

前面的话 数组是一种基础的JS对象,随着时间推进,JS中的其他部分一直在演进,而直到ES5标准才为数组对象引入一些新方法来简化使用.ES6标准继续改进数组,添加了很多新功能.本文将详细介绍ES6数组扩展 创建数组 在ES6以前,创建数组的方式主要有两种,一种是调用Array构造函数,另一种是用数组字面量语法,这两种方法均需列举数组中的元素,功能非常受限.如果想将一个类数组对象(具有数值型索引和length属性的对象)转换为数组,可选的方法也十分有限,经常需要编写额外的代码.为了进一步简化JS数组

数组的复制及ES6数组的扩展

一.数组的复制 // alert([1,2,3]==[1,2,3]); let cc = [0,1,2]; let dd = cc; alert(dd==cc);//此时改变dd会影响cc ES5 只能用变通方法来复制数组. const a1 = [1, 2]; const a2 = a1.concat(); a2[0] = 2; a1 // [1, 2] //使用ES6语法会防止这种现象出现 const a1 = [1, 2]; // 写法一 const a2 = [...a1]; // 写法

ES6对象简洁语法

对象(object)是 JavaScript 最重要的数据结构.ES6 对它进行了重大升级,本章介绍数据结构本身的改变及语法应用细节. 1.属性的简洁表示法 ◆ ES6 允许直接写入变量和函数,作为对象的属性和方法.这样的书写更加简洁.const foo = 'bar';const baz = {foo};baz // {foo: "bar"}// 等同于const baz = {foo: foo}; ◆ ES6 允许在对象之中,直接写变量.这时,属性名为变量名, 属性值为变量的值.f

amd cmd commonjs 模块规范 和 es6 的 module 语法

js的模块化 在前端开发的原始时期,只要在script标签中嵌入js代码就能实现一些基本的交互效果,但是随着时代的进步.js扮演的角色变得重要起来,js应用的场景页越来越复杂,.然而,js都没有类的概念,更不用说模块了. 为什么要有模块化 当一个项目变得复杂的时候,会出现问题,比如:命名冲突:开发中重复命名,导致命名冲突.文件依赖:项目开发中,依赖的js文件,引入遗漏,引入顺序错误. 使用模块化开发可以避免类似情况,而且利于项目的维护:提升开发效率:代码方便重用,能直接引入,避免重复开发.方便后

第79篇 Vue第一篇 ES6的常用语法

01-变量的定义 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <script> // var somedody; // console.log(somebody); // var somebody = &qu

ES6数组和对象的扩展

es6数组的扩展 扩展运算符 扩展运算符是对具有Iterator 接口的对象,都可以使用扩展运算符 Array.from() 用于将两类对象转化为真正的数组 1.类似数组的对象(只要据有length属性, 都可以被转化为数组) 2.可遍历(iterable)的对象 Array.of() 将一组值转化为数组 find和findIndex find方法,用于找出第一个符合条件的数组成员,没有找到会返回undefiend,findIndex方法返回的是第一个符合条件成员的位置, 如果找不到返回-1,