IT数码 购物 网址 头条 软件 日历 阅读 图书馆
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓ 		图片批量下载器
↓批量下载图片,美女图库↓ 		图片自动播放器
↓图片自动播放器↓ 		一键清除垃圾
↓轻轻一点,清除系统垃圾↓
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁
 
   -> JavaScript知识库 -> JavaScript参考手册 Array函数（更新中....）17094字 -> 正文阅读

[JavaScript知识库]JavaScript参考手册 Array函数（更新中....）17094字

作者：陈业贵 华为云享专家 51cto(专家博主 明日之星 TOP红人) 阿里云专家博主

文章目录

JavaScript concat() 方法

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	
	<script type="text/javascript">
	var hege = ["Cecilie", "Lone"];
	var stale = ["Emil", "Tobias", "Linus"];
	var kai = ["Robin"];
	var children=hege.concat(stale,kai);
	console.log(children);//这个函数是连接数组函数，把三个数组都连接起来。
	//规律：hege第一个，就代表开始的就是hage里面的元素。然后是stale。最后是kai
	</script>
</body>
</html>

在这里插入图片描述

JavaScript copyWithin() 方法

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<p>点击按钮复制数组的前面两个元素到后面两个元素上。</p>

<button onclick="myFunction()">点我</button>

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

<p><strong>注意:</strong> IE 11 及更早版本不支持 copyWithin() 方法。</p>
	<script type="text/javascript">
	var fruits = ["Banana", "Orange", "Apple", "Mango"];
	document.getElementById('demo').innerHTML=fruits;
	//获取p标签（<p id="demo"></p>），然后是把fruits数组里面的元素都放到p标签上面。fruits多少个元素就产生多少个p标签
	function myFunction()
	{
		document.getElementById('demo').innerHTML=fruits.copyWithin(2,0);//获取p标签。fruits.copyWithin(2,0);这段话的意思是：把开始两个元素复制到后面两个元素上面。
	}

	</script>
</body>
</html>

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<p>点击按钮复制数组的前面两个元素到后面两个元素上。</p>

<button onclick="myFunction()">点我</button>

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

<p><strong>注意:</strong> IE 11 及更早版本不支持 copyWithin() 方法。</p>
	<script type="text/javascript">
	var fruits = ["Banana", "Orange", "Apple", "Mango"];
	document.getElementById('demo').innerHTML=fruits;
	//获取p标签（<p id="demo"></p>），然后是把fruits数组里面的元素都放到p标签上面。fruits多少个元素就产生多少个p标签
	function myFunction()
	{
		document.getElementById('demo').innerHTML=fruits.copyWithin(2,1);//获取p标签。fruits.copyWithin(2,0);这段话的意思是:把下标1的元素放到下标2上面("Orange").在点击是下标3的位置上面是之前的下标1()"Orange"
	}

	</script>
</body>
</html>

在这里插入图片描述

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>

<p>点击按钮复制数组的前面两个元素到第三和第四个位置上。</p>

<button onclick="myFunction()">点我</button>

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

<p><strong>注意:</strong> IE 11 及更早版本不支持 copyWithin() 方法。</p>
	
<script>
var fruits = ["Banana", "Orange", "Apple", "Mango", "Kiwi", "Papaya"];
document.getElementById("demo").innerHTML = fruits;

function myFunction() {  
    document.getElementById("demo").innerHTML = fruits.copyWithin(2,0,2);//点击按钮复制数组的前面两个元素到第三和第四个位置上
}
</script>

</body>
</html>

在这里插入图片描述

JavaScript entries() 方法

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>

<h1>Array entries()</h1>

<p>从数组中创建一个可迭代的对象。</p>

<p>迭代对象的每个实体来自数组对应的元素。</p>

<p id="demo1"></p>
<p id="demo2"></p>
<p id="demo3"></p>
<p><strong>注意:</strong> IE11 及其更早的浏览器版本不支持 entries 方法。</p>

<script>
var fruits = ["Banana", "Orange", "Apple", "Mango"];
var x = fruits.entries();

document.getElementById("demo1").innerHTML = x.next().value;
document.getElementById("demo2").innerHTML = x.next().value;
document.getElementById("demo3").innerHTML = x.next().value;//意思就是：从头指针head指向下标0的位置。然后next()下标1.。。。
//entries() 方法返回一个数组的迭代对象，该对象包含数组的键值对 (key/value)。

