文章目录
- 1.数组创建
- 2.获取数组长度
- 3.截取数组某部分
- 4.为数组添加元素
- 4.1 在数组开头添加元素:unshift()
- 4.2 在数组结尾添加元素: push()
- 5.删除元素
- 5.1 删除数组中的第一个元素: shift()
- 5.2 删除数组中最后一个元素:pop()
- 6.数组大小比较:sort()
- 7.数组颠倒顺序:reverse()
- 8.将数组元素连接成字符串:join()
- 9.数组与字符串的转换操作
1.数组创建
var 数组名 = new Array(元素1, 元素2, ……,元素n);
var 数组名 = [元素1, 元素2, ……, 元素n];
举例:
var arr = [];
var arr = ["HTML","CSS","JavaScript"];
数组的下标是从 0 开始的,而不是从 1 开始的
2.获取数组长度
数组名.length;
举例:
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script>// 创建数组var arr = [];arr[0] = "HTML";arr[1] = "CSS";arr[2] = "JavaScript";// 输出数组长度document.write(arr.length + "<br>");</script>
</head>
<body>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script>// 创建数组var arr = [123, "javascript", true, 3.14, null, undefined, {name: "tom", age: 20}, [1, 2, 3]];// 输出数组for(var i = 0; i < arr.length; i++){document.write(arr[i] + "<br>");}</script>
</head>
<body>
</body>
</html>
不是说数组时存储一组“相同数据类型”的数据结构吗?
在 JavaScript 中,其实一个数组是可以储存 “不同数据类型” 的数据的,只不过我们极少这样做。一般情况下都是用数组来存储 “相同数据类型” 的数据。
3.截取数组某部分
数组名.slice(start, end);
截取范围: [ start , end )。其中 end 可以省略。当 end 省略时,获取范围为: start 到结尾
举例:
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script>// 创建数组var arr = new Array(1, 2, 3, 4, 5);document.write(arr.slice(1, 3)); // 2,3</script>
</head>
<body>
</body>
</html>
4.为数组添加元素
4.1 在数组开头添加元素:unshift()
数组名.unshift(新元素1, 新元素2, ……, 新元素n);
举例:
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script>// 创建数组var arr = new Array(1, 2, 3, 4, 5);arr.unshift(6, 7, 8);document.write(arr + "<br>");</script>
</head>
<body>
</body>
</html>
4.2 在数组结尾添加元素: push()
数组名.push(新元素1, 新元素2, ……, 新元素n);
举例:
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script>// 创建数组var arr = new Array(1, 2, 3, 4, 5);arr.push(6, 7, 8);document.write(arr + "<br>");</script>
</head>
<body>
</body>
</html>
5.删除元素
5.1 删除数组中的第一个元素: shift()
数组名.shift();
举例:
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script>// 创建数组var arr = new Array(1, 2, 3, 4, 5);arr.shift(); // 删除数组第一个元素document.write(arr + "<br>");</script>
</head>
<body>
</body>
</html>
5.2 删除数组中最后一个元素:pop()
数组名.pop();
举例:
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script>// 创建数组var arr = new Array(1, 2, 3, 4, 5);arr.pop(); // 删除数组第一个元素document.write(arr + "<br>");</script>
</head>
<body>
</body>
</html>
总结: unshift()、push()、shift()、pop() 这四个元素都会改变数组的结构,相当于生成了一个新的数组,因此数组的长度(length 属性)也会改变,我们需要记住这一点
6.数组大小比较:sort()
在 JavaScript 中,我们可以使用 sort() 方法来对数组中所有元素进行大小比较,然后按照从大到小或者从小到大的顺序进行排序
数组名.sort(函数名);
“函数名” 是定义数组元素排序的函数的名字
举例:
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script>// 定义一个升序函数function up(a, b) {return a - b;}// 定义一个降序函数function down(a, b) {return b - a;}var arr = new Array(3, 9, 5, 7, 1, 8, 2, 6, 4);arr.sort(up);document.write(arr + "<br>");arr.sort(down);document.write(arr + "<br>");</script>
</head>
<body>
</body>
</html>
此处不用深究,之后在 JavaScript 进阶会学到
7.数组颠倒顺序:reverse()
数组名.reverse();
举例:
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script>var arr = new Array(3, 9, 5, 7, 1, 8, 2, 6, 4);arr.reverse();document.write(arr + "<br>");</script>
</head>
<body>
</body>
</html>
8.将数组元素连接成字符串:join()
数组名.join("连接符");
连接符是可选参数,用于指定连接元素之间的符号。默认情况下,则采用英文逗号( , )作为连接符来连接。
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script>var arr = new Array(3, 9, 5, 7, 1, 8, 2, 6, 4);document.write(arr.join()+"<br>");document.write(arr.join("-")+"<br>");document.write(arr.join(" ")+"<br>");document.write(arr.join("")+"<br>");</script>
</head>
<body>
</body>
</html>
注意:join(" “) 和 join(”") 是不一样的!前者两个引号之间是有空格的,所以表示用空格作为连接符来连接,而后者两个引号之间是没有空格的。
9.数组与字符串的转换操作
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script>var str = "我爱你中国";var str2 = str.split("").join("><");var arr = str2.split("");arr.unshift("<");arr.push(">");document.write(arr.join(""));</script>
</head>
<body>
</body>
</html>
数组进行操作一般是直接对原数组进行改变,而字符串进行操作一般不改变原数组
此外,住哟在 JavaScript 中,函数的返回值可以为数组类型