js中的关联数组与普通数组详解

yizhihongxing

JS中的关联数组与普通数组详解

在JavaScript中有两种基本的数组类型,分别是关联数组和普通数组。这两种数组的定义和使用方法有很大的不同。

1. 普通数组

普通数组是一种使用下标访问元素的数组。它提供了一个基于数字索引的快速访问列表的方法,下标从0开始,索引号连续排列。

1.1 定义和初始化

普通数组的定义可以使用[]Array()两种方式进行。例如:

let arr1 = [1, 2, 3]; // 使用[]定义
let arr2 = new Array(1, 2, 3); // 使用Array()定义

普通数组的初始化可以使用[]Array()方式添加元素。例如:

let arr = [];
arr[0] = 1;
arr[1] = 2;
arr[2] = 3;

let arr = new Array();
arr.push(1);
arr.push(2);
arr.push(3);

console.log(arr); // 输出 [1, 2, 3]

1.2 常用方法

普通数组提供了很多常用的方法,常见的方法有:

  • push():向数组尾部添加一个或多个元素
  • pop():删除数组尾部的元素并返回该元素
  • shift():删除数组头部的元素并返回该元素
  • unshift():向数组头部添加一个元素
  • slice():提取数组的一部分并返回一个新的数组
  • splice():从数组中删除或添加元素,修改原数组
  • sort():对数组进行排序,修改原数组
  • reverse():反转数组,修改原数组

1.3 示例1:求数组的最大值最小值

实现方式:

let arr = [1, 2, 3, 4, 5];
let max = arr[0];
let min = arr[0];
for (let i = 0; i < arr.length; i++) {
  if (arr[i] > max) {
    max = arr[i];
  }
  if (arr[i] < min) {
    min = arr[i];
  }
}
console.log(max, min); // 输出 5 1

2. 关联数组

关联数组是一种使用字符串作为键名访问元素的数组。它提供了一种使用字符串索引来访问数据的方法。

2.1 定义和初始化

关联数组的定义可以使用大括号{}进行。例如:

let obj = {
  name: '张三',
  age: 18,
  gender: '男'
};

关联数组的初始化可以使用大括号{}方式添加元素。例如:

let obj = {};
obj.name = '张三';
obj.age = 18;
obj.gender = '男';

console.log(obj); // 输出 {name: "张三", age: 18, gender: "男"}

2.2 常用方法

关联数组的常用方法与普通数组的方法有所不同,常用的方法有:

  • Object.keys():获取对象的所有键名组成的数组
  • Object.values():获取对象的所有键值组成的数组
  • Object.entries():获取对象的所有键值对组成的数组

2.3 示例2:统计一段文本中各单词出现的次数

实现方式:

let str = 'Hello JavaScript World World';
let arr = str.split(' ');
let obj = {};
for (let i = 0; i < arr.length; i++) {
  if (obj[arr[i]] === undefined) {
    obj[arr[i]] = 1;
  } else {
    obj[arr[i]]++;
  }
}
console.log(obj); // 输出 {Hello: 1, JavaScript: 1, World: 2}

总结

在JavaScript中,可以使用普通数组和关联数组来存储数据,使用方式和方法有所不同。我们需要根据实际的需求来选择使用哪种数组类型,进行合理的设计和使用。

本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:js中的关联数组与普通数组详解 - Python技术站

(0)
上一篇 2023年5月27日
下一篇 2023年5月27日

相关文章

  • 解决JS请求服务器gbk文件乱码的问题

    当我们使用JavaScript从服务器请求文本数据时,可能会遇到文本编码不符合UTF-8(如GBK)的情况,导致在浏览器端显示出错了,我们需要对此进行处理。 1. 了解传统的字符编码方式 在 Web 开发初期,世界各地的计算机都有自己的字符编码规范,因此引起了字符编码混乱的情况。后来,Unicode 规范提出来,尝试解决全球字符集的问题,UTF-8 字符编码…

    JavaScript 2023年5月19日
    00
  • JS实现的视频弹幕效果示例

    下面是详细讲解“JS实现的视频弹幕效果示例”的完整攻略: 简介 视频弹幕效果是目前比较流行的一种视频播放方式,也可以为网页增加一些互动性。通过JS实现的视频弹幕效果,可以让用户在看视频时发表自己的评论或者观点,同时其他用户也可以看到这些弹幕,增加了互动性。 准备工作 安装编译环境 首先需要安装编译环境,包括node.js,npm,webpack等。如果您还不…

    JavaScript 2023年6月11日
    00
  • 如何制作自己的原生JavaScript路由

    这里为大家详细讲解一下如何制作自己的原生JavaScript路由。 什么是JavaScript路由 JavaScript路由是一种通过JavaScript对页面URL进行控制的技术,它可以实现局部刷新,无需完全刷新页面即可展示新的内容,并且可以通过状态管理实现前端路由系统。 如何制作自己的JavaScript路由 步骤如下: 1. 创建HTML页面 我们以一…

    JavaScript 2023年6月11日
    00
  • JS 数组随机洗牌的实例代码

    让我来详细讲解一下“JS 数组随机洗牌的实例代码”的完整攻略。 什么是数组随机洗牌 数组随机洗牌是指将一个数组中的元素随机打乱顺序的过程。通常用于游戏场景、抽奖等场景。 实现数组随机洗牌的步骤 下面是一份 JS 数组随机洗牌的实例代码,接下来我会详细讲解它: function shuffle(arr) { var len = arr.length; for(…

    JavaScript 2023年5月27日
    00
  • 实例教程 HTML5 Canvas 超炫酷烟花绽放动画实现代码

    让我来详细讲解一下 “实例教程 HTML5 Canvas 超炫酷烟花绽放动画实现代码”的完整攻略。 1. 简介 本文将教您如何使用 HTML5 Canvas 绘制炫酷的烟花绽放动画。烟花中的每个小点都是由一颗小小的圆组成,我们将使用 Canvas 绘制这些小圆,然后使用动画效果让它们绽放。在本文中,我们将使用 JavaScript 和 Canvas API …

    JavaScript 2023年6月11日
    00
  • js实现列表自动滚动循环播放

    实现列表自动滚动循环播放,可以通过JS的定时器+无缝滚动来实现。 以下是步骤: 1、创建HTML结构 首先我们要有一个HTML结构来存放我们要用JS来动态生成的滚动列表,例如: <ul id="scrollList"> <li>第1行内容</li> <li>第2行内容</li> …

    JavaScript 2023年6月11日
    00
  • JavaScript 中的正则表达式(推荐)

    JavaScript 中的正则表达式 什么是正则表达式? 正则表达式(Regular Expression),简称 RegEx,在计算机科学领域属于字符串处理的技术,用于处理字符串模式匹配问题。正则表达式是一种特殊的字符序列,它可以帮助开发者通过给定的模式来匹配和查找字符串。JavaScript 内置了一套正则表达式的功能,可以用于字符串的操作和处理。 正则…

    JavaScript 2023年6月10日
    00
  • JavaScript实现列表分页功能特效

    下面是“JavaScript实现列表分页功能特效”的完整攻略: 一、理解列表分页功能的实现原理 在网页中使用 JavaScript 和 DOM 操作来获取并显示数据。例如使用 XMLHttpRequest 对象来获取数据,然后使用 DOM 操作将数据添加到页面中。 将获取到的数据分页处理。例如,计算需要显示的页面数,并为用户提供翻页按钮来切换不同的页面。 根…

    JavaScript 2023年6月11日
    00
合作推广
合作推广
分享本页
返回顶部