コミュニティ 学ぶ ツールライブラリ レジャー
検索
日本語
ホームページ > ウェブフロントエンド > jsチュートリアル > 本文

JS での Array オブジェクトの操作メソッドの簡単な分析 (コード付き)

奋力向前
リリース： 2021-08-20 11:20:43
転載
1983 人が閲覧しました

前回の記事「この記事ではJSでのObjectオブジェクトの操作方法をいくつか解説します(共有)」では、JSでのObjectオブジェクトのいくつかの操作方法について学びました。 JSでのArrayオブジェクトの操作方法については以下の記事を参考にしていただければと思います。参考になると思いますので、困っている方は参考にしていただければ幸いです。

JS での Array オブジェクトの操作メソッドの簡単な分析 (コード付き)

javascriptArrayいくつかの効率的な操作方法

Array.from()

メソッドは、配列のようなオブジェクトまたは反復可能なオブジェクトから新しい配列インスタンスを作成します。 

console.log(Array.from("foo"));
// expected output: Array ["f", "o", "o"]
console.log(Array.from([1, 2, 3], (x) => x + x));
// expected output: Array [2, 4, 6]
ログイン後にコピー

Array.isArray()

は、渡された値が

Array であるかどうかを判断するために使用されます。 

Array.isArray([1, 2, 3]);
// true
Array.isArray({ foo: 123 });
// false
Array.isArray("foobar");
// false
Array.isArray(undefined);
// false
ログイン後にコピー

Array.obsolete()

配列内の変更を非同期的に監視するために使用されます

は非推奨になりました構文: Array.observe( arr, callback)

Array.of()

メソッドは、引数の数や種類に関係なく、可変数の引数を持つ新しい配列インスタンスを作成します。 

Array.of(7); // [7]
Array.of(1, 2, 3); // [1, 2, 3]

Array(7); // [ , , , , , , ]
Array(1, 2, 3); // [1, 2, 3]
//es5
if (!Array.of) {
  Array.of = function () {
    return Array.prototype.slice.call(arguments);
  };
}
ログイン後にコピー

Array.concat()

このメソッドは、2 つ以上の配列を結合するために使用されます。このメソッドは既存の配列を変更しませんが、新しい配列を返します。 

var array1 = ["a", "b", "c"];
var array2 = ["d", "e", "f"];

console.log(array1.concat(array2));
// expected output: Array ["a", "b", "c", "d", "e", "f"]
ログイン後にコピー

Array.copyWithin()

このメソッドは、配列の一部を同じ配列内の別の場所に浅くコピーし、サイズを変更せずにそれを返します。 

var array1 = [1, 2, 3, 4, 5];

// place at position 0 the element between position 3 and 4
console.log(array1.copyWithin(0, 3, 4));
// expected output: Array [4, 2, 3, 4, 5]

// place at position 1 the elements after position 3
console.log(array1.copyWithin(1, 3));
// expected output: Array [4, 4, 5, 4, 5]
ログイン後にコピー

Array.entries()

メソッドは、配列内の各インデックスのキーと値のペアを含む新しい

Array Iterator オブジェクトを返します。 

var array1 = ["a", "b", "c"];

var iterator1 = array1.entries();

console.log(iterator1.next().value);
// expected output: Array [0, "a"]

console.log(iterator1.next().value);
// expected output: Array [1, "b"]
ログイン後にコピー

Array.every()

このメソッドは、配列のすべての要素が指定された関数のテストに合格するかどうかをテストします。 

var array1 = [1, 30, 39, 29, 10, 13];
console.log(array1.every((x) => x < 40));
//out true
ログイン後にコピー

Array.fill()

このメソッドは、配列内の開始インデックスから終了インデックスまでのすべての要素を固定値で埋めます。終了を除く 

var array1 = [1, 2, 3, 4];
// fill with 0 from position 2 until position 4
console.log(array1.fill(0, 2, 4));
// expected output: [1, 2, 0, 0]
// fill with 5 from position 1
console.log(array1.fill(5, 1));
// expected output: [1, 5, 5, 5]
console.log(array1.fill(6));
// expected output: [6, 6, 6, 6]
ログイン後にコピー

Array.filter()

このメソッドは、提供された関数によって実装されたテストのすべての要素を含む新しい配列を作成します。 

var words = ["spray", "limit", "elite", "exuberant", "destruction", "present"];

const result = words.filter((word) => word.length > 6);

console.log(result);
// expected output: Array ["exuberant", "destruction", "present"]
ログイン後にコピー

Array.find()

このメソッドは、提供されたテスト関数を満たす配列内の最初の要素の値を返します。それ以外の場合は、

