小白学JavaScript 数组
数组概念
概念:数组的字面意思就是一组数据,一组(一般情况下相同类型)的数据(不一定都是数字,可以是任意数据类型)。
数组是一种数据类型。
数组的作用是:使用单独的变量名来存储一系列的值。
数组基本使用
2.1 数组的声明
三种声明方式:
- 通过new运算符创建数组
var arr = new Array(10, 20, true, "hello");
- 省略new运算符创建数组
var arr = Array( 10, 20, true, "hello");
- 直接通过常量赋值
var arr = [10, 20, true, "hello”];
注意:
var arr = new Array(10);
var arr = Array(10);
【注】上述两种写法,都是声明长度
2.2 使用数组元素(访问)
【注】在数组中存储的数据叫做数组的元素。
arr[0]:表示数组的第一个元素,0是下标,也叫索引
arr[1]:表示数组的第二个元素,1是下标
2.3 数组中的几个名词
数组的长度(length属性):
数组的元素个数 arr.length
【注】length属性,不是只读的,可以设置。
2.4 数组的下标
下标就是索引,即元素的序号,从0开始,下标最大取值是:数组的长度 length - 1。
下标可以是变量或表达式。
2.5 数组的赋值
- 给数组赋值,就是给数组的元素赋值,需要通过给数组的每个元素一一赋值。
arr[0] = 20; //让数组的第一个元素的值为20;
arr[1] = 12; //让数组的第二个元素的值为12;
- 以下通过循环给数组的每个元素赋值,赋成下标的平方。
for(var i = 0; i < 10; i++) {
arr[i] = i * i;
}
- 以下通过循环给数组每个元素赋值,随机数。
for(var i = 0; i < 10; i++){
arr[i] = Math.random();
}
2.6 数组的使用
遍历数组
普通for循环
for(var i = 0; i < 5; i++){
document.write(arr[i]);
}
for…in语句用于遍历数组或者对象的属性(快速枚举法)
for(var i in arr){
document.write(arr[i]);
}
认识数组综合
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<meta http-equiv="X-UA-Compatible" content="ie=edge"/>
<title>Document</title>
<script>
/*
概念:
数组:用一个变量存储一堆数据的数据结构。
数据类型:
基本数据类型
特殊数据类型
复合/引用数据类型
数组。
*/
/*
声明数组:
1、通过new创建数组
参数:传入任意的数据,存储到数组中。
2、省略new运算符创建数组
【注】上述两种方法,传入参数只有一个,并且是数字的时候,直接声明这么长的一个数组。
3、数组常量进行赋值。(JS一般使用中括号[]);
*/
// var arr = new Array(100, true, "hello");
// var arr = Array(100, true, "hello");
/* var arr = [100, true, "hello"];
alert(arr); */
//声明长度为10的数组,数组中没有数据。
// var arr = new Array(10);
/* var arr = Array(10);
alert(arr);
var arr2 = [10];
alert(arr2); */
/*
数组的属性:
数组.length 返回值数组【元素】的个数。
元素:将数组存储的每一个数据,叫做数组的元素。
访问数组的元素:
数组[下标]; 下标是从0开始的。
【注】数组和循环是天生一对。
*/
var arr = [100, true, "hello"];
/* alert(arr.length);
alert(arr[1]); */
for(var i = 0; i < arr.length; i++){
document.write(arr[i] + "<br/>");
}
</script>
</head>
<body>
</body>
</html>
数组的方法
3.1 栈方法
ECMAScript 数组提供了一种让数组的行为类似于其他数据结构的方法。也就是说,可以让数组像栈一样,可以限制插入和删除项的数据结构。栈是一种数据结构(后进先出),也就是说最新添加的元素最早被移除。而栈中元素的插入(或叫推入)和移除(或叫弹出),只发生在一个位置——栈的顶部。ECMAScript为数组专门提供了push()和pop()方法。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<meta http-equiv="X-UA-Compatible" content="ie=edge"/>
<title>Document</title>
<script>
/*
栈结构:
栈:木盆
结构:从同一头进,从同一头出。
特点:先进后出。
*/
/*
数组的两个方法形成栈结构:
push
格式:数组.push(参数1, 参数2...);
功能:给数组的末尾添加元素。
返回值:插完元素以后数组的长度。
pop
格式:数组.pop()
参数:没有参数
返回值:取下一个元素
功能:从数组末尾取下一个元素
*/
/* var arr = ["北京", "上海", "广州"];
var res = arr.push("深圳", "天津", "成都");
alert(arr);
alert(res); */
/* var arr = ["北京", "上海", "广州"];
var res = arr.pop();
alert(res);
alert(arr); */
/*
队列结构
结构:从末尾进,从头部出。
特点:先进先出
push
shift()
格式:数组.shift()
参数:没有参数
功能:从数组的头部取下一个元素
返回值:取下的元素
unshift()
格式:数组.unshift(参数1, 参数2...)
功能:从数组的头部插入元素
返回值:插完元素以后数组的长度。
*/
/* var arr = ["唐朝", "元朝", "清朝"];
var res = arr.shift();
alert(res);
alert(arr); */
var arr = ["唐朝", "元朝", "清朝"];
var res = arr.unshift("隋朝", "商汤");
alert(res);
alert(arr);
</script>
</head>
<body>
</body>
</html>
3.2 排序方法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<meta http-equiv="X-UA-Compatible" content="ie=edge"/>
<title>Document</title>
<script>
/*
join()
格式:数组.join(字符串)
功能:将数组中的元素,用传入的拼接符,拼接成一个字符串
返回值:拼接好的字符串。
*/
/* var arr = [10, 20, 30];
// alert(arr);
var str = arr.join("==xxx");
alert(str);
alert(arr); */
/*
reverse 逆序
*/
/* var arr = [true, "hello", 100];
arr.reverse();
alert(arr); */
/*
数组排序
sort
格式:数组.sort() 默认从小到大排序,按照字符串排序。
参数:一个函数,代表要怎么去进行排序(固定用法)
*/
/* var arr = [30, 20, 50, 10, 40, 60];
arr.sort();
alert(arr); //10,20,30,40,50,60 */
/* var arr = [1, 10, 20, 15, 25, 5];
arr.sort();
alert(arr); //1,10,15,20,25,5 */
/*
数值大小排序
*/
var arr = [1, 10, 20, 15, 25, 5];
/* arr.sort(function(value1, value2){
return value1 - value2;
}) */
arr.sort(function(value1, value2){
return value2 - value1;
})
alert(arr);
</script>
</head>
<body>
</body>
</html>
注意:数组的排序依据是字符串排序,可以传入匿名函数作为排序的依据