JavaScript内置对象 - Array数组(四)- 序列生成器

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

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

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

猜你喜欢

转载自blog.csdn.net/jiciqiang/article/details/133500544