美文网首页
ES6-------学习(2)

ES6-------学习(2)

作者: 默色留恋 | 来源:发表于2018-05-21 17:12 被阅读0次

    以下的代码借鉴胖大神的文章,厉害的大神啊。

    JSON数组格式转换

    在ES6中绝大部分的Array操作都存在于Array对象里。我们就用Array.from(xxx)来进行转换

    let  json = {
      '0': 'jspang',
      '1': '技术胖',
      '2': '大胖逼逼叨',
      length:3
    }
    let arr=Array.from(json);
    console.log(arr)
    
    Array.of()方法:

    它负责把一堆文本或者变量转换成数组
    它不仅可以转换数字,字符串也是可以转换的,看下边的代码:

    let arr =Array.of('技术胖','jspang','大胖逼逼叨');
    console.log(arr);
    
    find( )实例方法:

    所谓的实例方法就是并不是以Array对象开始的,而是必须有一个已经存在的数组,然后使用的方法,这就是实例方法

    在find方法中我们需要传入一个匿名函数,函数需要传入三个参数:
    value:表示当前查找的值。
    index:表示当前查找的数组索引。
    arr:表示当前数组。

    let arr=[1,2,3,4,5,6,7,8,9];
      console.log(arr.find(function(value,index,arr){
      return value > 5;
    }))//6找到符合就结束,找不到就返回undefined
    let arr2=['技术胖','jspang','大胖逼逼叨'];
      console.log(arr.find(function(value,index,arr){
      return value =='技术胖';
    }))//技术胖
    
    fill( )实例方法:

    fill()也是一个实例方法,它的作用是把数组进行填充,它接收三个参数,第一个参数是填充的变量,第二个是开始填充的位置,第三个是填充到的位置。

    let arr=[0,1,2,3,4,5,6,7,8,9];
    arr.fill('jspang',2,5);
    console.log(arr);//[0,1,"jspang","jspang","jspang",5,6,7,8,9]
    

    数组的遍历

    for…of循环:

    这种形式比ES5的for循环要简单而且高效。

    let arr=['jspang','技术胖','大胖逼逼叨']
    for (let item of arr){
        console.log(item);//jspang  技术胖  大胖逼逼叨
    }
    
    for…of数组索引:

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

    let arr=['jspang','技术胖','大胖逼逼叨']
    for (let index of arr.keys()){
        console.log(index);// 0  1  2
    }
    
    同时输出数组的内容和索引

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

    let arr=['jspang','技术胖','大胖逼逼叨']
    for (let [index,val] of arr.entries()){
        console.log(index+':'+val);
    }
    
    entries( )实例方法:

    entries()实例方式生成的是Iterator形式的数组,那这种形式的好处就是可以让我们在需要时用next()手动跳转到下一个值。我们来看下面的代码:

    let arr=['jspang','技术胖','大胖逼逼叨']
    let list=arr.entries();
    console.log(list.next().value);//0  jspang
    console.log(list.next().value);//1  技术胖
    console.log(list.next().value);//2  大胖逼逼叨
    

    相关文章

      网友评论

          本文标题:ES6-------学习(2)

          本文链接:https://www.haomeiwen.com/subject/uulqjftx.html