JS基本功修炼,一文搞懂JavaScript数组

简介: 笔记

1. 数组概述


1. 1 数组是什么?

  • 数组可以看成是一个容器,用来存放值
  • 举个例子:
  • 一整栋楼可以看成一个数组
  • 里面的每一个房间都是数组的元素,它们一起组成了整个数组

1.2 数组的定义

以下两种方式定义的数组是一样的:

// 字面向量
let arr = [1, 2, 3, 4];
// new 关键字创建一个实例,继承至基类Array
let arr2 = new Array(1,2,3,4);

21.png


2. 访问数组


2.1 访问数组的值或属性

let arr2 = new Array(1,2,3,4);
// 访问数组的长度
let len = arr2.length;  // len 为 4
// 访问具体某一项 
// 下标为0 是数组的第一项
let val = arr2[1];    // [1] 为数组的第二项 2

2.2 循环读取

  • for() 循环
  • map() 循环
  • forEach() 循环

以for() 循环为例:

let arr = [1, 2, 3, 4];
for(let i = 0; i < arr.length; i++){
  // 依次打印 1,2,3,4
  console.log(arr[i])
}


3. 二维及多维数组


  • 类似于俄罗斯套娃,一层套着一层
  • 一般在工作中并不常见,但是需要了解一下
// 二维数组
let arr3 = [[1,2,3],[4,5,6]]; 
// 二维数组的取值
let val = arr3[1][1];   // 此时的val = 5
// 二维数组的循环取值
// 多维数组数据的读取
let html = '';
let test = document.getElementById("test");
console.log(arr3[0][0]);
// 多维数组的遍历
arr3.forEach(arr => {
    arr.forEach(arr2 => {
        console.log(arr2)
        // 实例
        html += '<li>我是第'+arr2+'个段落</li>';
    })
});
test.innerHTML = html;

22.png


4. 数组的常用操作


  • 数组合并,倒置,排序
 // 1. 数组合并
 let arr6 = [1,2,3];
 let arr7 = [4,5,6];
 let arr8 = arr7.concat(arr6);
 // console.log(arr8)
 // 2.数组倒置
 let arr9 = arr7.reverse();
 // console.log(arr9)
 // 3. 数组排序
 let arr10 = [2,1,7,3,8];
 arr10.sort();
  • 删除数组中指定元素(slice())
let arr = [1,2,3,4];
arr.slice(1,1);
console.log(arr);  // 1,3,4
  • 数组尾部追加元素(push())
let arr = [1,2,3,4];
arr.push(1,1);
console.log(arr);  // 1,2,3,4,5
  • 数组中删除最后一个元素(pop() )
let arr = [1,2,3,4];
arr.pop();
console.log(arr);  // 1,2,3
  • 数组中删除第一个元素(shift() )
let arr = [1,2,3,4];
arr.shift();
console.log(arr);  // 2,3,4
  • 数组中添加一个新元素,最前(unshift() )
let arr = [1,2,3,4];
arr.unshift(0);
console.log(arr);  //0,1,2,3,4
  • 根据下标删除数组某一项(delete)
let arr = [1,2,3,4];
delete arr[3]
console.log(arr);  //1,2,3
  • 拼接数组(splice())
let arr = [1,2,3,4];
arr.splice(2, 0, "5", "6");
console.log(arr);  //1,2,3,5,6,4

第一个参数(2)定义了应添加新元素的位置(拼接)。

第二个参数(0)定义应删除多少元素。

目录
相关文章
|
13天前
|
存储 JavaScript 索引
JS中数组的相关方法介绍
JS中数组的相关方法介绍
|
14天前
|
JavaScript Java
JS有趣的灵魂 清空数组
JS有趣的灵魂 清空数组
|
24天前
|
机器学习/深度学习 人工智能 JavaScript
js和JavaScript
js和JavaScript
21 4
|
1天前
|
存储 JavaScript 索引
js开发:请解释什么是ES6的Map和Set,以及它们与普通对象和数组的区别。
ES6引入了Map和Set数据结构。Map的键可以是任意类型且有序,与对象的字符串或符号键不同;Set存储唯一值,无重复。两者皆可迭代,支持for...of循环。Map有get、set、has、delete等方法,Set有add、delete、has方法。示例展示了Map和Set的基本操作。
11 3
|
2天前
|
JavaScript 前端开发
js开发:请解释this关键字在JavaScript中的用法。
【4月更文挑战第23天】JavaScript的this关键字根据执行环境指向不同对象:全局中指向全局对象(如window),普通函数中默认指向全局对象,作为方法调用时指向调用对象;构造函数中指向新实例,箭头函数继承所在上下文的this。可通过call、apply、bind方法显式改变this指向。
7 1
|
7天前
|
JavaScript 前端开发 索引
JavaScript 数组中的增、删、改、查
JavaScript 数组中的增、删、改、查
|
21天前
|
JavaScript 前端开发
JavaScript数组的功能内置类型
数组是JavaScript的内置类型,JavaScript数组的功能特别强大。下面简单介绍一下JavaScript数组。
|
21天前
|
存储 JavaScript 前端开发
在浏览器中存储数组和对象(js的问题)
在浏览器中存储数组和对象(js的问题)
|
24天前
|
JavaScript 前端开发
JavaScript生成的随机数随机字符串JS生成的随机数随机字符串
JavaScript生成的随机数随机字符串JS生成的随机数随机字符串
14 1
|
1月前
|
JavaScript 前端开发
js开发:请解释什么是模块化(modularization),并说明如何在JavaScript中实现模块化。
模块化将复杂系统拆分为松散耦合的模块,提高代码可读性、可维护性、可复用性和可扩展性。JavaScript模块化历经CommonJS(Node.js中常见,使用`require()`和`module.exports`)、AMD(RequireJS,异步加载,`define()`和`require()`)和ES6 Modules(官方标准,`import`和`export`)三个阶段。打包工具如Webpack、Rollup处理兼容性问题,使模块化代码能在各种环境中运行。