es6 の新しい配列メソッドとは何ですか?-jsチュートリアル-php.cn

新しい配列メソッド: 1. from()、配列のようなオブジェクトまたは反復可能なオブジェクトを実際の配列に変換できます; 2. of()、値のセットを配列に変換できます。配列構造を補完する関数 Array() の欠点; 3. find() および findIndex() は、条件を満たす最初の配列要素を返します; 4. fill() など。

es6 の新しい配列メソッドとは何ですか?

このチュートリアルの動作環境: Windows 7 システム、ECMAScript バージョン 6、Dell G3 コンピューター。

es6 新しい配列メソッド

1. Array.from()

Array. from メソッドは、2 つのタイプのオブジェクトを実際の配列に変換するために使用されます。

配列のようなオブジェクト
トラバース (反復可能) オブジェクト ( ES6 の新しいデータ構造 Set と Map を含む)

は、Iterator インターフェイスのデータ構造がデプロイされている限り、Array.from はそれを Array

に変換できることを意味します。実際の開発では、一般に、DOM 操作によって返される NodeList コレクションと、関数内の引数オブジェクトを変換するために使用できます。

パラメータを渡すときに、クラス配列を実際の配列に変換するために使用されます。 array

Array deduplication

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]

ログイン後にコピー

このメソッドを展開していないブラウザの場合は、Array.prototype.slice メソッドを使用できます。代わりに

cosnt toArray = (() => {
    Array.from ? Array.from : obj => [].slice.call(obj)
})()

ログイン後にコピー

2 番目のパラメータを受け取ることもできます。2 番目のパラメータは関数に渡されて、map メソッドと同様の効果を実現し、各要素を処理して、処理された配列を返します

Array.from([1,2,3] , item => item *2)    //[2,4,6]

ログイン後にコピー

文字列の長さを返す

は、さまざまな Unicode を正しく処理できるため、文字列を配列に変換し、文字列の長さを返すために使用できます。したがって、/uFFFF より大きい Unicode 文字を 2 文字としてカウントするという JS 自体のバグを回避します。

function countLength(string) {
    return Array.from(string).length
}

ログイン後にコピー

2, Array.of()

配列 .of メソッドは、一連の値を配列に変換するために使用されます。配列コンストラクター Array() の欠点を補います。パラメータの数が異なるため、Array() の動作も異なります

//如下代码看出差异
Array.of(3); // [3]
Array.of(3, 11, 8); // [3,11,8]

new Array(3); // [, , ,]
new Array(3, 11, 8); // [3, 11, 8]

// Array.of方法可以用下面的代码模拟实现。

function ArrayOf() {
  return [].slice.call(arguments);
}

ログイン後にコピー

#3. 配列インスタンスの Find() と findIndex()

#find()

条件を満たす最初の配列メンバーを返します。そのパラメーターはコールバック関数です。最初の配列メンバーが見つかるまで、すべての配列メンバーが順番に関数を実行します。条件を満たすメンバー。そのメンバーを返します。条件を満たすメンバーがない場合は、未定義を返します。

このメソッドのコールバック関数は、現在値、現在位置、元の 3 つのパラメーターを受け取りますarray

