首页 > 编程语言 >JavaScript 数组方法

JavaScript 数组方法

时间:2024-08-07 11:59:27浏览次数:14  
标签:Apple JavaScript Orange 数组 fruits var 方法 Banana

JavaScript 数组的力量隐藏在数组方法中。

把数组转换为字符串

JavaScript 方法 toString() 把数组转换为数组值(逗号分隔)的字符串。

join() 方法也可将所有数组元素结合为一个字符串。

它的行为类似 toString(),但是您还可以规定分隔符

<p id="demo"></p>

<script>
var fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo").innerHTML = fruits.join("· ");
</script>

</body>
</html>
//Banana . Orange. Apple . Mango

Popping 和 Pushing

在处理数组时,删除元素和添加新元素是很简单的。

Popping 和 Pushing 指的是:

从数组弹出项目,或向数组推入项目。

Popping

pop() 方法从数组中删除最后一个元素:

<!DOCTYPE html>
<html>
<body>

<p id="demo1"></p>
<p id="demo2"></p>

<script>
var fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo1").innerHTML = fruits;
fruits.pop();
document.getElementById("demo2").innerHTML = fruits;
</script>

</body>
</html>

pop() 方法返回“被弹出”的值:

<!DOCTYPE html>
<html>
<body>


<p id="demo1"></p>
<p id="demo2"></p>
<p id="demo3"></p>

<script>
var fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo1").innerHTML = fruits;
document.getElementById("demo2").innerHTML = fruits.pop();
document.getElementById("demo3").innerHTML = fruits;
</script>

</body>
</html>

Pushing

push() 方法(在数组结尾处)向数组添加一个新的元素

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.push("Kiwi");       //  向 fruits 添加一个新元素

push() 方法返回新数组的长度:

<!DOCTYPE html>
<html>
<body>

<button onclick="myFunction()">点击</button>
<button onclick="myFunction()">试一试</button>

<p id="demo"></p>
<P id="demo"></P>
<script>
    var fruits=["banana","orange","apple","mangp"];
    document.getElementById("demo").innerHTML = fruits;

function myFunction() {
  fruits.push("Kiwi");
  document.getElementById("demo").innerHTML = fruits;
}
</script>

</body>
</html>

位移元素

位移与弹出等同,但处理首个元素而不是最后一个。

shift() 方法会删除首个数组元素,并把所有其他元素“位移”到更低的索引。

shift() 方法返回被“位移出”的字符串:

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.shift();             // 返回 "Banana"

unshift() 方法(在开头)向数组添加新元素,并“反向位移”旧元素:

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.unshift("Lemon");    // 向 fruits 添加新元素 "Lemon"

unshift() 方法返回新数组的长度。

实例

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.unshift("Lemon");    // 返回 5

更改元素

通过使用它们的索引号来访问数组元素:

数组索引(下标)以 0 开始。[0] 是第一个数组元素,[1] 是第二个,[2] 是第三个

length 属性提供了向数组追加新元素的简易方法:

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits[fruits.length] = "Kiwi";          // 向 fruits 追加 "Kiwi"

删除元素

既然 JavaScript 数组属于对象,其中的元素就可以使用 JavaScript delete 运算符来删除

var fruits = ["Banana", "Orange", "Apple", "Mango"];
delete fruits[0];           // 把 fruits 中的首个元素改为 undefined

使用 delete 会在数组留下未定义的空洞。请使用 pop()shift() 取而代之。

拼接数组

splice() 方法可用于向数组添加新项:

<!DOCTYPE html>
<html>
<body>

<button onclick="myFunction()">试一试</button>

<p id="demo1"></p>
<p id="demo2"></p>

<script>
var fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo1").innerHTML = "原数组:<br>" + fruits;
function myFunction() {
  fruits.splice(2, 0, "Lemon", "Kiwi");
  document.getElementById("demo2").innerHTML = "新数组:<br>" + fruits;
}
</script>

</body>
</html>

第一个参数(2)定义了应添加新元素的位置(拼接)。

第二个参数(0)定义应删除多少元素。

其余参数(“Lemon”,“Kiwi”)定义要添加的新元素。

splice() 方法返回一个包含已删除项的数组:

<!DOCTYPE html>
<html>
<body>

<button onclick="myFunction()">试一试</button>

<p id="demo1"></p>
<p id="demo2"></p>
<p id="demo3"></p>

<script>
var fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo1").innerHTML = "原数组:<br> " + fruits;

function myFunction() {
  var removed = fruits.splice(2, 2, "Lemon", "Kiwi"); 
  document.getElementById("demo2").innerHTML = "新数组:<br>" + fruits;
  document.getElementById("demo3").innerHTML = "已删除项:<br> " + removed; 
}
</script>

</body>
</html>

使用 splice() 来删除元素

通过聪明的参数设定,您能够使用 splice() 在数组中不留“空洞”的情况下移除元素

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.splice(0, 1);        // 删除 fruits 中的第一个元素

第一个参数(0)定义新元素应该被添加(接入)的位置。

第二个参数(1)定义应该删除多个元素。

其余参数被省略。没有新元素将被添加

合并(连接)数组

concat() 方法通过合并(连接)现有数组来创建一个新数组:

实例(合并两个数组)

var myGirls = ["Cecilie", "Lone"];
var myBoys = ["Emil", "Tobias", "Linus"];
var myChildren = myGirls.concat(myBoys);   // 连接 myGirls 和 myBoys

concat() 方法不会更改现有数组。它总是返回一个新数组。

concat() 方法可以使用任意数量的数组参数:

实例(合并三个数组)

