Loading [MathJax]/jax/output/CommonHTML/config.js
前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
社区首页 >专栏 >【前端芝士树】Array的属性及方法整理(参照MDN)

【前端芝士树】Array的属性及方法整理(参照MDN)

作者头像
CloudCat
发布于 2019-05-26 13:19:30
发布于 2019-05-26 13:19:30
49100
代码可运行
举报
运行总次数:0
代码可运行

本文主要是我自己对Array的一些整理,参考自MDN,其中的分类有些不准确之处,还望见谅

Array

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
const arr = ["1", "2", "3", "four", "hello"];
let arrObj = new Array();

Array的基本属性

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
// 属性
console.log(arr.length); //5
console.log(arr.__proto__);

Array的一些方法

Array 增删改查 && 基础功能

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
/**
 * 增删改查 && 基础功能
 */
// 增删改
arr.shift(); //删除数组的第一个元素
arr.pop(); //删除数组的最后一个元素
arr.unshift(); //在数组的开头一个或多个元素,
arr.push(); //在数组的末尾增加一个或者多个元素
[1, 2, 3].concat([6, 7, 8]); //数组合并 [1,2,3,6,7,8]
[1, 2, 3, 4, 5].copyWithin(0, 1, 2); // 浅复制一部分,[2,2,3,4,5], arr.copyWithin(target[, start[, end]])
// splice(start, deleteCount, item) 删除或者替换现有元素,返回被修改或者删除的部分
[1, 2, 3].splice(1, 0, "hello"); // [] 原数组变成了[1, 'hello', 2, 3]

// 查找
[1, 2, 3, 4, 5, 6].find(item => item > 3); // 返回复合条件的第一个值 4
[1, 2, 3, 4, 5, 6].findIndex(item => item > 3); // 返回复合条件的第一个值的位置索引 3
[1, 2, 3, 4, 5, 6].includes(3); // 判断数组是否包含一个指定的值 true
[1, 2, 3, 4, 5, 6].includes(7); // false
[1, 2, 3, 4, 5, 6].indexOf(3); // 判断数组是否包含一个指定的值 2
[1, 2, 3, 4, 5, 6].indexOf(7); // -1
[1, 2, 3, 4, 5, 6].lastIndexOf(3); // 从后往前找 2
[1, 2, 3, 4, 5, 6].lastIndexOf(7); // -1

Array 遍历

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
// 遍历所有的元素
[1, 2, 3, 4, 5, 6].forEach(item => console.log(item)); //1,2,3,4,5,6

// 填充数组
[1, 2, 3, 4, 5, 6].fill(0, 1); //[1, 0, 0, 0, 0, 0]
[1, 2, 3, 4, 5, 6].fill(); //[0, 0, 0, 0, 0, 0]

// 过滤数组
[1, 2, 3, 4, 5, 6].filter(item => {
  return item > 3;
}); // [4,5,6]

// 排序 原地归并算法 稳定 nlog(n)
[1, 3, 4, 2].sort(); // 默认从小到大 [1, 2, 3, 4]

Array 测试

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
/**
 * 测试
 */
[1, 30, 39, 29, 10, 13].every(currentValue => {
  return currentValue < 40;
}); // arr.every() 测试数组的所有元素是否是通过了指定函数 true
[1, 30, 39, 29, 10, 13].some(curr => curr < 2); // 测试是否至少有一个元素通过测试 true

Array 转换 && 返回新的对象

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
/**
 * 转换 && 返回新的对象
 */
[1, 2, 3, 4, 5, 6].join("-"); // 数组转为字符串 "1-2-3-4-5-6"
[1, 2, 3].toString(); // 转换为字符串,相当于join(','); "1,2,3"
[1, 2, 3].map(item => item * 2); // 映射器 [2, 4, 6]
[1, 2, 3].reduce((acc, curr) => {
  return acc + curr;
}); // 累加器 从左到右 6
[1, 2, 3].reverse(); // 翻转数组 [3, 2, 1]
[1, 2, 3].slice(1, 2); // 从原数组中选取值,返回新数组 slice(begin, end) [2]
const keys = ["a", "b", "c"].keys(); // 返回每个索引键的 Array Iterator {} 对象
for (let key of keys) {
  console.log(key); // expected output: 0 1 2
} // 0 1 2
const values = ["a", "b", "c"].values(); // 返回每个索引键的 Array Iterator {} 对象
for (const value of values) {
  console.log(value); // expected output: "a" "b" "c"
}

Array 实验中的功能 && 其他

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
/**
 * 实验中的功能 IE和Edge不支持
 *  */
// flat(depth) 展开嵌套数组
[1, 2, [3, 4, [5, 6]]].flat(); // [1, 2, 3, 4, [5, 6]]
[1, 2, [3, 4, [5, 6]]].flat(2); // [1, 2, 3, 4, 5, 6]
[1, 2, [3, 4, [5, 6]]].flat(Infinity); // [1, 2, 3, 4, 5, 6]

// 其他
const arr2 = Array.of(1, 2, 3); // [1,2,3]

