企业网站用wordpress巢湖网站建设

        序列生成器是生成一个指定起始值和结束值的序列，并且根据指定间隔长度，生成序列数组。

        完成此功能需要使用到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
]

        序列生成器相关功能暂时先介绍到这，希望对大家有用。