iis服务器助手广告广告
返回顶部
首页 > 资讯 > 前端开发 > JavaScript >JavaScript数组操作总结
  • 437
分享到

JavaScript数组操作总结

JavaScript数组JS数组类型JS数组操作 2022-11-13 18:11:46 437人浏览 安东尼
摘要

目录1.定义2.数组的本质3.数组的length4. in5. for…in6.数组的空位7.类数组(伪数组)总结1.定义 数组是按次序依次排列的一组值 任何数据类型都

1.定义

数组是按次序依次排列的一组值

  • 任何数据类型都可以放入数组
  • 数组可以嵌套形成多维数组
const arr = [0,'1',{},function(){}];
//二维数组
const arr1 = [1,2,[3,4,5],6];

2.数组的本质

数组是一种特殊的对象,数组的key是正整数字符串,我们一般使用数字键操作数组,会自动转换成字符串

const arr = [];
arr['1'] = 1;
//1被自动转换成'1'
console.log(arr[1],arr['1']); //1
typeof arr; //obejct

3.数组的length

数组的length计算的是数组中正整数的个数,但你依然可以将数据的key设置为其它类型的值,不过这不会增加length的长度

const arr = [];
arr[2.1] = 2.1;
arr['a'] = 'a';
console.log(arr); //[2.1: 2.1, a: 'a']
console.log(arr.length); //0

length是可写的

const arr = [1,2,3,4,5];
arr.length = 2;
console.log(arr); //[1,2]

4. in

in关键用来判断数组中存在某个键,可应用于数组和对象

const arr = ['a','b'];
1 in arr; // true
2 in arr; //fasle

5. for…in

  • for…in用来遍历数组和对象
  • 遍历数组的时候不仅能遍历整数的key,还能遍历所有非整数的key
  • Object.keys()也能获取到数组的非整数的key
const arr = [1,2];
arr['a'] = 3;
arr[4.5] = 4;
for(key in arr){
 console.log(key);
};
// 0
// 1
// a
/  4.5
Object.keys(arr); // ['0', '1', 'a', '4.5']

6.数组的空位

  • 即两个逗号之间没有任何值会产生空值(empty)
  • 使用delete会产生empty
  • 数组的lengt包含empty
var arr = [1,5,,8];
console.log(arr); //[1, 5, empty, 8]
//使用delete也会产生空值
delete arr [0];
console.log(arr); //[empty, 5, empty, 8]
console.log(arr.length); //4
  • 空值和undefined有所区别,undefined参与for…in和forEach的遍历,empty不参与遍历
  • Object.keys能获取到undefined的key获取不到empty的key
  • 使用length能遍历出empty
    const arr1 = new Array(10); //[empty × 10]
    for (key in arr1) {
      console.log(arr1);
    }; //无输出,没有进行遍历
    arr1.forEach((v) => {
      console.log(v)
    }); //无输出,没有进行遍历
    console.log(Object.keys(arr1)); //[]
    const arr2 = [undefined, undefined, undefined]; //[empty × 10]
    for (key in arr2) {
      console.log(key);
    };
    //0
    //1
    //2
    arr2.forEach((value, index) => {
      console.log(value, index)
    });
    // undefined,0
    // undefined,1
    // undefinef,2
    console.log(Object.keys(arr2)); //[3]
    // 使用for循环遍历empty
    for(let i = 0;i<arr1.length;i++){
       console.log(arr1[1])
    };
    //undefined × 10

7.类数组(伪数组)

类数组的定义:键名都是正整数或零,拥有length属性

const arrayLike = { 
  0:'a', 
  1:'b', 
  2:'c', 
  length:3 
  };
arrayLike[3] = 'd';
console.log(arrayLike[0]); //a
console.log(arrayLike.length); //3

上面的代码为arrayLike添加了一个数字键,但length没有改变,这就说明arrayLike不是数组

典型的类数组有函数的arguments、大多数的元素DOM集合、字符串

function foo(){
  console.log(arguments);
};
foo('tom','jack');
// {0:'tom', 1:'jack', length:2, callee:...}
console.log(document.getElementsByClassName('a'));
//{"0": ...,"1": ...,"2":..., "length":3}
const str = 'apple';
console.log(str.length); //5
consoel.log(str[2]); //p

将伪数组转为数组

  • 使用Array.prototype.slice
  • 使用拓展运算符
function foo(){
  const arr = Array.prototype.slice.call(arguments);
}
function foo(){
  const arr = [...arguments]
}
function foo(...args){
}

总结

  • 数组的empty和undefined有所区别,empty不会被for…in和forEache以及Object.keys运算,但计算length的时候会包含empty,因此使用length循环带有empty的数组时要格外小心
  • 类数组也叫伪数组,是指对象的属性为正整数或者零而且具有length属性的对象
  • 使用Array.prototype.slice.call()或者拓展运算符将类数组转换为数组,类数组可以使用call函数借用数组的方法

到此这篇关于javascript数组操作总结的文章就介绍到这了,更多相关js数组内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网!

--结束END--

本文标题: JavaScript数组操作总结

