• JS数据结构


    ## 数据结构
    **数组**
    ##创建数组##
    *1-1字面量创建数组*
    let arr = [];
    *1-2构造函数创建数组*
    let arr = new Array();
    注意的时,无论字面量形式创建的数组,还是构造函数创建的数组,当我们使用typeof来打印其数据类型的时候,都会返回一个objext。
    *1-3数组赋值*
    1·先声明再赋值

    let arr = []; 
    arr[0] = 1; 
    arr[1] = 2; 
    arr[2] = 3;

    注意
      下标是从0开始的。
    2·声明时直接赋值
    let arr = [1,2,3,4,5];
    *1-4访问数组元素*
      通过数组的下标来访问。
      通过使用变量的方式来访问。
    *1-5删除元素*
      delete运算符来删除数组的某一个元素。
    *1-6数组的遍历*
      1·通过for循环来遍历数组
    示例:

    let arr = [1, 2, 3, 4, 5]; 
    for (let i=0;i<arr.length;i++) { 
    console.log(arr[i]); 
    } 
    // 1 
    // 2 
    // 3 
    // 4 
    // 5

    2·通过for-in来遍历数组:通过键找相应的数组元素
    3·通过for-of来遍历数组:
    示例:

    let arr = [1, 2, 3, 4, 5]; 
    for (let i of arr) { 
    console.log(i); 
    } 
    // 1 
    // 2 
    // 3 
    // 4 
    // 5

    4·通过forEach来遍历数组
    5·使用迭代器来进行遍历:keys(),values(),entries()
      keys()是找到可迭代元素的键
      values()是找到可迭代元素的值
      entries() 是同时找打可迭代的元素的键和值。组成新的数组
    *1-7解构数组*
      就是将一个复杂类型的数据分解成一个普通的类型数据。是ES6新添的功能
    *1-8多维数组*
    示例:

    let a = ["Bill","Mary","Lucy"]; 
    let b = [21,24,27];
    let c = [a,b];// 这个c就是一个多维数组

    访问多维数组里的数据:
    示例:

    let a = ["Bill","Mary","Lucy"];
    let b = [21,24,27]; 
    let c = [a,b]; 
    console.log(c[0][2]);//Lucy

    *1-9扩展运算符*
    扩展运算符是ES6新添的运算符,用于取出可迭代对象的每一项。可以用来快速展开一个数组。写法:...变量名
    示例:

    let a = ["Bill","Mary","Lucy"]; 
    let b = [21,24,27]; 
    let c = [...a,...b]; 
    console.log(c); //[ 'Bill', 'Mary', 'Lucy', 21, 24, 27 ]

    ## 数组的属性和方法
    **2-1数组相关属性**

    length:返回数组元素的个数。
    示例:

    let arr = [1,2,3,4,5]; 
    console.log(arr.length);//5

    利用此属性可以快速清空数组。
    示例:

    let arr = [1,2,3,4,5]; 
    arr.length = 0;
    console.log(arr);//[]

    使用length属性可以随意对数组的长度进行操控。
    示例:

    let arr = [1,2,3,4,5];
    arr.length = 3; 
    console.log(arr);//[1,2,3]

    **2-2数组相关方法**
    1.添加删除方法:
      push():在数组的尾部推入(插入),
      pop():在数组的尾部弹出(删除)
      unshift():在数组的头部推入(插入)
      shift():在数组的头部弹出(删除)
    推入的时候可以一次性推入多个元素,返回的是新的数组的长度。
    弹出的时候一次只能弹出一个元素,返回的是弹出的那个元素。
    2·操作方法:
    concat():是先创建一个当前数字的副本,然后将接收到的参数添加到副本的末尾,最后返回新构建的数组,而原本的数组不会变化。
    示例:

    let arr = [1,2,3]; 
    let arr2 = arr.concat("red","blue"); 
    console.log(arr);//[ 1, 2, 3 ]
    console.log(arr2);//[ 1, 2, 3, 'red', 'blue' ]

    slice():可以接收一个或者两个参数,代表返回项的起始和结束的位置。
      一个参数:那就代表起始位置。返回从指定的起始位置到数组的末尾的所有项目。
      两个参数:那就代表从指定的起始位置到指定的末尾位置之间的项,但不包括结束位置的项目。
        注意:slice()方法不会影响原始数组
    示例:

    let arr = [1,2,3,4,5,6,7,8,9,10];
    // 一个参数
    let i = arr.slice(3); 
    console.log(i);//[ 4, 5, 6, 7, 8, 9, 10 ] 
    console.log(arr);//[ 1, 2, 3, 4, 5, 6, 7, 8, 9, 10 ] 
    // 两个参数
    let j = arr.slice(2,6); 
    console.log(j);//[ 3, 4, 5, 6 ] 
    console.log(arr);//[ 1, 2, 3, 4, 5, 6, 7, 8, 9, 10 ]

    如果传入的是负数,则用数组的长度加上该数来确定相应的位置。

    splice():可以实现数组的3种类型的操作:删除,插入和替换
      删除:可以删除任意数量的元素,值需要指定2个参数:要参数的第一项位置和要删除的项数。
      插入:可以任意位置插入任意数量的元素,只需要提供3个参数:起始位置,要删除的项目(0),要插入的项目。
      替换:替换的原理在于插入的时候同时进行删除。
    3·数组和字符串相互转换:join()和split()
      join():将数组转为字符串,可以传入分隔符作为参数。
      split():将字符串转为数组,传入参数指明以什么作为分隔符。
    4·数组重排序方法
      两个方法:reverse()和sort()
    reverse():反转数组项的顺序,注意使用该方法时会改变原来数组的顺序,而不是返回一个副本。
    示例:

    let arr = [1,2,3,4,5]; 
      console.log(arr.reverse());//[ 5, 4, 3, 2, 1 ] 
      console.log(arr);//[ 5, 4, 3, 2, 1 ]

    sort():按照升序排列数组的每一项。
    示例:

    let arr = [0,12,3,7,-12,23]; 
      console.log(arr.sort()); 
      //[ -12, 0, 12, 23, 3, 7 ]

    可以看到,我们调用sort()方法排序并没有正确的按照升序来进行排序。
    原因子在于:sort()方法排序时首先会调用每一个元素的toString()转型方法,然后比较得到的字符串。即使每一项都是数值,sort()方法比较的也是字符串。
    解决方法:sort()方法可以接收一个比较函数作为参数,以便我们指定哪个值位于哪个值的前面。比较函数接收两个参数,如果第一参数应该位于第二个数的前面,返回一个负数,如果两个参数相等,返回0,如果第一个参数应该位于第二个数的后返回一个正数。
    示例:

    let arr = [0,12,3,7,-12,23]; 
      console.log(arr.sort(function(a,b){ 
        return a - b; 
        // 降序就返回 b - a 
      }));

    5·位置方法:
    indexOf()和lastIndexOf()
    这两个方法都接收两个参数:要查找的项目和查找的起点位置索引。区别在于一个时从数组开头开始找,一个从数组末尾开始找。如果没有找到就返回-1.
    includes()用于查看数组里面是否包含某个元素,包含返回true否则返回false
    ## 集合
    **3-1创建集合**
    直接使用new就可以创建一个Set对象,
    **3-2给集合添加值**
    使用add()可以给集合添加值,由于调用add()方法返回的又是一个Set对象,所以我们能连续调用add()方法进行值的添加,这种像链条一样的方式调用称之为链式调用。
    示例:

    
    let s1 = new Set();
    s1.add(1); 
    console.log(s1);//Set { 1 } 
    s1.add(2).add(3).add(4); 
    console.log(s1); //Set { 1, 2, 3, 4 }
    


    **3-3集合相关属性和方法**
    1·用size属性获取元素个数:
    示例:

    
    let s1 = new Set([1,2,3]);
    console.log(s1.size);//3
    

    2·使用has()方法来查看一个集合种是否半酣某个值
    示例:

    let s1 = new Set([1,2,3]); 
    console.log(s1.has(1));//true
    console.log(s1.has("1"));//false

    3·删除集合值:
    使用deldete删除Set对象里面的一个元素
    示例:

    let s1 = new Set([1,2,3]); 
    s1.delete(2);
    console.log(s1);//Set { 1, 3 } 
    // 没有的元素也不会报错
    s1.delete("2");
    console.log(s1);//Set { 1, 3 }

     4·如果要一次性删除所有的元素,可以使用clear方法

    let s1 = new Set([1,2,3]);
    s1.clear()
    console.log(s1);//Set {}

    集合转数组

    前面我们有提到过,Set对象里面是不能够存放相同的元素的,利用这个特性,我们可以快速的 为数组去重,

    示例:

    let arr = [1,2,2,3,4,3,1,6,7,3,5,7];
    let s1 = new Set(arr);
    let arr2 = [...s1]; console.log(arr2);//[ 1, 2, 3, 4, 6, 7, 5 ]



  • 相关阅读:
    【转】正则表达式参考
    php七牛批量删除空间内的所有文件方法
    星级评分(全星)
    [转]No 'AccessControlAllowOrigin' header is present on the requested resource.'Ajax跨域访问解决方案
    在canvas中插入图片
    vue2.0 引入css文件
    修改input框样式
    js实现简单分页浏览
    [转] js 移动端 长按事件
    TypeError: console.log(…) is not a function
  • 原文地址:https://www.cnblogs.com/lyl-0667/p/11111592.html
Copyright © 2020-2023  润新知