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

Web前端08:JavaScript数组

2020-08-08 15:21 621 查看

数组

  • 程序 = 数据 + 算法
  • 前面的if, if-else, switch,循环解决的是流程问题,及算法问题
  • 所谓数据结构,就是把数据与数据间的关系按照特定的结构来保存。设计合理的数据结构是解决问题的前提
  • 数组(array),就是一种常用的保存批量数据的数据结构

数组的定义

  • 多个元素组合的集合——在一个变量名中存储多个值。
  • JS数组中元素的数据类型可以相同,也可以不同
  • 元素按照线性顺序排列,所有线性书序指除了第一个元素外,每一个元素都有唯一的前驱元素;除最后一个元素外,每一个元素都有唯一的后继元素(一个跟一个)
  • 可以通过元素所在位置的顺序号(下标)做标识来访问每个元素(下标从0开始,最大到元素个数-1)

定义一维数组

//可以使用如下四种格式定义一个数组变量:
var arr1 = [];	//定义一个不包含元素的数组
var arr2 = [97,85,29];	//定义一个包含3个元素的数组
var arr3 = new Array();	//定义一个不包含元素的数组
var arr4 = new Array(“a”,”b”,”c”);	//定义一个三个字符的元素的数组

var arr5 = [3];  //定义一个只包含一个整数元素的数组,下标为0,值为3
var arr6 = new Array(3);   //定义一个包含三个元素的数组,下标分别为0/1/2,三个元素的均为undefined;
var arr7 = new Array(3,true,”abc”); //定义包含三个元素的数组,下标分别为0/1/2

初始化数组
数组中的元素可以在定义时初始化
var salaryArray = [1,2,3];
var nameArray = new Array(“张三”,”李四”);
也可以先声明一个空数组,随后再向其中添加元素
var emptyArray = [];
emptyArray[0] = “1”;
emptyArray[1] = “2”;
混合元素类型数组
var mixedArray = new Array();
mixedArray[0] = “中文”;
mixedArray[1] = 123;
mixedArray[2] = true;
访问数组元素

//设置数组元素的值
var score = [88,92,67];
score[2] = 90;	//将值为67的元素重新赋值为90;
score[3] = 100; 	//在数组尾部添加一个新的元素
//获取数组元素的值
var city = new Array(“西安”,”北京”,”上海”);
document.write(city[0]);	//西安
document.write(city[2]);	//上海

获取数组的长度

//使用length属性获取数组中元素的个数,即数组的长度
var arr= [];
document.write(arr.length);	//长度为0
var arr2 = new Array();
document.write(arr2.length);	//长度为0
var arr3 = [10];
document.write(arr3.length);	//长度为1;
var arr4 = new Array(10);
document.write(arr4.length);	//长度为10;

数组的length属性,不是只读的,可以通过设置此属性,从数组的末尾移除项或者向数组中添加新项;
检测数组

var arr = new Array(1,2,5,7);
console.log(arr instanceof Array);
console.log(Array.isArray(arr));
  • arr instanceof Array
    可通过 instanceof 操作符来判断对象的具体类型,语法格式:

    var result = objectName instanceof objectType
    返回布尔值,如果是指定类型返回 true,否则返回 false。

  • Array.isArray(arr)
    isArray() 方法用于判断一个对象是否为数组。

    如果对象是数组返回 true,否则返回 false

遍历数组元素

遍历数组元素,通常选择for循环语句,元素的下标作为循环变量:

var nums = [1,2,3,4];
len = nums.length;
for(var i=0;i<len;i++){
document.write(nums[i]+"<br/>");
}

也可以倒叙或者跳序遍历:

for(var i=len-1;i>=0;i--){
document.write(nums[i]+"<br/>");
}
for(var i=0;i<len;i+=2){
document.write(nums[i]+"<br>");
}

for…in遍历数组
for…in用于严格的遍历数组中的每一个下标

var numbers = [10,20,30,40];
for(var i in numbers){
document.write(i+":"+numbers[i]+"<br>");
}

获取数组字符串
valueOf()方法返回数组的元素字符串
toString()方法可以把数组转换为字符串,并返回结果
toLocaleString() 返回数组中每个元素本地化表示形式
join(seperator) 返回一个字符串,由每个元素转换而成的字符串使用指定的separator拼接而成

