refactor: use Array.from() instead new Array() (#52792)

* refactor: use Array.from() instead new Array() * chore: fix * chore: fix
2026-02-09 02:49:18 +08:00 · 2025-02-14 10:16:15 +08:00
parent 7aa87c2493
commit a5e7c4e849
39 changed files with 67 additions and 76 deletions
--- a/.dumi/pages/index/components/BannerRecommends.tsx
+++ b/.dumi/pages/index/components/BannerRecommends.tsx
@@ -113,7 +113,7 @@ export const BannerRecommendsFallback: React.FC = () => {
  const { isMobile } = useContext(SiteContext);
  const { styles } = useStyle();

-  const list = new Array(3).fill(1);
+  const list = Array.from({ length: 3 });

  return isMobile ? (
    <Carousel className={styles.carousel}>
@@ -141,7 +141,8 @@ const BannerRecommends: React.FC = () => {
  const data = useSiteData();
  const extras = data?.extras?.[lang];
  const icons = data?.icons || [];
-  const first3 = !extras || extras.length === 0 ? new Array(3).fill(null) : extras.slice(0, 3);
+  const first3 =
+    !extras || extras.length === 0 ? Array.from<any>({ length: 3 }) : extras.slice(0, 3);

  if (!data) {
    return <BannerRecommendsFallback />;
--- a/.dumi/pages/index/components/PreviewBanner/ComponentsBlock.tsx
+++ b/.dumi/pages/index/components/PreviewBanner/ComponentsBlock.tsx
@@ -119,7 +119,7 @@ const ComponentsBlock: React.FC = () => {
        <div style={{ flex: 'none' }}>
          <Dropdown.Button
            menu={{
-              items: new Array(5).fill(null).map((_, index) => ({
+              items: Array.from({ length: 5 }).map((_, index) => ({
                key: `opt${index}`,
                label: `${locale.option} ${index}`,
              })),
--- a/.dumi/pages/index/components/PreviewBanner/index.tsx
+++ b/.dumi/pages/index/components/PreviewBanner/index.tsx
@@ -69,11 +69,7 @@ const useStyle = () => {
        position: relative;
        z-index: 1;
        padding-inline: ${token.paddingXL}px;
-        text-shadow: ${new Array(5)
-          .fill(null)
-          .map(() => textShadow)
-          .join(', ')};
-
+        text-shadow: ${Array.from({ length: 5 }, () => textShadow).join(', ')};
        h1 {
          font-family: AliPuHui, ${token.fontFamily} !important;
          font-weight: 900 !important;
--- a/.dumi/theme/builtins/IconSearch/index.tsx
+++ b/.dumi/theme/builtins/IconSearch/index.tsx
@@ -44,7 +44,7 @@ const IconSearchFallback: React.FC = () => {
      </div>
      <Skeleton.Button active style={{ margin: '28px 0 10px', width: 100 }} />
      <div className={styles.fallbackWrapper}>
-        {new Array(24).fill(1).map((_, index) => (
+        {Array.from({ length: 24 }).map((_, index) => (
          <div key={index} className={styles.skeletonWrapper}>
            <Skeleton.Node active style={{ height: 110, width: '100%' }}>
              {' '}
--- a/components/auto-complete/demo/uncertain-category.tsx
+++ b/components/auto-complete/demo/uncertain-category.tsx
@@ -5,7 +5,7 @@ import type { AutoCompleteProps } from 'antd';
 const getRandomInt = (max: number, min = 0) => Math.floor(Math.random() * (max - min + 1)) + min;

 const searchResult = (query: string) =>
-  new Array(getRandomInt(5))
+  Array.from({ length: getRandomInt(5) })
    .join('.')
    .split('.')
    .map((_, idx) => {
--- a/components/cascader/demo/multiple.tsx
+++ b/components/cascader/demo/multiple.tsx
@@ -13,9 +13,10 @@ const options: Option[] = [
  {
    label: 'Light',
    value: 'light',
-    children: new Array(20)
-      .fill(null)
-      .map((_, index) => ({ label: `Number ${index}`, value: index })),
+    children: Array.from({ length: 20 }).map((_, index) => ({
+      label: `Number ${index}`,
+      value: index,
+    })),
  },
  {
    label: 'Bamboo',
--- a/components/cascader/demo/showCheckedStrategy.tsx
+++ b/components/cascader/demo/showCheckedStrategy.tsx
@@ -13,9 +13,10 @@ const options: Option[] = [
  {
    label: 'Light',
    value: 'light',
-    children: new Array(20)
-      .fill(null)
-      .map((_, index) => ({ label: `Number ${index}`, value: index })),
+    children: Array.from({ length: 20 }).map((_, index) => ({
+      label: `Number ${index}`,
+      value: index,
+    })),
  },
  {
    label: 'Bamboo',
--- a/components/config-provider/tests/popup.test.tsx
+++ b/components/config-provider/tests/popup.test.tsx
@@ -32,18 +32,9 @@ describe('ConfigProvider.Popup', () => {

  const selectLikeNodes = (
    <>
-      <Select
-        open
-        options={new Array(20).fill(null).map((_, index) => ({ value: index, label: index }))}
-      />
-      <TreeSelect
-        open
-        treeData={new Array(20).fill(null).map((_, index) => ({ value: index, title: index }))}
-      />
-      <Cascader
-        open
-        options={new Array(20).fill(null).map((_, index) => ({ value: index, label: index }))}
-      />
+      <Select open options={Array.from({ length: 20 }, (_, i) => ({ value: i, label: i }))} />
+      <TreeSelect open treeData={Array.from({ length: 20 }, (_, i) => ({ value: i, title: i }))} />
+      <Cascader open options={Array.from({ length: 20 }, (_, i) => ({ value: i, label: i }))} />
    </>
  );

--- a/components/date-picker/demo/multiple-debug.tsx
+++ b/components/date-picker/demo/multiple-debug.tsx
@@ -2,7 +2,7 @@ import React from 'react';
 import { DatePicker, Flex } from 'antd';
 import dayjs from 'dayjs';

-const defaultValue = new Array(10).fill(0).map((_, index) => dayjs('2000-01-01').add(index, 'day'));
+const defaultValue = Array.from({ length: 10 }).map((_, i) => dayjs('2000-01-01').add(i, 'day'));

 const App: React.FC = () => (
  <Flex vertical gap="small">
--- a/components/date-picker/design/demo/date-extra-info.tsx
+++ b/components/date-picker/design/demo/date-extra-info.tsx
@@ -58,7 +58,7 @@ const useStyle = createStyles(({ token }) => ({
  `,
 }));

-const seeds = new Array(30).fill(1).map(() => Math.random());
+const seeds = Array.from({ length: 30 }).map(Math.random);

 const getSales = (date: Dayjs) => Math.floor(seeds[date.date() % 30] * 10000);

--- a/components/grid/demo/responsive-flex.tsx
+++ b/components/grid/demo/responsive-flex.tsx
@@ -3,7 +3,7 @@ import { Col, Row } from 'antd';

 const App: React.FC = () => (
  <Row>
-    {new Array(10).fill(0).map((_, index) => {
+    {Array.from({ length: 10 }).map((_, index) => {
      const key = `col-${index}`;
      return (
        <Col
--- a/components/layout/tests/token.test.tsx
+++ b/components/layout/tests/token.test.tsx
@@ -27,7 +27,7 @@ describe('Layout.Token', () => {
          <Menu
            mode="horizontal"
            defaultSelectedKeys={['2']}
-            items={new Array(15).fill(null).map((_, index) => {
+            items={Array.from({ length: 15 }).map((_, index) => {
              const key = index + 1;
              return {
                key,
@@ -64,7 +64,7 @@ describe('Layout.Token', () => {
          <Menu
            mode="horizontal"
            defaultSelectedKeys={['2']}
-            items={new Array(15).fill(null).map((_, index) => {
+            items={Array.from({ length: 15 }).map((_, index) => {
              const key = index + 1;
              return {
                key,
--- a/components/layout/demo/component-token.tsx
+++ b/components/layout/demo/component-token.tsx
@@ -13,8 +13,7 @@ const items2: MenuProps['items'] = [UserOutlined, LaptopOutlined, NotificationOu
      key: `sub${key}`,
      icon: React.createElement(icon),
      label: `subnav ${key}`,
-
-      children: new Array(4).fill(null).map((_, j) => {
+      children: Array.from({ length: 4 }).map((_, j) => {
        const subKey = index * 4 + j + 1;
        return {
          key: subKey,
--- a/components/layout/demo/fixed.tsx
+++ b/components/layout/demo/fixed.tsx
@@ -3,7 +3,7 @@ import { Breadcrumb, Layout, Menu, theme } from 'antd';

 const { Header, Content, Footer } = Layout;

-const items = new Array(3).fill(null).map((_, index) => ({
+const items = Array.from({ length: 3 }).map((_, index) => ({
  key: String(index + 1),
  label: `nav ${index + 1}`,
 }));
--- a/components/layout/demo/top-side-2.tsx
+++ b/components/layout/demo/top-side-2.tsx
@@ -18,8 +18,7 @@ const items2: MenuProps['items'] = [UserOutlined, LaptopOutlined, NotificationOu
      key: `sub${key}`,
      icon: React.createElement(icon),
      label: `subnav ${key}`,
-
-      children: new Array(4).fill(null).map((_, j) => {
+      children: Array.from({ length: 4 }).map((_, j) => {
        const subKey = index * 4 + j + 1;
        return {
          key: subKey,
--- a/components/layout/demo/top-side.tsx
+++ b/components/layout/demo/top-side.tsx
@@ -18,8 +18,7 @@ const items2: MenuProps['items'] = [UserOutlined, LaptopOutlined, NotificationOu
      key: `sub${key}`,
      icon: React.createElement(icon),
      label: `subnav ${key}`,
-
-      children: new Array(4).fill(null).map((_, j) => {
+      children: Array.from({ length: 4 }).map((_, j) => {
        const subKey = index * 4 + j + 1;
        return {
          key: subKey,
--- a/components/layout/demo/top.tsx
+++ b/components/layout/demo/top.tsx
@@ -3,7 +3,7 @@ import { Breadcrumb, Layout, Menu, theme } from 'antd';

 const { Header, Content, Footer } = Layout;

-const items = new Array(15).fill(null).map((_, index) => ({
+const items = Array.from({ length: 15 }).map((_, index) => ({
  key: index + 1,
  label: `nav ${index + 1}`,
 }));
--- a/components/list/demo/loadmore.tsx
+++ b/components/list/demo/loadmore.tsx
@@ -40,7 +40,9 @@ const App: React.FC = () => {
  const onLoadMore = () => {
    setLoading(true);
    setList(
-      data.concat([...new Array(count)].map(() => ({ loading: true, name: {}, picture: {} }))),
+      data.concat(
+        Array.from({ length: count }).map(() => ({ loading: true, name: {}, picture: {} })),
+      ),
    );
    fetch(fakeDataUrl)
      .then((res) => res.json())
--- a/components/notification/demo/stack.tsx
+++ b/components/notification/demo/stack.tsx
@@ -17,9 +17,10 @@ const App: React.FC = () => {
  const openNotification = () => {
    api.open({
      message: 'Notification Title',
-      description: `${new Array(Math.round(Math.random() * 5) + 1)
-        .fill('This is the content of the notification.')
-        .join('\n')}`,
+      description: `${Array.from(
+        { length: Math.round(Math.random() * 5) + 1 },
+        () => 'This is the content of the notification.',
+      ).join('\n')}`,
      duration: null,
    });
  };
--- a/components/progress/Steps.tsx
+++ b/components/progress/Steps.tsx
@@ -28,7 +28,7 @@ const Steps: React.FC<ProgressStepsProps> = (props) => {
  const mergedSize = size ?? [stepWidth, strokeWidth];
  const [width, height] = getSize(mergedSize, 'step', { steps, strokeWidth });
  const unitWidth = width / steps;
-  const styledSteps: React.ReactNode[] = new Array(steps);
+  const styledSteps = Array.from<React.ReactNode>({ length: steps });
  for (let i = 0; i < steps; i++) {
    const color = Array.isArray(strokeColor) ? strokeColor[i] : strokeColor;
    styledSteps[i] = (
--- a/components/select/demo/debug-flip-shift.tsx
+++ b/components/select/demo/debug-flip-shift.tsx
@@ -5,7 +5,7 @@ const App: React.FC = () => (
  <Select
    style={{ width: 120, marginTop: '50vh' }}
    open
-    options={new Array(100).fill(null).map((_, index) => ({
+    options={Array.from({ length: 100 }).map((_, index) => ({
      value: index,
    }))}
  />
--- a/components/skeleton/Paragraph.tsx
+++ b/components/skeleton/Paragraph.tsx
@@ -24,8 +24,8 @@ const getWidth = (index: number, props: SkeletonParagraphProps) => {
 };

 const Paragraph: React.FC<SkeletonParagraphProps> = (props) => {
-  const { prefixCls, className, style, rows } = props;
-  const rowList = [...new Array(rows)].map((_, index) => (
+  const { prefixCls, className, style, rows = 0 } = props;
+  const rowList = Array.from({ length: rows }).map((_, index) => (
    // eslint-disable-next-line react/no-array-index-key
    <li key={index} style={{ width: getWidth(index, props) }} />
  ));
--- a/components/space/demo/wrap.tsx
+++ b/components/space/demo/wrap.tsx
@@ -3,7 +3,7 @@ import { Button, Space } from 'antd';

 const App: React.FC = () => (
  <Space size={[8, 16]} wrap>
-    {new Array(20).fill(null).map((_, index) => (
+    {Array.from({ length: 20 }).map((_, index) => (
      // eslint-disable-next-line react/no-array-index-key
      <Button key={index}>Button</Button>
    ))}
--- a/components/tabs/demo/card-top.tsx
+++ b/components/tabs/demo/card-top.tsx
@@ -33,7 +33,7 @@ const useStyle = createStyles(({ token, css }) => {
  `;
 });

-const items = new Array(3).fill(null).map((_, i) => {
+const items = Array.from({ length: 3 }).map((_, i) => {
  const id = String(i + 1);
  return {
    label: `Tab Title ${id}`,
--- a/components/tabs/demo/card.tsx
+++ b/components/tabs/demo/card.tsx
@@ -9,7 +9,7 @@ const App: React.FC = () => (
  <Tabs
    onChange={onChange}
    type="card"
-    items={new Array(3).fill(null).map((_, i) => {
+    items={Array.from({ length: 3 }).map((_, i) => {
      const id = String(i + 1);
      return {
        label: `Tab ${id}`,
--- a/components/tabs/demo/centered.tsx
+++ b/components/tabs/demo/centered.tsx
@@ -5,7 +5,7 @@ const App: React.FC = () => (
  <Tabs
    defaultActiveKey="1"
    centered
-    items={new Array(3).fill(null).map((_, i) => {
+    items={Array.from({ length: 3 }).map((_, i) => {
      const id = String(i + 1);
      return {
        label: `Tab ${id}`,
--- a/components/tabs/demo/component-token.tsx
+++ b/components/tabs/demo/component-token.tsx
@@ -36,7 +36,7 @@ const App: React.FC = () => (
        defaultActiveKey="1"
        tabBarExtraContent={<Button>Extra Action</Button>}
        style={{ marginBottom: 32 }}
-        items={new Array(3).fill(null).map((_, i) => {
+        items={Array.from({ length: 3 }).map((_, i) => {
          const id = String(i + 1);
          return {
            label: `Tab ${id}`,
@@ -50,7 +50,7 @@ const App: React.FC = () => (
        defaultActiveKey="1"
        tabBarExtraContent={<Button>Extra Action</Button>}
        style={{ marginBottom: 32 }}
-        items={new Array(3).fill(null).map((_, i) => {
+        items={Array.from({ length: 3 }).map((_, i) => {
          const id = String(i + 1);
          return {
            label: `Tab ${id}`,
@@ -64,7 +64,7 @@ const App: React.FC = () => (
        defaultActiveKey="1"
        tabBarExtraContent={<Button>Extra Action</Button>}
        style={{ marginBottom: 32 }}
-        items={new Array(3).fill(null).map((_, i) => {
+        items={Array.from({ length: 3 }).map((_, i) => {
          const id = String(i + 1);
          return {
            label: `Tab ${id}`,
@@ -78,7 +78,7 @@ const App: React.FC = () => (
        defaultActiveKey="1"
        tabBarExtraContent={<Button>Extra Action</Button>}
        style={{ marginBottom: 32 }}
-        items={new Array(3).fill(null).map((_, i) => {
+        items={Array.from({ length: 3 }).map((_, i) => {
          const id = String(i + 1);
          return {
            label: `Tab ${id}`,
@@ -91,7 +91,7 @@ const App: React.FC = () => (
        defaultActiveKey="1"
        centered
        type="card"
-        items={new Array(3).fill(null).map((_, i) => {
+        items={Array.from({ length: 3 }).map((_, i) => {
          const id = String(i + 1);
          return {
            disabled: i === 2,
@@ -106,7 +106,7 @@ const App: React.FC = () => (
        defaultActiveKey="1"
        centered
        type="card"
-        items={new Array(3).fill(null).map((_, i) => {
+        items={Array.from({ length: 3 }).map((_, i) => {
          const id = String(i + 1);
          return {
            disabled: i === 2,
@@ -121,7 +121,7 @@ const App: React.FC = () => (
        defaultActiveKey="1"
        centered
        type="card"
-        items={new Array(3).fill(null).map((_, i) => {
+        items={Array.from({ length: 3 }).map((_, i) => {
          const id = String(i + 1);
          return {
            disabled: i === 2,
--- a/components/tabs/demo/custom-add-trigger.tsx
+++ b/components/tabs/demo/custom-add-trigger.tsx
@@ -3,7 +3,7 @@ import { Button, Tabs } from 'antd';

 type TargetKey = React.MouseEvent | React.KeyboardEvent | string;

-const defaultPanes = new Array(2).fill(null).map((_, index) => {
+const defaultPanes = Array.from({ length: 2 }).map((_, index) => {
  const id = String(index + 1);
  return { label: `Tab ${id}`, children: `Content of Tab Pane ${index + 1}`, key: id };
 });
--- a/components/tabs/demo/custom-tab-bar.tsx
+++ b/components/tabs/demo/custom-tab-bar.tsx
@@ -3,7 +3,7 @@ import type { TabsProps } from 'antd';
 import { Tabs, theme } from 'antd';
 import StickyBox from 'react-sticky-box';

-const items = new Array(3).fill(null).map((_, i) => {
+const items = Array.from({ length: 3 }).map((_, i) => {
  const id = String(i + 1);
  return {
    label: `Tab ${id}`,
--- a/components/tabs/demo/extra.tsx
+++ b/components/tabs/demo/extra.tsx
@@ -14,7 +14,7 @@ const options = ['left', 'right'];

 type PositionType = 'left' | 'right';

-const items = new Array(3).fill(null).map((_, i) => {
+const items = Array.from({ length: 3 }).map((_, i) => {
  const id = String(i + 1);
  return {
    label: `Tab ${id}`,
--- a/components/tabs/demo/nest.tsx
+++ b/components/tabs/demo/nest.tsx
@@ -74,7 +74,7 @@ const App: React.FC = () => {
                tabPosition={childPos}
                type={childType}
                style={{ height: 300 }}
-                items={new Array(20).fill(null).map((_, index) => {
+                items={Array.from({ length: 20 }).map((_, index) => {
                  const key = String(index);
                  return {
                    label: `Tab ${key}`,
--- a/components/tabs/demo/position.tsx
+++ b/components/tabs/demo/position.tsx
@@ -24,7 +24,7 @@ const App: React.FC = () => {
      </Space>
      <Tabs
        tabPosition={tabPosition}
-        items={new Array(3).fill(null).map((_, i) => {
+        items={Array.from({ length: 3 }).map((_, i) => {
          const id = String(i + 1);
          return {
            label: `Tab ${id}`,
--- a/components/tabs/demo/size.tsx
+++ b/components/tabs/demo/size.tsx
@@ -75,7 +75,7 @@ const App: React.FC = () => {
        defaultActiveKey="1"
        size={size}
        style={{ marginBottom: 32 }}
-        items={new Array(3).fill(null).map((_, i) => {
+        items={Array.from({ length: 3 }).map((_, i) => {
          const id = String(i + 1);
          return {
            label: `Tab ${id}`,
@@ -89,7 +89,7 @@ const App: React.FC = () => {
        type="card"
        size={size}
        style={{ marginBottom: 32 }}
-        items={new Array(3).fill(null).map((_, i) => {
+        items={Array.from({ length: 3 }).map((_, i) => {
          const id = String(i + 1);
          return {
            label: `Card Tab ${id}`,
--- a/components/tabs/demo/slide.tsx
+++ b/components/tabs/demo/slide.tsx
@@ -21,7 +21,7 @@ const App: React.FC = () => {
        defaultActiveKey="1"
        tabPosition={mode}
        style={{ height: 220 }}
-        items={new Array(30).fill(null).map((_, i) => {
+        items={Array.from({ length: 30 }, (_, i) => {
          const id = String(i);
          return {
            label: `Tab-${id}`,
--- a/components/theme/themes/dark/index.ts
+++ b/components/theme/themes/dark/index.ts
@@ -11,7 +11,7 @@ const derivative: DerivativeFunc<SeedToken, MapToken> = (token, mapToken) => {
  const colorPalettes = Object.keys(defaultPresetColors)
    .map((colorKey) => {
      const colors = generate(token[colorKey as keyof PresetColorType], { theme: 'dark' });
-      return new Array(10).fill(1).reduce((prev, _, i) => {
+      return Array.from({ length: 10 }, () => 1).reduce<Record<string, string>>((prev, _, i) => {
        prev[`${colorKey}-${i + 1}`] = colors[i];
        prev[`${colorKey}${i + 1}`] = colors[i];
        return prev;
--- a/components/theme/themes/default/index.ts
+++ b/components/theme/themes/default/index.ts
@@ -19,17 +19,17 @@ export default function derivative(token: SeedToken): MapToken {
        token[colorKey as keyof PresetColorType] === presetPrimaryColors[colorKey]
          ? presetPalettes[colorKey]
          : generate(token[colorKey as keyof PresetColorType]);
-      return new Array(10).fill(1).reduce((prev, _, i) => {
+      return Array.from({ length: 10 }, () => 1).reduce<Record<string, string>>((prev, _, i) => {
        prev[`${colorKey}-${i + 1}`] = colors[i];
        prev[`${colorKey}${i + 1}`] = colors[i];
        return prev;
      }, {});
    })
-    .reduce((prev, cur) => {
+    .reduce<MapToken>((prev, cur) => {
      // biome-ignore lint/style/noParameterAssign: it is a reduce
      prev = { ...prev, ...cur };
      return prev;
-    }, {});
+    }, {} as MapToken);

  return {
    ...token,
--- a/components/theme/themes/shared/genFontSizes.ts
+++ b/components/theme/themes/shared/genFontSizes.ts
@@ -4,7 +4,7 @@ export function getLineHeight(fontSize: number) {

 // https://zhuanlan.zhihu.com/p/32746810
 export default function getFontSizes(base: number) {
-  const fontSizes = new Array(10).fill(null).map((_, index) => {
+  const fontSizes = Array.from({ length: 10 }).map((_, index) => {
    const i = index - 1;
    const baseSize = base * Math.E ** (i / 5);
    const intSize = index > 1 ? Math.floor(baseSize) : Math.ceil(baseSize);
--- a/components/transfer/hooks/useData.ts
+++ b/components/transfer/hooks/useData.ts
@@ -29,7 +29,8 @@ const useData = <RecordType extends AnyObject>(
      // rightData should be ordered by targetKeys
      // leftData should be ordered by dataSource
      if (targetKeysMap.has(record.key)) {
-        (rightData as any)[targetKeysMap.get(record.key) as any] = record;
+        const idx = targetKeysMap.get(record.key)!;
+        (rightData as any)[idx] = record;
      } else {
        leftData.push(record as any);
      }
--- a/components/transfer/hooks/useSelection.ts
+++ b/components/transfer/hooks/useSelection.ts
@@ -27,8 +27,8 @@ export default function useSelection<T extends { key: TransferKey }>(
  // Prepare `dataSource` keys
  const [leftKeys, rightKeys] = React.useMemo(
    () => [
-      new Set(leftDataSource.map((src) => src.key)),
-      new Set(rightDataSource.map((src) => src.key)),
+      new Set(leftDataSource.map<React.Key>((src) => src?.key)),
+      new Set(rightDataSource.map<React.Key>((src) => src?.key)),
    ],
    [leftDataSource, rightDataSource],
  );