Erlo

图解 JavaScript 数组方法

时间:2021-07-21   阅读:37次   来源:开源中国
页面报错
点赞

图解 JavaScript 数组方法

JavaScript 数组方法,经常用到的大概 10 个左右,在文章《JavaScript 数组操作必须熟练运用的10个方法》中用文字和代码介绍了各个方法的使用,本文就不做太多的介绍,本文将通过图解析一下常用的数组方法的功能,再补充数组的几个方法。

Array.fill()

.fill() 方法是用一个固定值填充一个数组中的元素,从起始索引到终止索引内的全部元素,即将数组中的所有元素更改为另外的值,从开始索引(默认为 0)到结束索引(默认为 array.length),最终返回修改后的数组。

语法:Array.fill(value,start,end)

  • value:为需要处理的数组
  • start:开始索引(默认为 0)
  • end:结束索引(默认为 array.length),如指定结束索引,是不包括索引本身的元素
const articles = [
    "《如何在 Vue 的计算属性中传递参数》作者:天行无忌",
    "《Angular数据状态管理框架:NgRx/Store》作者:天行无忌",
    "《Angular管道PIPE介绍》作者:天行无忌",
];
const replaceArticle =
    "《JavaScript 数组操作必须熟练运用的10个方法》作者:天行无忌";

console.log([...articles].fill(replaceArticle, 1)); // 从索引为 1 的元素开始的素有元素替换,
/*
[
  '《如何在 Vue 的计算属性中传递参数》作者:天行无忌',
  '《JavaScript 数组操作必须熟练运用的10个方法》作者:天行无忌',
  '《JavaScript 数组操作必须熟练运用的10个方法》作者:天行无忌'
]
*/

console.log([...articles].fill(replaceArticle, 1, 2)); // 从索引为 1 的开始到索引为2的元素替换,不包括索引为2的元素在内
/* 
[
  '《如何在 Vue 的计算属性中传递参数》作者:天行无忌',
  '《JavaScript 数组操作必须熟练运用的10个方法》作者:天行无忌',
  '《Angular管道PIPE介绍》作者:天行无忌'
]
*/

Array.from()

.from() 方法从一个类似数组或可迭代对象创建一个新的,浅拷贝的数组实例。

语法:Array.from(arrayLike,mapFn)

  • arrayLike:想要转换成数组的伪数组对象或可迭代对象
  • mapFn:可选,如果指定了该参数,新数组中的每个元素会执行该回调函数
console.log(Array.from([1, 2, 3], (item) => item + item)); // [ 2, 4, 6 ]
console.log(Array.from("china")); // [ 'c', 'h', 'i', 'n', 'a' ]

使用方法

这里大概介绍一下 Array.fill()Array.from() 的使用方法,但不限于本文介绍。

创建数组并赋值

这里介绍几种创建于数组并赋值的方法,首先可以使用 Array.fill 方法创建一个填充有值的数组,但一般是同值数组。

const numbers = new Array(5).fill(1);
console.log(numbers); // [ 1, 1, 1, 1, 1 ]

上面创建了一个全是 15 维数组,new Array(5) 创建一个有 5 维数组,再适用 .fill() 将每维替换为 1

可以通过对一个空数组调用 keys 方法,生成一个升序的数组,如下:

const numbers = [...new Array(5).keys()];
console.log(numbers); // [ 0, 1, 2, 3, 4 ]

还可以用 Array.from() 和一些计算方法来填充一个数组,如下:

const numbers = Array.from(new Array(5), (_, i) => i ** 2);
console.log(numbers); // [ 0, 1, 4, 9, 16 ]

上面创建了一个 0-4 的数字平方组成的数组,如果需要创建 undefined 组成的数组,如下:

const undefineds = [...new Array(3)];
console.log(undefineds); // [ undefined, undefined, undefined ]

创建重复值

在JavaScript 中创建重复值,常见有四种方式:

  • 使用循环
  • 使用 Array.fill()
  • 使用 repeat()
  • 使用 Array.from()

repeat()构造并返回一个新字符串,该字符串包含被连接在一起的指定数量的字符串的副本。

语法:str.repeat(count)

  • count:整数,表示在新构造的字符串中重复了多少遍原字符串。
const china = "
                    

评论留言

还没有评论留言,赶紧来抢楼吧~~

吐槽小黑屋()

* 这里是“吐槽小黑屋”,所有人可看,只保留当天信息。

  • Erlo吐槽

    Erlo.vip2021-08-04 23:38:49Hello、欢迎使用吐槽小黑屋,这就是个吐槽的地方。
  • 返回顶部

      给这篇文章打个标签吧~

      棒极了 糟糕透顶 好文章 PHP JAVA JS 小程序 Python SEO MySql 确认