百度360必应搜狗淘宝本站头条
当前位置:网站首页 > 编程字典 > 正文

JavaScript数组方法速查手册极简版

toyiye 2024-06-21 12:06 10 浏览 0 评论

1.1 前言

JavaScript数组方法速查手册极简版中共收了32个数组的常用方法和属性,并根据方法的用途进行重新排序和分类,在文中简要的介绍了方法作用和用例说明。收藏备用吧!

文中介绍的过于简单,想更更多理解相关内容还是要多多动手实践!

2 数组属性

2.1 length-长度属性

每个数组都有一个length属性。针对稠密数组,length属性值代表数组中元素的个数。当数组是稀疏数组时,length属性值大于元素的个数。

var array1 = [ 'a', 'b', 'c' ]; 
console.log(array1.length); // 输出 3
array1.length = 2;
console.log(array1); // 输出 [ "a", "b" ]

3 数组方法

3.1 Array.isArray-类型判定

Array.isArray() 数组类型判定。

console.log(Array.isArray([1, 2, 3])); // 输出 true
console.log(Array.isArray({num: 123})); //输出 false

3.2 Array.of-创建数组

Array.of() 从可变数量的参数创建数组,不管参数的数量或类型如何。

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

3.3 Array.from-创建数组

Array.from() 用类数组或可迭代对象创建新数组。

console.log(Array.from('abcd')); // 输出 [ "a", "b", "c", "d" ]
console.log(Array.from([1, 2, 3], x => x + 1)); // 输出 [ 2, 3, 4 ]

4 数组原型方法

4.1 查找元素

4.1.1 find-按函数查找

Array.prototype.find() 找到第一个满足检测函数条件的元素,并返回该元素,没找到则返回 undefined。

var array1 = [1, 2, 3, 4, 5];
console.log(array1.find(x => x > 3)); // 输出 4

4.1.2 findIndex-按函数查找

Array.prototype.findIndex() 找到第一个满足检测函数条件的元素,并返回该元素索引。找不到返回-1。

var array1 = [6, 7, 8, 9, 10];
console.log(array1.findIndex(x => x > 8)); // 输出 3

4.1.3 indexOf-按元素值查找

Array.prototype.indexOf() 查找元素并返回元素索引值,找不到返回-1。

var arr= [1, 2, 3, 4];
console.log(arr.indexOf(3)); // 输出 2
console.log(arr.indexOf(6)); // 输出 -1
console.log(arr.indexOf(2, 2)); // 输出 -1

第二个参数表示查找的起始位置。

4.1.4 lastIndexOf-按元素值查找

Array.prototype.lastIndexOf() 从后向前查找元素并返回元素索引值,找不到返回 -1。

var arr = ['a', 'b', 'c', 'd'];
console.log(arr.lastIndexOf('b')); // 输出 1
console.log(arr.lastIndexOf('e')); // 输出 -1

4.2 添加元素

4.2.1 push-尾部添加

Array.prototype.push() 在尾部添加一个或多个元素,返回数组的新长度。

var array1= ['a', 'b', 'c'];
console.log(array1.push('d')); // 输出 4
console.log(array1); // 输出 [ "a", "b", "c", "d" ]

4.2.2 unshift-头部添加

Array.prototype.unshift() 在头部添加一个或多个元素,并返回数组的新长度。

var array1 = [ 4, 5, 6 ];
console.log(array1.unshift(3)); // 输出 4
console.log(array1); // 输出 [ 3, 4, 5, 6 ]
console.log(array1.unshift(1, 2)); // 输出 6
console.log(array1); // 输出 [ 1, 2, 3, 4, 5, 6 ]

4.3 删除元素

4.3.1 pop-尾部删除

Array.prototype.pop() 从尾部删除一个元素,并返回该元素。

var array1= ['a', 'b', 'c', 'd'];
console.log(array1.pop()); // 输出 d
console.log(array1); // 输出 [ "a", "b", "c" ]

4.3.2 shift-头部删除

Array.prototype.shift() 从头部删除一个元素,并返回该元素。

var array1 = [1, 2, 3];
console.log(array1.shift()); // 输出 1
console.log(array1); // 输出 [ 2, 3 ]

4.4 替换元素

4.4.1 splice-添加替换删除

