如何使用JavaScript快速创建一个1到100的数组

 更新时间:2022年08月23日 09:39:33   作者:HHHHy2019  
平时写代码时,我们会生产一些测试用的数组数据,比如[1,100]的数组值,下面这篇文章主要给大家介绍了关于如何使用JavaScript快速创建一个1到100数组的相关资料,需要的朋友可以参考下

代码示例:

let arr = []
// push方法
for(let i = 1,len=100;i<=100;i++){arr.push(i)}
//  or
//循环赋值
for(let i = 1,len=100;i<=100;i++){arr[i-1]=i}
// Array.from()方法 后面会有一点点的优化
Array.from({length:101}, (v,k) => k)// or Array.from(Array(101), (v,k) =>k);
Array.from(Array(101).keys())
arr.splice(0,1)

// 使用递归实现
// 当前值
// 最大长度
let arr = []
function setArray(current,maxLength,arr){
  if(arr.length<maxLength){
    arr[current-1] = current
    setArray(++current,maxLength,arr)
  }else{
      arr.filter(i=>i)// 去除假值 empty
  }
}
setArray(1,100,arr)
// 暂且不知道有没有性能问题

// 在网上看到一些方法,也蛮好玩的,但是不知道来源

// 1
let arr = Array(100).toString().split(',').map((item,index)=>index)// 0-> 99

// 2
let i = 0;
let timer = setInterval(function(){
  arr[i] = i++;
  if(i>=100){
    clearInterval(timer);
    console.log(arr);
  }
},1); // 0-> 99

// 3
Object.keys(Array.apply(null, {length:100})).map(item=>+item);// 0-> 99

// 4
[...Array(100).keys()]// 0-> 99
[...Array.from({length:100}).keys()]// 0-> 99

// mdn 看见的 序列生成器(指定范围)
const range = (start, stop, step) => Array.from({ length: (stop - start) / step + 1}, (_, i) =>  + (i * step));

range(1,100,1)// 1-> 100

//优化我上面写的
Array.from({length:100},(_, i)=>1+(i)) // 1-> 100

我觉得看起来最舒服的是: Array.from({length:100},(_, i)=>1+(i))

前提知识:

Array.from()

Array.from(arrayLike[, mapFn[, thisArg]])

arrayLike

想要转换成数组的伪数组对象或可迭代对象。

mapFn 可选

如果指定了该参数,新数组中的每个元素会执行该回调函数。

thisArg 可选

可选参数,执行回调函数 mapFnthis 对象。

返回值

一个新的数组实例。

用法:

  • String 生成 数组
  • Set 生成 数组
  • Map 生成 数组
  • 类数组 生成 数组

示例:从Map生成数组

const map = new Map([[1, 2], [2, 4], [4, 8]]);
Array.from(map);
// [[1, 2], [2, 4], [4, 8]]

const mapper = new Map([['1', 'a'], ['2', 'b']]);
Array.from(mapper.values());
// ['a', 'b'];

Array.from(mapper.keys());
// ['1', '2'];

其他:

Array.from({length: 100}) or  Array.from(Array(100))

// 都会生成
(100) [undefined,..., undefined]

数组实例方法keys()

keys()是ES6中新增的对键名的遍历,返回一个遍历器对象

apply(thisArg, [argsArray])

apply(thisArg, [argsArray])

参数

thisArg

必选的。在 func 函数运行时使用的 this 值。请注意,this可能不是该方法看到的实际值:如果这个函数处于非严格模式下,则指定为 nullundefined 时会自动替换为指向全局对象,原始值会被包装。

argsArray

可选的。一个数组或者类数组对象,其中的数组元素将作为单独的参数传给 func 函数。如果该参数的值为 nullundefined,则表示不需要传入任何参数。从ECMAScript 5 开始可以使用类数组对象。

返回值

调用有指定this值和参数的函数的结果。

补充:js中实现随机获取1-100的不重复的数组

    <script type="text/javascript">
        function getArr() {
            var i = 0;
            var arr = new Array();
            var p;
            while (i < 100) {
                //生成随机数
                var p = Math.floor(Math.random() * 100 + 1)
                if (arr.indexOf(p) == -1) {
                    arr[i] = p;
                    i++;
                }
            }
            return arr;
        }
    </script>

总结 

到此这篇关于如何使用JavaScript快速创建一个1到100数组的文章就介绍到这了,更多相关JS快速创建1到100数组内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • 用javascript关闭本窗口不弹出询问框的方法

    用javascript关闭本窗口不弹出询问框的方法

    ie中用close关闭非open打开的窗口时回弹出一个对话框询问用户,怎么去掉这个框呢,在window.close之前加上window.top.opener = null就可以了
    2014-09-09
  • 深入理解 webpack 文件打包机制(小结)

    深入理解 webpack 文件打包机制(小结)

    这篇文章主要介绍了深入理解 webpack 文件打包机制(小结),小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-01-01
  • 让浏览器非阻塞加载javascript的几种方法小结

    让浏览器非阻塞加载javascript的几种方法小结

    通常大多数浏览器是并行下载资源的,但由于外部脚本的特殊性例如通过脚本改变文档的DOM结构、脚本之间的存在依赖关系、使用document.write 向页面输出HTML等。
    2011-04-04
  • 微信小程序indexOf的替换方法(推荐)

    微信小程序indexOf的替换方法(推荐)

    这篇文章主要介绍了微信小程序indexOf的替换方法,本文给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
    2020-01-01
  • 微信小程序实现多张图片上传功能

    微信小程序实现多张图片上传功能

    这篇文章主要为大家详细介绍了微信小程序实现多张图片上传功能,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-11-11
  • js删除数组元素、清空数组的简单方法(必看)

    js删除数组元素、清空数组的简单方法(必看)

    下面小编就为大家带来一篇js删除数组元素、清空数组的简单方法(必看)。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-07-07
  • JavaScript继承的实现方式详解

    JavaScript继承的实现方式详解

    JavaScript 是一门基于原型的语言,它的继承机制与传统的基于类的面向对象编程有所不同,尽管 ES6 引入了 class 语法,但本质上仍然是基于原型链的继承,本文将详细介绍 JavaScript 继承的几种实现方式,需要的朋友可以参考下
    2025-03-03
  • JavaScript实现简单省市联动

    JavaScript实现简单省市联动

    这篇文章主要为大家详细介绍了JavaScript实现简单省市联动,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-10-10
  • 通过扫描二维码打开app的实现代码

    通过扫描二维码打开app的实现代码

    在项目开发中遇到这样的需求,扫描二维码打开app如果用户没有这个app则提示它跳转,怎么实现呢?下面小编给大家分享通过扫描二维码打开app的实现代码,感兴趣的朋友参考下吧
    2016-11-11
  • JS中parseInt()和map()用法分析

    JS中parseInt()和map()用法分析

    这篇文章主要介绍了JS中parseInt()和map()用法,结合实例形式分析了parseInt()和map()方法的功能、参数、具体用法与相关注意事项,需要的朋友可以参考下
    2016-12-12

最新评论