zoukankan      html  css  js  c++  java
  • [Javascript] Array methods in depth

    Array slice creates a shallow copy of an array. In this lesson we cover, in detail, exactly what a 'shallow' copy is and how it can trip people up. We go on to look at examples that show to how to copy only the first item, the last item and even how to copy a sub-section of an array excluding the first and last. We end the lesson with a practical example that shows how slice fits into a workflow that contains other array methods such as map & reduce.

    It make a copy of array:

    let ary = [1,2,3,4,5];
    let copy = ary.slice();
    
    console.log(copy); //[1, 2, 3, 4, 5]

    Copy doesn't affect the old one if we push or modify one value (shallow copy)

    let ary = [1,2,3,4,5];
    let copy = ary.slice();
    
    copy.push(6);
    
    console.log(ary); //[1, 2, 3, 4, 5]
    console.log(copy); //[1, 2, 3, 4, 5, 6]

    So what is shallow copy?:

    Let's say inside the array, there is a reference to an object:

    let person = {name: "Shane"};
    let ary = [1,person];
    let copy = ary.slice();
    
    copy[1].name = "Kelly";
    
    console.log(ary); 
    /*[1, [object Object] {
      name: "Kelly"
    }]
    */
    
    console.log(copy); 
    /*
    [1, [object Object] {
      name: "Kelly"
    }]
    */

    If we modify the name prop of the object on the 'copy' array, it actually affect both array. So shadow copy -- if there is an referce of an object inside of array, it just copy the referece, not the actual object. That means, if change the object in one place, all the other places will change also.

    More often use case is to take piece of array:

    slice(startIndex, endIndex)
    let ary = [1,2,3,4,5];
    let copy1 = ary.slice(0,1);
    let copy2 = ary.slice(2,3);
    
    console.log(copy1); //[1]
    console.log(copy2); //[3]

    If don't give the endIndex, it will take the rest of element:

    let ary = [1,2,3,4,5];
    let copy = ary.slice(2);
    
    
    console.log(copy); //[3, 4, 5]
    let ary = [1,2,3,4,5];
    let copy = ary.slice(-2);
    
    
    console.log(copy); //[4, 5]
    let ary = [1,2,3,4,5];
    let copy = ary.slice(1, -1);
    
    
    console.log(copy); //[2, 3, 4]

    Example: 

    let person = {
      name: 'Zhentian-Wan'
    };
    
    let filters = {
      'desluglify': x => x.replace('-', ' '),
      'uppercase': x => x.toUpperCase(),
      'hello':  x => "Hello, " + x + '!'
    }
    
    let input = 'name | desluglify | uppercase | hello'; // ZHENTIAN WAN!
    
    let ary = input.split('|').map(x => x.trim());
    
    let ref = person[ary[0]];
    
    let res = ary.slice(1)
      .reduce( (prev, next) => {
        if(filters[next]){
           return filters[next].call(null, prev);
        }
      }, ref);
    
    console.log(res);
  • 相关阅读:
    <二>基于Django 简单后台管理页面
    单页面中使用vue和iview、echarts,引用组件
    vuecli更新
    vuex promise async await
    vue父子组件之间传值
    常用正则
    vue项目利用loadsh实现防抖和节流
    vue项目实现按钮的权限
    使用内存虚拟硬盘 提高ArcGIS server并发性能的一种方法
    esri联邦用户大会 总结
  • 原文地址:https://www.cnblogs.com/Answer1215/p/4999526.html
Copyright © 2011-2022 走看看