const iter = ["a", "b", "c"].entries(); // 返回一个Array Iterator
iter.next().value; // [0, "a"]
本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
javascript 中Array一些操作方法
方法返回一个新的 Array Iterator 对象,该对象包含数组中每个索引的键/值对。
chuchur
2022/10/25
4970
常见的数组基本用法
ES5方法:pop push shift unshift reverse sort splice
前端迷
2021/04/09
9270
JavaScript array对象
concat()可以基于当前数组中的所有项创建一个新数组。即这个方法会先创建当前数组一个副本,然后将接收到的参数添加到这个副本的末尾,最后返回新构建的数组。
用户6973020
2020/03/01
1.4K0
【收藏】JavaScript数组方法速查手册极简版
JavaScript数组方法速查手册极简版中共收了32个数组的常用方法和属性,并根据方法的用途进行重新排序和分类,在文中简要的介绍了方法作用和用例说明。收藏备用吧!
毛瑞
2019/04/30
5070
【收藏】JavaScript数组方法速查手册极简版
22个超详细的 JS 数组方法
https://juejin.cn/post/6907109642917117965
前端达人
2021/01/27
3.4K0
Js中Array对象
JavaScript的Array对象是用于构造数组的全局对象,数组是类似于列表的高阶对象。
WindRunnerMax
2020/10/26
9.9K0
面试官:数组的哪些方法有副作用,哪些是没有副作用的?
如题,笔者之前在面试去哪时还真被问到过,由于平时只是在用,没有太注意哪些方法有无副作用,回答的略微有点尴尬,所以今天就来做个详细的总结。
zz_jesse
2021/01/20
7560
9102年了,Array数组的方法赶紧用起来!
写久了业务代码的我,已经要被社会抛弃了。今天回过头去巩固基础知识,发现有很多自己业务中不经常用,或者说是不知道那个方法,导致自己重写一个方法去实现。关于Array对象的方法你是否只用concat、join、pop、push、shift、unshift、reverse、sort、slice、splice、toString、indexOf、find等?接下来我们就一起回顾一下那些我们用的少或者没有用过的Array对象方法!
拾贰
2019/08/28
4140
9102年了,Array数组的方法赶紧用起来!
JavaScript —— Array 使用汇总
由于 length 和 prototype 两个属性比较通用,所以这里不过多的介绍。
Originalee
2020/06/11
6180
JavaScript —— Array 使用汇总
Js数组操作
JavaScript数组操作,主要包括Array对象原型方法以及常用操作如去重、扁平化、排序等。
WindRunnerMax
2020/08/27
16.9K0
最全 JavaScript Array 方法 详解
我们在日常开发中,与接口打交道最多了,前端通过访问后端接口,然后将接口数据二次处理渲染到页面当中。 二次处理的过程是 考验 Coder 对 Array 是否熟练 以及 在 何种 场景下使用哪种方法处理最优 。 小编,在最近开发中就遇到了 Array 问题, 在处理复杂的业务需求时,没想到Array 有类似的方法,然后将方法 组合起来解决当下问题。
程序员海军
2021/10/11
1.1K0
最全 JavaScript Array 方法 详解
js数组常用方法「建议收藏」
请注意,上面的代码没有按照数值的大小对数字进行排序,是按照字符编码的顺序进行排序,要实现这一点,就必须使用一个排序函数:
全栈程序员站长
2022/08/30
2.4K0
爆 肝 一 周 总 结 最全 JavaScript Array 方法详解
我们在日常开发中,与接口打交道最多了,前端通过访问后端接口,然后将接口数据二次处理渲染到页面当中。
程序员海军
2022/02/15
8010
爆 肝 一 周 总 结 最全 JavaScript Array 方法详解
ES6 数组方法归纳整理
Array.from() 可接收三个参数,第一个参数为类数组对象,第二个参数为映射函数,如果使用了映射函数,可以传第三个参数表示映射函数的this值。
全栈程序员站长
2022/06/27
5950
JavaScript的数组常规操作
在JavaScript中,数组必须使用数字索引,对象可以使用命名索引。 数组是特殊类型的对象,具有特有的一些属性和方法。
青梅煮码
2023/01/31
1.5K0
ES6数组新增
该方法可以将类数组对象或可遍历(iterable)的对象(包括 ES6 新增的数据结构 Set 和 Map)转换为数组对象,类数组即:可以通过索引访问元素,并且拥有 length 属性;
_kyle
2020/08/24
6670
重学JS-3-一图掌握JS容器
vector、list、queue看起来很容易混淆,其在C++中的区别,主要是在内存中的存储方式和支持的操作不同。
luciozhang
2023/04/22
1.4K0
重学JS-3-一图掌握JS容器
JavaScript常用数组操作方法,包含ES6方法
concat() 方法用于连接两个或多个数组。该方法不会改变现有的数组,仅会返回被连接数组的一个副本。
李才哥
2019/07/10
4470
JavaScript中数组的操作方法(含ES6)
push() 方法可向数组的末尾添加一个或多个元素,并返回新的数组长度。会改变原数组。
Caleb
2020/11/03
5830
「JS基础」Array 数组操作方法大全( 含ES6 )
因为数组操作的方法有很多,我们在实际项目中又会经常使用,本篇文章笔者一次性整理常用的数组操作方法 ( 包含 ES6 的 map、forEach、every、some、filter、find、from、of...等 ),熟悉了这些数组的操作方法,编起代码来也就会更加干净利落哟。
前端达人
2019/08/13
2.5K0
「JS基础」Array 数组操作方法大全( 含ES6 )
相关推荐
javascript 中Array一些操作方法
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
查看详情【社区公告】 技术创作特训营有奖征文
本文部分代码块支持一键运行,欢迎体验
本文部分代码块支持一键运行,欢迎体验