JavaScript数组(Array)常用属性方法

这里写目录标题

数组

  • 程序 = 数据 + 算法
  • 前面的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>");

常见算法

  • 冒泡排序
  • 选择排序
  • 二分法
  • 插入排序
  • 快速排序
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值