第4章 第2节 数组

已于 2022-03-30 17:15:02 修改
阅读量221 收藏 2
点赞数
分类专栏： JavaScript 文章标签： javascript 前端 es6
于 2019-10-17 22:42:00 首次发布
原文链接：https://blog.csdn.net/u010297791/article/details/53393349
版权

Array应该是我们在平时写js代码中，使用频率最高的，在平时的项目中，很多数据都是可以通过Array来存储、操作等任务。除了Object之外，Array类型应该是js中最常用的类型了。

今天总结一下Array的一些简单和基本的操作，也来巩固下自己的基础知识。

一、如何创建Array（下面直接说数组）

创建数组主要有两种方法，第一种是使用数组构造函数，第二种是使用数组字面量表示法。

1、使用数组构造函数

如：var arr = new Array();

如果预先知道数组的长度，那么也可以直接给构造函数传递该长度。

如：var arr = new Array(20);

如果知道数组中应该包含的项，就直接在构造的时候，传递数组中的应该包含的项。

如：var arr = new Array(1,2,3);

2、使用数组字面量表示法

如：var arr = [1,2,3,4];

var arr2 = [];

二、数组的操作

1、 栈方法和队列方法

1）栈操作的方式：先进后出原则----通过重数组尾部添加数据项，然后在从数组的尾部获取尾部数据项

push();----就是在数组的尾部添加数据项，该方法的参数个数可以自定义；

pop();—该方法就是获取数组的最尾部的一个数据项，该函数无需传递任何参数；

如：

var colors = new Array();//创建数组
var count = colors.push("red","green");//推入两项
console.log(count);
 
var color = ["red","black"];
color.push("brown");//推入另一项
color[3]="yellow"; //添加一项
console.log(color);
console.log(color.push("blue"));
console.log(color.pop());//取得最后一项

2）队列操作的方式：先进先出原则—通过从数组的头部插入数据和获取数据项来模拟实现

push();–向数组末端添加数据项；

shift();—获取数组的头部一项的数据信息；

unshift();–与shift完全相反，就是向数组的头部插入数据项信息；

var colorArr = new Array();//创建数组
colorArr.push("red","yellow");//推入两项
console.log(colorArr);
var length = colorArr.push("blue");
console.log(length);
 
var item = colorArr.shift();//取得第一项
console.log(item);
console.log(colorArr.length);

2、检测验证数组

在平时项目开发中，我们往往会遇到，判断一个对象是否为数组（函数的参数传递中），那么如果判断一个对象是否为数组呢，有以下两种方式

1）第一种方法

if(value instanseof Array){

}

2）第二种方法

if(Array.isArray(value)){

}//该方法只使用与高版本的浏览器：IE9+、Firefox4+/Chrome

3、具体的编程实例
1）添加元素（数组末尾添加元素）

在数组 arr 末尾添加元素 item。不要直接修改数组 arr，结果返回新的数组 .

方法一：slice()和push()结合

 function append(arr, item) {
    var newArr = arr.slice(0);  // slice(start, end)浅拷贝数组
    newArr.push(item);
    return newArr;
};

方法二：普通的迭代拷贝

function append(arr, item) {
    var length = arr.length,
        newArr = [];
 
    for (var i = 0; i < length; i++) {
        newArr.push(arr[i]);
    }
 
    newArr.push(item);
 
    return newArr;
};

方法三：使用concat

function append(arr, item) {
    return arr.concat(item);
}

2)添加元素（添加任意位置的元素）
在数组 arr 的 index 处添加元素 item。不要直接修改数组 arr，结果返回新的数组。

方法一：使用普通的迭代拷贝

function insert(arr, item, index) {
    var newArr=[];
    for(var i=0;i<arr.length;i++){
        newArr.push(arr[i]);
    }
    newArr.splice(index,0,item);
    return newArr;
}

方法二：slice()和splice()结合

function insert(arr, item, index) {
    var newArr=arr.slice(0);
    newArr.splice(index,0,item);
    return newArr;
}

方法三：concat()和splice()结合

function insert(arr, item, index) {
    var newArr=arr.concat();
    newArr.splice(index,0,item);
    return newArr;
}

3、删除元素（删除数组最后一个元素）
删除数组 arr 最后一个元素。不要直接修改数组 arr，结果返回新的数组 。

方法一：使用普通的迭代拷贝

function truncate(arr, item) {
    var newArr=[];
    for(var i=0;i<arr.length-1;i++){
        newArr.push(arr[i]);
    }
    return newArr;
}

方法二：concat()和pop()结合


```javascript
function truncate(arr) {
    var newArr = arr.concat();
    newArr.pop();
    return newArr;
}


4、删除元素（删除数组第一个元素）
删除数组 arr 第一个元素。不要直接修改数组 arr，结果返回新的数组 。
方法一：使用普通的迭代拷贝


```javascript
function curtail(arr) {
    var newArr=[];
    for(var i=1;i<arr.length;i++){
        newArr.push(arr[i]);
    }
    return newArr;
}

方法二：concat()和shift()结合

function curtail(arr) {
    var newArr = arr.concat();
    newArr.shift();
    return newArr;
}

方法三：slice()

function curtail(arr) {
    return arr.slice(1);
}

5、合并数组
合并数组 arr1 和数组 arr2。不要直接修改数组 arr，结果返回新的数组 。

方法一：使用普通的迭代拷贝

function concat(arr1, arr2) {
    var newArr=[];
    for(var i=0;i<arr1.length;i++){
        newArr.push(arr1[i]);
    }
    for(var j=0;j<arr2.length;j++){
        newArr.push(arr2[j]);
    }
    return newArr;
}

方法二：concat()方法

function concat(arr1, arr2) {
    return arr1.concat(arr2);
}

方法三：slice()和push()结合

function concat(arr1, arr2) {
    var newArr=arr1.slice(0);
    for(var i=0;i<arr2.length;i++){
        newArr.push(arr2[i]);
    }
    return newArr;
}

5、移除数组中的元素
移除数组 arr 中的所有值与 item 相等的元素。不要直接修改数组 arr，结果返回新的数组 。

方法一：splice()方法

function remove(arr, item) {
            var newArr = arr.slice(0);
            for(var i=0; i<newArr.length; i++) {
                if(newArr[i] == item) {
                    newArr.splice(i, 1);
                }
            }
            return newArr;
        }
        var arr = [1,2,3,4,2];
        var item = 2;
        console.log(remove(arr, item));
        console.log(arr);

方法二：push()方法

function remove(arr,item){
    var newarr = [];
    for(var i=0;i<arr.length;i++){
        if(arr[i] != item){
            newarr.push(arr[i]);
        }
    }
    return newarr;
}

————————————————

案例：数组—冒泡排序

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
    var arr = [2,4,9,11,6,3,88];
    //采用冒泡排序，向上冒泡，最小值在最上边
    for(var x = 0 ; x < arr.length; x++){//控制趟数
        for(var y = x + 1 ; y < arr.length ; y++){
            //依次比较，如果后面的元素大于前面的元素则交换
            if(arr[x] > arr[y]){
                var temp = arr[x];
                arr[x] = arr[y];
                arr[y] = temp;
            }
        }
    }
    document.write(arr);

</script>
</head>
<body>
<div id="time"></div>

</body>
</html>

Js基础–数组应用实例（图片切换）

在前面的文章中，我们讲到了js中数组的具体操作，详见（Js对Array的各种操作总结），这里就不再做详细的讲解。今天主要的目的是如何用数组进行图片的简单左右切换。

本文中的图片切换具体步骤如下：

第1步：简单的布局并设计基本的显示样式；

第2步：通过js获取相关元素；

第3步： 通过数组进行图片url和对应文字描述的存储；

第4步：初始化：包括图片的初始化，显示图片数字以及对应文字的初始化等；

第5步：点击按钮切换图片，编写对应的函数，其实就是数组的简单应用。

接下来先看看效果图，然后进行对应的代码讲解。
在这里插入图片描述

