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基础之数组上篇--数组的基础知识 -> 正文阅读

[JavaScript知识库]JavaScript基础之数组上篇--数组的基础知识

任何编程语言数组是最常用的一种存储简单数据的一种方式,而JavaScript也是。本篇主要聊一些数组的用法,当然不是数组所有的方法。也可以说是对数组的一些简单的了解和理解吧。

数组操作

数组创建

创建一个长度位3的空数组。

arr =new Array(3);//通过对象进行声明数组  这个一般不推荐
arr1=[,,,];// 数组字面量 常用方式

arr2=Array(3);//通过内置的Array构造函数声明数组  这个一般的时候不使用 知道即可

在这里插入图片描述

可以看出两种创建数组的方式,其实本质是相同的,不过这个时候又有一个神奇的发现,那就是arr1=[,,,]其中有四个逗号分隔,不应该是长度为4吗?

代码演示:

arr=[,1,2,]

在这里插入图片描述

这个可以看出如果用第二种创建数组的时候,如果最后一位逗号后面是空,那么默认就是没有这个存储位置。

对象演示数组

这个算是拓展了解吧

其实很神奇的一件事,对于数组可以用对象进行演示,前面也说过JavaScript中万物皆对象,这个也是一种体现。因为数组中的下标是从0开始的,所以对象的属性也是从0开始。

var arr={
    0:"a",
    1:"b",
    2:"c"   
};
var arr1=["a","b","c"];

console.log(arr[1]);
console.log(arr1[1]);

在这里插入图片描述

其实对象取出内容的时候可以通过.,但是如果key是数字的话,就无法取了。

在这里插入图片描述

其实就算是通过.获取属性值,在JavaScript中也会转换为[]进行取值的,所以可以成数组是一种隐藏key的对象。

length属性

// 首先声明一个数组。
var arr=[1,2,3,4,5];

console.log(arr.length);// 数组的长度,这个是最常用的一种方法。

现在又有了一个大胆的想法

arr.length=3;
console.log(arr)

在这里插入图片描述

发现arr被截断了,只有前面3个内容了,那如果将其长度变成比原数组更长呢?

arr.length=6;
console.log(arr)

在这里插入图片描述

这个有点不同于java,因为java中数组的长度是无法修改的。

数组的方法

数组添加元素

数组除了查找内容,自然也有其增加内容的方法,常用的有两个那就是pushunshit,同样是添加元素,但是又有不同。

var arr=[1,2,3];
arr.push(4);
arr.unshift(0);

在这里插入图片描述

可以看出push是数组元素后面添加添加,unshift是数组元素前面添加.

简单实现一个可以添加多个元素的方法

var arr=[1,2,3];

Array.prototype.myPush= function (){
    len=arguments.length;
    if (len<1){
        return this;
    }
   for (i=0;i<len;i++){
       this.push(arguments[i]);
   }
    return this;
}
arr.myPush(4,5,6);

在这里插入图片描述

删除元素

这个对应着添加的方式,也有两个popshift.这个直接演示即可

var arr=[1,2,3,4,5];
arr.pop();
arr.shift();

在这里插入图片描述

两个数组合并

var arr=[1,2,3];
var arr1=[4,5,6];

两个数组的合并,自然可以通过数组本身的一个方法concat,但是两者本身不会改变。

如下:

arr.concat(arr1);
arr1.concat(arr);

在这里插入图片描述

这个可以看出那个数组使用concat方法,那个数组的元素在前面。

数组截取

这个调用的方法其实有点复杂,使用的方法是splice(开始项下标,剪切长度,剪切以后最后一位开始添加数据)slice(开始,结束)

splice

但是其中的参数又有可以不写的,想要理解还是看具体代码。

// 只有下标 而且下标为正
var arr=[1,2,3,4,5,6];
arr.splice(3);// 只来一个下标 截取了 4,5,6
console.log(arr); //arr 剩下了 1,2,3

在这里插入图片描述

// 下标为正 带上截取长度
var arr=[1,2,3,4,5,6];
arr.splice(3,2); // 截取了4,5
console.log(arr); //arr 剩下了 1,2,3,6

在这里插入图片描述

// 下标为正 带上截取长度,以及要添加的元素
var arr=[1,2,3,4,5,6];
arr.splice(3,2,8); // 截取了4,5  
console.log(arr); //arr 剩下了 1,2,3,8 ,6

