首页 > 编程语言 >【14.0】JavaScript之数组

【14.0】JavaScript之数组

时间:2024-02-27 10:00:38浏览次数:20  
标签:arr JavaScript console 14.0 元素 let 数组 log

【一】什么是数组

  • 数组是一组有序的数据集合,数组内部可以存放多个数据,不限制数据类型,数组的长度可以动态调整

  • 数组类似于Python当中的列表

【二】创建数组

  • 创建数据的最简单方式是通过字面量
var arr = []
  • 也可以通过数组对象去创建
var arr = new Array()
  • 存放多个数据,每个数据之间用,分隔

【三】数组获取元素

  • 可以通过索引获取数组内元素,索引从0开始
var arr = [1,2,3] 

arr[2] 
// 3
  • 如果索引超过最大值 得到的结果是 undefined

【四】数组的长度

  • 数组的length的属性表示数字的长度
var arr = [1,2,3] 

arr.length
// 3
  • 数组的长度等于最大索引值+1
  • 可以通过修改数组的length可以改变数组的长度,拉长了数组获取后续项的值是undefined
  • 如果缩短数组的长度,后续的项数会被删除,且不可逆

【五】数组常用的方法

方法名称 功能描述 返回值类型 是否改变原数组
forEach/for...of 遍历数组(forEach处理每个元素,for...of可读取元素并自动解包) 不会
concat 合并数组 新数组 不会
join 将数组转化为字符串 字符串 不会
pop 删除数组最后一个元素 删除的数据(即数组最后一个元素)
shift 删除数组第一个元素 删除的数据(即数组第一个元素)
unshift 在数组开头插入元素 新数组长度
push 在数组末尾添加元素 新数组长度
reverse 翻转数组顺序 翻转后的数组
sort 对数组元素排序 排序后的数组
slice 截取数组部分元素 新数组 不会
splice 插入、删除或替换数组元素 被删除或替换的元素
toString 数组转为字符串 字符串 不会
valueOf 获取数组原始值 原始值 不会
indexOf 查找指定元素在数组中的位置 元素索引(若不存在则返回 -1) 不会
lastIndexOf 查找指定元素在数组中最后一次出现的位置 元素索引 不会
map 应用函数映射数组元素 新数组 不会
filter 根据条件筛选数组元素 新数组 不会
every 判断数组所有元素是否都满足条件 布尔值 不会
some 判断数组是否有元素满足条件 布尔值 不会
reduce 按规则累积数组元素生成单个返回值 单一返回值 可以,但通常不会直接改变原数组
rightReduce 类似于reduce,但从数组末尾开始累积 单一返回值 可以,但通常不会直接改变原数组

【1】forEachfor...of

  • 遍历数组(forEach处理每个元素,for...of可读取元素并自动解包)
let arr = [1, 2, 3, 4, 5];

// forEach 示例
arr.forEach((item, index) => {
  console.log(`Element at index ${index}: ${item}`);
});

arr.forEach(function (item,index)  {
  console.log(`Element at index ${index}: ${item}`);
});

// for...of 示例
for (const item of arr) {
  console.log(item);
}

【2】concat

  • 合并数组
let arr1 = [1, 2, 3];
let arr2 = [4, 5, 6];
let arr3 = arr1.concat(arr2); // [1, 2, 3, 4, 5, 6]
console.log(arr1); // [1, 2, 3]  - 原数组未变

【3】join

  • 将数组转化为字符串
let arr = ['apple', 'banana', 'cherry'];
let str = arr.join(', '); // "apple, banana, cherry"
console.log(str);

【4】popshift

  • pop删除数组最后一个元素

  • shift删除数组第一个元素

let arr = ['a', 'b', 'c'];

// pop 示例
let poppedItem = arr.pop(); // "c"
console.log(poppedItem); // "c"
console.log(arr); // ["a", "b"]  - 原数组已变

