您的位置:首页 > Web前端 > JavaScript

【JS学习笔记 05】JavaScript 数组详解

2020-07-29 12:36 148 查看

JavaScript 数组详解

  • 数组的兼容性
  • 基本操作
  • 展开语法
  • 扩展方法
  • JavaScript 数组

    数组是多个变量值的集合,数组是Array 对象的实例,所以可以像对象一样调用方法。

    数组的初始化

    <1> 通过 new 关键字初始化

    • 数组是Array 对象的实例,所以可以像对象一样使用new关键字初始化,构造函数可以接受一个参数用以代表其初始化长度,其重载构造还支持直接传入数据进行初始化。
    //创建一个长度为10的数组,会填充10个undefined的值进入数组
    let arr1 = new Array(10);
    //也可以初始化其中的值
    let arr2 = new Array(1,2,3,4,5,6,7,8,9,0);

    <2>使用字面量创建

    • 使用字面量创建是推荐的简单作法,JS中
      []
      代表数组,直接用
      []
      是初始化数组的最常用方式
    const array = [1, 2,3,4,5,6,7,8,9,0];

    <3>Array.of 创建

    • Array.of()
      方法创建一个具有可变数量参数的新数组实例,而不考虑参数的数量或类型。Array.of() 和 Array 构造函数之间的区别在于处理整数参数:Array.of(7) 创建一个具有单个元素 7 的数组,而 Array(7) 创建一个长度为7的空数组(注意:这是指一个有7个空位(empty)的数组,而不是由7个undefined组成的数组)。
    Array.of(7);       // [7] ,区别Array(),而不是创建容纳7个变量的空数组
    Array.of(1, 2, 3); // [1, 2, 3]

    数组的兼容性

    JavaScript 数组可以容纳各种类型的数据类型 ,包括

    数字 、字符串 、布尔值、对象

    let arr = [3.14,"str",true,false,undefined,NaN,{name : "john",age : 29}];

    数组与字符串

    大部分数据类型都可以使用

    .toString()
    函数转换为字符串。大部分数据类型都可以如此转换为字符串,而且字符串可以直接拆分为一个个字符组成的字符串数组

    let arr = [1,2,3,4,5,6,7,8,9];
    //数组可以通过Array对象里的.toString()转换为字符串,
    let str = arr.toString()
    //字符串通过展开语法转换为数组
    let str = "this is a string";
    let strRes = [...str]; //strRes == [t,h,i,s, ,a, ,s,t,r,i,n,g]

    Array.from

    使用Array.from可将类数组转换为数组,类数组指包含 length 属性或可迭代的对象

    let set = new Set();
    let map = new Map();
    let str = new String();
    let arr = Array.from(set);
    let arr1 = Array.from(map);
    let arr2 = Array.from(str);

    为对象设置length属性后也可以转换为数组,但要下标为数值或数值字符串

    let stu = {
    0 : "john",
    1 : 12,
    length: 2
    };
    console.table(Array.from(stu));

    基本操作

    元素访问

    JS中的元素访问与其他主流编程语言一样采用

    数组签名[数组下标]
    的方式访问数组元素,注意数组下标从0开始计数,这与很多语言的机制相同。

    let arr = [1,2,3,4,5];
    //访问数组中第二个元素
    let a = arr[1];

    增删改查

    添加元素

    • array.push
      压入元素,直接改变元数组,返回值为数组元素数量
    • array.unshift
      从数组前面添加一个元素
    • array.fill
      填充数组
    let arr = [3, 5, 4, 2, 1];
    arr.push(7);
    console.log(arr);//[ 3, 5, 4, 2, 1, 7 ]
    arr.unshift(6);
    console.log(arr);//[ 6,3, 5, 4, 2, 1, 7 ]
    arr.fill(1);//[1,1, 1, 1, 1, 1, 1]

    删除元素

    • array.shift
      从数组前面取出一个元素
    • array.pop
      从末尾弹出元素,直接改变元数组,返回值为弹出的元素
    let arr = [3, 5, 4, 2, 1];
    arr.pop(); // [ 3, 5, 4, 2 ]
    arr.shift();//[ 5, 4, 2 ]

    访问和查找元素

    • 使用
      数组签名[数组下标]
      返回指定下标的元素
    • 使用
      find
      方法接收一个回调函数,回调函数返回一个区间。找到区间中的值后会把值返回出来,返回第一次找到的值 不继续查找,如果找不到返回值为undefined
    let res = [4,2,3,1,5].find(x => x == 1); // res = 1
    • 使用
      indexOf/lastIndexOf
      传入一个值,向前/向后查找与该值相等的元素出现的位置,找不到返回-1,第二个参数用于指定查找开始位置
    let res = ["string",false,1,2,4,3].indexOf("string"); // res = 0
    res = ["string",false,1,2,4,3].lastIndexOf("string");//res = 0
    • includes
      查找值是否存在,存在返回true,不存在返回false
    let res = ["string",false,1,2,4,3].includes(false);//res = true

    修改元素

    直接使用赋值语句修改

    let arr = [3,5,4,2,1];
    arr[1] = 9;

    截取数组

    since
    使用 slice 方法从数组中截取部分元素组合成新数组(并不会改变原数组),不传第二个参数时截取到数组的最后元素。

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

    数组排序

    reverse
    : 数组反转

    sort
    : sort每次使用两个值进行比较
    Array.sort((a,b)=>a-b

    • 返回负数 a 排在 b前面,从小到大
    • 返回正数 b 排在a 前面
    • 返回 0 时不动
    • 默认值从小于大排序数组元素
    let arr = [2,3,1,5,4,6];
    //默认升序
    arr.sort();//[ 1, 2, 3, 4, 5, 6 ]
    //升序 :
    arr.sort((a,b) => a - b); // [ 1, 2, 3, 4, 5, 6 ]
    //降序:
    arr.sort((a,b) => b - a); //[ 6, 5, 4, 3, 2, 1 ]

    展开语法

    使用

    ...
    可将一个数组或其他类数组对象展开为一串元素。作为左值可以把一串元素转换为一个数组/类数组 ,作为右值可以展开一个数组/类数组。
    例如 展开 [1,2,3] 后的结果为 1,2,3 (散开的序列)

    数组合并

    使用展开语法来合并数组相比

    concat
    要更简单,使用
    ...
    可将数组展开为多个值。

    let arr1 = ["a",true];
    let arr2 = ["一","二"];
    //使用展开语法可以合并数组,还可以在之中插入元素
    let arr = [...arr1,"插入的数据",...arr2];
    console.table(arr);

    函数参数

    使用展示语法可以替代

    arguments
    来接收任意数量的参数

    function sum(...arg)
    {
    return arg.reduce((a,b) => a+b);
    }
    console.log(sum(1,2,3)); // 6

    还可以利用这一特性接受一个数组作为参数。(本质是把数组展开为了参数)

    function fun(a,b,c,d)
    {
    console.log(a+b+c+d)
    }
    let arr = [1,2,3,4];
    fun(...arr); // 10

    还可以只接受一部分参数

    function fun(a,...args)
    {
    console.log(a,args);
    }
    fun("str",2,3,4);//  "str",[2,3,4]

    扩展方法

    every
    用于递归的检测元素,要所有元素操作都要返回真结果才为真。

    let arr = [7,3,2,5,4,6,1];
    //arr 所有元素都大于2 ?
    let res = arr.every(value => value > 2); // res == false
    //arr 所有元素都大于 0 ?
    res = arr.every(value => value > 0); //res == true

    some
    如果有一个返回true,表达式结果就是真,第一个参数为元素,第二个参数为索引,第三个参数为原数组。

    let arr = [7,3,2,5,4,6,1];
    // arr 里存在大于6的数 ?
    let res = arr.some(value => value > 6); //res == true
    // arr 里存在小于0的数 ?
    res = arr.some(value => value < 0); //res == false

    filter
    过滤数据中元素

    let arr = [7,3,2,5,4,6,1];
    let res = arr.filter(value => value > 3); // res == [ 7, 5, 4, 6 ]

    map
    映射数组上的所有元素到函数上

    let arr = [7,3,2,5,4,6,1];
    //把arr里的所有元素*2
    let res = arr.map(value => value * 2); //[ 14, 6, 4, 10, 8, 12, 2 ]

    reduce
    函数可以迭代数组的所有元素.
    reduce()
    方法接收一个函数作为累加器,数组中的每个值(从左到右)开始缩减,最终计算为一个值。

    et arr = [1,2,3];
    //等效计算 res 1 + 2*2 + 2*3;
    let res = arr.reduce((total,value) => total += value*2); //res == 11
    res = 1 + 2 * 2 + 2 * 3; //res = 11
    内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
    标签: