广告
返回顶部
首页 > 资讯 > 前端开发 > JavaScript >JavaScript数组常用方法解析及数组扁平化
  • 929
分享到

JavaScript数组常用方法解析及数组扁平化

2024-04-02 19:04:59 929人浏览 薄情痞子
摘要

目录前言一、常用数组操作方法push末尾追加元素pop删除数组末尾元素sort排序shift数组开头添加元素 && unshift数组开头删除元素数组合并concat

前言

数组作为在开发中常用的集合,除了for循环遍历以外,还有很多内置对象的方法,包括map,以及数组筛选元素filter等。

注:文章结尾处附深层次数组扁平化方法操作。

作为引用数据类型的一种,在处理数组Array的时候,我们需要考虑到深拷贝和浅拷贝的情况

可以参考以下文章:

  • javascript深拷贝和浅拷贝的简单介绍
  • javaScript中一些常见的数据类型检查校验

一、常用数组操作方法

push末尾追加元素


let user = ["zhangsan", "lisi"];
console.log(user.push("xiaoming")); //	3
console.log(user); // ["zhangsan", "lisi", "xiaoming"]
let user1 = ["xiaowang", "xiaoming"];
let user2 = ["zhangsan", "lisi"];
console.log(Array.prototype.push.apply(user1, user2)); // 	4
console.log(user1); // ["xiaowang", "xiaoming", "zhangsan", "lisi"]

pop删除数组末尾元素


let user = ["zhangsan", "lisi"];
console.log(user.pop()); //	lisi
console.log(user); //	["zhangsan"]
let empArray = [];
console.log(empArray.pop()); //	undefined

sort排序




const user = ["zhangsan", "lisi", "xiaoming", "xiaowang"];
user.sort();
console.log(user); // ["lisi", "xiaoming", "xiaowang", "zhangsan"]
const array1 = [1, 30, 4, 21, 100000];
array1.sort();
console.log(array1); // [1, 100000, 21, 30, 4]


var numbers = [4, 2, 5, 1, 3];
let sortFun = function (a, b) {
  return a - b;
};
numbers.sort(sortFun);
console.log(numbers); // [1, 2, 3, 4, 5]

shift数组开头添加元素 && unshift数组开头删除元素


let user = ["zhangsan", "lisi"];
console.log(user.shift()); //	zhangsan
console.log(user); //	["lisi"]
let empArray = [];
console.log(empArray.shift()); //	undefined
let user1 = ["xiaoming", "xiaowang"];
console.log(user1.unshift("xiaoming1", "xiaowang1")); //	4
console.log(user1); //	["xiaoming1", "xiaowang1", "xiaoming", "xiaowang"]

数组合并concat



let user = ["zhangsan", "lisi"];
let user1 = [["xiaowang"], { name: "xiaoming" }];
console.log(user.concat(user1)); // ["zhangsan","lisi",["xiaowang"],{name: "xiaoming"}]
console.log(user); // ["zhangsan", "lisi"]

indexOf查找元素 && includes查找元素是否存在


let user = ["zhangsan", "lisi"];
console.log(user.indexOf("lisi")); // 1
console.log(user.indexOf("xiaoming")); // -1
let user1 = ["zhangsan", ["xiaowang"], { name: "xiaoming" }];
console.log(user1.includes("zhangsan")); // true
console.log(user1.includes(["xiaowang"])); // false
console.log(user1.includes({ name: "xiaoming" })); // false

reverse反转数组


let user = ["zhangsan", "lisi", "xiaoming"];
console.log(user.reverse()); // ["xiaoming", "lisi", "zhangsan"]
console.log(user); // ["xiaoming", "lisi", "zhangsan"]
let user1 = ["zhangsan", ["xiaowang", "lisi"], { name: "xiaoming" }];
console.log(user1.reverse()); // [{name: "xiaoming"},["xiaowang", "lisi"],"zhangsan"]

数组切割成字符串join


let user = ["zhangsan", "lisi", "xiaoming"];
console.log(user.join(" ")); // zhangsan lisi xiaoming
console.log(user.join("")); // zhangsanlisixiaoming
console.log(user.join(",")); // zhangsan,lisi,xiaoming
console.log(user.join({ a: 1 })); // zhangsan[object Object]lisi[object Object]xiaoming
console.log(user); // ["zhangsan", "lisi", "xiaoming"]