var numbers = [2123,'hello',new Date()];
document.write(numbers+"<br>");
document.write(numbers.valueOf()+"<br>");
document.write(numbers.toString()+"<br>");
document.write(numbers.toLocaleString()+"<br>");
document.write(numbers.join("-")+"<br>");

结果如下:

连接数组
concat()方法拼接两个或更多的数组,并返回结果
语法:arrObject.concat(arr1,arr2,…);

  • 该方法不会改变现有数组,仅仅返回一个拼接后的副本;
  • 每个参数可以是一个值,也可以是一个数组
  • 可以接收任意多个参数
var arr1 = [1,2,3];
var arr2 = [9,8,7];
var arr3 = [10,11,23];
var arr4 = arr1.concat(100,200,arr2,arr3);

console.log(arr1);
console.log(arr4);

结果如下:

获取子数组
slice()方法返回现有数组的一个子数组
语法:arrObject.slice(start1,end);

  • 参数start指定从哪个下标开始获取;若取值为负数,则表示从尾部开始算起,如-1指最后一个元素,-2指倒数第二个元素
  • 参数end指定结束处的下标(不包含);可以省略或取负值
var arr1 = [10,20,30,40,50];
var arr2 = arr1.slice(1,4);
var arr3 = arr1.slice(2);
var arr4 = arr1.slice(-4,-2);

console.log(arr2);
console.log(arr3);
console.log(arr4);

结果如下:

修改数组
splice()方法从数组中删除一部分元素,并添加另一部分元素
语法:arrObject.splice(start,count,e1,e2…);

  • 参数start: 指定添加/删除的起始的下标位置,可取负值
  • 参数count: 要删除的元素个数,0表示不删除
  • e1,e2… 在start处新添加的项
  • 返回被删除的项目;现有数组内容会改变
var arr1 = [10,20,30,40,50];
var arr2 = arr1.splice(2,0,60,70);
var arr2 = arr1.splice(2,2,60,60);
var arr3 = arr1.splice(2,2,[60,70]);

console.log(arr1);
console.log(arr2);
console.log(arr3);

结果如下:

倒转数组
reverse()方法 颠倒数组中元素的顺序
语法:arrObject.reverse()
现有数组内容会改变

var arr1 = [10,20,30,40,50];
arr1.reverse();

console.log(arr1);

结果如下:

数组排序
sort() 方法用于对数组中元素由小到大进行排序
语法:arrObject.sort(sortby);

  • 若未指定参数,则按元素的Unicode码排序;也可以指定元素 比较函数sortby,按其返回的正负值作排序的依据。
  • 现有数组内容会改变
var arr1 = [10,90,30,50,40];
arr1.sort();
console.log(arr1);
var arr2 = ["中文","aa","ab","AA","AB",1,2];
arr2.sort();
console.log(arr2);

结果如下:

进出栈操作-栈方法
栈是一种LIFO(Last-In-First-Out, 后进先出)的数据结构

  • push()入栈,在栈顶添加指定的元素,并返回新的长度
var arr1 = [10,20];
len = arr1.push(30);
len = arr1.push(40,50);
console.log(arr1);
console.log(len);

  • pop()出栈,删除并返回栈顶的元素
var arr1 = [10,20];
var top = arr1.pop();
console.log(arr1);


队列方法

  • 队列数据结构的访问规则是FIFO(First-In-First-Out 先进先出)
  • shift()方法移除数组中的第一个项,并返回该项,且改变数组的长度
var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.shift();
console.log(fruits);

  • unshift()方法在数组的前端添加任意多个项,并返回数组的长度
var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.unshift("Lemon","Pineapple");
console.log(fruits);


位置方法

  • indexOf() : 接收两个参数,要查找的项目,查找起点的位置索引(可选)
var fruits = ["Banana", "Orange", "Apple", "Mango"];
var a = fruits.indexOf("Apple");
console.log(a);

  • lastIndexOf() :接收两个参数,要查找的项目,查找起点的位置索引(可选) 可返回一个指定的字符串值最后出现的位置, 在一个字符串中的指定位置从后向前搜索。
    两个函数都是返回要查找的项在数组中的位置,在没有找到的情况下返回-1。在比较第一个参数与数组中的每一个项时,使用全等操作符

