专栏首页一只想做全栈的猫【前端芝士树】Array的属性及方法整理(参照MDN)

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

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

Array

const arr = ["1", "2", "3", "four", "hello"];
let arrObj = new Array();

Array的基本属性

// 属性
console.log(arr.length); //5
console.log(arr.__proto__);

Array的一些方法

Array 增删改查 && 基础功能

/**
 * 增删改查 && 基础功能
 */
// 增删改
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 遍历

// 遍历所有的元素
[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 测试

/**
 * 测试
 */
[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 转换 && 返回新的对象

/**
 * 转换 && 返回新的对象
 */
[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 实验中的功能 && 其他

/**
 * 实验中的功能 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"]

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 【前端芝士树】如何完成数组的扁平化 Array flattern?

    CloudCat
  • 【前端面试】字节跳动2019校招面经 - 前端开发岗(三)

    我手中有一堆扑克牌, 但是观众不知道它的顺序。 第一步, 我从牌顶拿出一张牌, 放到桌子上。 第二步, 我从牌顶再拿一张牌, 放在手上牌的底部。 第三步, 重复...

    CloudCat
  • 【前端面试】字节跳动2019校招面经 - 前端开发岗(二)

    querySelectorAll()返回的是DOM原生element对象 而jQuery的选择器返回的是jQuery的包装对象,同时包含了原生DOM对象和一些j...

    CloudCat
  • 实现全球同服,保障业务出海——腾讯云跨域加速解决方案

    以游戏业务为例,国内游戏厂商在海外发行游戏时,面临的首要问题即怎样在保障功能的情况下,尽量降低异地或海外接入点的访问时延,提升玩家的接入体验。

    Tina
  • 日更152天,一夜回到解放前!

    大前天的深夜的时候一番正在准备当天的文章,本来已经写好了,就差复制到公众号上推送了,但被一些事打断了,等再回来整理完格式推送完的时候,惊奇的发现已经过了24点了...

    efonfighting
  • 连接redis

    使用Redigo这个库 package main import ( "fmt" "redis" "time" "strconv" ) var ( ...

    李海彬
  • [测试(4)]第一个全对者发红包

    单选题,在公众号留言回答。第一个全答对着获得奖金红包。本消息发布24小时后公布答案和得奖者。

    用户6288414
  • MySQL很慢... 怎么破??

    MySQL性能慢,多半是SQL引起的(慢查询日志会把执行慢的SQL,一五一十的记录下来,就像你的身体一样诚实..)需要根据慢查询日志的内容来优化SQL。

    [3306 Pai ] 社区
  • 【排序算法】-冒泡排序

    冒泡排序是所有排序算法里最为简单的一种,也是面试经常让你手写的一种算法。说实话在此之前我也写不出来冒泡,所以在算法这块我也是下过功夫的,今天我就来通俗讲解冒泡排...

    胖虎
  • 17张图揭密支付宝系统架构

    支付宝的系统架构图,仅供参考。不管是不是支付行业,都值得我们参考,学习。 ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?

    Java技术栈

扫码关注云+社区

领取腾讯云代金券

玩转腾讯云 有奖征文活动