序列生成器是生成一个指定起始值和结束值的序列,并且根据指定间隔长度,生成序列数组。
完成此功能需要使用到Array内置对象的from()对象,以及类数组相关知识,前面几篇有相关案例进行演示。
地址一:JavaScript内置对象 - Array数组(二)- 方法_觉醒法师的博客-CSDN博客
地址二:JavaScript内置对象 - Array数组(三)- 自定义ArrayList_觉醒法师的博客-CSDN博客
一、类数组
类数组对象,是指可以通过索引属性访问元素并且拥有 length 属性的对象。
类数组对象和数组区别是类数组对象不对直接调用数组的方法,需要通过Function.call和Funcation.apply来间接调用。
类数组对象是从零开始,且以递增的整数为键名,定义了length表示 元素个数的对象,叫做类数组对象。
对于类数组和Array.from()方法,不少人应该比较陌生,希望通过此案例让大家了解到它们的功能及便捷之处。
示例:
const objArr = { 0: "How", 1: "are", 2: "you", length: 3
}
二、from()方法
Array.from() 方法从一个类似数组或可迭代对象创建一个新的数组并返回。from()方法具体可以去“地址一”中了解。这里咱们知道它可以将类数组转换为新的数组实例即可,示例如下:
const objArr = { 0: "How", 1: "are", 2: "you", length: 3 }console.log(Array.from(objArr));
输出结果如下:
[ 'How', 'are', 'you' ]
三、序列生成器实现
3.1 生成指定长度数组
通过创建类数组,并指定其长度后,通过Array.from()方法将其转换为指定长度的空数组,然后通过循环实现元素递增功能。
示例:
/*** 序列生成器*/
const generatorSequence = (start, end, step) => {// 生成一个指定长度的空数组let arr = Array.from({ length: (end - start) / step + 1 });console.log(arr);
}// 生成0~9元素的数组,每递增为1
generatorSequence(0, 9, 1);
输出结果:
[
undefined, undefined,
undefined, undefined,
undefined, undefined,
undefined, undefined,
undefined, undefined
]
3.2 实现递增功能
Array.from()方法第二个参数指定,则新数组中的每个元素会执行该回调函数。所以这里可以利用此特性,将空数组中所有undefined循环递增为序列数值。
示例:
/*** 序列生成器*/
const generatorSequence = (start, end, step) => {// 生成一个指定长度的空数组// (_, i) 因为空数组,所以第一个参数 “_” 返回结果为undefined,第二个参数“i”为索引值let arr = Array.from({ length: (end - start) / step + 1 }, (_, i) => start + (i * step));console.log(arr);
}// 生成0~9元素的数组,每递增为1
generatorSequence(0, 9, 1);
输出结果:
[
0, 1, 2, 3, 4,
5, 6, 7, 8, 9
]
此时,序列生成器则已实现,此功能并不复杂,咱们再对其进行优化下,代码如下:
/*** 序列生成器*/
const generatorSequence = (start, end, step) => Array.from({ length: (end - start) / step + 1 }, (_, i) => start + (i * step));// 生成0~9元素的数组,每递增为1
const arr = generatorSequence(0, 5, 1);
// 输出结果
console.log(arr);
输出结果:
[ 0, 1, 2, 3, 4, 5 ]
3.3 生成偶数
示例:
/*** 序列生成器*/
const generatorSequence = (start, end, step) => Array.from({ length: (end - start) / step + 1 }, (_, i) => start + (i * step));// 生成偶数
const arr = generatorSequence(0, 10, 2);
// 输出结果
console.log(arr);
输出结果:
[ 0, 2, 4, 6, 8, 10 ]
3.4 生成年份
示例:
/*** 序列生成器*/
const generatorSequence = (start, end, step) => Array.from({ length: (end - start) / step + 1 }, (_, i) => start + (i * step));// 生成0~9元素的数组,每递增为1
const arr = generatorSequence(2010, 2023, 1);
// 输出结果
console.log(arr);
输出结果:
[
2010, 2011, 2012,
2013, 2014, 2015,
2016, 2017, 2018,
2019, 2020, 2021,
2022, 2023
]
3.5 年份转换为Object
示例:
/*** 序列生成器*/
const generatorSequence = (start, end, step) => Array.from({ length: (end - start) / step + 1 }, (_, i) => start + (i * step));// 生成0~9元素的数组,每递增为1
const arr = generatorSequence(2010, 2023, 1).map(item => {return {label: item,value: item}
});
// 输出结果
console.log(arr);
输出结果:
[
{ label: 2010, value: 2010 },
{ label: 2011, value: 2011 },
{ label: 2012, value: 2012 },
{ label: 2013, value: 2013 },
{ label: 2014, value: 2014 },
{ label: 2015, value: 2015 },
{ label: 2016, value: 2016 },
{ label: 2017, value: 2017 },
{ label: 2018, value: 2018 },
{ label: 2019, value: 2019 },
{ label: 2020, value: 2020 },
{ label: 2021, value: 2021 },
{ label: 2022, value: 2022 },
{ label: 2023, value: 2023 }
]
3.6 生成A~Z字母
这里将使用到charCodeAt()方法,这是一个字符串方法,用于检索特定字符的Unicode值。当生成A~Z之间的Unicode码时,需要使用fromCharCode()方法,这也是字符串方法,用于将Unicode码转换为字符。
示例:
/*** 序列生成器*/
const generatorSequence = (start, end, step) => Array.from({ length: (end - start) / step + 1 }, (_, i) => start + (i * step));
// 生成A~Z之间字符
const arr = generatorSequence('A'.charCodeAt(0), 'Z'.charCodeAt(0), 1);
// 输出结果
console.log(arr);
输出结果:
[
65, 66, 67, 68, 69, 70, 71, 72,
73, 74, 75, 76, 77, 78, 79, 80,
81, 82, 83, 84, 85, 86, 87, 88,
89, 90
]
以上则都是Unicode码,所以在生成序列数组后,可使用Array.map()方法将所有值转换为字符,代码如下:
/*** 序列生成器*/
const generatorSequence = (start, end, step) => Array.from({ length: (end - start) / step + 1 }, (_, i) => start + (i * step));
// 生成A~Z之间字符
const arr = generatorSequence('A'.charCodeAt(0), 'Z'.charCodeAt(0), 1).map(item => String.fromCharCode(item));
// 输出结果
console.log(arr);
输出结果:
[
'A', 'B', 'C', 'D', 'E', 'F',
'G', 'H', 'I', 'J', 'K', 'L',
'M', 'N', 'O', 'P', 'Q', 'R',
'S', 'T', 'U', 'V', 'W', 'X',
'Y', 'Z'
]
3.7 汉字生成
字母既然能生成出来,汉字自然也可以。不过Unicode对汉字支持不怎么好,简体和繁体总共有六七万个汉字,UCS-2最多能表示65536个,所以Unicode只能排除一些几乎不用的汉字。
示例:
/*** 序列生成器*/
const generatorSequence = (start, end, step) => Array.from({ length: (end - start) / step + 1 }, (_, i) => start + (i * step));
// 生成汉字
const arr = generatorSequence('一'.charCodeAt(0), '二'.charCodeAt(0), 1).map(item => String.fromCharCode(item));
// 输出结果
console.log(arr);
输出结果:
[
'一', '丁', '丂', '七', '丄', '丅', '丆', '万', '丈', '三', '上', '下',
'丌', '不', '与', '丏', '丐', '丑', '丒', '专', '且', '丕', '世', '丗',
'丘', '丙', '业', '丛', '东', '丝', '丞', '丟', '丠', '両', '丢', '丣',
'两', '严', '並', '丧', '丨', '丩', '个', '丫', '丬', '中', '丮', '丯',
'丰', '丱', '串', '丳', '临', '丵', '丶', '丷', '丸', '丹', '为', '主',
'丼', '丽', '举', '丿', '乀', '乁', '乂', '乃', '乄', '久', '乆', '乇',
'么', '义', '乊', '之', '乌', '乍', '乎', '乏', '乐', '乑', '乒', '乓',
'乔', '乕', '乖', '乗', '乘', '乙', '乚', '乛', '乜', '九', '乞', '也',
'习', '乡', '乢', '乣',
... 41 more items
]
序列生成器相关功能暂时先介绍到这,希望对大家有用。