zoukankan      html  css  js  c++  java
  • JS 数据结构-数组 声明数组 常用数组方法

    数组

      一个标识符,存储多个不同数据类型的数据。

      特性:有序=>下标=>能够快速访问一个数据。

    声明数组

      格式1:

        字面量方式 (推荐)
        关键词  标识符 = [数据];
      例    let    i   = [1,"A",undefined];
      
      中括号中的每个数据之间的分隔符是逗号,每个数据称为元素;
      每个元素都会有自己在数组中唯一的索引(下标),可以通过数组的索引进行元素获取。

    注:数组索引的起始值为0;
      i[1] 即得到数组中的第2个元素 "A"。
      获取一个不存在的下标会得到undefined不会报错。

      格式2:

        构造函数方式
        关键词  标识符  = new Array();
      例    let    i    = new Array();
      Array()小括号里面可以定数组的长度,但是没意义,因为JS数组是不定长的,可以随意添加;
      也可以直接写入数据Array(1,"A",undefined),但是...反正推荐字面量方式。

      

      字面量与构造函数方式的区别

        字面量比构造函数的解析速度更快(效率高)。
        原因:
          字面量属于JSON格式,可以直接被JS引擎进行解析。
          构造函数则需要先调用构造函数,再进行JS引擎解析。
     

    数组的解构  ES6 

      一种语法,ES6的赋值用法;

      ES6 允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为解构(Destructuring)。

      一般用在数组上为了数据交换,用在对象上为了取出对象上的数据来用

      

      
    注:严格来讲右侧内容能够遍历、可以枚举,如对象、字符串或函数的参数,都可以解构。
     

    数组的遍历

      方式一

        

        此处 i 相当于数组的下标。

       方式二

        

         此处 i 就是数组的每一项的值。

      方式三

        

         for in本质上是获取对象的键的用法,但也可以这么用在数组上获取每个的值,因为数组也是对象;

        获取下标就是直接输出i,值得注意的是,它返回的值是字符串类型,因为对象的键就是字符串类型的。

    注:数组有个特点,就是可以跳着给值,比如长度为5,直接给arr[10]赋值,是可以的,中间会出现几个“空位置”;

    let arr = [];
    arr[0] = 1;
    arr[4] = 10;
    console.log(arr);
    // [ 1, <3 empty items>, 10 ]

      如果用上面两个方法遍历,会输出undefined,用for in 则不会,for in 按照对象模式来,不会遍历不存在的键。

    特殊遍历:遍历并执行一些操作

      以下方法参数都是一个回调函数。

      forEach()    普通遍历,没有返回值

    按顺序让数组中每⼀项依次执⾏某种相同的操作

    let arr = [10, 11, 12, 13, 14];
    arr.forEach(function(item, index) {
        console.log( item ); // 10 11 12 13 14
        console.log( index ); // 0 1 2 3 4
    })

    注:数组自带的 forEach 循环,使用频率较高,但实际上性能比普通 for 循环弱。

    forEach不能使用 continue 和 break 语句中断循环,也不能使用 return 语句返回到外层函数。

      map()      返回值进行映射

    按顺序让数组中每一项依次执行某种相同的操作,然后返回一个新数组。

    let arr = [10, 11, 12, 13, 14];
    let newArr = arr.map(function(item, index) {
        return item * 2;
    })
    console.log( newArr ); // [20, 22, 24, 26, 28]

      filter()      返回值进行过滤

    按顺序让数组中每一项依次执行某种相同的操作,然后筛选出符合条件的元素,组成新数组并返回。

    let arr = [10, 11, 12, 13, 14];
    let newArr = arr.filter(function(item, index) {
        return item % 2 == 0;
    })
    console.log(newArr); // [10, 12, 14]

      some()      返回值进行判断

    按顺序让数组中每一项依次执行某种相同的操作,用来检测数组中某一项是否都符合条件。

    let arr = [10, 11, 12, 13, 14];
    let result = arr.some(function(item, index) {
        return item % 2 == 0;
    })
    console.log(result); // true

    注:检测的元素中,只要有一项符合条件,就返回结果 true,如果全部都不满足条件,则返回结果false。即一真必真。

      every      返回值进行判断

    按顺序让数组中每一项依次执行某种相同的操作,用来检测数组中某一项是否都符合条件。

    let arr = [10, 11, 12, 13, 14];
    let result = arr.every(function(item, index) {
        return item % 2 == 0;
    })
    console.log(result); // false

    注:检测的元素中,如果全部都满足条件,返回 true,只要有一项不满足条件,则返回 false。即一假必假。

      以上方法的回调函数模型:

      function(currentValue, index, arr){}

      currentValue:必需,当前元素。index:下标,可选。arr:当前数组,可选。

      reduce()     用来迭代、计算值等等

    按顺序让数组中的前项和后项做某种计算,并累计返回最终值。

    let arr = [10, 11, 12, 13, 14];
    let result = arr.reduce(function(prev, next) {
        return prev + next;
    })
    console.log(result); // 60

    利用 reduce() 方法的特点,结合三目运算来求一个数组中的最大或最小值。

    let arr = [1, 4, 2, 3, 7, 5];
    let result = arr.reduce(function(prev, next) {
        return prev > next ? prev : next;
    })
    console.log(result);

      回调函数模型:function(total,currentValue, index,arr){}

      total:必需。初始值, 或者计算结束后的返回值。

      currentValue:必需。当前元素。

    数组的属性

      常用的属性就一个:length;设置 length 属性可改变数组的大小。

      如果设置的值比其当前值小,数组将被截断,其尾部的元素将丢失。

      如果设置的值比它的当前值大,数组将增大,新的元素被添加到数组的尾部,它们的值为 undefined。

      注:如果用方式三遍历数组,得不到新元素的值(undefined),方式一和方式二可以得到。

    数组的方法

    增加元素

      push()    在数组后面添加:  let x = arr.push("F67",345,3000);//可以一次添加多个值

      unshift() 在数组前面添加:  let y = arr.unshift("F54",110,500);

      注:返回值为添加数据后数组的长度。

       concat()  对原数组建立一个副本,在副本的基础上添加元素,返回一个新的数组,不会改变原数组的内容。

      

     注:也可以直接把两个数组拼接到一起。

    删除元素

      

    批量获取数组中的数据

      slice(参数1,参数2)  没有满足条件的内容时,会返回一个空数组 。

      参数1是获取数组的起始位置,参数2是获取数组的结束位置;
      取的数据,不包含结束位置的内容, 即获取数组中从参数1开始,到参数2前一位之间的内容。
       特点:
        1、不会改变原数组的内容
        2、如果参数给的是负值,则用数组的长度与其相加。
        3、如果不满足,则返回空数组
        4、如果有一个参数,则获取从该位置到数组最后一个的内容。
        

    删除、修改、插入

      splice()  返回删除的内容。

      直接改变原数组。

      删除:

        只有1个参数,就是从这个参数的位置开始,到数组最后的内容删除。

        2个参数,参数1:起始位置,参数2:个数,即从参数1开始,往后删除多少个内容。
        
      修改或插入:
        3个参数,参数1:起始位置,参数2:个数,参数3:修改的值, 即把参数1到参数2的内容替换成参数3的值。
        3个参数,参数1:起始位置,参数2:0,参数3:修改的值,即在参数1位置前面插入参数3的值。
     
        超过3个参数, 参数1:起始位置,参数2:0或个数,
        参数3:修改或插入的值...,参数n:修改或插入的值,从第3个参数开始,都是要进行插入或修改的值。
        把参数3到参数n的值依次覆盖到原数组参数1后面删除的位置上,删了多少覆盖多少,多的添加上去。
         

       注:没有满足条件的内容或删除0个(参数2为0)时,会返回一个空数组 。

    数组与字符串的转换

      字符串转数组

        

      数组转字符串

        

    扩展运算符

      ...    三个点:扩展运算符

      

    查找内容

    返回查找内容的下标

      indexOf()   从前往后找第一个满足的。

      lastIndexOf()  从后往前找第一个满足的。

    注:如果没有满足的(即查找的内容在数组中不存在),则返回-1。
     

    判断是否存在要查找的内容

      includes()    存在返回true,不存在返回false。

    判断数组中是否有重复值

      方式一:

          

      方式二:

          

    数组的倒序排列

      会改变原数组的内容:

        arr.reverse();//返回倒序过后的新数组

    数组的升序和降序  (number类型)

       数组本身有 sort()排序方法,调用该方法时没有参数,会按字母顺序对数组中的元素进行排序,字符编码的顺序。

       因此需要把数组的元素都转换成字符串。如果要按照其他标准进行排序,要自己提供比较函数。

      

    替换

      copyWithin()  把指定的元素,替换到相应位置(会改变原数组的内容)。

      参数1:从该位置进行替换
      参数2:获取指定元素的起始位置
      参数3:获取指定元素的结束位置(不包含结束的内容)
      注:如果不给参数3,就是参数2到最后所有都选中。
      

    数据填充

      fill()  把指定的数据,填充到相应位置(会改变原数组的内容)。

      参数1:填充的数据

      参数2:填充的起始位置

      参数3:填充的结束位置(不包含结束)
      注:如果不给参数3,就是参数2到最后所有都选中。
      

    数组清空

      三种方式:

        arr.splice(0);
        arr.length = 0;
        arr = [];

       都可以得到空数组,但是清空数组这个行为本身,真是有点多余。

    判断数组中是否存在NaN

      因为NaN比较特殊,提一提,

      arr.includes(NaN);//可以正确返回是否存在
     

    数组遍历方法总结

    for 循环   遍历数组可以使用 break、continue 中断循环

    for-of 遍历所有复杂数据类型   遍历所有数据的键名 

    for-in 此处是把数组当做了对象来完成操作  数组的下标当做: 键名,下标对应的每一项为: 值

    forEach() 遍历数组  不可以使用 break、continue 中断循环  没有返回值

    map() 遍历操作数组元素并返回新数组   返回结果为一个新数组

    filter() 遍历筛选数组元素并返回新数组   返回结果为一个新数组

    reduce()遍历计算数组元素并累计返回最终值  返回结果为累积计算后的最终值

    every()遍历检测数组元素,有一项不满足检测条件,则返回 false  返回结果为一个布尔值

    some()遍历检测数组元素,有一项满足检测条件,则返回 true  返回结果为一个布尔值

  • 相关阅读:
    java基础-集合笔记
    Spring工具类
    XStream的基本使用
    java之路径问题
    Vue 动态组件渲染问题分析
    watch案例解析(element-ui el-select 无法选中问题剖析)
    v-if案例解析(element-ui form-item 结合 v-if 动态生成rule规则表单元素,表单无法验证问题剖析 )
    Vue 虚拟Dom 及 部分生命周期初探
    Android仿苹果版QQ下拉刷新实现(二) ——贝塞尔曲线开发"鼻涕"下拉粘连效果
    AngularJs(SPA)单页面SEO以及百度统计应用(下)
  • 原文地址:https://www.cnblogs.com/jiayouba/p/11921020.html
Copyright © 2011-2022 走看看