例 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(item); // -5
// find 也支持这种复杂的查找
var points = [
  {
    x: 10,
    y: 20
  },
  {
    x: 20,
    y: 30
  },
  {
    x: 30,
    y: 40
  },
  {
    x: 40,
    y: 50
  },
  {
    x: 50,
    y: 60
  }
];
points.find(function matcher(point) {
  return 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 = [
  {
    x: 10,
    y: 20
  },
  {
    x: 20,
    y: 30
  },
  {
    x: 30,
    y: 40
  },
  {
    x: 40,
    y: 50
  },
  {
    x: 50,
    y: 60
  }
];
points.findIndex(function matcher(point) {
  return point.x % 3 == 0 && point.y % 4 == 0;
}); // 2
points.findIndex(function matcher(point) {
  return point.x % 6 == 0 && point.y % 7 == 0;
}); //1

ログイン後にコピー

4、fill(配列インスタンスの)

fill() メソッドは、指定された値を使用して配列を埋めます

fill メソッドは、Fill の開始位置と終了位置を指定するための 2 番目と 3 番目のパラメータも受け入れることができます。

// fill方法使用给定值， 填充一个数组。
var fillArray = new Array(6).fill(1);
console.log(fillArray); //[1, 1, 1, 1, 1, 1]
//fill方法还可以接受第二个和第三个参数，用于指定填充的起始位置和结束位置。
["a", "b", "c"].fill(7, 1, 2);
// [&#39;a&#39;, 7, &#39;c&#39;]
// 注意，如果填充的类型为对象，那么被赋值的是同一个内存地址的对象，而不是深拷贝对象。
let arr = new Array(3).fill({
  name: "Mike"
});
arr[0].name = "Ben";
console.log(arr);
// [{name: "Ben"}, {name: "Ben"}, {name: "Ben"}]

ログイン後にコピー

5. 配列インスタンスの Entries()、keys()、values()3 つのメソッドはすべて、配列を走査するために使用されます。すべてはトラバーサーオブジェクトを返します。これはループのトラバーサルに使用できます。

違いは次のとおりです。

values() はキーと値のペアの走査です。
entries() はキーと値のペアの走査です。

for (let index of ["a", "b"].keys()) {
  console.log(index);
}
// 0 1
for (let elem of ["a", "b"].values()) {
  console.log(elem);
}
// a b
for (let [index, elem] of ["a", "b"].entries()) {
  console.log(index, elem);
}
// 0 "a"
// 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] ]

ログイン後にコピー

##このメソッドは、配列に指定された値が含まれているかどうかを示すブール値を返します

[1, 2, 3].includes(2) // true
[(1, 2, 3)].includes(4) // false

ログイン後にコピー

は、検索の開始位置を示す 2 番目のパラメーターを受け取ることもできます。デフォルトは 0 です。 2 番目のパラメータが負の数値の場合、その数値の位置を示します。 2 番目のパラメータが配列の長さより大きい場合、添字 0

includes メソッドから始まり、セマンティックが不十分で NaN

[1,23,NaN].includes(NaN)   //true

ログイン後にコピー

を誤って判断する IndexOf メソッドの欠点を補います。互換性のあるメソッド:

function contains = ( () => {
    Array.prototype.includes
    	?(arr , val) => arr.includes(val)
    	:(arr , val) => arr.some(item => return item === val)
})()

ログイン後にコピー

7。配列インスタンスの Flat()、 flatMap()

flat() は、「「ネストされた配列」を 1 次元配列に平坦化します。このメソッドは新しい配列を返しますが、元のデータには影響しません。渡されるパラメータは、平坦化するレイヤの数を表します。デフォルトは 1 つのレイヤです。 flatMap() は配列の 1 つのレイヤのみを展開できます。このメソッドは、元の配列の各メンバーに対して関数を実行し (Array.prototype.map() の実行と同等)、戻り値で構成される配列に対して flat() メソッドを実行します。このメソッドは、元の配列

  // flat()
  [1, 2, [3, [4, 5]]].flat()
  // [1, 2, 3, [4, 5]]
  [1, 2, [3, [4, 5]]].flat(2)
  // [1, 2, 3, 4, 5]
  //flatMap()
  [2, 3, 4].flatMap((x) => [x, x * 2])
  //map执行完后是[[2, 4], [3, 6], [4, 8]]
  //然后在执行flat()方法得到下边的结果
  // [2, 4, 3, 6, 4, 8]
  // flatMap()只能展开一层数组。
  // 相当于 .flat()
  [1, 2, 3, 4].flatMap(x => [
    [x * 2]
  ])
  //map执行完后是[[[2]], [[4]], [[6]], [[8]]]
  //然后在执行flat()方法得到如下结果
  // [[2], [4], [6], [8]]复制代码

ログイン後にコピー

8 を変更せずに新しい配列を返します。配列インスタンス

の copywithin() は次のとおりです。現在の配列内で指定された位置のメンバーを他の位置に内部的にコピーし、元の配列を変更する現在の配列を返します。3 つのパラメーターを受け取ります:

1。ターゲット (必須) ) この位置から始まるデータを置き換えます

2、start(可选) 从该位置开始读取数据，默认为0，如果为负数，则表示到数

3、end(可选) 到该位置前停止读取数据，默认等于数组长度。如果是负数，表示到数

三个参数都应该是数字，如果不是，会自动转为数值

[1,2,3,4,5].copywithin(0,3);  //[4,5,3,4,5]  表示从下标3位置直到结束的成员(4,5)，复制到从下标0开始的位置，结果替换掉了原来的1和2

ログイン後にコピー

【相关推荐：javascript视频教程、web前端】

以上がes6 の新しい配列メソッドとは何ですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。