unknown が返されます。 

var array1 = [5, 12, 8, 130, 44];

var found = array1.find((x) => x > 10);

console.log(found);
// expected output: 12
ログイン後にコピー

Array.findIndex()

このメソッドは、提供されたテスト関数を満たす配列内の最初の要素のインデックスを返します。それ以外の場合は、

-1 を返します。 

var array1 = [5, 12, 8, 130, 44];

var index = array1.findIndex((x) => x > 10);

console.log(index);
// expected output: 1
ログイン後にコピー

Array. flat()

メソッドは、指定された深さまで再帰的にすべてのサブ配列を接続し、新しい配列を返します。 

var arr1 = [1, 2, [3, 4]];
arr1.flat();
// [1, 2, 3, 4]

var arr2 = [1, 2, [3, 4, [5, 6]]];
arr2.flat();
// [1, 2, 3, 4, [5, 6]]

var arr3 = [1, 2, [3, 4, [5, 6]]];
arr3.flat(2);
// [1, 2, 3, 4, 5, 6]
var arr4 = [1, 2, , 4, 5];
arr4.flat();
// [1, 2, 4, 5]
ログイン後にコピー

Array. flatMap()

このメソッドは、まずマッピング関数を使用して各要素をマップし、次に結果を新しい配列に圧縮します。

map と深度値 1 を備えた flat とほぼ同じですが、通常、flatMap を 1 つのメソッドに組み合わせるとわずかに効率的になります。 

var arr1 = [1, 2, 3, 4];

arr1.map((x) => [x * 2]);
// [[2], [4], [6], [8]]

arr1.flatMap((x) => [x * 2]);
// [2, 4, 6, 8]

// only one level is flattened
arr1.flatMap((x) => [[x * 2]]);
// [[2], [4], [6], [8]]
ログイン後にコピー

Array.forEach()

このメソッドは、配列の要素ごとに指定された関数を 1 回実行します。 

var array1 = ["a", "b", "c"];

array1.forEach((value, index, arr) => console.log(value));
// output &#39;a&#39;
// output &#39;b&#39;
// output &#39;c&#39;
ログイン後にコピー

Array.includes(value,index)

メソッドは、配列に指定された値が含まれているかどうかを判断するために使用されます。状況に応じて、含まれている場合は

true を返します。 、それ以外の場合は false を返します。 

var array1 = [1, 2, 3];

console.log(array1.includes(2));
// expected output: true

var pets = ["cat", "dog", "bat"];

console.log(pets.includes("cat"));
// expected output: true

console.log(pets.includes("at"));
// expected output: false
ログイン後にコピー

Array.indexOf()

このメソッドは、配列内で指定された要素が見つかる最初のインデックスを返します。存在しない場合は

-1 を返します。 