var arr1 = ["Cecilie", "Lone"];
var arr2 = ["Emil", "Tobias", "Linus"];
var arr3 = ["Robin", "Morgan"];
var myChildren = arr1.concat(arr2, arr3);   // 将arr1、arr2 与 arr3 连接在一起

concat() 方法也可以将值作为参数:

实例(将数组与值合并)

var arr1 = ["Cecilie", "Lone"];
var myChildren = arr1.concat(["Emil", "Tobias", "Linus"]);

裁剪数组

slice() 方法用数组的某个片段切出新数组。

本例从数组元素 1 ("Orange")开始切出一段数组:

实例

var fruits = ["Banana", "Orange", "Lemon", "Apple", "Mango"];
var citrus = fruits.slice(1);

slice() 方法创建新数组。它不会从源数组中删除任何元素。

本例从数组元素 3 ("Apple")开始切出一段数组:

实例

var fruits = ["Banana", "Orange", "Lemon", "Apple", "Mango"];
var citrus = fruits.slice(3);

slice() 可接受两个参数,比如 (1, 3)。

该方法会从开始参数选取元素,直到结束参数(不包括)为止。

实例

var fruits = ["Banana", "Orange", "Lemon", "Apple", "Mango"];
var citrus = fruits.slice(1, 3);

如果结束参数被省略,比如第一个例子,则 slice() 会切出数组的剩余部分。

实例

var fruits = ["Banana", "Orange", "Lemon", "Apple", "Mango"];
var citrus = fruits.slice(2);

自动 toString()

如果需要原始值,则 JavaScript 会自动把数组转换为字符串。下面两个例子将产生相同的结果:

实例

var fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo").innerHTML = fruits.toString();

所有 JavaScript 对象都拥有 toString() 方法。

标签:Apple,JavaScript,Orange,数组,fruits,var,方法,Banana
From: https://blog.csdn.net/2301_78133614/article/details/140980425

相关文章

  • JavaScript 中布尔值的创建
    <!DOCTYPEhtml><htmllang="en"><body><script> //CreateaBooleanobjectusingthenewkeywordandtheBoolean()constructor. varmyBoolean1=newBoolean(false);//Usingnewkeyword. console.log(typeofmyBoolean1);......
  • rasadhlp.dll是什么文件?rasadhlp.dll缺少之后的修复方法
    rasadhlp.dll是Windows操作系统中一个重要的动态链接库(DynamicLinkLibrary)文件,主要与远程访问支持服务有关。这个文件包含了用于帮助远程访问服务(RAS)和其他网络连接功能执行所需的一系列函数和过程。例如,它可能涉及到了解和处理网络连接请求、配置网络设置或管理拨号网络等......
  • jQuery resize() 方法
    定义和用法当调整浏览器窗口大小时,发生resize事件。resize()方法触发resize事件,或规定当发生resize事件时运行的函数。示例:<!DOCTYPEhtml><html><head><metacharset="utf-8"><title>菜鸟教程(runoob.com)</title><scriptsrc="https://cdn.stat......
  • 请遍历一个数组 , 输出数组的各个元素值。
    1publicclassshuzu21{2//编写一个main方法3publicstaticvoidmain(String[]args){45//编写一个数组,输出数组的各个元素值6int[][]map={{0,0,1},{1,1,1},{1,1,3}};7//使用方法完成输出,创建MyTools对象89......
  • 【数值计算方法】线性方程组迭代算法的Python实现
    线性方程组迭代算法的Python实现jacobi迭代法defJacobiIter(A:np.ndarray,b:np.ndarray,tol:float=1e-5,maxIter:int=100)->Tuple[np.ndarray,np.ndarray]:"""使用Jacobi迭代法求解线性方程组Ax=binput:......
  • 强化学习性能测试方法:取最后10个epoch的testing epoch的均值 —— 强化学习中的一种性
    参考:https://www.cnblogs.com/devilmaycry812839668/p/17813337.htmlTheActor-MimicandexpertDQNtrainingcurvesfor100trainingepochsforeachofthe8games.Atrainingepochis250,000framesandforeachtrainingepochweevaluatethenetworkswith......
  • Cython将Numpy数组转为自定义结构体
    技术背景前面我们写过几篇关于Cython的文章,例如Cython计算谐振势、Cython与C语言的结合、Cython调用CUDAKernel函数。Cython有着非常Pythonic的编程范式,又具备着接近于C语言的性能,因此在很多对于性能有要求的Python软件中都会使用到Cython的性能优化。Cython的基本工作流程是,先......
  • JAVA基础:String的常用方法
    目录前言string的常用方法前言上一篇我们学习了string字符串的基本用法,以及string字符串的内部机制,而string也是一个类,他的内部也有很多已经给我们封装好的,方便我们操作字符串的方法,我们是不可能将内部的方法全部记住的,我们只要知道方法是怎么使用的有什么样的效果就行,......
  • pytorch和deep learning技巧和bug解决方法短篇收集
    有一些几句话就可以说明白的观点或者解决的的问题,小虎单独收集到这里。torch.hub.loadhowdoesitwork下载预训练模型再载入,用程序下载链接可能失效。model=torch.hub.load('ultralytics/yolov5','yolov5s')model=torch.hub.load('ultralytics/yolov3','yolov3......
  • Java中对数组的学习
    数组的概念目录数组的概念声明数组变量创建数组处理数组数组作为函数的参数数组作为函数的返回值数组对于每一门编程语言来说都是重要的数据结构之一,当然不同语言对数组的实现及处理也不尽相同。Java语言中提供的数组是用来存储固定大小的同类型元素。你可以声明一个数组变......