文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布
首页
学习
活动
专区
圈层
工具
MCP广场
返回腾讯云官网
社区首页 >专栏 >JavaScript参考手册 Array函数（更新中....）

JavaScript参考手册 Array函数（更新中....）

作者头像
贵哥的编程之路
发布于 2022-08-15 13:29:31
发布于 2022-08-15 13:29:31
1K00
代码可运行
举报
文章被收录于专栏：用户7873631的专栏用户7873631的专栏
运行总次数：0
代码可运行

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

文章目录

JavaScript concat() 方法

代码语言：javascript
代码运行次数：0
运行
复制
<!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() 方法

代码语言：javascript
代码运行次数：0
运行
复制
<!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>
代码语言：javascript
代码运行次数：0
运行
复制
<!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>
代码语言：javascript
代码运行次数：0
运行
复制
<!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() 方法

代码语言：javascript
代码运行次数：0
运行
复制
<!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() 方法

代码语言：javascript
代码运行次数：0
运行
复制
<!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>
代码语言：javascript
代码运行次数：0
运行
复制
<!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() 方法

代码语言：javascript
代码运行次数：0
运行
复制
<!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>
代码语言：javascript
代码运行次数：0
运行
复制
<!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() 方法

代码语言：javascript
代码运行次数：0
运行
复制
<!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>
代码语言：javascript
代码运行次数：0
运行
复制
<!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() 方法

代码语言：javascript
代码运行次数：0
运行
复制
<!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>
代码语言：javascript
代码运行次数：0
运行
复制
<!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() 方法

代码语言：javascript
代码运行次数：0
运行
复制
<!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>
代码语言：javascript
代码运行次数：0
运行
复制
<!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() 方法

代码语言：javascript
代码运行次数：0
运行
复制
<!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>
代码语言：javascript
代码运行次数：0
运行
复制
<!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() 方法

代码语言：javascript
代码运行次数：0
运行
复制
<!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() 方法

代码语言：javascript
代码运行次数：0
运行
复制
<!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>
代码语言：javascript
代码运行次数：0
运行
复制
<!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>
代码语言：javascript
代码运行次数：0
运行
复制
<!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() 方法

代码语言：javascript
代码运行次数：0
运行
复制
<!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>
代码语言：javascript
代码运行次数：0
运行
复制
<!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() 方法

代码语言：javascript
代码运行次数：0
运行
复制
<!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() 方法

代码语言：javascript
代码运行次数：0
运行
复制
<!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>
代码语言：javascript
代码运行次数：0
运行
复制
<!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() 方法

代码语言：javascript
代码运行次数：0
运行
复制
<!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() 方法

代码语言：javascript
代码运行次数：0
运行
复制
<!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>
代码语言：javascript
代码运行次数：0
运行
复制
<!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>
本文参与 腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。
原始发表：2022-08-05，如有侵权请联系 cloudcommunity@tencent.com 删除
javascript

本文分享自 作者个人站点/博客 前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ，欢迎热爱写作的你一起参与！

javascript
评论
登录后参与评论
0 条评论
热度
最新
登录 后参与评论
推荐阅读
目录
  • 文章目录
  • JavaScript concat() 方法
  • JavaScript copyWithin() 方法
  • JavaScript entries() 方法
  • JavaScript Array every() 方法
  • JavaScript fill() 方法
  • JavaScript Array filter() 方法
  • JavaScript find() 方法
  • JavaScript findIndex() 方法
  • JavaScript forEach() 方法
  • JavaScript from() 方法
  • JavaScript Array includes() 方法
  • JavaScript Array indexOf() 方法
  • JavaScript isArray() 方法
  • JavaScript join() 方法
  • JavaScript keys() 方法
  • JavaScript Array lastIndexOf() 方法
领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

Copyright © 2013 - 2025 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 深公网安备号 44030502008569

腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号 | 京公网安备号11010802020287

问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档

Copyright © 2013 - 2025 Tencent Cloud.

All Rights Reserved. 腾讯云 版权所有

登录 后参与评论