JavaScript前端数组

JavaScript前端 专栏收录该内容
5 篇文章 0 订阅

JavaScript前端数组

#数组的基本概念

数组构成:由一个或多个数组元素组成的,各元素之间使用逗号","分割。

  • 数组元素:每个数组元素由"索引下标"和"值"构成。
  • 根据维数划分为一维数组、二维数组、三维数组等多维数组。

数组的创建

  • 创建方式
  • 实例化Array对象的方式
  • 直接使用"[]"的方式
 // 元素值类型为字符串
 var area = new Array('Beijing', 'Shanghai', 'Shenzhen');
 // 元素值类型为数值型
 var score = new Array(56, 68, 98, 44);
 // 元素值类型为混合型
 var mix = new Array(123, 'abc', null, true, undefined);
 // 空数组
 var arr1 = new Array();   或var arr2 = new Array;
 
 var weather = ['wind', 'fine',]; // 相当于new  Array('wind', 'fine',)
 var empty = []; // 相当于:new Array
 // 控制台输出:["sad", empty × 3, "happy"]
 var mood = ['sad', , , ,'happy'];   

数组的基本操作

获取和设置数组长度:length属性

  • 设置长度的规则设置的length>原数组长度,则没有值的数组元素会占用空存储位置。
  • 设置的length=原数组长度,则数组长度不变。
  • 设置的length<原数组长度,则多余的数组元素将会被舍弃。
var arr1 = [78, 88, 98];
var arr2 = ['a', , , , 'b', 'c'];
console.log(arr1.length); // 输出结果为:3
console.log(arr2.length); // 输出结果为:6
var arr2 = [1, 2, 3];
arr2.length = 4;
console.log(arr2);
 // 输出结果:[1, 2, 3, empty]
 
  var arr3 = ['a', 'b'];
  arr3.length = 2; 
  console.log(arr3); 
  // 输出结果:["a", "b"]
  
  var arr4 = ['hehe', 'xixi', 'jiujiu'];
  arr4.length = 2; 
  console.log(arr4); 
  // 输出结果:["hehe", "xixi"]

值得一提:JavaScript中不论何种方式指定数组长度后,并不影响继续为数组添加元素,同时数组的length属性值会发生相应的改变。

  • 访问数组元素
    数组元素访问方式:“数组名[下标]”。
  • 遍历数组元素
    利用下标遍历数组:使用for
    利用下标遍历数组:使用for…in语句

for……of语法
在ES6中,新增了一种for…of语法,可以更方便地对数组进行遍历。

var arr= [1, 2, 3];
for (var value of arr  ) {
    console.log(value);
}

变量value:表示每次遍历时对应的数组元素的值。
变量arr:表示待遍历的数组。
结果:在控制台中依次输出1、2和3。

元素的添加与修改

  • 元素的添加与修改元素的方式:“数组名[下标]”。
  • 提示:与访问数组中的元素的方式相同。
    元素的删除
  • delete关键字只能删除数组中指定下标的元素值,删除后该元素依然会占用一个空的存储位置。
var stu= ['Tom', 'Jimmy', 'Lucy'];
console.log(stu  );            // 输出结果:["Tom", "Jimmy", "Lucy"]delete stu  [1];
// 删除数组中第2个元素
console.log(stu  );           // 输出结果:["Tom", empty, "Lucy"]

ES6中另一种结构赋值方式

//传统做法
var arr= [1, 2, 3];
var a = arr  [0];
var b = arr  [1];
var c = arr  [2];
// 解构赋值方式
[a, b, c] = [1, 2, 3];
  • 当左侧变量的数量小于右侧的元素的个数,则忽略多余的元素。
  • 当左侧变量数量大于右侧的元素个数时,则多余的变量会被初始化为undefined。

代码实现思路:假设法

  • 假设待查找数组的第一个
  • 元素为最大值max和最小值min。
  • 从数组的第二个元素开始遍历数组。
  • 在遍历数组时,判断当前元素是否大于max,若大于,修改max值。
  • 同理,在遍历数组时,判断当前元素是否小于min,若小于,修改min值。

创建的二维数组的操作

  • 创建与遍历
// 使用Array对象创建数组
var info = new Array(new Array('Tom', 13, 155), new Array('Lucy', 11, 152));
var arr= new Array(new Array, new Array); // 空二维数组
// 使用"[]"创建数组
var num= [[1, 3], [2, 4]];
var empty = [[], []];// 空二维数组

var arr= [];// 创建一维空数组
for(let i =  0;   i< 3; ++i){
       arr  [i] = []; // 将当前元素设置为数组
       arr  [i][0] = i;  // 为二维数组元素赋值
   }