//迭代对象中数组的索引值作为 key， 数组元素作为 value。
</script>

</body>
</html>

在这里插入图片描述

JavaScript Array every() 方法

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>

<p>点击按钮检测数组的所有元素是否都大于 18 :</p>
<button onclick="myFunction()">点我</button>
<p id="demo"></p>
<script>
var ages = [32, 33, 19, 40];
function checkAdult(age) {
    return age >= 18;
}
function myFunction() {
    document.getElementById("demo").innerHTML = ages.every(checkAdult);
}//这个函数的意思是：是否满足checkAdult的条件。ages里面的所有元素是否都满足checkAdult函数的条件。满足返回true。不满足返回false
</script>

</body>
</html>

在这里插入图片描述

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>

<p>最小年龄: <input type="number" id="ageToCheck" value="18"></p>
<button onclick="myFunction()">点我</button>
<p>是否所有年龄都符号条件? <span id="demo"></span></p>
<script>
var ages = [32, 33, 12, 40];
function checkAdult(age) {
    return age >= document.getElementById("ageToCheck").value;
}
function myFunction() {
    document.getElementById("demo").innerHTML = ages.every(checkAdult);//意思就是数组的所有元素是否都大于输入框中指定的数字，都大返回true。否则返回false
}
</script>

</body>
</html>

在这里插入图片描述

JavaScript fill() 方法

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>菜鸟教程(runoob.com)</title>
</head>
<body>

<p>点击按钮使用 “Runoob” 填充所有数组元素。</p>

<button onclick="myFunction()">点我</button>

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

<p><strong>注意:</strong> IE 11 及更早版本不支持 fill() 方法。</p>

<script>
var fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo").innerHTML = fruits;
//获取id为demo的标签，然后把数组中的元素填充进p标签中
function myFunction() {  
    document.getElementById("demo").innerHTML = fruits.fill("Runoob");
    //用Runoob把fruits数组里面的所有元素替换成Runoob
}
</script>

</body>
</html>

在这里插入图片描述

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>

<p>点击按钮填充 “Runoob” 到数组的最后两个元素。</p>

<button onclick="myFunction()">点我</button>

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

<p><strong>注意:</strong> IE 11 及更早版本不支持 fill() 方法。</p>

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

function myFunction() {  
    document.getElementById("demo").innerHTML = fruits.fill("Runoob",2,4);//意思就是从下标2开始到下标4把后面的所有元素替换成成Runoob
}
</script>

</body>
</html>

在这里插入图片描述

JavaScript Array filter() 方法

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>

<button onclick="myFunction()">点我</button>
<p id="demo"></p>
<script>
var ages = [32, 33, 16, 40];
function checkAdult(age) {
    return age >= 18;
}
function myFunction() {
    document.getElementById("demo").innerHTML = ages.filter(checkAdult);//点击按钮获取数组中大于 18 的所有元素。
}
</script>

</body>
</html>

在这里插入图片描述

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>

<p>最小年龄: <input type="number" id="ageToCheck" value="18"></p>
<button onclick="myFunction()">点我</button>
<p>所有大于指定数组的元素有？ <span id="demo"></span></p>
<script>
var ages = [32, 33, 12, 40];
function checkAdult(age) {
    return age >= document.getElementById("ageToCheck").value;
}
function myFunction() {
    document.getElementById("demo").innerHTML = ages.filter(checkAdult);//点击按钮返回数组 ages 中所有元素都大于输入框指定数值的元素。
}
</script>

</body>
</html>

在这里插入图片描述

JavaScript find() 方法

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>


<button onclick="myFunction()">点我</button>

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

<p><strong>注意:</strong> IE 11 及更早版本不支持 find() 方法。</p>

<script>
var ages = [3, 10, 18, 20];

function checkAdult(age) {
    return age >= 18;//条件
}

function myFunction() {
    document.getElementById("demo").innerHTML = ages.find(checkAdult);//点击按钮获取数组中年龄大于等于 18 的第一个元素。
}
</script>

</body>
</html>

在这里插入图片描述

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>

<p>点击按钮返回符合大于输入框中指定数字的数组元素。</p>
<p>最小年龄: <input type="number" id="ageToCheck" value="18"></p>
<button onclick="myFunction()">点我</button>

<p>值: <span id="demo"></span></p>

<p><strong>注意:</strong> IE 11 及更早版本不支持 findIndex() 方法。</p>