// shift 示例
let shiftedItem = arr.shift(); // "a"
console.log(shiftedItem); // "a"
console.log(arr); // ["b"]    - 原数组已变

【5】unshift

  • 在数组开头插入元素
let arr = ['b', 'c'];
arr.unshift('a'); // 在数组开头插入元素
console.log(arr); // ["a", "b", "c"]

【6】push

  • 在数组末尾添加元素
let arr = ['a', 'b'];
arr.push('c', 'd'); // 在数组末尾添加元素
console.log(arr); // ["a", "b", "c", "d"]

【7】reverse

  • 翻转数组顺序
let arr = ['a', 'b', 'c'];
arr.reverse(); // 翻转数组顺序
console.log(arr); // ["c", "b", "a"]

【8】sort

  • 对数组元素排序
let arr = [3, 1, 4, 1, 5, 9];
arr.sort((a, b) => a - b); // 自定义排序规则,升序排列
console.log(arr); // [1, 1, 3, 4, 5, 9]

【9】slice

  • 截取数组部分元素
let arr = ['a', 'b', 'c', 'd', 'e'];
let slicedArr = arr.slice(1, 4); // 截取下标从1到3的子数组
console.log(slicedArr); // ["b", "c", "d"]
console.log(arr); // ["a", "b", "c", "d", "e"]  - 原数组未变

【10】splice

  • 插入、删除或替换数组元素
let arr = ['a', 'b', 'c', 'd', 'e'];
let removedItems = arr.splice(2, 2, 'x', 'y'); // 从下标2开始,删除2个元素,并在此位置插入'x'和'y'
console.log(removedItems); // ["c", "d"]
console.log(arr); // ["a", "b", "x", "y", "e"]  - 原数组已变

【11】toString

  • 数组转为字符串
let arr = [1, 2, 3];
let str = arr.toString(); // "1,2,3"
console.log(str);

【12】valueOf

  • 获取数组原始值
let arr = [1, 2, 3];
let val = arr.valueOf(); // [1, 2, 3]
console.log(val);

【13】indexOf

  • 查找指定元素在数组中的位置
let arr = ['a', 'b', 'c', 'd', 'a'];
let index = arr.indexOf('a'); // 0
console.log(index);

【14】lastIndexOf

  • 查找指定元素在数组中最后一次出现的位置
let arr = ['a', 'b', 'c', 'a', 'b'];
let lastIndex = arr.lastIndexOf('a'); // 4
console.log(lastIndex);

【15】map

  • 应用函数映射数组元素
let arr = [1, 2, 3, 4, 5];
let squaredArr = arr.map(num => num * num); // [1, 4, 9, 16, 25]
console.log(squaredArr);

【16】filter

  • 根据条件筛选数组元素
let arr = [1, 2, 3, 4, 5];
let evenNumbers = arr.filter(num => num % 2 === 0); // [2, 4]
console.log(evenNumbers);

【17】every

  • 判断数组所有元素是否都满足条件
let arr = [true, true, false];
let allTrue = arr.every(val => val); // false
console.log(allTrue);

【18】some

  • 判断数组是否有元素满足条件
let arr = [false, false, true];
let containsTrue = arr.some(val => val); // true
console.log(containsTrue);

【19】reduce

  • 按规则累积数组元素生成单个返回值
let arr = [1, 2, 3, 4, 5];
let sum = arr.reduce((total, num) => total + num, 0); // 15
console.log(sum);

【20】rightReduce

  • 类似于reduce,但从数组末尾开始累积
  • 此方法不是ES6标准提供的,但可以通过扩展运算符实现类似效果
let arr = [1, 2, 3, 4, 5];
let reversedSum = arr.reduceRight((total, num) => total + num, 0); // 15 (等于sum,因为是从后向前累加)
console.log(reversedSum);

【21】统计数组长度

var arr= [11,22,33,44,55,66];
// undefined

arr
// (6) [11, 22, 33, 44, 55, 66]