迭代方法
ECMASCRIPT 5为数组定义了5个迭代方法,每个方法接收两个参数,要在每一项上运行的函数和运行该函数的作用域对象的值。传入这些方法的函数会接收三个参数:数组项的值,该项在数组中的位置和数组对象本身。

  1. every(): 对数组中的每一项运行给定函数,如果该函数对每一项都返回true,则返回true

    语法:array.every(callbackfn[,thisArg])

    every()方法为数组中的每个元素执行一次callbackfn 函数,直到它找到一个使callbackfn返回false(表示可转换为布尔值false的值)的元素,如果发现了一个这样的元素,every()方法将会立即返回false。否则,callbackfn为每一个元素返回true,every()就返回true
  2. filter(): 对数组中的每一项运行给定函数,返回该函数会返回true的项组成的数组
    语法:array.filter(callbackfn[,thisArg])

    filter为数组中的每个元素调用一次callbackfn函数,并利用所有者使得callbackfn返回true或等价于true的值的元素创建一个新数组。callbackfn只会在已经赋值的索引上被调用。
  3. forEach(): 对数组中的每一项运行给定函数,该方法没有返回值
    语法:array.forEach(callbackfn[, thisArg])

    array   必选,一个数组对象
    callbackfn  必选,最多可以接受三个参数的函数,对于数组中的每个元素,forEach都会调用callbackfn 函数一次
    thisArg 可选,callbackfn 函数中的this关键字可引用的对象。如果省略thisArg, 则undefined 将用作this值
  4. map(): 对数组中的每一项运行给定函数,返回每次函数调用的结果组成的数组,并且按照原始数组元素顺序依次处理元素。
    语法: array.map(callbackfn[,thisArg])

    map方法会给原数组中的每个元素都按顺序调用一次callbackfn函数。callbackfn每次执行后的返回值组合起来形成一个新数组。
var numbers = [4, 9, 16, 25];
var a = numbers.map(Math.sqrt);
console.log(a);

  1. some() :对数组中的每一项运行给定函数,如果对任一项返回true,则返回true

    some()方法和every()方法类似,不同的是,some()方法在调用指定的函数callbackfn指定的条件符合就返回true,不符合则返回false

缩小方法
ECMASCRIPT 5增加了两个缩小数组的方法,reduce() 和 reduceRight().
两个方法都会迭代数组的所有项,然后构建一个最终的返回的值。其中 reduce()方法从数组第一项开始,逐个遍历到最后。reduceRight() 则从数组最后一项开始,向前遍历。
两个方法都接收两个参数,一个在每一项上调用的函数和(可选)作为缩小基础的初始值。传给reduce() 和 reduceRight()的函数接收4个参数,一个前一个值,当前值,项的索引和数组对象。这个函数返回的任何值都会作为第一个参数自动传给下一项。第一次迭代发生在数组的第二项上。

  • reduce() 方法:语法:array.reduce(callbackfn,[initialValue])

    reduce() 方法接收callbackfn 函数,这个函数包含四个参数:
    funciton callbackfn(preValue, curValue, index, array){
    }

参数:preValue 上一次调用回调返回的值,或者是提供的初始值(initialValue)
curValue 数组中当前被处理的数组项
index 当前数组项在数组中的索引值
array 调用reduce方法的数组

二维数组

二维数组:从整理上看,是一个数组,只是其中的每个元素又是一个数组,即数组的数组

var arr = [
[1,2,3,4,5,6],
[3,2,1,2,1,3],
[1,2,3,4,5,6]
];

创建二维数组

  • 定义一个规整的二位数组
var arr1 = [[1,2,3],[4,5,6],[7,8,9]]
  • 定义一个不规整的二位数组
var arr2 = new Array();
arr2[0] = [1];
arr2[1] = [2,3];
arr2[2] = [4,5,6];
  • Array定义方式
var arr3 = new Array();
arr3[0] = new Array(1,2,3);
arr3[1] = new Array(4,5,6);
arr3[2] = new Array(7,8,9);

使用二维数组

  • 访问二维数组中的某个元素
var arr1 = [[1,2,3],[4,5,6],[7,8,9]];
console.log(arr1[0][0]);	//值为1
arr[0][1] = 10;	//把2值改为10
  • 遍历二维数组中的每个元素——循环的嵌套
for(var i =0; i < arr3.length; i++){
for(var j = 0;j < arr3[0].length; j++){
document.write(arr3[i][j]+"&nbsp;");
}
document.write("<br>");

常见算法

  • 冒泡排序
  • 选择排序
  • 二分法
  • 插入排序
  • 快速排序
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: