JavaScript Array 数组对象实例集合

已于 2023-03-10 20:25:19 修改
阅读量584 收藏 1
点赞数 1
分类专栏： JavaScript 编程基础 文章标签： javascript 前端 html Array数组 实例集合
于 2023-03-10 20:23:09 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_62617719/article/details/129377435
版权

文章目录

JavaScript Array 数组对象实例集合

在这里插入图片描述

创建数组

  • 源码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>梁辰兴实例</title>
</head>
<body>
<script>
var i;
var mycars = new Array();
mycars[0] = "Saab";
mycars[1] = "Volvo";
mycars[2] = "BMW";
for (i=0;i<mycars.length;i++){
	document.write(mycars[i] + "<br>");
}
</script>
</body>
</html>
  • 运行效果
    在这里插入图片描述

合并两个数组 - concat()

  • 源码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>梁辰兴实例</title>
</head>
<body>
<script>
var hege = ["Cecilie", "Lone"];
var stale = ["Emil", "Tobias", "Linus"];
var kai = ["Robin"];
var children = hege.concat(stale,kai);
document.write(children);
</script>
</body>
</html>
  • 运行效果
    在这里插入图片描述

合并三个数组 - concat()

  • 源码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>梁辰兴实例</title>
</head>
<body>
<script>
var parents = ["Jani", "Tove"];
var brothers = ["Stale", "Kai Jim", "Borge"];
var children = ["Cecilie", "Lone"];
var family = parents.concat(brothers, children);
document.write(family);
</script>
</body>
</html>
  • 运行效果
    在这里插入图片描述

用数组的元素组成字符串 - join()

  • 源码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>梁辰兴实例</title>
</head>
<body>
<p id="demo">点击按钮将数组作为字符串输出。</p>
<button onclick="myFunction()">点我</button>
<script>
function myFunction(){
	var fruits = ["Banana", "Orange", "Apple", "Mango"];
	var x=document.getElementById("demo");
	x.innerHTML=fruits.join();
}
</script>
</body>
</html>
  • 运行效果
    在这里插入图片描述
    在这里插入图片描述

删除数组的最后一个元素 - pop()

  • 源码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>梁辰兴实例</title>
</head>
<body>
<p id="demo">单击按钮删除数组的最后一个元素。</p>
<button onclick="myFunction()">点我</button>
<script>
var fruits = ["Banana", "Orange", "Apple", "Mango"];
function myFunction(){
	fruits.pop();
	var x=document.getElementById("demo");
	x.innerHTML=fruits;
}
</script>
</body>
</html>
  • 运行效果
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述

数组的末尾添加新的元素 - push()

  • 源码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>梁辰兴实例</title>
</head>
<body>
<p id="demo">单击按钮给数组添加新的元素。</p>
<button onclick="myFunction()">点我</button>
<script>
var fruits = ["Banana", "Orange", "Apple", "Mango"];
function myFunction(){
	fruits.push("Kiwi")
	var x=document.getElementById("demo");
	x.innerHTML=fruits;
}
</script>
</body>
</html>
  • 运行效果
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述

反转一个数组中的元素的顺序 - reverse()

  • 源码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>梁辰兴实例</title>
</head>
<body>
<p id="demo">单击按钮将数组反转排序。</p>
<button onclick="myFunction()">点我</button>
<script>
var fruits = ["Banana", "Orange", "Apple", "Mango"];
function myFunction(){
	fruits.reverse();
	var x=document.getElementById("demo");
	x.innerHTML=fruits;
}
</script>
</body>
</html>
  • 运行效果
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述

删除数组的第一个元素 - shift()

  • 源码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>梁辰兴实例</title>
</head>
<body>
<p id="demo">单击按钮删除数组的第一个元素。</p>
<p id="demo2"></p>
<button onclick="myFunction()">点我</button>
<script>
var fruits = ["Banana", "Orange", "Apple", "Mango"];
function myFunction(){
	var delell = fruits.shift();
	var x=document.getElementById("demo");
	x.innerHTML= '删除后数组为：' +  fruits;
	document.getElementById("demo2").innerHTML= '删除的元素是：' +  delell;
}
</script>
</body>
</html>
  • 运行效果
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述

从一个数组中的选择元素 - slice()

  • 源码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>梁辰兴实例</title>
</head>
<body>
<p id="demo">点击按钮截取数组下标 1 到 2 的元素。</p>
<button onclick="myFunction()">点我</button>
<script>
function myFunction(){
	var fruits = ["Banana", "Orange", "Lemon", "Apple", "Mango"];
	var citrus = fruits.slice(1,3);
	var x=document.getElementById("demo");
	x.innerHTML=citrus;
}
</script>
</body>
</html>
  • 运行效果
    在这里插入图片描述
    在这里插入图片描述

数组排序（按字母顺序升序）- sort()

  • 源码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>梁辰兴实例</title>
</head>
<body>
<p id="demo">单击按钮升序排列数组。</p>
<button onclick="myFunction()">点我</button>
<script>
function myFunction(){
	var fruits = ["Banana", "Orange", "Apple", "Mango"];
	fruits.sort();
	var x=document.getElementById("demo");
	x.innerHTML=fruits;
}
</script>
</body>
</html>
  • 运行效果
    在这里插入图片描述
    在这里插入图片描述

数字排序（按数字顺序升序）- sort()

  • 源码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>梁辰兴实例</title>
</head>
<body>
<p id="demo">单击按钮升序排列数组。</p>
<button onclick="myFunction()">点我</button>
<script>
function myFunction(){
	var points = [40,100,1,5,25,10];
	points.sort(function(a,b){return a-b});
	var x=document.getElementById("demo");
	x.innerHTML=points;
}
</script>
</body>
</html>
  • 运行效果
    在这里插入图片描述
    在这里插入图片描述

数字排序（按数字顺序降序）- sort()

  • 源码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>梁辰兴实例</title>
</head>
<body>
<p id="demo">单击按钮降序排列数组。</p>
<button onclick="myFunction()">点我</button>
<script>
function myFunction(){
	var points = [40,100,1,5,25,10];
	points.sort(function(a,b){return b-a});
	var x=document.getElementById("demo");
	x.innerHTML=points;
}
</script>
</body>
</html>
  • 运行效果
    在这里插入图片描述
    在这里插入图片描述

在数组的第2位置添加一个元素 - splice()

  • 源码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>梁辰兴实例</title>
</head>
<body>
<p id="demo">点击按钮向数组添加元素。</p>
<button onclick="myFunction()">点我</button>
<script>
function myFunction(){
	var fruits = ["Banana", "Orange", "Apple", "Mango"];
	fruits.splice(2,0,"Lemon","Kiwi");
	var x=document.getElementById("demo");
	x.innerHTML=fruits;
}
</script>
</body>
</html>
  • 运行效果
    在这里插入图片描述
    在这里插入图片描述

转换数组到字符串 -toString()

  • 源码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>梁辰兴实例</title>
</head>
<body>
<p id="demo">点击按钮将数组转为字符串并返回。</p>
<button onclick="myFunction()">点我</button>
<script>
function myFunction(){
	var fruits = ["Banana", "Orange", "Apple", "Mango"];
	var str = fruits.toString();
	var x=document.getElementById("demo");
	x.innerHTML= str;
}
</script>
</body>
</html>
  • 运行效果
    在这里插入图片描述
    在这里插入图片描述

在数组的开头添加新元素 - unshift()

  • 源码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>梁辰兴实例</title>