//添加的元素只是写了一个,其实可以多写多个arr.splice(3,2,8,10); 最后arr 为1,2,3,8,10 ,6
//如果后面添加数组,那么数组就是一个元素

在这里插入图片描述

// 只有下标 而且下标为负数
var arr=[1,2,3,4,5,6];
arr.splice(-1);// 只来一个下标 截取了6
console.log(arr); //arr 剩下了 1,2,3 ,4,5
// 负数从后面开始数

在这里插入图片描述

// 下标为负数 带上截取长度
var arr=[1,2,3,4,5,6];
arr.splice(-1,2); // 长度不可能为负数的,负数就效果就是0.我们写长度为2 很多人认为是  截取了5,6

在这里插入图片描述

为什么?写的长度是2啊?

var arr=[1,2,3,4,5,6];
arr.splice(-2,2); //截取了5,6

在这里插入图片描述

下标的开始值决定了开始的位置,但是长度还是向后数的,不会因为下标开始是负数然后就是向前数的。

var arr=[1,2,3,4,5,6];
arr.splice(-2,2,8); //截取了5,6

在这里插入图片描述

  • 补充,前面添加元素的时候使用pushunshift但是添加的元素不是在前面就是在后面,那现在添加一个指定的位置呢?

    //将元素放在第二个位置
    var arr=[1,2,3,4,5,6];
    arr.splice(1,0,10);
    

在这里插入图片描述

slice

splice知道其参数的用法,那么再看slice就会觉得很简单的。但是splice 不会修改原本的数组,得到都一个截出的数组。

// 下标开始为正数
var arr=[1,2,3,4,5,6];
arr.slice(1);
console.log(arr);

在这里插入图片描述

// 下标开始为正数,再加上一个结束的下标
var arr=[1,2,3,4,5,6];
arr.slice(1,3);// 前面是闭包后面是开包【)

在这里插入图片描述

// 下标开始为负数
var arr=[1,2,3,4,5,6];
arr.slice(-2);

在这里插入图片描述

// 下标开始为负数 其结束标记也的为负数,如果负数小于开始下标或者为0以及正数那就返回一个空数组,因为其是向后定义开始和结束的
var arr=[1,2,3,4,5,6];
arr.slice(-3,-1);

在这里插入图片描述

排序

排序用到用到的是sort,但是这个排序最令人弄乱的是排数字。

var arr=[1,0,3,13,5];
arr.sort();
// arr 最后值为:[0, 1, 13, 3, 5]

在这里插入图片描述

因为JavaScript的数组是将数字元素转换为字符串之后再进行排序,然后按照ASCII进行排序的。但是如果是对象排序呢?如何判断呢?其实sort的参数可以写一个方法,sort的排序逻辑可以根据这个方法逻辑进行排序,但是返回值应该是1或者0或者-1,有点贵像是java中对象排序的时候实现compareto方法。

// 将下面的数组进行随机排序
var arr=[0,1,2,3,4,5];

arr.sort(
function(a,b){
   var rand=Math.random();
    if (rand>0.5){
     return 1 ;
    }else if(rand<0.5){
        return -1;
    }else{
        return 0;
    }
} 

)

在这里插入图片描述

如果是对象的话,可以根据对象属性的大小进行判断,自然也是再sort的参数中写好即可,不在演示了。

数组与字符串转换

这个其实是用joinsplit两个实现的

var arr=[0,1,2,3,4,5];
console.log(arr.join("-"))// 如果arr.join 不写参数默认是 逗号(,)

在这里插入图片描述

var str="0-1-2-3-4-5";
console.log(arr.split("-"));

在这里插入图片描述

当然split也可以有参数。

var str="0-1-2-3-4-5";
console.log(str.split("-",1));// 后面的参数就是截取的长度

在这里插入图片描述

反转排序

这个简单的调用一个方法 reverse即可

var arr=[0,1,2,3,4,5];
arr.reverse();

在这里插入图片描述

tostring

这个很简单的一个方法

arr=[1,2,3,4,5];
arr.toString();

在这里插入图片描述

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

360图书馆 购物 三丰科技 阅读网 日历 万年历 2024年11日历 -2024/11/24 7:59:41-

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