<script>
var ages = [4, 12, 16, 20];

function checkAdult(age) {
    return age >= document.getElementById("ageToCheck").value;
}

function myFunction() {
    document.getElementById("demo").innerHTML = ages.find(checkAdult);//找到大于输入框指定数字的第一个数组元素
}
</script>

</body>
</html>

在这里插入图片描述

JavaScript findIndex() 方法

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>


<button onclick="myFunction()">点我</button>

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

<p><strong>注意:</strong> IE 11 及更早版本不支持 findIndex() 方法。</p>

<script>
var ages = [3, 10, 18, 20];

function checkAdult(age) {
    return age >= 18;
}

function myFunction() {
    document.getElementById("demo").innerHTML = ages.findIndex(checkAdult);
    //点击按钮获取数组中年龄大于等于 18 的第一个元素索引位置。

}
</script>

</body>
</html>

在这里插入图片描述

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>

<p>点击按钮返回符合大于输入框中指定数字的数组元素索引。</p>
<p>最小年龄: <input type="number" id="ageToCheck" value="18"></p>
<button onclick="myFunction()">点我</button>

<p>索引: <span id="demo"></span></p>

<p><strong>注意:</strong> IE 11 及更早版本不支持 findIndex() 方法。</p>

<script>
var ages = [4, 12, 16, 20];

function checkAdult(age) {
    return age >= document.getElementById("ageToCheck").value;
}

function myFunction() {
    document.getElementById("demo").innerHTML = ages.findIndex(checkAdult);//大于或者等于输入框元素的第一个索引
}
</script>

</body>
</html>

在这里插入图片描述

JavaScript forEach() 方法

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>

<p>点击按钮列出数组的每个元素。</p>
<button onclick="numbers.forEach(myFunction)">点我</button>
<p id="demo"></p>

<script>
demoP = document.getElementById("demo");//获取id=demo
var numbers = [4, 9, 16, 25];

function myFunction(item, index) {//item:，index:索引
    demoP.innerHTML += "index[" + index + "]: " + item + "<br>"; 
    //输出下标+值,是以+=方式输出的。也就是都输出出来的方式
}//
</script>

</body>
</html>

在这里插入图片描述

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>

<p>点击按钮计算数组所有元素相加的总和。</p>
<button onclick="numbers.forEach(myFunction)">点我</button>

<p>数组元素总和：<span id="demo"></span></p>

<script>
var sum = 0;
var numbers = [65, 44, 12, 4];

function myFunction(item) {//item：值
    sum += item;//把value值全部累加，然后赋值p标签上面
    demo.innerHTML = sum;
}
</script>

</body>
</html>

在这里插入图片描述

JavaScript from() 方法

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
<p id="demo"></p>
	<script type="text/javascript">
	var myArr=Array.from("RUNOOB");//字符串,但是通过Array.from函数变成数组
	//myArr变成:['R','U','N','O','O','B']
	if(myArr instanceof Array)//如果myArr是数组类型的话
	{
document.getElementById("demo").innerHTML = myArr[0];//把第一个数组元素输出出来R
	}
	else
	{
		document.getElementById("demo").innerHTML = "该对象不是数组！";
	}
	</script>
</body>
</html>

在这里插入图片描述

JavaScript Array includes() 方法

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>

<script>
let site = ['runoob', 'google', 'taobao'];

document.write(site.includes('runoob')); //site这个数组里面包含runoob吗？包括返回true，否则false
// true 

document.write("<br>"); 
	
document.write(site.includes('baidu')); 
// false
</script>

</body>
</html>

在这里插入图片描述

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>

<script>
var arr = ['a', 'b', 'c'];
 
console.log(arr.includes('c', 3));   //false,字符c的下标是2，如果第二个参数是3的话，3大于或者等于c的下标2就返回false.
console.log(arr.includes('c', 100)); // false
</script>
</body>
</html>

在这里插入图片描述

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>

<script>
var arr = ['a', 'b', 'c'];
 
console.log(arr.includes('a', -100)); // true,如果第二个参数是负数。就这个数组全部都会被搜素

</script>
</body>
</html>

在这里插入图片描述

JavaScript Array indexOf() 方法

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>

