JS--配列

序文

js--配列を学ぶ


目次

序文

1.配列演算

まず最初に、スプライス、ソート、リバースという 3 つの一般的なメソッドは配列自体に対する操作であり、配列自体を変更することに注意し、覚えておく必要があります。それ自体を変更する他のメソッドには、push/pop/unshift/shift、fill、および copyWithin があります。

2. [1-100] のような配列を生成します。

大量のデータの配列をテストする場合は、次のように生成できます。

3.JS -- Array (配列の作成) の 3 つの方法

方法 1. 配列を作成する - 最も簡単な方法 (プッシュ)    

 方法 2. 配列マップ メソッドを作成する

方法 3. 配列を作成します -- Array.from 2 番目の初期化関数はデータを返します

レンダリングは次のとおりです。 


1.配列演算

まず最初に、splice、sort、reverseこれら 3 つの一般的なメソッドは配列自体を操作し、配列自体を変更することに注意し、覚えておく必要があります。それ自体を変更する他のメソッドには、 add push/pop/unshift/shift、 delete 、 fill fill、および copy fillがありますcopyWithin


2. [1-100] のような配列を生成します。

大量のデータの配列をテストする場合は、次のように生成できます。

// fill
const arr = new Array(100).fill(0).map((item, index) => index + 1)

// Array.from() 
const arr = Array.from(Array(100), (v, k) => k + 1)

// ... + array.keys() 
const ary = [...Array(100).keys()] 

 

new Array(100) 会生成一个有100空位的数组,
这个数组是不能被map(),forEach(), filter(), 
reduce(), every() ,some()遍历的,
因为空位会被跳过(for of不会跳过空位,可以遍历)。
 [...new Array(4)] 可以给空位设置默认值undefined,
从而使数组可以被以上方法遍历。

 

3.JS -- Array (配列の作成) の 3 つの方法

 

次の 3 つの方法です。

方法 1. 配列を作成する - 最も簡単な方法 (プッシュ)    

for ループを使用して配列に次々とプッシュします                            

function createData1() {
  const data1 = [];
  for (let i = 0; i < 10; i++) {
    data1.push({
      name: `name${i + 1}`,
    });
  }
  return data1;
}
const data1 = createData1();
console.log('第二个输出');
console.log(data1);

 方法 2. 配列マップ メソッドを作成する

  • Map ( map) は、キー サイズの関係を比較する述語によって配置された {key, value} ペアのコレクションです。
function createData2() {
  // 如果不 fill 循环默认会跳过空值
  return new Array(10).fill(null).map((v, i) => ({ name: `name${i + 1}` }));
}
const data2 = createData2();
console.log('第三个输出');
console.log(data2);

方法 3. 配列を作成します -- Array.from 2 番目の初期化関数はデータを返します

function createData3() {
  return Array.from({ length: 10 }, (v, i) => ({ name: `name${i + 1}` }));
}
const data3 = createData3();
console.log('第四个输出');
console.log(data3);

レンダリングは次のとおりです。 

第二个输出
[
  { name: 'name1' },
  { name: 'name2' },
  { name: 'name3' },
  { name: 'name4' },
  { name: 'name5' },
  { name: 'name6' },
  { name: 'name7' },
  { name: 'name8' },
  { name: 'name9' },
  { name: 'name10' }
]
第三个输出
[
  { name: 'name1' },
  { name: 'name2' },
  { name: 'name3' },
  { name: 'name4' },
  { name: 'name5' },
  { name: 'name6' },
  { name: 'name7' },
  { name: 'name8' },
  { name: 'name9' },
  { name: 'name10' }
]
第四个输出
[
  { name: 'name1' },
  { name: 'name2' },
  { name: 'name3' },
  { name: 'name4' },
  { name: 'name5' },
  { name: 'name6' },
  { name: 'name7' },
  { name: 'name8' },
  { name: 'name9' },
  { name: 'name10' }
]

おすすめ

転載: blog.csdn.net/qq_35353972/article/details/126922961