zoukankan      html  css  js  c++  java
  • ES6中新增的数组知识

    JSON数组格式转换

    JSON的数组格式就是为了前端快速的把JSON转换成数组的一种格式,我们先来看一下JSON的数组格式怎么写。
    let  json = {
        '0': 'xzblogs',
        '1': '小智',
        '2': 'zachary',
        length:3
    }
    这就是一个标准的JSON数组格式,跟普通的JSON对比是在最后多了一个length属性。只要是这种特殊的json格式都可以轻松使用ES6的语法转变成数组。在ES6中绝大部分的Array操作都存在于Array对象里。
    我们就用Array.from(xxx)来进行转换。我们把上边的JSON代码转换成数组,并打印在控制台。
    let  json = {
        '0': 'xzblogs',
        '1': '小智',
        '2': 'zachary',
        length:3
    }
    let arr=Array.from(json);
    console.log(arr)
    实际开发中这种方法还是比较常用的,毕竟节省了我们代码行数,也让我们的程序更清晰。

    Array.of()方法:

    它负责把一堆文本或者变量转换成数组。在开发中我们经常拿到了一个类似数组的字符串,需要使用eval来进行转换,如果你一个老手程序员都知道eval的效率是很低的,它会拖慢我们的程序。
    这时候我们就可以使用Array.of方法。我们看下边的代码把一堆数字转换成数组并打印在控制台上:
    let arr =Array.of(3,4,5,6);
    console.log(arr);
    当然它不仅可以转换数字,字符串也是可以转换的,看下边的代码:
    let arr =Array.of('xzblogs','小智','zachary');
    console.log(arr);

    find( )实例方法:

    所谓的实例方法就是并不是以Array对象开始的,而是必须有一个已经存在的数组,然后使用的方法,这就是实例方法(不理解请看下边的代码,再和上边的代码进行比对,你会有所顿悟)。
    这里的find方法是从数组中查找。在find方法中我们需要传入一个匿名函数,函数需要传入三个参数:
    value:表示当前查找的值。
    index:表示当前查找的数组索引。
    arr:表示当前数组。
    在函数中如果找到符合条件的数组元素就进行return,并停止查找。你可以拷贝下边的代码进行测试,就会知道find作用。
    
    let arr=[1,2,3,4,5,6,7,8,9];
    console.log(arr.find(function(value,index,arr){
        return value > 5;
    }))
    
    控制台输出了6,说明找到了符合条件的值,并进行返回了,如果找不到会显示undefined。

    fill( )实例方法:

    fill()也是一个实例方法,它的作用是把数组进行填充,它接收三个参数,第一个参数是填充的变量,第二个是开始填充的位置,第三个是填充到的位置。
    let arr=[0,1,2,3,4,5,6,7,8,9];
    arr.fill(xzblogs,2,5);
    console.log(arr);
    
    上边的代码是把数组从第二位到第五位用xzblogs进行填充。

    数组的遍历

    for…of循环:

    这种形式比ES5的for循环要简单而且高效。先来看一个最简单的for…of循环。
    let arr=['xzblogs','小智','zachary']
     
    for (let item of arr){
        console.log(item);  // xzblogs 小智 zachary
    }

    for…of数组索引:有时候开发中是需要数组的索引的,那我们可以使用下面的代码输出数组索引。

    let arr=['xzblogs','小智','zachary']
    for (let index of arr.keys()){
        console.log(index);
    }
    可以看到这时的控制台就输出了0,1,2,也就是数组的索引。

    同时输出数组的内容和索引:我们用entries()这个实例方法,配合我们的for…of循环就可以同时输出内容和索引了。

    let arr=['xzblogs','小智','zachary']
    
    for (let [index,val] of arr.entries()){
        console.log(index+':'+val);
    }

    entries( )实例方法:

    entries()实例方式生成的是Iterator形式的数组,那这种形式的好处就是可以让我们在需要时用next()手动跳转到下一个值。我们来看下面的代码:
    let arr=['xzblogs','小智','zachary']
    let list=arr.entries();
    console.log(list.next().value);
    console.log(list.next().value);
    console.log(list.next().value);
    总结:我们通过两节课讲了ES6对数组的扩展,数组在我们的实际开发中是特别重要的,几乎我每天都要编写数组的操作代码,所以这节课一定要在听完之后自己敲一遍代码。
  • 相关阅读:
    Hive-基本操作
    Hive-安装
    Hive-概述
    游荡二十几天的感想
    js html css
    C#笔试总结
    ubuntu16.04 下 C# mono开发环境搭建
    scoket、TCP、UDP、WebService选型
    虚拟机安装Windows系统,再安装orcale
    Rosetta Stone 不在C盘安装步骤
  • 原文地址:https://www.cnblogs.com/Model-Zachary/p/7095466.html
Copyright © 2011-2022 走看看