</head>
<body>
<p id="demo">单击按钮在数组中插入元素。</p>
<button onclick="myFunction()">点我</button>
<script>
function myFunction(){
	var fruits = ["Banana", "Orange", "Apple", "Mango"];
	fruits.unshift("Lemon","Pineapple");
	var x=document.getElementById("demo");
	x.innerHTML=fruits;
}
</script>
<p><b>注意:</b> unshift()方法不能用于 Internet Explorer 8 之前的版本，插入的值将被返回成<em> undefined </em>。</p>
</body>
</html>
  • 运行效果
    在这里插入图片描述

在这里插入图片描述

梁辰兴
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
JS基础：数组及案例
weixin_49555741的博客
04-26 830
1. 数组概念 一个变量只能存储一个值，多个变量可用使用数组（arry）存储 数组是一组数据的集合，其中每个数据被称为元素，在数组中可以存放任意类型的元素 数组是一种数据存储在单个变量名下的方式 2. 创建数组 JS中创建数组有两种方式： 用 new 创建 用数组字面量创建（常用） 2.1 用 new 创建 var arr =new Array(); 注意 A要大写 到创建对象时会使用到 2.2 用 数组字面 [ ] 创建 var arr = []; //创建一个空的 arr .
JavaScript -- 数组常用方法及示例代码总结
Qlz的博客
12-06 617
数组常见方法总结，包括： 1 Array.isArray() 2 at() 3 concat() 4 indexOf() 5 lastIndexOf() 6 join() 7 slice() 8 push() 9 pop() 10 unshift() 11 shift() 12 splice() 13 reverse() 14 sort() 15 forEach() 16 filter() 17 map() 18 reduce()
对象数组的示例
风暴计划
04-18 675
对象数组的示例1、需求：我有5个学生，请把这5个学生的信息存储在数组中，并遍历数组，获取每一个学生信息。学生：Student成员变量：name、age构造方法：无参、有参成员方法：getXxx()/setXxx()存储学生的数组是个啥样子的？分析：    A：创建学生类    B：创建学生数组（对象数组）    C：创建5个学生对象，并赋值    D：把C中的学生对象元素放到学生数组中去。    ...
js（四）——ECMAScript基础之数组
C-A-L-D
02-03 174
数组的定义 数组是一个有序的列表，可以在数组中存放任意的数据，并且数组的长度可以动态的调整。 通过数组字面量创建数组 // 创建一个空数组 var arr1 = []; // 创建一个包含3个数值的数组，多个数组项以逗号隔开 var arr2 = [1, 3, 4]; // 创建一个包含2个字符串的数组 var arr3 = ['a', 'c']; ​ // 可以通过数组的len...
java script 遍历数组_Java script-数组与字符串方法
weixin_42425075的博客
02-16 296
数组：1.concat()功能：用于连接两个或多个数组，该方法不会改变现有的数组，而仅仅会返回被连接数组的一个副本。参数：concat(data1,data2,...);所有参数可选，要合并的数据；data为数组时，将data合并到原数组；data为具体数据时直接添加到原数组尾部；省略时创建原数组的副本。2.join()功能：根据指定分隔符将数组中的所有元素放入一个字符串，并返回这个字符串。参数：...
Js的Array数组对象详解
10-22
在本文中，我们将深入探讨Js的Array数组对象，包括它的介绍、定义方式、属性以及一系列实用的实例方法。 1. **介绍** - **说明**：数组是一个有序的值集合，每个值被称为元素，每个元素都有一个位置，由数字表示，...
JavaScript数组对象Array.pdf
07-11
JavaScript中的Array对象是编程语言中处理有序数据集合的关键部分，它允许你在单个变量中存储多个值。在JavaScript中，数组是一种动态数据结构，这意味着在创建后，你可以随时添加、删除或修改数组的元素。 创建...
JavaScript Array对象详解
10-22
JavaScript中的Array对象是...通过这些实例和方法，我们可以灵活地创建、操作和管理JavaScript中的数组对象。了解并熟练掌握这些知识点对于JavaScript开发者来说至关重要，因为数组在许多场景下都是数据处理的核心。
浅谈JavaScript Array对象
12-01
 数组是值的有序集合。每个值叫做一个元素，而每个元素在数组中有一个位置，以数字表示，称为索引。JavaScript数组是无类型：数组元素可以是任意类型，并且同一个数组中的不同元素也可能有不同的类型。 –...