/var beasts = [&#39;ant&#39;, &#39;bison&#39;, &#39;camel&#39;, &#39;duck&#39;, &#39;bison&#39;];

console.log(beasts.indexOf(&#39;bison&#39;));
// expected output: 1

// start from index 2
console.log(beasts.indexOf(&#39;bison&#39;, 2));
// expected output: 4

console.log(beasts.indexOf(&#39;giraffe&#39;));
// expected output: -1
ログイン後にコピー

Array.join()

このメソッドは、配列 (または配列のようなオブジェクト) のすべての要素を文字列に結合し、文字 

var elements = ["Fire", "Wind", "Rain"];

console.log(elements.join());
// expected output: Fire,Wind,Rain

console.log(elements.join(""));
// expected output: FireWindRain

console.log(elements.join("-"));
// expected output: Fire-Wind-Rain

//数组[1,2,3,3,4,5]求和
eval([1, 2, 3, 3, 4, 5].join("+")) = 18;
ログイン後にコピー

Array を返します。 keys()

メソッドは、配列内の各インデックスのキーを含む新しい

Array イテレータを返します。 

var array1 = ["a", "b", "c"];
var iterator = array1.keys();

for (let key of iterator) {
  console.log(key); // expected output: 0 1 2
}
ログイン後にコピー

Array.lastIndexOf(item,index)

メソッドは、配列内の最後の要素 (つまり、有効な

JavaScript 値または変数) のインデックスを返します。存在しない場合は、-1 が返されます。 fromIndex から開始して、配列の後ろから前方に検索します。 

var animals = ["Dodo", "Tiger", "Penguin", "Dodo"];

console.log(animals.lastIndexOf("Dodo"));
// expected output: 3

console.log(animals.lastIndexOf("Tiger"));
// expected output: 1
ログイン後にコピー

Array.map()

このメソッドは、配列内の各要素に対して提供された関数を呼び出した結果である新しい配列を作成します。 

var array1 = [1, 4, 9, 16];

// pass a function to map
const map1 = array1.map((x) => x * 2);

console.log(map1);
// expected output: Array [2, 8, 18, 32]
ログイン後にコピー

Array.pop()

このメソッドは、配列から最後の要素を削除し、その要素の値を返します。このメソッドは配列の長さを変更します。 

var plants = ["broccoli", "cauliflower", "cabbage", "kale", "tomato"];
console.log(plants.pop());
// expected output: "tomato"
console.log(plants);
// expected output: Array ["broccoli", "cauliflower", "cabbage", "kale"]
plants.pop();
console.log(plants);
// expected output: Array ["broccoli", "cauliflower", "cabbage"]
ログイン後にコピー

Array.push()

このメソッドは、配列の末尾に 1 つ以上の要素を追加し、新しい配列の長さを返します。 

var animals = ["pigs", "goats", "sheep"];

console.log(animals.push("cows"));
// expected output: 4

console.log(animals);
// expected output: Array ["pigs", "goats", "sheep", "cows"]

animals.push("chickens");

console.log(animals);
// expected output: Array ["pigs", "goats", "sheep", "cows", "chickens"]
ログイン後にコピー

Array.reduce()

メソッドは、アキュムレータと配列内の各要素に (左から右に) 関数を適用し、単一の値に減らします。 

const array1 = [1, 2, 3, 4];
const reducer = (accumulator, currentValue) => accumulator + currentValue;

// 1 + 2 + 3 + 4
console.log(array1.reduce(reducer));
// expected output: 10

// 5 + 1 + 2 + 3 + 4
console.log(array1.reduce(reducer, 5));
// expected output: 15
ログイン後にコピー

Array.reduceRight()

メソッドは関数をアキュムレータ (

accumulator) として受け入れ、配列の各値 (右から左へ) を次のように削減します。単一の値。 

const array1 = [
  [0, 1],
  [2, 3],
  [4, 5],
].reduceRight((accumulator, currentValue) => accumulator.concat(currentValue));

console.log(array1);
// expected output: Array [4, 5, 2, 3, 0, 1]
ログイン後にコピー

Array.reverse()

このメソッドは、配列内の要素の位置を反転します。 

var array1 = ["one", "two", "three"];
console.log("array1: ", array1);
// expected output: Array [&#39;one&#39;, &#39;two&#39;, &#39;three&#39;]

var reversed = array1.reverse();
console.log("reversed: ", reversed);
// expected output: Array [&#39;three&#39;, &#39;two&#39;, &#39;one&#39;]

/* Careful: reverse is destructive. It also changes
the original array */

console.log("array1: ", array1);
// expected output: Array [&#39;three&#39;, &#39;two&#39;, &#39;one&#39;]
ログイン後にコピー

Array.shift()

このメソッドは、配列から最初の要素を削除し、その要素の値を返します。このメソッドは配列の長さを変更します。 

var array1 = [1, 2, 3];

var firstElement = array1.shift();

console.log(array1);
// expected output: Array [2, 3]

console.log(firstElement);
// expected output: 1
ログイン後にコピー

Array.slice()

このメソッドは、選択された配列の最初から最後まで (最後を除く) 部分の浅いコピーを新しい配列オブジェクトに返します。また、元の配列は変更されません。 

var animals = ["ant", "bison", "camel", "duck", "elephant"];

console.log(animals.slice(2));
// expected output: Array ["camel", "duck", "elephant"]

console.log(animals.slice(2, 4));
// expected output: Array ["camel", "duck"]

console.log(animals.slice(1, 5));
// expected output: Array ["bison", "camel", "duck", "elephant"]
ログイン後にコピー

Array.some()

このメソッドは、配列内の一部の要素が、提供された関数によって実装されたテストに合格するかどうかをテストします。 

var array = [1, 2, 3, 4, 5];

var even = function (element) {
  // checks whether an element is even
  return element % 2 === 0;
};

console.log(array.some(even));
// expected output: true
ログイン後にコピー

Array.sort()

方法用原地算法对数组的元素进行排序，并返回数组。排序不一定是稳定的。默认排序顺序是根据字符串Unicode码点。

var months = ["March", "Jan", "Feb", "Dec"];
months.sort();
console.log(months);
// expected output: Array ["Dec", "Feb", "Jan", "March"]

var array1 = [1, 30, 4, 21];
array1.sort();
console.log(array1);
// expected output: Array [1, 21, 30, 4]
ログイン後にコピー

Array.splice()

方法通过删除现有元素和/或添加新元素来更改一个数组的内容。

var months = ["Jan", "March", "April", "June"];
months.splice(1, 0, "Feb");
// 增
console.log(months);
// expected output: Array [&#39;Jan&#39;, &#39;Feb&#39;, &#39;March&#39;, &#39;April&#39;, &#39;June&#39;]

months.splice(4, 1, "May");
// 改
console.log(months);
// expected output: Array [&#39;Jan&#39;, &#39;Feb&#39;, &#39;March&#39;, &#39;April&#39;, &#39;May&#39;]
// 删
months.splice(4, 1);
console.log(months);
//output： ["Jan", "Feb", "March", "April"]
ログイン後にコピー

Array.toLocaleString()

返回一个字符串表示数组中的元素。数组中的元素将使用各自的toLocaleString方法转成字符串，这些字符串将使用一个特定语言环境的字符串（例如一个逗号 ","）隔开。

var array1 = [1, "a", new Date("21 Dec 1997 14:12:00 UTC")];
var localeString = array1.toLocaleString("en", { timeZone: "UTC" });

console.log(localeString);
// expected output: "1,a,12/21/1997, 2:12:00 PM",
// This assumes "en" locale and UTC timezone - your results may vary
var prices = ["￥7", 500, 8123, 12];
prices.toLocaleString("ja-JP", { style: "currency", currency: "JPY" });

// "￥7,￥500,￥8,123,￥12"
ログイン後にコピー

Array.toSource()

返回一个字符串,代表该数组的源代码。

该特性是非标准的，请尽量不要在生产环境中使用它！

var alpha = new Array("a", "b", "c");

alpha.toSource(); //返回["a", "b", "c"]
ログイン後にコピー

Array.toString()

返回一个字符串，表示指定的数组及其元素。

var array1 = [1, 2, "a", "1a"];

console.log(array1.toString());
// expected output: "1,2,a,1a"
ログイン後にコピー

Array.unshift()

方法将一个或多个元素添加到数组的开头，并返回新数组的长度。

var array1 = [1, 2, 3];

console.log(array1.unshift(4, 5));
// expected output: 5

console.log(array1);
// expected output: Array [4, 5, 1, 2, 3]
ログイン後にコピー

Array.values()

方法返回一个新的Array Iterator对象，该对象包含数组每个索引的值。

const array1 = ["a", "b", "c"];
const iterator = array1.values();

for (const value of iterator) {
  console.log(value);
  // expected output: "a" "b" "c"
}
ログイン後にコピー

推荐学习：JavaScript视频教程

以上がJS での Array オブジェクトの操作メソッドの簡単な分析 (コード付き)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

関連ラベル：
java javascript js
ソース：chuchur.com
前の記事：jQueryを使用してカラフルなストライプのテーブル効果を作成するにはどうすればよいですか? 次の記事：node.js を使用してファイル/ディレクトリの名前を一括変更する方法を段階的に説明します (実践的な戦闘)
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
最新の問題
複数のルートで宣言されたワーカープールは、しきい値を気にせずに CPU 使用率を維持できますか CPU を集中的に使用するタスクを処理するワーカープールを備えた Node.js システムを見つけたいと考えていますが、複数のルートにわたる CPU 使用率については少し混乱してい...
から 2024-04-06 19:54:23
0
1
444
d3.js でズームインすると散布図のポイントの値が維持されない d3.js を使用するのは初めてなので、ご容赦ください。 vue.js ファイルに純粋な JavaScript として実装しました。ズーム機能を使用して散布図を作成しようとしていま...
から 2024-04-06 18:16:26
0
1
403
非表示のサイドパネルを表示: チェックが入っています アニメーション化されたハンバーガー メニューを介してビューに切り替える機能を備えたナビゲーション メニューをサイド パネルに追加したいと考えています。 JSを使わずにCSSだけで作...
から 2024-04-06 15:49:33
0
1
319
Nuxt.js で作成したダッシュボードをデプロイするには SSG を使用する必要がありますか? Nuxt.jsを使用して社内向けのダッシュボードを開発していきます。これは内部ダッシュボードであるため、ユニバーサル スキーマは必要ありません。通常、ほとんどのダッシュボードは S...
から 2024-04-06 13:17:44
0
1
493
Electron はプリロード時に AppData を取得します プリロードされた AppData ディレクトリを取得するにはどうすればよいですか? Background.js[...]asyncfunctioncreateWindow(){co...
から 2024-04-06 11:05:31
0
1
417
関連トピック
詳細>
人気のおすすめ
人気のチュートリアル
詳細>
関連するチュートリアル
人気のおすすめ
最新のコース
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート