【JavaScript】内置对象 - 数组对象 ② ( 数组添加元素 - push 方法 / unshift 方法 | 数组删除元素 - pop 方法 / shift 方法 )
【JavaScript】内置对象 - 数组对象 ② ( 数组添加元素 - push 方法 / unshift 方法 | 数组删除元素 - pop 方法 / shift 方法 )
文章目录
- 一、添加数组元素
- 1、添加数组元素 - push()
- 2、添加数组元素 - unshift()
- 二、删除数组元素
- 1、删除数组元素 - pop()
- 2、删除数组元素 - shift()
- 三、数组筛选
- 1、数组筛选回顾
- 2、代码示例
Array 数组对象参考文档 : https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array
一、添加数组元素
1、添加数组元素 - push()
调用 Array 数组对象 的 push() 方法 可以在数组的 尾部 添加指定元素 , 返回新数组长度 , 语法如下 :
push()
push(element0)
push(element0, element1)
push(element0, element1, /* … ,*/ elementN)- 该方法的参数可以传入 0 到 若干个 指定的元素值 ;
- 返回值 是 新数组对象的 length 属性 , 也就是插入后数组大小 ;
参考文档 : https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/push
代码示例 :
// 创建数组对象
let arr = [1, 2, 3];
// 向数组尾部添加元素 4
arr.push(4);
// 输出 : (4) [1, 2, 3, 4]
console.log(arr);完整代码示例 :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<!-- 设置 meta 视口标签 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no,maximum-scale=1.0,minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>JavaScript</title>
<style></style>
<script>
// 创建数组对象
let arr = [1, 2, 3];
// 向数组尾部添加元素 4
arr.push(4);
// 输出 : (4) [1, 2, 3, 4]
console.log(arr);
</script>
</head>
<body>
</body>
</html>执行结果 :
2、添加数组元素 - unshift()
调用 Array 数组对象 的 unshift() 方法 可以在数组的 开头 添加指定元素 , 返回新数组长度 , 语法如下 :
unshift()
unshift(element1)
unshift(element1, element2)
unshift(element1, element2, /* …, */ elementN)- 该方法的参数可以传入 0 到 若干个 指定的元素值 ;
- 返回值 是 新数组对象的 length 属性 , 也就是插入后数组大小 ;
参考文档 : https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/unshift
代码示例 :
// 创建数组对象
let arr = [1, 2, 3];
// 向数组开头添加元素 0
arr.unshift(0);
// 输出 : (4) [0, 1, 2, 3]
console.log(arr);完整代码示例 :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<!-- 设置 meta 视口标签 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no,maximum-scale=1.0,minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>JavaScript</title>
<style></style>
<script>
// 创建数组对象
let arr = [1, 2, 3];
// 向数组开头添加元素 0
arr.unshift(0);
// 输出 : (4) [0, 1, 2, 3]
console.log(arr);
</script>
</head>
<body>
</body>
</html>
二、删除数组元素
1、删除数组元素 - pop()
调用 Array 数组对象 的 pop() 方法 可以 删除数组的最后一个元素 , 返回 被删除的元素值 , 语法如下 :
pop()- 该方法没有参数 ;
- 返回值 是 被删除的元素值 ;
参考文档 : https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/pop
代码示例 :
// 创建数组对象
let arr = [1, 2, 3];
// 删除数组最后一个元素
arr.pop();
// 输出 : (2) [1, 2]
console.log(arr);完整代码示例 :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<!-- 设置 meta 视口标签 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no,maximum-scale=1.0,minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>JavaScript</title>
<style></style>
<script>
// 创建数组对象
let arr = [1, 2, 3];
// 删除数组最后一个元素
arr.pop();
// 输出 : (2) [1, 2]
console.log(arr);
</script>
</head>
<body>
</body>
</html>执行结果 :
2、删除数组元素 - shift()
调用 Array 数组对象 的 shift() 方法 可以 删除数组的 首部 元素 , 返回 被删除的元素值 , 语法如下 :
shift()- 该方法没有参数 ;
- 返回值 是 被删除的元素值 ;
参考文档 : https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/shift
代码示例 :
// 创建数组对象
let arr = [1, 2, 3];
// 删除数组第一个元素
arr.shift();
// 输出 : (2) [2, 3]
console.log(arr);完整代码示例 :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<!-- 设置 meta 视口标签 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no,maximum-scale=1.0,minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>JavaScript</title>
<style></style>
<script>
// 创建数组对象
let arr = [1, 2, 3];
// 删除数组第一个元素
arr.shift();
// 输出 : (2) [2, 3]
console.log(arr);
</script>
</head>
<body>
</body>
</html>执行结果 :
三、数组筛选
1、数组筛选回顾
在之前的博客 【JavaScript】数组 ⑤ ( 数组案例 | 创建数组存放 1 - 10 元素 | 数组筛选 | 删除数组元素 | 翻转数组元素 | 数组元素冒泡排序 ) 一、JavaScript 数组案例 2、数组筛选 中 介绍了数组 筛选 , 将筛选出的元素放入新数组 , 当时使用的方法是 " 直接向 arr 数组的 arr.length 索引位置设置数组元素 " ;
// 声明空数组
var arr = [9, 5, 2, 7];
// 存放筛选后的元素的数组
var newArr = [];
// 通过 for 循环设置数组元素
for (var i = 0; i < arr.length; i++) {
if (arr[i] > 5) {
// 向数组中追加元素时
// 直接向 arr 数组的 arr.length 索引位置设置数组元素即可
newArr[newArr.length] = arr[i];
}
}在本博客中可以使用 push 方法 , 将筛选出的元素放入新数组的末尾 ;
2、代码示例
代码示例 :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<!-- 设置 meta 视口标签 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no,maximum-scale=1.0,minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>JavaScript</title>
<style></style>
<script>
// 数组筛选
// 声明空数组
var arr = [9, 5, 2, 7];
// 存放筛选后的元素的数组
var newArr = [];
// 通过 for 循环设置数组元素
for (var i = 0; i < arr.length; i++) {
if (arr[i] > 5) {
// 调用 push 方法 , 向数组中追加元素时
newArr.push(arr[i]);
}
}
// 打印数组
console.log(newArr);
</script>
</head>
<body>
</body>
</html>执行结果 :
