你真的知道怎么创建一个长度为n的有序数组吗?

简介: 最近做项目发现,越是简单的东西往往越是不简单,而如何把不简单的东西做简单,应该是每一个程序猿应该去追求的。

最近做项目发现,越是简单的东西往往越是不简单,而如何把不简单的东西做简单,应该是每一个程序猿应该去追求的。今天遇到一个问题让我重新思考了一下人生。。=.=
好了被绕晕没有,有的话思考一下这个问题,怎么创建一个长度为n的有序数组,像这样[0,1,2,3,4,5,…]。

很简单的问题是不是

你可能直接这样

let arr = []

for (let i = 0, len = 10; i < len ; i++) {
    arr = arr.concat([i])
}
// arr => [0,1,2,3,4,5,6,7,8,9]

不得不说这是最麻烦的办法。

或是这样

let arr = []

Array.from({length: 10}).map((key, index) => arr = arr.concat([index]))

// arr => [0,1,2,3,4,5,6,7,8,9]

比上一个好一点,但还是用到了遍历循环,有没有什么方法可以不用循环?

这里有一点难度了

我们可以这样

let arr = []

arr = Array.from(Array.apply(null, {length: 10}).keys())

// arr => [0,1,2,3,4,5,6,7,8,9]

简单粗暴,是不是突然醍醐灌顶

再简单粗暴一点?

let arr = []

arr = Array.from(Array(10).fill().keys())

// arr => [0,1,2,3,4,5,6,7,8,9]

可能下面的看起来清晰一点

let arr = []

arr.length = 10

Array.from(arr.keys())

// arr => [0,1,2,3,4,5,6,7,8,9]

好了,程序员是要会偷懒的,再少一点

已经不能再少了!

什么?还能再少?

let arr = []

arr = [...Array(10).fill().keys()]

// arr => [0,1,2,3,4,5,6,7,8,9]

让我们再少一点?

=.= 静静的看你…

let arr = []

arr = [...Array(10).keys()]

// arr => [0,1,2,3,4,5,6,7,8,9]

这里就是最简单的写法了

// 再做一下知识补充

Array.apply(null, {length: 10})

let arr = []
arr.length = 10

Array(10).fill()

Array(10)

// Array.apply(null, {length: 10}) 和 Array(10).fill()返回的是包含undefined的数组
// [undefined, undefined, ...]

// let arr = []; arr.length = 10 和 Array(10)返回的是包含空的数组
// [empty × 10]

写这篇文没什么特别高大上的新技术,但是也感到眼前一亮是不是。

最后看到这里也挺不容易,不放点有用的东西对不起看到这里的你

虽然ES6语法简单粗暴,但是在用到TypeScript的项目中上面的代码有一多半是会报错的。
简直怀疑人生,明明语法没有错!!

这里写图片描述

在 Vue + TypeScript 中测试,结果报错

这里写图片描述

Array.apply(...).keys().slice is not a function

可以看到,多出来一个slice方法,应该是ES6的扩展运算符…转义后变为了slice实现

然后测试

[...Array(10).fill().keys()] // 是没有问题的

Array(10).fill().keys().slice() // 发现和上面报错一样

果然是这里的问题,

// 打印这里,是一个数组的迭代器

console.log(Array(10).fill().keys())

// => Array Iterator {}

这里多谢大神的指导,我才弄清楚后面的问题。

在项目里,如果单纯的用babel转义ES6是没有问题的,转义后的代码是这样实现的。

这里写图片描述

但是在我的Vue项目里,由于有TypeScript,所以这部分ES6代码是被ts-loader转义的,他转义的结果是使用了slice实现,但是在迭代器上,是没有slice方法的,所以会出错。
这里写图片描述
然后知道了问题就去可以解决了,更改配置文件,让babel转义代码而不是用ts-loader。
但是我实在配置不了。。。
所以就换了一种方法去解决。

Object.keys(Array(10 + 1).join('.'))

// => ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"]

返回一个字符串元素的数组,然后使用的时候转换一下数据类型,就可以了。


最近已经找到解决方法了,这里贴出来。
修改tsconfig.json的配置

// ...
"target": "es6",
 "lib": [
   // ...
   "es6"
 ],

然后就可以了

文章原址:http://blog.csdn.net/qq_25243451/article/details/78883182

目录
相关文章
|
6月前
|
设计模式 算法 Java
【数据结构和算法】删掉一个元素以后全为 1 的最长子数组
这是力扣的 1493 题,难度为中等,解题方案有很多种,本文讲解我认为最奇妙的一种。又又又是一道滑动窗口的典型例题,可以帮助我们巩固滑动窗口算法。这道题很活灵活现,需要加深对题意的变相理解。给你一个二进制数组nums,你需要从中删掉一个元素。 请你在删掉元素的结果数组中,返回最长的且只包含 1 的非空子数组的长度。 如果不存在这样的子数组,请返回 0 。
97 1
|
6月前
|
Java C++ Python
leetcode-209:长度最小的子数组
leetcode-209:长度最小的子数组
44 0
|
11月前
|
算法
【LeetCode】每日一题&&两数之和&&寻找正序数组的中位数&&找出字符串中第一个匹配项的下标&&在排序数组中查找元素的第一个和最后一个位置
【LeetCode】每日一题&&两数之和&&寻找正序数组的中位数&&找出字符串中第一个匹配项的下标&&在排序数组中查找元素的第一个和最后一个位置
|
3月前
|
算法
【算法】二分查找——在排序数组中查找元素的第一个和最后一个位置
【算法】二分查找——在排序数组中查找元素的第一个和最后一个位置
|
5月前
|
C++
C++数组(定义、遍历、长度、地址、最大值、逆置、冒泡排序)
C++数组(定义、遍历、长度、地址、最大值、逆置、冒泡排序)
|
6月前
leetcode代码记录(长度最小的子数组
leetcode代码记录(长度最小的子数组
29 0
|
6月前
|
算法 测试技术 C#
C++二分查找或并集查找:交换得到字典序最小的数组
C++二分查找或并集查找:交换得到字典序最小的数组
|
6月前
|
存储 算法 Java
数据结构和算法面试题:给定一个整数数组 nums,找到一个具有最大和的连续子数组(子数组最少包含一个元素),返回其最大和。
数据结构和算法面试题:给定一个整数数组 nums,找到一个具有最大和的连续子数组(子数组最少包含一个元素),返回其最大和。
84 0
|
算法
【算法专题突破】二分查找 - 在排序数组中查找元素的第一个和最后一个位置(17)
【算法专题突破】二分查找 - 在排序数组中查找元素的第一个和最后一个位置(17)
59 0
|
C语言
【Leetcode-1574.删除最短的子数组使剩余数组有序(C语言)】
【Leetcode-1574.删除最短的子数组使剩余数组有序(C语言)】
49 0