ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

js数组方法

2022-05-10 18:34:26  阅读:169  来源: 互联网

标签:blue color yellow js 数组 var 方法


数组是一种特殊的变量,它能够一次存放一个以上的值。

JavaScript 数组用于在单一变量中存储多个值。

例如定义三个颜色,以下是用数组,和不用数组的区别,且效果一样:

var color1="yellow"
var color2="blue"
var color3="black"


var color=['yellow','blue','black']

而数组方法也是js中一个不可忽略的方法。

unshift()方法:

通过此方法可以将新内容加在原数组中的前面,代码、效果如下:

   var color=['yellow','blue','black']
    color.unshift("red", "pink");
    document.getElementById("demo").innerHTML = color;

shift() 方法与unshift()方法恰恰相反,用于移除数组的第一项。

pop() 方法移除数组的最后一个元素,并返回该元素。

push() 方法向数组末尾添加新项目,并返回新长度。

效果,和使用方法与unshift()相似。

 

includes() 方法确定数组是否包含指定的元素,返回值为布尔值。

以下是代码和效果:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<h1>JavaScript 数组方法</h1>

<p>color数组中是否包含'blue'这个颜色:</p>

<p id="demo"></p>
</body>
</html>
<script>
    var color=['yellow','blue','black']
    document.getElementById("demo").innerHTML = color.includes('blue')
</script>

indexOf() 方法在数组中搜索指定项目,并返回其位置。

搜索将从指定位置开始,如果未指定开始位置,则从头开始,并在数组末尾结束搜索。

如果未找到该项目,则 indexOf() 返回 -1。

如果该项目出现多次,则 indexOf() 方法返回第一次出现的位置,且

按照第一项的位置为 0,第二项的位置为 1,依此类推。

代码,效果如下:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<h1>JavaScript 数组方法</h1>

<p>color数组中'blue'这个颜色出现的位置:</p>

<p id="demo"></p>
</body>
</html>
<script>
    var color=['yellow','blue','blue','black']
    document.getElementById("demo").innerHTML = color.indexOf('blue')
</script>

filter() 方法创建数组,其中填充了所有通过测试的数组元素(作为函数提供)。

filter() 不会对没有值的数组元素执行该函数,且不会改变原始数组。

代码,效果如下:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<h1>JavaScript 数组方法</h1>

<p>数组中等于或大于 18 的数:</p>

<p id="demo"></p>
</body>
</html>
<script>
    const ages = [32, 33, 16, 40];

    document.getElementById("demo").innerHTML = ages.filter(checkAdult);

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

以上只是js中的部分数组方法。

标签:blue,color,yellow,js,数组,var,方法
来源: https://www.cnblogs.com/fy20190814/p/16245973.html

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有