Array.prototype.splice() 添加、替换、删除元素。会改变原数组。

var array1 = [ 'a', 'c', 'd' ];
array1.splice( 1, 0, 'b');
console.log(array1); // 输出 [ "a", "b", "c", "d" ]
array1.splice(1,1);
console.log(array1); // 输出 [ "a", "c", "d" ]
array1.splice(1,1,'bb','cc');
console.log(array1); // 输出 [ "a", "bb", "cc", "d" ]

array.splice(start[, deleteCount[, item1[, item2[, ...]]]])

  • 参数 start:表示替换的位置
  • 参数 deleteCount :表示删除元素的数量
  • 参数 item1... : 表示添加的元素

4.5 顺序相关

4.5.1 sort-排序

Array.prototype.sort() 数组排序,改变原数组。

var array1 = [ 4, 3, 10, 2 ];
console.log(array1.sort()); // 输出 [ 10, 2, 3, 4 ]
console.log(array1.sort((x1, x2) => x1 > x2)); // 输出 [ 2, 3, 4, 10 ]

4.5.2 reverse-反序

Array.prototype.reverse() 倒置数组,并返回新数组。会改变原数组。

var sourceArray= [ 'a', 'b', 'c' ];
var reverseArray = sourceArray.reverse();
console.log(reverseArray); // 输出 [ "c", "b", "a" ]
console.log(sourceArray == reverseArray); // 输出 true

4.6 遍历迭代

4.6.1 keys-键迭代器

Array.prototype.keys() 数组的键迭代器。

var array1 = ['a', 'b', 'c'];
for (let key of array1.keys()) {
 console.log(key); // 输出 0, 1, 2
}

4.6.2 values-值迭代器

Array.prototype.values() 数组的值迭代器。

const array1 = ['a', 'b', 'c'];
const iterator = array1.values();
for (const value of iterator) {
 console.log(value); // 输出 a b c
}

4.6.3 entries-键/值对迭代器

Array.prototype.entries() 数组的键/值对迭代器。

var array1 = ['a', 'b', 'c'];
var iterator1 = array1.entries();
console.log(iterator1.next().value); // 输出 Array [0, "a"]
console.log(iterator1.next().value); // 输出 Array [ 1, "b" ] 

4.6.4 forEach-遍历

Array.prototype.forEach() 遍历数组中的元素,并执行回调函数。

var arr = [1, 2, 3, 4];
arr.forEach(function (x) {
 console.log(x + 1); // 输出 2 3 4 5
}); 

4.7 检测

4.7.1 includes-值包含检测

Array.prototype.includes() 值包含检测,如包含返回 true,不包含返回false。

var array1 = [1, 2, 3];
console.log(array1.includes(2)); // 输出 true
console.log(array1.includes(4)); // 输出 false

4.7.2 some-函数包含检测

Array.prototype.some() 检测数组中是否有元素可以通过检测函数验证。

var array1 = [ 1, 2, 3, 4 ];
console.log(array1.some(x => x >3)); // 输出 true
console.log(array1.some(x => x > 5)); // 输出 false

4.7.3 every-函数完全检测

Array.prototype.every() 检测数组中是否所有元素都可以通过检测函数验证。

var array1 = [ 1, 2, 3, 4, 5 ];
console.log(array1.every(x => x < 8)); //输出 true
console.log(array1.every(x => x < 4)); //输出 false

4.8 合并

4.8.1 join-合并成字符串

Array.prototype.join() 合并数组中所有元素成为字符串并返回。

var array1= [ 'a', 'b', 'c' ];
console.log(array1.join()); // 输出 a,b,c
console.log(array1.join("-")); // 输出 a-b-c

4.9 累计

4.9.1 reduce-左侧累计

Array.prototype.reduce() 从左至右按 reducer 函数组合元素值,并返回累计器终值。

const array1 = [1, 2, 3, 4];
const reducer = (accumulator, currentValue) => accumulator + currentValue;
// 1 + 2 + 3 + 4
console.log(array1.reduce(reducer)); // 输出 10
// 5 + 1 + 2 + 3 + 4
console.log(array1.reduce(reducer, 5)); // 输出 15,其中5是累计器初始值。

5 结尾

5.1 结语

文中介绍的过于简单,想更多理解相关内容还是要多多动手实践!