实现代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>图片切换</title>
    <style>
        .box{
            width: 600px;
            height:400px;
            border: 10px solid #ccc;
            position: relative;
            margin: 40px auto 0;
        }
        .box a{
            width: 30px;
            height: 30px;
            background-color: #000;
            border: 5px solid #fff;
            position: absolute;
            top:180px;
            text-align: center;
            font-size:25px;
            font-weight: bold;
            line-height: 30px;
            color:#fff;
            text-decoration: none;
            filter: alpha(opacity:40);
            opacity: 0.4;
        }
        .box a:hover{
            filter:alpha(opacity:80);
            opacity:0.8;
        }
        .box #prev{
            left: 10px;
        }
        .box #next{
            right: 10px;
        }
        #text,#num{
            height: 30px;
            line-height:30px;
            width: 600px;
            color:#fff;
            position: absolute;
            left: 0;
            background-color: #000;
            text-align: center;
            filter: alpha(opacity:80);
            opacity: 0.8;
            margin:0;
        }
        .box #text{
            bottom: 0;
        }
        .box #num{
            top:0;
        }
        .box #img1{
            width: 600px;
            height: 400px;
        }
    </style>
    <script>
        window.onload = function () {
            var oPrev = document.getElementById("prev");
            var oNext = document.getElementById("next");
            var oText = document.getElementById("text");
            var oNum = document.getElementById("num");
            var oImg = document.getElementById("img1");
 
            var arrUrl = ['images/1.jpg','images/2.jpg','images/3.jpg','images/4.jpg'];
            var arrText = ['文字1','文字2','文字3','文字4'];
 
            //初始化
            var num = 0;
            function fnTab(){
                oNum.innerHTML = num + 1 + '/' + arrText.length;
                oImg.src = arrUrl[num];
                oText.innerHTML = arrText[num];
            };
            fnTab();
            oPrev.onclick = function(){
                num --;
                if( num == -1){
                    num = arrUrl.length -1;
                }
                fnTab();
            };
            oNext.onclick = function(){
                num ++;
                if(num == arrUrl.length){
                    num = 0;
                }
                fnTab();
            };
        };
    </script>
</head>
<body>
    <div class="box">
        <a id="prev" href="javascript:;"> < </a>
        <a id="next" href="javascript:;"> > </a>
        <p id="text">图片正在加载中……</p>
        <span id="num">数量正在统计中……</span>
        <img id="img1" src="../images/1.jpg" alt="">
    </div>
</body>
</html>

这个例子很简单，主要就是对数组的简单读写以及对html的属性内容读写操作。其中需要注意的是，当我们点击下一张到最后一张图片或者点击上一张到第一张时，需要设置具体的数值变化，不=否则会越界，那么图片、数字和对应的问题就没有内容。
另外做了一个可以顺序播放和循环播放图片的例子。

在这里插入图片描述

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>图片切换</title>
    <style>
        body,p{
            margin:0px;
            padding:0px;
        }
        input{
            outline: none;
            border:none;
            padding: 0;
        }
        .box{
            width:320px;
            height:320px;
            position: relative;
            margin:50px auto;
        }
        #img_list{
            width:320px;
            height:200px;
        }
        #btns{
            text-align: center;
        }
        #btn1,#btn2,#pre,#next{
            background-color: #727272;
            color: #fff;
            width:70px;
            height:22px;
            line-height:22px;
            border-radius:4px;
            text-align: center;
            margin:auto auto;
            font-size: 12px;
        }
        #btn1:hover,#btn2:hover{
            background-color: #aeaeae;
            color: #feffa8;
        }
        #btns #title,#num{
            width:320px;
            height: 30px;
            line-height:30px;
            font-size: 16px;
            display: block;
        }
        #content{
            width:320px;
            text-align: center;
        }
        #content #con_title{
            width: 320px;
            height: 30px;
            line-height:30px;
            text-align: center;
            background-color: #000;
            filter: alpha(opacity:40);
            opacity: 0.4;
            position: absolute;
            top:223px;
            color: #fff;
        }
        #changeBtn{
            width: 320px;
            text-align: center;
        }
    </style>
    <script>
        window.οnlοad= function () {
            var oBtn1 = document.getElementById("btn1");
            var oBtn2 = document.getElementById("btn2");
            var oTitle = document.getElementById("title");
            var oImg = document.getElementById("img_list");
            var oCon_title = document.getElementById("con_title");
            var oNum = document.getElementById("num");
            var oPre = document.getElementById("pre");
            var oNext= document.getElementById("next");
 
            var imgList = ['images/1.jpg','images/2.jpg','images/3.jpg','images/4.jpg','images/5.jpg'];
            var titleList=['这是第一张图片','这是第二张图片','这是第三张图片','这是第四张图片','这是第五张图片'];
 
            oNum.innerHTML=1+'/'+imgList.length;
            oCon_title.innerHTML="这是第一张图片";
            var num = 0;
            var onoff = true;//true  顺序播放   false  循环播放
 
            oBtn1.οnclick= function () {
                onoff=true;
                oTitle.innerHTML="图片顺序播放";
            };
            oBtn2.οnclick= function () {
                onoff=false;
                oTitle.innerHTML="图片循环播放";
            };
            oPre.οnclick= function () {
                num--;
                if(num<0){
                    if(onoff){//true  顺序播放
                        num=0;
                        alert("已经是第一张啦！");
                    }else{
                        num=imgList.length-1;
                    }
                }
                changeImg(num)
            };
            oNext.οnclick= function () {
                num++;
                if(num>imgList.length-1){
                    if(onoff){//true  顺序播放
                        num=imgList.length-1;
                        alert("已经是最后一张啦！");
                    }else{
                        num = 0;
                    }
                }
                changeImg(num);
 
            };
            function changeImg(num){
                oImg.src= imgList[num];
                oCon_title.innerHTML=titleList[num];
                oNum.innerHTML=num+1+'/'+imgList.length;
            };
        };
    </script>