slice操作数组,替换,删除,新增

slice使用的范围较广,不同的参数可以实现对数组的删除,新增和替换等,使用的时候需要注意参数的具体使用方法


const animals = ["ant", "bison", "camel", "duck", "elephant"];
console.log(animals.slice(2)); // Array ["camel", "duck", "elephant"]
console.log(animals.slice(2, 4)); // Array ["camel", "duck"]
console.log(animals.slice(1, 5)); // Array ["bison", "camel", "duck", "elephant"]
console.log(animals.slice(-2)); // Array ["duck", "elephant"]
console.log(animals.slice(2, -1)); // Array ["camel", "duck"]
console.log(animals.slice()); // Array ["ant", "bison", "camel", "duck", "elephant"]

const months = ["Jan", "March", "April", "June"];
months.splice(1, 0, "Feb"); // 下表为1,插入一个元素
console.log(months); // ["Jan", "Feb", "March", "April", "June"]
months.splice(4, 1, "May"); // 替换下标为4的元素
console.log(months); // ["Jan", "Feb", "March", "April", "May"]
let del = months.splice(1, 1); // 删除
console.log(del); // ["Feb"]
console.log(months); // ["Jan", "April", "May"]

every校验数组所有元素


const isBelowThreshold = (currentValue) => currentValue < 40;
const array1 = [1, 30, 39, 29, 10, 13];
console.log(array1.every(isBelowThreshold)); // true

some 测试数组中是不是至少有1个元素通过了被提供的函数测试。返回值是布尔值


const array = [1, 2, 3, 4, 5];
const even = (element) => element % 2 === 0; //确认偶数
console.log(array.some(even)); // true;

深层次递归数组flat



let arr1 = [1, 2, [3, 4]];
console.log(arr1.flat()); // [1, 2, 3, 4]
let arr2 = [1, 2, [3, 4, [5, 6]]];
console.log(arr2.flat()); // [1, 2, 3, 4, [5, 6]]
let arr3 = [1, 2, [3, 4, [5, 6]]];
console.log(arr3.flat(2)); // [1, 2, 3, 4, 5, 6]
//使用 Infinity,可展开任意深度的嵌套数组
let arr4 = [1, 2, [3, 4, [5, 6, [7, 8, [9, 10]]]]];
console.log(arr4.flat(Infinity)); // [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
let objarray = [{ name: "zhangsan", children: ["张三"] }];
console.log(objArray.flat(Infinity)); // [{ name: "zhangsan", children: ["张三"] }]

map遍历数组


const array1 = [1, 4, 9, 16];
const map1 = array1.map((x) => x * 2);
console.log(map1); // [2, 8, 18, 32]

二、总结

到此这篇关于JavaScript数组常用方法解析和深层次js数组扁平化的文章就介绍到这了,更多相关JavaScript数组内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网!

--结束END--

本文标题: JavaScript数组常用方法解析及数组扁平化

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

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

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

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

下载Word文档
猜你喜欢
  • JavaScript数组常用方法解析及数组扁平化
    目录前言一、常用数组操作方法push末尾追加元素pop删除数组末尾元素sort排序shift数组开头添加元素 && unshift数组开头删除元素数组合并concat...
    99+
    2022-11-13
  • JavaScript数组实现扁平化四种方法详解
    目录1. 常规递归法2. reduce方法3. 扩展运算符实现4. split和toString共同处理数组的扁平化就是将一个嵌套多层的数组 array(嵌套可以是任何层数)转换为只...
    99+
    2022-11-13
    JS数组扁平化 JS数组
  • 怎么解析JavaScript数组去重和扁平化函数
    这篇文章将为大家详细讲解有关怎么解析JavaScript数组去重和扁平化函数,文章内容质量较高,因此小编分享给大家做个参考,希望大家阅读完这篇文章后对相关知识有一定的了解。1、数组扁平化(又称数组降维)flat() 方法会按照一个可指定的深...
    99+
    2023-06-22
  • JavaScript中数组扁平化的方法有哪些
    这篇文章将为大家详细讲解有关JavaScript中数组扁平化的方法有哪些,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。数组扁平化数组扁平化是指将一个多维数组变为一个一维数...
    99+
    2022-10-19
  • 解数组去重和数组扁平化的方法有哪些
    这篇文章主要介绍“解数组去重和数组扁平化的方法有哪些”,在日常操作中,相信很多人在解数组去重和数组扁平化的方法有哪些问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”解数组去重和...
    99+
    2022-10-19
  • 5种 JavaScript 方式实现数组扁平化
    目录一、数组扁平化概念 二、实现1. reduce2. toString & split3. join & split4. 递归5. 扩展运算符一、数组扁平化概念 ...
    99+
    2022-11-12
  • JavaScript面试之如何实现数组拍平(扁平化)方法
    目录1 什么叫数组拍平? 2 JS标准库中的数组拍平方法 3 实现一个flat方法 3.1 如何遍历一个数组 3.2 如何判断元素是否为数组 3.3 递归 3.4 初步实现flat方...
    99+
    2022-11-12
  • JS实现数组扁平化的方法分享
    目录过程什么是扁平化方法一:flat方法二:递归前言 当我们遇到一个 树形结构的数据,或者 多层嵌套 的数组,如果想拿到数组项的 某一个 字段值,操作起来将会很麻烦,这个时候就需要我...
    99+
    2023-05-16
    JS实现数组扁平化 JS数组扁平化 JS数组
  • JavaScript中如何使用reduce实现数组扁平化
    这篇文章主要为大家展示了“JavaScript中如何使用reduce实现数组扁平化”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“JavaScript中如何使用r...
    99+
    2022-10-19
  • JavaScript中如何使用flat()实现数组扁平化
    小编给大家分享一下JavaScript中如何使用flat()实现数组扁平化,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!数组扁平...
    99+
    2022-10-19
  • JavaScript中如何使用正则实现数组扁平化
    这篇文章给大家分享的是有关JavaScript中如何使用正则实现数组扁平化的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。数组扁平化是指将一个多维数组变为一个一维数组const&n...
    99+
    2022-10-19
  • JavaScript中如何使用函数递归实现数组扁平化
    小编给大家分享一下JavaScript中如何使用函数递归实现数组扁平化,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!数组扁平化是...
    99+
    2022-10-19
  • JavaScript中如何使用正则表达式实现数组扁平化
    这篇文章主要介绍了JavaScript中如何使用正则表达式实现数组扁平化,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。数组扁平化是指将一个多...
    99+
    2022-10-19
  • 详解JavaScript数组的常用方法
    目录数组的常用方法pop()unshift()shift()slice()splice()数组元素去重concat()join()reverse()sort()总...
    99+
    2022-11-12
  • 常用的JavaScript数组方法
    目录1、filter()2、forEach()3、some()4、every()5、reduce()6、合并数组1、filter() 语法: array.filter(functi...
    99+
    2022-11-12
  • JavaScript常用数组去重的方法及对比详解
    目录前言特殊类型代码一(暴力解法)代码二(ES6)代码三(indexOf + forEach)代码四(indexOf + filter)代码五(sort排序,不支持Symbol)代码...
    99+
    2022-11-13
  • Swift 数组及常用方法详解总结
    目录1. 创建数组2. 快捷创建重复元素的数组3. 数组相加4. 常用方法5. 数组遍历Swift 数组及常用方法 1. 创建数组 // 创建整型数组 var array1: [...
    99+
    2022-11-12
  • JavaScript常用数组去重方法
    本篇内容主要讲解“JavaScript常用数组去重方法”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“JavaScript常用数组去重方法”吧!数组去重,一般都是在面试的时候才会碰到,一般是要求手...
    99+
    2023-06-20
  • C++ vector数组用法及解析
    目录一、什么是vector数组 二、vector的基本操作vector数组的初始化向vector中插入元素删除元素遍历数组利用vector创建动态二维数组一、什么是vector数组 ...
    99+
    2022-11-12
  • Javascript数组常用方法是什么
    这篇文章将为大家详细讲解有关Javascript数组常用方法是什么,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。push 向数组内添加一个或多个元素,添加到数组的最后面,方法返回值是新数组的长度。arr....
    99+
    2023-06-29
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作