// (1)统计数组的个数
arr.length
// 6

【六】forEach方法

【1】一个参数

  • 数组中的每一个元素
// 类似于Python中的map函数
var ll = [11,22,33,44,55,66,77];
undefined

// 参数(一个函数,一个迭代列表)
ll.forEach(function (value) {
    console.log(value)
},ll)

/*
VM2817:2 11
VM2817:2 22
VM2817:2 33
VM2817:2 44
VM2817:2 55
VM2817:2 66
VM2817:2 77
undefined
*/

【2】两个参数

  • 数组中的每一个元素 + 数据的索引
// 类似于Python中的map函数
var ll = [11,22,33,44,55,66,77];
// undefined

// 参数(一个函数,一个迭代列表,元素所在的索引值)
ll.forEach(function (value,index) {
    console.log(value,index)
},ll)

/*
VM2856:2 11 0
VM2856:2 22 1
VM2856:2 33 2
VM2856:2 44 3
VM2856:2 55 4
VM2856:2 66 5
VM2856:2 77 6
undefined
*/

【3】三个参数

  • 数组中的每一个元素 + 数据的索引 + 数据的来源
// 类似于Python中的map函数
var ll = [11,22,33,44,55,66,77];
undefined

// 参数(一个函数,一个迭代列表,元素所在的索引值,数据的来源)
ll.forEach(function (value,index,arr) {
    console.log(value,index,arr)
},ll)

/*
VM2884:2 11 0 (7) [11, 22, 33, 44, 55, 66, 77]
VM2884:2 22 1 (7) [11, 22, 33, 44, 55, 66, 77]
VM2884:2 33 2 (7) [11, 22, 33, 44, 55, 66, 77]
VM2884:2 44 3 (7) [11, 22, 33, 44, 55, 66, 77]
VM2884:2 55 4 (7) [11, 22, 33, 44, 55, 66, 77]
VM2884:2 66 5 (7) [11, 22, 33, 44, 55, 66, 77]
VM2884:2 77 6 (7) [11, 22, 33, 44, 55, 66, 77]
undefined*/

【七】splice

【1】两个参数

  • 起始位置 + 删除的个数
ll
// (7) [11, 22, 33, 44, 55, 66, 77]

// 从索引为0的位置向后删除三个元素
ll.splice(0,3);
// (3) [11, 22, 33]
ll
// (4) [44, 55, 66, 77]

【2】三个参数

  • 先删除后添加
// 先将指定索引的元素删除,再在原来的位置添加后面的元素
ll
// (4) [44, 55, 66, 77]
ll.splice(0,1,888);
// [44]
ll
// (4) [888, 55, 66, 77]

【八】map

  • 类似于forEach
    • 也可以加三个参数
var l1 = [11,22,33,44,55,66,77,88]
// undefined
l1
// (8) [11, 22, 33, 44, 55, 66, 77, 88]

l1.map(function(value){console.log(value)},l1)

/*
VM3225:1 11
VM3225:1 22
VM3225:1 33
VM3225:1 44
VM3225:1 55
VM3225:1 66
VM3225:1 77
VM3225:1 88
*/
l1.map(function(value,index){return value*2},l1)
// (8) [22, 44, 66, 88, 110, 132, 154, 176]

【补】Python中常用方法

【1】添加元素的方式

  • append
    • 尾部追加
  • extend
    • 扩展列表
    • 内部是 for循环 + append
  • insert
    • 指定位置插入元素

【2】删除元素的方式

  • pop
    • 弹出元素(默认是最后一个元素)
  • remove
    • 移除元素
  • del
    • 删除元素通用方法

【3】常用的方法

  • map
    • 映射函数
  • zip
    • 拉链方法
    • 将两个列表中的元素两两拼接成元祖返回
  • filter
    • 过滤函数
    • 符合条件为真的元素被留下
  • reduce
    • 多个进一个出