本文链接: https://www.lsjlt.com/news/169507.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • JavaScript数组操作总结
    目录1.定义2.数组的本质3.数组的length4. in5. for…in6.数组的空位7.类数组(伪数组)总结1.定义 数组是按次序依次排列的一组值 任何数据类型都...
    99+
    2022-11-13
    JavaScript数组 JS数组类型 JS数组操作
  • 20个常见的JavaScript数组操作总结
    目录声明数组1. 常规方式2. 简洁方式3. 字面Array 对象方法1. forEach2. map3. concat4. push5. unshift6. pop7. shift...
    99+
    2024-04-02
  • 总结20个常见的JavaScript数组操作
    JavaScript中的Array对象与其他编程语言中的数组一样,是一组数据的集合。在JavaScript中,数组里面的数据可以是不同类型的,并具有用于执行数组常见操作的方法。声明数组有三种不同的声明方式1. 常规方式const hobby...
    99+
    2023-05-14
    前端
  • JavaScript操作数组的常用方法总结
    我们在日常开发过程中,使用到原生 JavaScript的时候,有时候会频繁的对数组进行操作,今天我把工作以来,经常用到的有关 JavaScript数组的方法总结一...
    99+
    2024-04-02
  • JavaScript中常用的数组操作方法总结
    目录前言数组基础遍历方法forfor offor in数组的基础操作方法push:尾部追加元素pop:尾部移出元素unshift:头部追加元素shift:头部移出元素splice:删...
    99+
    2024-04-02
  • 梳理总结25个JavaScript数组操作方法实例
    目录1.删除数组重复项2. 获取数组的片段3.Array.from 达到 .map 的效果4.置空数组5. 将数组转换为对象6. 用数据填充数组7. 数组合并8.求两个数组的交集9....
    99+
    2024-04-02
  • 总结Golang数组的替换操作
    在Golang中,数组是一种固定大小的数据结构,它是一组相同类型的数据项的集合。但是,在某些情况下,我们可能需要对数组中的元素进行替换,即把数组中的某个元素替换成另一个元素。那么,在Golang中,如何实现数组的替换操作呢?本文将为您介绍G...
    99+
    2023-05-14
  • Java数组操作经典例题大总结
    目录数组中元素的求和使用二维数组打印一个10行的杨辉三角求数值型数组中元素的最大值、最小值、平均数、总和等*使用简单数组线性查找二分法查找冒泡排序求一个3*3矩阵对角线元素之和总结&...
    99+
    2024-04-02
  • JavaScript中DOM操作常用事件总结
    目录常用事件演示得到焦点和失去焦点演示 鼠标划过和离开点击事件load加载页面事件onkeyup 键盘弹起事件内容变化事件选中时触发上一篇聊了如何同JavaScript获得页面元素,...
    99+
    2024-04-02
  • java基础之数组常用操作总结(必看篇)
    常用的对数组进行的操作1、求数组中最大值,最小值思路:假设下标为0的元素是最大值,遍历数组,依次跟max进行比较,如果有元素比这个max还大,则把这个值赋给max。最小值同样public class TestArray{ public s...
    99+
    2023-05-31
    java 数组 常用操作
  • python3.2列表操作总结
    list操作:快速创建list、新增item、删除item、重新赋值item、颠倒item顺序、检索item 快捷创建list,两种方式:split方法、list函数和range函数配合使用。 split方法。写一个字符串,字符之间以空格分...
    99+
    2023-01-31
    操作 列表
  • JavaScript数组 几个常用方法总结
    目录1、前言2、filter()3、map()4、sort()5、reduce()6、forEach()7、方法列表8、本文参考1、前言 数组方法有太多了,本文记录一些本人容易记错的...
    99+
    2024-04-02
  • JavaScript数组的操作示例
    这篇文章主要介绍了JavaScript数组的操作示例,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。具体如下:数组及操作方法数组就是一组数据的...
    99+
    2024-04-02
  • JavaScript中极易出错的操作符运算总结
    目录算术运算符非正常情况1: 有特殊值字面量参与的运算非正常情况2: 其他类型的数据参与数学运算。比较运算符非正常情况1: 特殊值参与比较运算非正常情况2: 其他数据类型参与比较运算...
    99+
    2024-04-02
  • JavaScript数组方法-系统性总结详解
    目录数组常用方法数组元素增添和删除操作数组头部操作数组尾部任意位置增删数组拼接数组转换成字符串截取数组数组排序方法排序顺序翻转数组迭代方法数组遍历查找返回值为下标返回值为内容数组遍历...
    99+
    2024-04-02
  • JavaScript数组操作之旋转二维数组
    目录一、题目描述二、思路与实现三、总结一、题目描述 给定一个 n × n 的二维矩阵 matrix 表示一个图像。请你将图像顺时针旋转 90...
    99+
    2024-04-02
  • MySQL基础操作总结_CRUD
    文章目录 1.新增 insert 1.1 单行数据+全列插入 1.2 多行数据+指定列插入 2.查询 select 2.1 全列查询 2.2 指定列查询 2.3 查询字段包含表达式 2.4 别名 2.5 去重:distinct 2.6 排序...
    99+
    2023-09-01
    mysql 数据库
  • java 操作elasticsearch详细总结
    一、前言 上一篇我们通过kibana的可视化界面,对es的索引以及文档的常用操作做了毕竟详细的总结,本篇将介绍如何使用java完成对es的操作,这也是实际开发中将要涉及到的。 二、java操作es的常用模式 目前,开发中使用java操作...
    99+
    2023-09-02
    java 操作es详细总结 java 操作es springboot整合es
  • JavaScript数组常见操作技巧
    目录一、创建数组二、判断是不是数组三、类数组和数组的转换四、数组去重1.利用 set 去重2.双重循环 + splice3.新建数组 + includes4.reduce + inc...
    99+
    2024-04-02
  • JavaScript 数组基本操作全解
    目录一、初识数组二、创建数组使用Array对象创建数组使用“[]”创建数组三、数组的基本操作获取数组长度访问数组元素元素的添加与修改添加元素修改元素元素的删除...
    99+
    2024-04-02
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作