若要为二维数组元素(如arr[i][0])赋值,首先要保证添加的元素(如arr[i])已经被创建为数组,否则程序会报"Uncaught TypeError…"错误。

二维数组转置

  • 案例:二维数组转置将二维数组横向元素保存为纵向元素。

  • 代码实现思路:

  • ①找规律:res[0][0] = arr[0][0]、res[0][1] = arr[1][0]、res[0][2] = arr[2][0]。

  • ②得结论:res[i][j] = arr[j][i]。

  • ③res数组长度=arr元素(如arr[0])的长度。

  • ④res元素(如res[0])的长度=arr数组的长度。

  • ⑤按照③和④完成res的创建与遍历,按②进行转置。

  • 转置前arr
    [
    [‘a’, ‘b’, ‘c’],
    [‘d’, ‘e’, ‘f’],
    [‘g’, ‘h’, ‘i’],
    [‘j’, ‘k’, ‘l’],
    ]

    转置后res
    [
    [‘a’, ‘d’, ‘g’, ‘j’],
    [‘b’, ‘e’, ‘h’, ‘k’],
    [‘c’, ‘f’, ‘i’, ‘l’],
    ]

数组排序

冒泡排序

  • 计算机科学领域中较简单的排序算法
  • 实现原理:在冒泡排序的过程中,按照要求从小到大排序或从大到小排序,不断比较数组中相邻两个元素的值,较小或较大的元素前移。

插入排序

  • 冒泡排序的优化,是一种直观的简单排序算法实现原理:通过构建有序数组元素的存储,对于未排序的数组元素,在已排序的数组中从最后一个元素向第一个元素遍历,找到相应位置并插入。其中,待排序数组的第1个元素会被看作是一个有序的数组,从第2个至最后一个元素会被看作是一个无序数组。

常见的数组方法

栈方法

  • 利用Array对象提供的栈方法实现数组元素的添加与删除。
方法名称功能描述
push()将一个或多个元素添加到数组的末尾,并返回数组的新长度。
unshift()将一个或多个元素添加到数组的开头,并返回数组的新长度。
pop()从数组的末尾移出并返回一个元素,若是空数组则返回undefined。
shift()从数组的开头移出并返回一个元素,若是空数组则返回undefined。

push()和unshift()方法的返回值是新数组的长度。
pop()和shift()方法返回的是移出的数组元素。

检索方法
在开发中,若要检测给定的值是否是数组,或是查找指定的元素在数组中的位置。

方法名称功能描述
includes()用于确定数组中是否含有某个元素,含有返回true,否则返回false。
Array.isArray()用于确定传递的值是否是一个Array,是返回true,不是返回false
indexOf()返回在数组中可以找到给定值的第一个索引,如果不存在,则返回-1
lastIndexOf()返回指定元素在数组中的最后一个的索引,如果不存在则返回-1
var data = ['peach', 'pear', 26, '26', 'grape'];
// 从数组下标为3的位置开始检索数字
console.log(data.includes(26, 3)); // 输出结果:false
// 从数组下标为data.length- 3 的位置查找数字
console.log(data.includes(26, -3)); // 输出结果:true
// 判断变量data是否为数组
console.log(Array.isArray(data)); // 输出结果:true

数组转字符串

方法名称功能描述
join()将数组的所有元素连接到一个字符串中。
toString()返回一个字符串,表示指定的数组及其元素。
var arr= ['a','b','c'];
console.log(arr.join());      // 输出结果:a,b,c
console.log(arr.join(' -'));   // 输出结果:a-b-c
console.log(arr.toString());    // 输出结果:a,b,c
  • join()和toString()方法的相同点:
    可将多维数组转为字符串,默认情况下使用逗号连接。
    当数组元素为undefined、null或空数组时,对应的元素会被转换为空字符串
  • join()和toString()方法的不同点。
    join()方法可以指定连接数组元素的符号

其它方法

  • 合并数组
  • 数组浅拷贝
  • 点到数组元素的顺序
方法名称功能描述
sort()对数组的元素进行排序,并返回数组。
fill()用一个固定值填充数组中指定下标范围内的全部元素
reverse()颠倒数组中元素的位置
splice()对一个数组在指定下标范围内删除或添加元素
slice()从一个数组的指定下标范围内拷贝数组元素到一个新数组中
concat()返回一个合并两个或多个数组后的新数组
  • slice()和concat()方法在执行后返回一个新的数组,不会对原数组产生影响,剩余的方法在执行后皆会原数组产生影响。
  • splice()方法的第1个参数的值等于或大于数组长度时,从数组末尾开始操作;当该值为负数时,则下标位置等于数组长度加上指定的负数,若其值仍为负数,则从数组的开头开始操作。
  • 0
    点赞
  • 0
    评论
  • 1
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

©️2021 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值