js|Array数组(含数组常用方法)
执念斩长河
05-20 1317
引言 描述一组数的情况就需要用到数组，这部分其实跟java类似 数组的定义和访问数组项 定义数组 var scoreArr=[96,97,76,87,87,90,91,100,75,56]; 访问数组项 数组项的更改 数组的遍历 数组的常见方法
JS数组去重的6种方法完整实例
10-17
主要介绍了JS数组去重的6种方法,结合完整实例形式总结分析了javascript针对数组去除重复项的相关原理与操作技巧,需要的朋友可以参考下
JS数组例子
05-04
Javascript数组例子，JS数组例子
js中数组的例子
代码在路上的博客
11-10 513
例1：for循环遍历数组 var arr=[10,20,30,40]; for(var i=0;i<arr.length;i++){ console.log(arr[i]); } 例2：求数组中所有元素的和 var arr=[10,20,30,40]; var sum=0; for(var i=0;i<arr.length;i++){ sum+=arr[i]; } console.log(sum); 例3：求数组中所有元素的最大值 var arr=[3,55,23,100,3
javascript对象——数组对象
m0_72313625的博客
08-16 3620
添加数组元素：push() unshift() 删除数组元素：pop() shift() 删除或替换现有元素或者原地添加新的元素来修改数组 splice(star,num,insert) 截取指定开始位置到结束位置的字符串 slice 用于合并两个或多个数组 concat() 获取索引值的方法(去重时可以考虑使用） indexOf(数组元素,起始位置) lastIndexOf(数组元素，起始位置) ...
JavaScript基础篇——数组案例合集
m0_47182519的博客
11-08 455
出场四次洒出
Java中对象数组的使用
热门推荐
欢迎来到Gorit的博客
04-11 3万+
给你一组学生的数据，比如姓名，性别，学号，成绩，然后根据成绩排序，这时你就得用对象数组啦
js深入学习专题 ------ 类数组的对象和数组对象的区别和联系
淡淡忧桑
11-16 3264
类数组对象：（看例子）            var a = {};        var i =10; while(i  a[i] = i*i; i++; } 数组对象呢： var b = []; var i =0; while(i b[i] = i*i; i++; } 其实你从源代码上面去看也没有什么大的区
Java对象数组实例
weixin_42312422的博客
10-11 1013
对象数组 题目：找出学生中成绩最高的人 需求： ​ 一个班级有5个学生，每个学生有学号，姓名，数学成绩，语文成绩。要求使用对象数组找出5个学生中总成绩最高的学生，输出该学生的姓名和总成绩。 分析过程： （1）有5个学生，每个学生都有相同类型的属性，有学号，姓名，数学成绩，语文成绩。用数组存储数据，创建五个学生对象。 （2）设计一个学生类，在类中定义学号、姓名、数学成绩、语文成绩四个成员变量。设计一个学生类数组，存储5个学生对象。 编码过程： （1）创建学生类，定义private的学号、姓名、数学成绩、语文成
对象数组的使用案例
weixin_42133768的博客
07-26 2281
/**  *功能：对象数组的使用   */ package com.test4; import java.util.Scanner; public class Shuzu2 {         public static void main(String[] args) {              //定义一个可以存放四只狗的对象数组             Dog dogs[]=new...
javascript中的对象、数组、变量、流程控制
最新发布
04-29
JavaScript 中的对象是一种无序的键值对集合。对象可以通过字面量或构造函数创建。对象的属性可以是基本类型或其他对象。 ### 对象字面量 对象字面量是最常用的创建对象的方式。它使用花括号来包含对象的属性和值...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

梁辰兴

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值