标签:arr,JavaScript,console,14.0,元素,let,数组,log
From: https://www.cnblogs.com/dream-ze/p/18036248

相关文章

  • 【18.0】JavaScript之JS事件案例
    【一】开关灯示例<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>Title</title><style>.c1{height:400px;width:40......
  • 【17.0】JavaScript之DOM
    【一】什么是DOM/BOM文档对象模型(DocumentObjectModel,简称DOM)浏览器对象模型(BrowserObjectModel,简称BOM)是JavaScript与网页内容及浏览器环境进行交互的两种核心概念。【1】DOM(1)概述文档对象模型(DOM)是一个编程接口,它以树状结构来表示HTML或XML文档。在D......
  • JavaScript 实现JSON 对象数组以某个属性进行分组处理
    JavaScript实现JSON对象数组以某个属性进行分组处理要在JavaScript中对JSON对象数组的某个属性进行分组处理,你可以使用一个对象来存储分组后的结果。下面是一个简单的示例,演示了如何对JSON对象数组中的某个属性进行分组处理:假设我们有一个JSON对象数组,每个对象都有ca......
  • 【10.0】JavaScript之引入
    【一】JavaScript介绍【1】什么是jsjs也是一门编程语言,他可以写后端代码【2】什么是node.js前端由于非常受制于后端,所以有一些人异想天开想要通过js来编写后端代码一统江湖由此开发了一个叫nodejs的工具(支持js跑在后端服务器上)但是并不能完美的实现【3】JavaScript......
  • day42 动态规划part4 代码随想录算法训练营 46. 携带研究材料- 一维数组写法
    题目:46.携带研究材料我的感悟:一维是二维的压缩理解难点:倒序遍历j因为每轮的数字是由左上决定的。遍历的时候,从右侧遍历,是不会影响左侧的。听课笔记:代码示例:defbag_problem(weight,value,bagWeight):#初始化dp=[0]*(bagWeight+1)fori......
  • 34. 在排序数组中查找元素的第一个和最后一个位置C
    /***Note:Thereturnedarraymustbemalloced,assumecallercallsfree().*/int*searchRange(int*nums,intnumsSize,inttarget,int*returnSize){*returnSize=2;int*a=(int*)malloc(sizeof(int)*2);a[0]=-1;a[1]=-1;inthead=0,......
  • 前端get请求传递数组型参数时的处理方式
    场景后端get接口设计接受数组型查询参数时,只接受重复的query格式,如arr=[1,2,3],那么在query里的参数格式需要是a=1&a=2&a=3前端get请求直接传数组会默认处理为a[]=1&a[]=2&a[]=3,后端无法识别(恼),传json字符串和join拼接后端都不同意如果直接在url中做参数拼接,实在是又蠢又费力......
  • ES6技巧(快速解构赋值、数组去重、数组转对象)
    1.如何将a,b的值快速互换leta=1;letb=2;[a,b]=[b,a]解析:首先,我们有变量 a 被赋值为 1,变量 b 被赋值为 2。然后,[a,b]=[b,a] 这行代码实际上是将数组 [b,a] 解构赋值给了数组 [a,b]。在解构赋值过程中,右侧的数组 [b,a] 中的值会被依次赋给左侧......
  • JavaScript中的包装类型详解
    JavaScript中的包装类型详解在JavaScript中,我们有基本类型和对象类型两种数据类型。基本类型包括String,Number,Boolean,null,undefined和Symbol。然而,当我们需要在这些基本类型上调用方法时,就需要用到JavaScript的包装类型。什么是包装类型?包装类型是JavaScript中的......
  • NumPy数组图解
    N维数组的属性如果说强大而完备的第三方库,赋予了Python独特的魅力,那么N维数组(ndarray)便使得NumPy拥有了灵魂。我们仅以NumPy的一维数组为例介绍了一些函数的应用。而实际上,在机器学习中,要处理的数组大多数是N维的。需要说明的是,在物理内存中是不存在N维数组的,限于存储介......