新しい配列メソッド: 1. from()、配列のようなオブジェクトまたは反復可能なオブジェクトを実際の配列に変換できます。2. of()、一連の値を配列に変換でき、欠点を補います。配列コンストラクター Array() ; 3. find() および findIndex() は、条件を満たす最初の配列要素を返します。
VUE3.0 をすぐに始める方法:
このチュートリアルのオペレーティング環境を入力します: Windows 7 システム、ECMAScript バージョン 6、Dell G3 コンピューター。
1. Array.from()
Array.from メソッドは、
配列のようなオブジェクトと
反復可能なオブジェクト (ES6 の新しいデータ構造 Set および Map を含む)
ために使用されます。 Iterator インターフェイスのデータ構造がデプロイされると、Array.from を使用してそれを配列に変換できます。
実際の開発では、通常、DOM 操作によって返される NodeList コレクションや関数内の引数を変換するために使用できます。オブジェクトが
パラメータを渡す場合、そのパラメータはクラス配列を実数配列に変換して
重複を削除するために使用されます。
const arr = [1,2,3,3,3,2,5]; console.log(Array.from(new Set(arr))); //[1,2,3,5] //...同じ効果も達成できます console.log([...new Set(arr)]) //[1,2,3,5]
このメソッドをデプロイしていないブラウザの場合は、次を使用できます。
cosnt toArrayの代わりに Array.prototype.slice メソッド
= (() => {
配列から ? 配列から: obj => [].slice.call(obj)
})() は2 番目のパラメーターを受け取ることもできます。このパラメーターは関数に渡されて、map メソッドと同様の効果を実現し、各要素を処理して、処理された配列を返します。
Array.from([1,2,3 ], item => item *2) //[2,4,6]
返された文字列の長さを
使用して、文字列を配列に変換し、文字列の長さを返すことができます。これは、さまざまな Unicode 文字を正しく処理できるため、これにより回避されます/uFFFF より大きい Unicode 文字を 2 文字としてカウントする JS 自体のバグ
function countLength(string) {
Array.from(string).length を返す
2. Array.of()
Array.of メソッドは、
一連の値を配列に変換するために使用されます。配列コンストラクター Array() の欠点を補います。パラメータの数が異なるため、Array() の動作も異なります
。 //次のコードは違いを示しています。 Array.of(3) // [3]
Array.of(3, 11, 8); // [3,11,8]
新しい配列(3) // [, , ,];
新しい配列(3, 11, 8); // [3, 11, 8]
//Array.of メソッドは次のコードでシミュレートできます。
関数 ArrayOf() {
return [].slice.call(引数);
3.配列インスタンスの Find() および findIndex() は、
条件を満たす
最初の配列メンバーを返します。そのパラメーターは、条件を満たす最初の配列メンバーが見つかるまで、この関数を順番に実行します。
このメソッドのコールバック関数は、現在値、現在位置、元の配列の 3 つのパラメータを受け取ります。
例 1
[1,12,4
]
,0,5] .find((item,index, arr) => return item < 1) // 0
例 2
// find()
var item = [1, 4, -5, 10].find(n => n < 0);
console.log(項目); // -5
// find はこの種の複雑な検索もサポートしています var Points = [
{
×：10、
y: 20
}、
{
×：20、
y: 30
}、
{
×：30、
y: 40
}、
{
×：40、
y:50
}、
{
×：50、
y: 60
}
];
Points.find(関数マッチャー(ポイント) {
point.x % 3 == 0 && point.y % 4 == 0; を返します。
}); // { x: 30, y: 40 } findIndex()
の書き方と使い方は基本的に find() メソッドと同じで、条件を満たす最初の配列メンバーの位置を返すだけです。なしの場合は、-1 を返します。
例 1
[1 ,2,4,15,0].findIndex((item,index,arr) => return item > 10) //3例
2
var Points = [
{
×：10、
y: 20
}、
{
×：20、
y: 30
}、
{
×：30、
y: 40
}、
{
×：40、
y:50
}、
{
×：50、
y: 60
}
];
Points.findIndex(function matcher(point) {
point.x % 3 == 0 && point.y % 4 == 0; を返します。
}); // 2
Points.findIndex(function matcher(point) {
point.x % 6 == 0 && point.y % 7 == 0; を返します。
}); //1 4. 配列インスタンスの fill(
// fill メソッドは、指定された値で配列を埋めます。
var fillArray = 新しい Array(6).fill(1);
console.log(fillArray); //[1, 1, 1, 1, 1, 1]
//fill メソッドは、塗りつぶしの開始位置と終了位置を指定するために使用される 2 番目と 3 番目のパラメータも受け入れることができます。
["a", "b", "c"].fill(7, 1, 2);
// ['a', 7, 'c']
// 塗りつぶされた型がオブジェクトの場合、割り当てられるオブジェクトはディープ コピー オブジェクトではなく、同じメモリ アドレスであることに注意してください。
let arr = new Array(3).fill({
名前：「マイク」
});
arr[0].name = "ベン";
コンソール.ログ(arr);
// [{name: "Ben"}, {name: "Ben"}, {name: "Ben"}]どちらのメソッドも配列内で NaN を見つけることができますが、ES5 のindexOf() は NaN を見つけることができません。
配列インスタンスのメソッドentries()、keys()、values()は
すべて配列を走査するために使用され、すべてfor...ofループを使用して配列を走査できます。
違いは次のとおりです。
keys()は
キー名のペアです。values() のトラバーサルは
のトラバーサルです
。
()){
コンソール.ログ(インデックス);
}
// 0 1
for (let elem of ["a", "b"].values()) {
console.log(elem);
}
//アブ
for (let [index, elem] of ["a", "b"].entries()) {
console.log(インデックス, 要素);
}
// 0「あ」
// 1 "b"
var a = [1, 2, 3];
[...a.values()] // [1,2,3];
[...a.keys()] // [0,1,2];
[...a.entries()]; // [ [0,1], [1,2], [2,3] ] 6. include() メソッドはブール値を返します
。 、配列に指定された値が含まれるかどうかを示します
[1, 2, 3].includes(2) // true [(1, 2, 3)].includes(4) // false は
、検索の開始位置を示す 2 番目のパラメーターも受け取ることができます。デフォルトは 0 です。 2 番目のパラメータが負の数値の場合、その数値の位置を示します。 2 番目のパラメーターが配列の長さより大きい場合、includes メソッドは添字 0 から開始し、
セマンティックが不十分で NaN[1, 23, NaN].includes(NaN)
を誤って判断するという IndexOf メソッドの欠点を補います
。//真の
互換性のあるメソッド:
function contains = ( () => {
Array.prototype.includes
?(arr , val) => arr.includes(val)
:(arr , val) => arr.some(item => return item === val)
})() 7. 配列インスタンスの Flat()、 flatMap()
// flat()
[1, 2, [3, [4, 5]]]. flat()
// [1、2、3、[4、5]]
[1, 2, [3, [4, 5]]]. flat(2)
// [1、2、3、4、5]
//フラットマップ()
[2, 3, 4]. flatMap((x) => [x, x * 2])
//map実行後は[[2, 4], [3, 6], [4, 8]]となる
//次に flat() メソッドを実行して次の結果を取得します // [2, 4, 3, 6, 4, 8]
// flatMap() は配列の 1 レベルのみを展開できます。
// . flat() と同等
[1, 2, 3, 4]. flatMap(x => [
[x*2]
])
//マップ実行後は [[[2]], [[4]], [[6]], [[8]]] となります
//次に、フラット（）メソッドを実行して次の結果を取得します// [[2]、[4]、[6]、[8]]コード8をコピーします
。
the specified position inside the current array. Copy to other positions, and then return to the current array, which will change the original array
to receive three parameters:
1. target (required) start replacing data from this position
2. start (optional)この位置からデータの読み取りを開始します。デフォルトは 0 です。負の数値の場合は、
数値 3 に達する前にデータの読み取りを停止し、終了することを意味します (デフォルトは配列の長さと同じです)。負の数値の場合は、3 つのパラメーターがすべて数値である必要があることを意味します
。そうでない場合は、[1,2,3,4,5].copywithin(0,3) / という
数値に自動的に変換されます。
/[4,5,3 ,4,5] は、添字 3 から末尾 (4,5) までのメンバーを添字 0 から始まる位置にコピーし、元の 1 と 2 を置き換えることを意味します。