<p id="demo">单击按钮显示“苹果”的位置：</p>
<button onclick="myFunction()">点我</button>
<script>
function myFunction(){
	var fruits = ["香蕉", "橙子", "苹果", "甜瓜"];
	var a = fruits.indexOf("苹果")//苹果的下标是啥？2
	var x=document.getElementById("demo");//获取p标签，然后是赋值给p标签
	x.innerHTML=a;
}
</script>
<p><b>注意:</b>indexOf方法是在JavaScript 1.6中引入的,在IE 8或更早的版本中不可用。</p>

</body>
</html>

在这里插入图片描述

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>

<script type="text/javascript">
var fruits=["Banana","Orange","Apple","Mango","Banana","Orange","Apple"];
var a = fruits.indexOf("Apple",4);//从下标4-1=下标3开始查找 
console.log(a);
</script>

</body>
</html>

在这里插入图片描述

JavaScript isArray() 方法

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>

<p>点击按钮检测 "fruits" 变量是否为一个数组。</p>

<button onclick="myFunction()">点我</button>

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

<script>
function myFunction() {
    var fruits = ["Banana", "Orange", "Apple", "Mango"];
    var x = document.getElementById("demo");
    //获取p标签,这个<p id="demo"></p>
    x.innerHTML = Array.isArray(fruits);
   //Array.isArray()这个函数的意思是判断fruits是不是数组，是数组返回true，否则false
}
</script>


</body>
</html>

在这里插入图片描述

JavaScript join() 方法

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</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");
	//获取p标签
	x.innerHTML=fruits.join();//把数组里面的所有元素变成一个字符串.然后赋值给p标签
}
</script>

</body>
</html>

在这里插入图片描述

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</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(" and ");//把数组变成字符串，逗号用 and 代替
}
</script>

</body>
</html>

在这里插入图片描述

JavaScript keys() 方法

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>

<h1>Array keys()</h1>

<p>从数组中创建一个可迭代的对象，该对象包含数组的键。</p>

<p id="demo1"></p>
<p id="demo2"></p>
<p id="demo3"></p>
<p><strong>注意:</strong> IE11 及其更早的浏览器版本不支持 keys 方法。</p>

<script>
var fruits = ["Banana", "Orange", "Apple", "Mango"];//一个数组
var x = fruits.keys();//取出fruits数组的!!!键名(下标)!!!赋值给x。
document.getElementById("demo1").innerHTML = x.next().value;//.value也就是下标啦
//从head开始，next是第一个元素。也就是下标0...
document.getElementById("demo2").innerHTML = x.next().value;
document.getElementById("demo3").innerHTML = x.next().value;
</script>

</body>
</html>

在这里插入图片描述

JavaScript Array lastIndexOf() 方法

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>

<p id="demo">单击按钮显示“苹果”最后一次出现的位置：</p>
<button onclick="myFunction()">点我</button>
<script>
function myFunction(){
	var fruits=["香蕉","橙子","苹果","甜瓜"];
	var a=fruits.lastIndexOf("苹果")//查找这个fruits数组里面最后的苹果元素的下标
	var x=document.getElementById("demo");//获取p标签
	x.innerHTML=a;//赋值给p标签
}
</script>

</body>
</html>

在这里插入图片描述

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>

<p id="demo">单击按钮显示从位置4开始查找“苹果”的最后一次出现的位置：</p>
<button onclick="myFunction()">点我</button>
<script>
function myFunction(){
	var fruits=["香蕉","橙子","苹果","甜瓜","香蕉","橙子","苹果","甜瓜"];
	var a=fruits.lastIndexOf("苹果",4)//在fruits数组中把下标4当做下标0开始对比.苹果再下标2上面
	var x=document.getElementById("demo");//获取p标签
	x.innerHTML=a;//把值放到p标签里面
}
</script>

</body>
</html>

在这里插入图片描述

JavaScript Array map() 方法

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>

<p>点击按钮获取数组元素的平方根。</p>
<button onclick="myFunction()">点我</button>
<p id="demo"></p>
<script>
var numbers = [4, 9, 16, 25];
function myFunction() {
    x = document.getElementById("demo")//js获取p标签.<p id="demo"></p>

    x.innerHTML = numbers.map(Math.sqrt);//算出numbers数组每一个元素的平方根.返回一个新数组
    //注意： map() 不会对空数组进行检测。
	//注意： map() 不会改变原始数组。
}
</script>

</body>
</html>

在这里插入图片描述

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>