因时间不足,能力有限等原因,存在文字阐述不准及代码测试不足等诸多问题。如发现错误请不吝指正!谢谢。

来源:慕课网

原文链接:https://zhuanlan.zhihu.com/p/64664862

相关推荐

为何越来越多的编程语言使用JSON(为什么编程)

JSON是JavascriptObjectNotation的缩写,意思是Javascript对象表示法,是一种易于人类阅读和对编程友好的文本数据传递方法,是JavaScript语言规范定义的一个子...

何时在数据库中使用 JSON(数据库用json格式存储)

在本文中,您将了解何时应考虑将JSON数据类型添加到表中以及何时应避免使用它们。每天?分享?最新?软件?开发?,Devops,敏捷?,测试?以及?项目?管理?最新?,最热门?的?文章?,每天?花?...

MySQL 从零开始:05 数据类型(mysql数据类型有哪些,并举例)

前面的讲解中已经接触到了表的创建,表的创建是对字段的声明,比如:上述语句声明了字段的名称、类型、所占空间、默认值和是否可以为空等信息。其中的int、varchar、char和decimal都...

JSON对象花样进阶(json格式对象)

一、引言在现代Web开发中,JSON(JavaScriptObjectNotation)已经成为数据交换的标准格式。无论是从前端向后端发送数据,还是从后端接收数据,JSON都是不可或缺的一部分。...

深入理解 JSON 和 Form-data(json和formdata提交区别)

在讨论现代网络开发与API设计的语境下,理解客户端和服务器间如何有效且可靠地交换数据变得尤为关键。这里,特别值得关注的是两种主流数据格式:...

JSON 语法(json 语法 priority)

JSON语法是JavaScript语法的子集。JSON语法规则JSON语法是JavaScript对象表示法语法的子集。数据在名称/值对中数据由逗号分隔花括号保存对象方括号保存数组JS...

JSON语法详解(json的语法规则)

JSON语法规则JSON语法是JavaScript对象表示法语法的子集。数据在名称/值对中数据由逗号分隔大括号保存对象中括号保存数组注意:json的key是字符串,且必须是双引号,不能是单引号...

MySQL JSON数据类型操作(mysql的json)

概述mysql自5.7.8版本开始,就支持了json结构的数据存储和查询,这表明了mysql也在不断的学习和增加nosql数据库的有点。但mysql毕竟是关系型数据库,在处理json这种非结构化的数据...

JSON的数据模式(json数据格式示例)

像XML模式一样,JSON数据格式也有Schema,这是一个基于JSON格式的规范。JSON模式也以JSON格式编写。它用于验证JSON数据。JSON模式示例以下代码显示了基本的JSON模式。{"...

前端学习——JSON格式详解(后端json格式)

JSON(JavaScriptObjectNotation)是一种轻量级的数据交换格式。易于人阅读和编写。同时也易于机器解析和生成。它基于JavaScriptProgrammingLa...

什么是 JSON:详解 JSON 及其优势(什么叫json)

现在程序员还有谁不知道JSON吗?无论对于前端还是后端,JSON都是一种常见的数据格式。那么JSON到底是什么呢?JSON的定义...

PostgreSQL JSON 类型:处理结构化数据

PostgreSQL提供JSON类型,以存储结构化数据。JSON是一种开放的数据格式,可用于存储各种类型的值。什么是JSON类型?JSON类型表示JSON(JavaScriptO...

JavaScript:JSON、三种包装类(javascript 包)

JOSN:我们希望可以将一个对象在不同的语言中进行传递,以达到通信的目的,最佳方式就是将一个对象转换为字符串的形式JSON(JavaScriptObjectNotation)-JS的对象表示法...

Python数据分析 只要1分钟 教你玩转JSON 全程干货

Json简介:Json,全名JavaScriptObjectNotation,JSON(JavaScriptObjectNotation(记号、标记))是一种轻量级的数据交换格式。它基于J...

比较一下JSON与XML两种数据格式?(json和xml哪个好)

JSON(JavaScriptObjectNotation)和XML(eXtensibleMarkupLanguage)是在日常开发中比较常用的两种数据格式,它们主要的作用就是用来进行数据的传...

取消回复欢迎 发表评论:

请填写验证码