</head>
<body>
<div class="box">
    <div id="btns">
        <input id="btn1" type="button" value="顺序播放"/>
        <input id="btn2" type="button" value="循环播放"/>
        <p id="title">图片顺序播放</p>
    </div>
    <div id="content">
        <img id="img_list" src="images/1.jpg" alt="">
        <p id="con_title"></p>
        <span id="num"></span>
    </div>
    <div id="changeBtn">
        <input id="pre" type="button" value="上一张">
        <input id="next" type="button" value="下一张">
    </div>
</div>
</body>
</html>

————————————————

原文链接：https://blog.csdn.net/u010297791/article/details/53393349

在这里插入图片描述

szmtjs10
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JavaScript中数组的字面量
plannothing的博客
07-24 399
//创建一个数组 var arr = new Array(); // arr[0] = 123; // arr.hello = “hello”//数组也是支持属性这种创建模式的 // // console.log(arr.hello);//输出结果为hello //使用字面量来创建数组 //语法使用：[] var arr = [] console.log(typeof arr); var arr = [1,2,3,4,5,10];
第4章 数组
m0_67991849的博客
05-24 447
JavaSE_第4章 数组 学习目标 理解容器的概念 掌握一维的声明和初始化 使用索引访问数组的元素 了解数组的内存图解 避免空指针和越界异常 掌握数组的遍历 掌握数组基础算法 掌握数组元素的统计分析 掌握数组最大值的获取 掌握数组元素的查找 掌握数组元素的反转 掌握数组的排序 4.1 数组的概念 4.1.1 容器概述 需求分析： 现在需要统计某公司员工的工资情况，例如计算平均工资、找到最高工资等。假设该公司有50名员工，用前面所学的知识，程序首先需要声明50个变量来分别记
初始JS数组
tonysxiaobao的博客
08-10 862
JS数组的几种常见定义方式
js 数组初始化
weixin_30443731的博客
10-23 3844
最近几个月都在刷LeetCode，刚刚，就在刚刚，看到公众号说华为，京东，阿里等等大厂都在裁员缩招，很是焦虑啊。互联网的冬天提前来临了么。。。。 本来数组初始化很简单，但就是和java,c++他们不一样，js在创建数组的时候是不会自动初始化的，也就是说js创建数组如果不赋值就会是undefine。总之每次刷题的时候，都会遇到数组没有初始化而出现NAN的问题，就就就很烦，所以--------代码如...
JS 创建并初始化数组的各种方法与坑
qq_59181609的博客
06-19 5019
刷力扣买卖股票系列问题时在创建与初始化数组上遇到了很多自己不知道的知识点，写篇博客记录一下。 // 含义：创建一个三个坑位的数组，每个坑位又初始化为一个二维数组// 注意：fill方法如果填充的是复杂数据类型的数据（对象和数组）那么所有被填充项引用的都是同一个对象而不是对象的拷贝,也就是说改变一个另外的都会跟着变// 解决方法：// 想要修改数组的时候要单独的替换整个数组 需要用双重 for 循环进行初始化 4.利用数组的map方法快速生成二维数组。 注意：在这个方法中，不能将删除，因为
JS基础_数组字面量
兴趣是最好的老师
07-07 189
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script type="text/javascript"> //创建一个数组 //var arr = new Array(); //使用字面量来创建数组，作用和上面new Array()一样的 //语法:[] var arr.
第四章 数组
weixin_42023744的博客
09-02 120
第四章 数组 4.1 数组的概念 ​ 所谓数组(array)，就是相同数据类型的元素按一定顺序排列的集合，就是把有限个类型相同的变量用一个名字命名，以便统一管理他们，然后用编号区分他们，这个名字称为数组名，编号称为下标或索引(index)。组成数组的各个变量称为数组的元素(element)。数组中元素的个数称为数组的长度(length)。 ​ 注：数组的长度一旦确定，就不能修改。 4.2 数组的定...
C语言程序设计第七章数组2
06-25
第七章主要探讨的是数组的使用，特别是针对一维数组的定义、引用以及初始化。 一维数组可以看作是在内存中连续存储的一系列变量，它们具有相同的类型。数组的定义包括类型说明符、数组名和可选的常量表达式，用于...
VC++-第4章-数组与指针ppt课件.ppt
11-17
在数组的使用中，需要注意数组的边界问题，因为数组的下标从0开始，例如a[0]是数组的第一个元素，a[1]是数组的第二个元素，以此类推。同时，数组也可以用来存储字符串，例如char str[10];可以存储一个长度为10的字符...
C++第6章数组.ppt
11-13
"C++第6章数组" 在C++语言中，数组是一种非常重要的数据结构。数组是一种集合，集合中每个元素的类型相同，数组的每个元素都可以通过数组名和下标来访问。下标是从0开始的整数，例如：a[0]、a[1]、a[2]等。 一维...
谭浩强程序设计第三版课件第章数组.pptx
11-12
"谭浩强程序设计第三版课件第章数组" 本节课主要讲述数组的基本概念、定义、引用和初始化。数组是一种重要的数据结构，常用于存储和处理大量数据。 7.1 一维数组的定义和引用 一维数组是一种基本的数组结构，它由...
c语言学习-第七章-数组完整.pptx
11-14
"C语言学习-第七章-数组完整" 本章主要介绍了数组的概念、定义、使用以及查找算法。下面是详细的知识点： 1. 数组的概念 数组是一种数据结构，由多个相同类型的元素组成，每个元素可以通过下标来访问。数组可以是...
js基础 数组的字面量
qq_45907053的博客
06-17 543
第一种：使用构造函数创建数组———大括号 var 数组名=new Array(); 数组一般用索引来存储但是也可以用 数组.变量="值" 来存储 var arr=new Array(); arr[0]=123; arr.hello="abc";//可以这样存储，但是没有意义，一般还是使用索引存储 console.log(arr.hello); 构造函数创建数组时指定数组中元素 //使用构造函数创建数组时候，也可以同时添加元素，将要添加的元素作为构造函数的参数传递 //元素之间使用,分隔开 va
ios中的字面量语法
u014223290的专栏
03-21 1647
oc的语法很繁杂，在定义一些数组、字典的时候要写很长的方法。通过字面量语法可以像c语言那样定义数组等，可以缩减代码长度。 在xcode4.5，ios6以上版本已经全面支持以下的字面量。 我们常用的字面量 NSString* str = @"Hello World"; NSNumber NSNumber支持的所有类型都可以用字面量语法 NSNumber *someNumber =
.62数组字面量
sanda_nd的博客
03-31 101
1、使用字面量创建数组时，可以在创建时就指定元素 2、数组中元素可以是任意数据类型 3、采用数组字面量的方法只传一个形参时，将数组转变为只有一个元素的数组 采用构造函数的方法只传一个形参时，传递值为数组的长度 ...
重磅！超详细的 JS 数组方法整理出来了
祈澈菇凉
01-06 1745
作者：Yushiahttps://juejin.cn/post/6907109642917117965数组是 js 中最常用到的数据集合，其内置的方法有很多，熟练掌握这些方法，可以有效的...
JavaScript数组方法
m0_47697572的博客
09-22 279
JavaScript中常用的20个方法
js 初始化数数组
QER 的博客
11-25 658
[...Array(3)].map(x=>Array(5).fill(0))
更新商品前端接口编写
最新发布
weixin_55639995的博客
07-12 346
那么在vue运行的时候,会加载所有的ref属性特征的元素还有组件。标签中ref的作用就是将 该组件注册到vue对象的ref属性中。使用插槽,那个scope就是代表着一行的数据。然后里面的选项遍历的是 js定义的数据。如果文字显示过多可以使用 文本隐藏显示。表单绑定还有表单数据的绑定。数据绑定使用的表单绑定状态。写form表单然后封装数据。状态的选择使用的是选择框。副标题使用的是文本域。状态页面使用,下拉框。富文本选择器使用组件。使用后端枚举类型去写。
C语言程序设计第4章数组和指针
04-09
C语言程序设计第4章数组和指针，C语言程序设计第4章数组和指针课件，C语言程序设计第4章数组和指针PPT

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值