<p>点击按钮将数组中的每个元素乘于输入框指定的值，并返回新数组。</p>
<p>最小年龄: <input type="number" id="multiplyWith" value="10"></p>
<button onclick="myFunction()">点我</button>
<p>新数组: <span id="demo"></span></p>
<script>
var numbers = [65, 44, 12, 4];
function multiplyArrayElement(num) {
    return num * document.getElementById("multiplyWith").value;// id="multiplyWith"依次乘以numbers 数组里面的元素
}
function myFunction() {
    document.getElementById("demo").innerHTML = numbers.map(multiplyArrayElement);//把65, 44, 12, 4依次传进multiplyArrayElement函数中.
}
</script>

</body>
</html>

JavaScript pop() 方法

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>

<p id="demo">单击按钮删除数组的最后一个元素。</p>
<button onclick="myFunction()">点我</button>
<script>
var fruits = ["Banana", "Orange", "Apple", "Mango"];
function myFunction(){
	fruits.pop();//移除fruits数组中的最后一个元素
	var x=document.getElementById("demo");//获取id为demo的p标签.
	x.innerHTML=fruits;//移除后赋值给p标签。操作的是原数组
}
</script>

</body>
</html>

在这里插入图片描述

JavaScript push() 方法

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</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");//获取id为demo的p标签
	x.innerHTML=fruits;//赋值给p标签输出出来
}
</script>

</body>
</html>

在这里插入图片描述

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>

<p id="demo">单击按钮给数组添加新的元素:</p>
<button onclick="myFunction()">点我</button>
<script>
var fruits = ["Banana", "Orange", "Apple", "Mango"];
function myFunction(){
	fruits.push("Kiwi","Lemon","Pineapple")//把三个元素依次添加到fruits的末尾。
	var x=document.getElementById("demo");//获取id为demo的p标签
	x.innerHTML=fruits;//输出出来
}
</script>

</body>
</html>

在这里插入图片描述

JavaScript reduce() 方法（计算执行流程啦）

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>

<p>点击按钮计算数组元素相加后的总和。</p>
<button onclick="myFunction()">点我</button>

<p>数组元素总和: <span id="demo"></span></p>

<script>
var numbers = [65, 44, 12, 4];

function getSum(total, num) {
    return total + num;
}
function myFunction(item) {
    document.getElementById("demo").innerHTML = numbers.reduce(getSum);
    //第一次进入getSum里面 : return 65+44;然后返回给reduce哪里,在进入getSum函数里面
    //第二次进入getSum里面 ：return 109+12返回给reduce。在进入getSum函数里面
    //第三次进入getSum里面 : return 121+4.返回给reduce结束.
}
</script>

</body>
</html>

在这里插入图片描述

JavaScript reduceRight() 方法

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>

<p>点击按钮计算数组元素的总和。</p>
<button onclick="myFunction()">点我</button>

<p>数组元素总和: <span id="demo"></span></p>

<script>
var numbers = [65, 44, 12, 4];

function getSum(total, num) {
    return total + num;
}
function myFunction(item) {
    document.getElementById("demo").innerHTML = numbers.reduceRight(getSum);
    //执行流程：从右边往左边计算的啦.
    //getsum里面:4+12
    //getSum里面：16+44
    //getSum里面：60+65返回结束.
}
</script>

</body>
</html>

在这里插入图片描述

JavaScript reverse() 方法

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</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");//获取p标签
	x.innerHTML=fruits;//颠倒数组中元素的顺序：
}//赋值给p标签
</script>

</body>
</html>

在这里插入图片描述
  JavaScript知识库 最新文章
ES6的相关知识点
react 函数式组件 & react其他一些总结
Vue基础超详细
前端JS也可以连点成线（Vue中运用 AntVG6）
Vue事件处理的基本使用
Vue后台项目的记录 （一）
前后端分离vue跨域，devServer配置proxy代理
TypeScript
初识vuex
vue项目安装包指令收集
上一篇文章      下一篇文章      查看所有文章
加:2022-08-06 10:34:49  更:2022-08-06 10:37:34 
 
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁

360图书馆 购物 三丰科技 阅读网 日历 万年历 2025年1日历 -2025/1/11 12:59:13-

图片自动播放器
↓图片自动播放器↓ 		TxT小说阅读器
↓语音阅读,小说下载,古典文学↓ 		一键清除垃圾
↓轻轻一点,清除系统垃圾↓ 		图片批量下载器
↓批量下载图片,美女图库↓
  网站联系: qq:121756557 email:121756557@qq.com  IT数码