本文详细介绍了JavaScript中数组的各种操作，包括创建数组、数组属性、for...in循环、concat、join、sort、pop、push、shift和unshift等方法。通过实例代码展示了每个方法的用法，帮助读者深入理解数组在前端开发中的应用。
文章目录
前言
前端js数组的属性方法大全，个人学习整理，有不足欢迎指点增改(≧∇≦)/，记得关注、点赞、收藏哦！(≧∇≦)/
这里附上代码，备注少，建议编辑器打开，运行看结果哟，skr
一、创建数组
<script>
//新建数组
/*
new Array();
new Array(size);可以控制数组最大的容量
new Array(element0, element1, ..., elementn);直接给数组添加元素，字符串用''引起来
let mycar = new Array(4);//最大容量4个元素 其值==数组.length
let mycar = new Array('卡宴','宝马','奔驰','GTR');//实例直接添加元素
*/
let mycar = new Array();//实例化方式
mycar[0] = '卡宴';
mycar[1] = '宝马';
mycar[2] = '奔驰';
mycar[3] = 'GTR';
mycar.map(function (v, i, arr) {//遍历输出直接显示在页面上
document.write(mycar[i] + '<br/>');
})
let mybf = ['李某某', '彭于晏', '王凯琳', '科比']//字面量方式
mybf.map(function (v, i) {//遍历输出直接显示在页面上
document.write(mybf[i] + '<br/>');
})
</script>
二、数组属性
1、数组对象属性
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
//定义一个数组对象
var test = new Array();
var test = true;
var test = '12354';
var test = new Date(2020/02/4);
//属性constructor的使用
if (test.constructor == Array) {
document.write("This is an Array");
}
if (test.constructor == Boolean) {
document.write("This is a Boolean");
}
if (test.constructor == Date) {
document.write("This is a Date");
}
if (test.constructor == String) {
document.write("This is a String");
}
document.write('<br/>');
//定义函数 employee
function employee(name, job, born) {
this.name = name;
this.job = job;
this.born = born;
}
var bill = new employee("Bill Gates", "Engineer", 1985);
console.log(bill);
console.log(bill.constructor);
document.write(bill.constructor);
document.write('<br/>');
//向方法中添加一个叫salary属性 prototype 属性的用法
employee.prototype.salary = null;//先使其为空
bill.salary = 20000;//给新添加的元素赋值
document.write(bill.salary);//添加成功 结果20000
document.write('<br/>');
console.log(bill);//结果：
/*ƒ employee(name, job, born) {
this.name = name;
this.job = job;
this.born = born;
}*/
</script>
</body>
</html>
2、数组length属性-数组长度
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
//Array.length 表示数组的长度
var arr = [1, 2, 3];
document.write(arr + '<br/>')
var x = arr.length; //获取数组arr的长度，返回3
document.write(x + '<br/>')
arr.length = 5; //设置数组arr的长度为5
document.write(arr.length + '<br/>')
var y = arr.length; //返回5
document.write(y + '<br/>')
document.write(arr[3] + '<br/>')
document.write(arr[4] + '<br/>')
</script>
</body>
</html>
三、for…in循环数组
<script>
let mybf = ['李某某', '彭于晏', '王凯琳', '科比']//字面量方式
let x;
/*for (x = 0; x < mybf.length; x++) {
document.write(mybf[x] + '<br/>');
}*/
for (x in mybf) {
document.write([x], '：' + mybf[x] + '<br/>');
document.write(mybf[x] + '<br/>');
}
</script>
四、concat合并多个数组
<script>
//新建数组
let mycar = new Array(4);//实例化方式,括号里面代表数组长度
mycar[0] = '卡宴';
mycar[1] = '宝马';
mycar[2] = '奔驰';
mycar[3] = 'GTR';
let mybf = ['李某某', '彭于晏', '王凯琳', '科比']//字面量方式
document.write(mybf.concat(mycar) + '<br/>');
for (const i in mybf) {
document.write(mybf[i].concat('开',mycar[i],'接我') + '<br/>');
}
</script>
五、join数组-使数组元素拼接成字符串
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
//join方法和字符串方法里的split是相对的。
//join方法是把数组转换成字符串；
//split方法是把字符串转换成数组；
let mydr = ['xx', '要', '飞上天', '与', '太阳', '肩并肩']
document.write(mydr.join('') + '!', '<br />');
let liwenlin = ['李某某', 25, 172, '搞钱', '疑似男朋友']
document.write(liwenlin.join('，'));
</script>
</body>
</html>
六、sort-对数组元素进行排序
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
//使用 sort() 方法从字面上对数组进行排序。
let cba = ['b', 'f', 's', 'g', 'e', 'e', 'j', 'k', 'y', 'a'];//定义数组
let abc = cba.sort();//按照字母先后顺序排序
document.write(abc + '<br/>');//检查
//使用 sort() 方法从数值上对数组进行排序。
let a321 = [156, 5, 18, 265, 1515, 1, 0, 626, 899999];
let a123 = a321.sort();
document.write(a123.join(' , ') + '<br/>');//结果：0 , 1 , 1515 , 156 , 18 , 265 , 5 , 626 , 899999，没有按照数字的大小排序
function stobig(a, b) {//定义一个方法使得排序按照数字从小到大排序
return a - b;
}
let a123_2 = a321.sort(stobig);
document.write(a123_2.join(' , ') + '<br/>');//结果：0 , 1 , 5 , 18 , 156 , 265 , 626 , 1515 , 899999，已经按照数字从小到大顺序排列
a123_2 = a321.sort(function (a, b) { return a - b });
document.write(a123_2.join(' , ') + '<br/>');
//按照年龄排序对象
var person = [
{ 'name': 'xiaoming', 'age': 7 },
{ 'name': 'meimei', 'age': 10 },
{ 'name': 'lilei', 'age': 8 }
]
person.sort(function (a, b) { return a.age - b.age }); //按照年龄排序
//排序后的数组：
/*[
{ 'name': 'xiaoming', 'age': 7 },
{ 'name': 'lilei', 'age': 8 },
{ 'name': 'meimei', 'age': 10 }
]*/
console.log(person.sort(function (a, b) { return a.age - b.age }));
//按照名字排序
let bname = person.sort(function (a, b) {
if (a.name > b.name) { return 1; }
else if (a.name < b.name) { return -1; }
else { return 0 }
}); //按照姓名排序
console.log(bname);
</script>
</body>
</html>
七、pop()方法-删掉数组最后一个元素
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
//pop() 方法用于 删除 并 返回 数组的最后一个元素。
//返回 数组的最后一个元素。
//arrayObject.pop()
var arr = new Array(3)
arr[0] = "George"
arr[1] = "John"
arr[2] = "Thomas"
document.write('原数组：'+arr)
document.write("<br />")
document.write('删除'+arr.pop())
document.write("<br />")
document.write('改变了原数组')
document.write("<br />")
document.write('改变后的数组：'+arr)
</script>
</body>
</html>
八、push()方法-增加元素到数组最后一个
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
//push() 方法可向数组的末尾添加一个或多个元素，并 返回 新的长度！
//返回 新的长度！
//语法：arrayObject.push(newelement1,newelement2,....,newelementX)
var arr = new Array(3)
arr[0] = "George"
arr[1] = "John"
arr[2] = "Thomas"
document.write(arr + "<br />")
document.write(arr.push("James") + "<br />")//返回值是数组的长度 结果：4
document.write(arr)
</script>
</body>
</html>
九、shift()方法-删除数组第一个元素
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
//shift() 方法用于把数组的第一个元素从其中删除，并返回第一个元素的值。
//语法 arrayObject.shift()
//返回 数组原来的第一个元素的值。
var arr = new Array(3)
arr[0] = "George"
arr[1] = "John"
arr[2] = "Thomas"
document.write(arr + "<br />")
document.write(arr.shift() + "<br />")
document.write(arr)
</script>
</body>
</html>
十、unshift()方法-增加元素到数组第一个
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
//unshift() 方法可向数组的开头添加一个或多个元素，并 返回 新的长度！
//返回 新的长度！
//语法：arrayObject.unshift(newelement1,newelement2,....,newelementX)
var arr = new Array(3)
arr[0] = "George"
arr[1] = "John"
arr[2] = "Thomas"
document.write(arr + "<br />")
document.write(arr.unshift("James") + "<br />")//返回值是数组的长度 结果：4
document.write(arr)
</script>
</body>
</html>
总结
数组方法很多，在工作中，数组也非常常用，了解以及掌握数组的属性方法很有必要，更多方法下回分解。(≧∇≦)/
扫一扫
2117
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
