JavaScript es6の配列メソッドとは何ですか

es6 配列メソッド: 1.map メソッド; 2.find メソッド; 3.findIndex メソッド; 4.filter メソッド; 5.every メソッド; 6.some メソッド; 7.reduce メソッド; 8.reduceRight メソッド; 9. foreach メソッド、10. key メソッドなど。

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

配列は、特定の順序で配置された同じデータ型のデータのコレクションです。 JavaScript 言語標準 ES6 (ECMAScript 6) の新しいバージョンでは、ES6 は配列にいくつかの新機能を追加し、これらの新機能により配列のデータ処理能力が拡張されています。大規模なデータ コレクションに直面した場合、多くの場合、蓄積とフィルタリングを完了できます。ループ操作、変換、その他の作業は必要ありません。この記事では、ES6 が配列に対して提供するいくつかの新機能の使用方法をまとめます。

1. マップ メソッド

メソッドを作成して配列内の各要素を処理し、処理された配列を返します。

console.clear();
var arr = [12,14,34,22,18];
var arr1 = arr.map((currentValue,index,arr) => {
    console.log("当前元素"+currentValue);
　　console.log("当前索引"+index);
    if (currentValue>20) {
        return currentValue-10;
    } else {
        return currentValue-5;
    }
})
console.log(arr1)
//另一种形式
let nums = [1, 2, 3];
let obj = {val: 5};
let newNums = nums.map(function(item,index,array) {
return item + index + array[index] + this.val;
//对第一个元素，1 + 0 + 1 + 5 = 7
//对第二个元素，2 + 1 + 2 + 5 = 10
//对第三个元素，3 + 2 + 3 + 5 = 13
}, obj);
console.log(newNums);//[7, 10, 13]

2. Find メソッドと findIndex メソッド

配列内の要素を取得します。find メソッドは要件を満たす最初の要素を返し、findIndex メソッドは最初の要素を返します。要件を満たす要素。要素の添え字。

console.clear();
var arr = [12,14,34,22,18];
var arr1 = arr.find((currentValue, index) => {
    return currentValue>20;
})
var arr2 = arr.findIndex((currentValue, index) => {
    return currentValue>20;
})
console.log(arr,arr1,arr2);
//数组元素为对象
var allPeple = [
    {name: '小王', id: 14},
    {name: '大王', id: 41},
    {name: '老王', id: 61}
]
var PId = 14; //假如这个是要找的人的ID
var myTeamArr = [{name: '小王',   id: 14}]
function testFunc(item){return item.id == PId ;}
//判断myteam里是不是有这个人，如果==-1 代表没有，在allPeople中找到他，添加入我的队伍
myTeamArr.findIndex(testFunc) == -1
    ? myTeamArr.push(allPeple.find(testFunc)) 
    : console.log('已存在该人员');
//检索满足条件的对象
var stu = [
    {name: '张三', gender: '男', age: 20},
    {name: '王小毛', gender: '男', age: 20},
    {name: '李四', gender: '男', age: 20}
]
var obj = stu.find((element) => (element.name == '李四'))
console.log(obj);
console.log(obj.name);
[1,2,3].findIndex(function(x) {x == 2;});
// Returns an index value of 1.
[1,2,3].findIndex(x => x == 4);
// Returns an index value of -1

3. フィルター メソッド

配列内の要素を取得し、要件を満たすすべての要素を配列の形式で返します。

console.clear();
var arr = [12,14,34,22,18];
var arr1 = arr.filter((currentValue, index) => {
    return currentValue>20;
})
console.log(arr,arr1);
//逻辑属性的筛选
var arr = [
  { id: 1, text: 'aa', done: true },
  { id: 2, text: 'bb', done: false }
]
console.log(arr.filter(item => item.done))
// 保留奇数项
let nums = [1, 2, 3];
let oddNums = nums.filter(item => item % 2);
console.log(oddNums);

4. すべてのメソッド

配列内の各要素が条件を満たしているかどうかを検出し、満たしている場合は true を返し、そうでない場合は false を返します。

console.clear();
var arr = [12,14,34,22,18];
var arr1 = arr.every((currentValue, index) => {
    return currentValue>20;
})
console.log(arr,arr1);

5. メソッド

配列内に条件を満たす要素があるかどうかを検出し、存在する場合は true を返し、そうでない場合は false を返します。

console.clear();
var arr = [12,14,34,22,18];
var arr1 = arr.some((currentValue, index) => {
    return currentValue>20;
})
console.log(arr,arr1);

6、reduce メソッドとreduceRight メソッド

関数をアキュムレータ (アキュムレータ) として受け取り、配列内の各値 (左から右へ) が減少し始めます。最後に値です。 reduce は、最後の値previousValue、現在の値currentValue、現在の値のインデックス、および配列arrayの4つのパラメータを持つ関数を受け入れます。

reduceRight メソッドは、reduce メソッドと同じで、どちらも配列の累積数を見つけます。違いは、reduceRight() は配列内の配列項目を配列の末尾から順に累積することです。

reduceRight() が初めてコールバック関数 callbackfn を呼び出すとき、prevValue と curValue は 2 つの値のいずれかになります。 reduceRight() がinitialValue引数を指定して呼び出された場合、prevValueはinitialValueに等しく、curValueは配列内の最後の値に等しくなります。 initialValue パラメーターが指定されていない場合、prevValue は配列内の最後の値に等しく、curValue は配列内の最後から 2 番目の値に等しくなります。

console.clear();
var arr = [0,1,2,3,4];
var total = arr.reduce((a, b) => a + b); //10
console.log(total);
var sum = arr.reduce(function(previousValue, currentValue, index, array){
  console.log(previousValue, currentValue, index);
  return previousValue + currentValue;
});
console.log(sum);
//第二个参数为5，第一次调用的previousValue的值就用传入的第二个参数代替
var sum1 = arr.reduce(function(previousValue, currentValue, index){
  console.log(previousValue, currentValue, index);
  return previousValue + currentValue;
},5);
console.log(sum1);
var sum2 = arr.reduceRight(function (preValue,curValue,index) {
    return preValue + curValue;
}); // 10
var sum3 = arr.reduceRight(function (preValue,curValue,index) {
    return preValue + curValue;
}, 5); // 15
//计算数组arr的平方和
var arr1 = arr.map((oVal) => {return oVal*oVal;}) 
console.log(arr1);
var total1 = arr1.reduce((a, b) => a + b); //30
console.log(total1);
//计算指定数组和
let nums = [1, 2, 3, 4, 5];// 多个数的累加
let newNums = nums.reduce(function(preSum,curVal,array) {
return preSum + curVal;
}, 0);
console.log(newNums)//15

7. foreach メソッド

配列の要素をループします。これは for ループと同等で、戻り値はありません。

console.clear();
var arr = [12,14,34,22,18];
var arr1 = arr.forEach((currentValue, index) => {
    console.log(currentValue, index);
})

8. キー、値、およびエントリ メソッド

ES6 は、トラバーサル配列に対して 3 つの新しいメソッド、entrys()、keys()、values() を提供します。これらはすべて、for...of ループを使用して走査できるトラバーサー オブジェクトを返します。唯一の違いは、keys() はキー名を走査し、values() はキー値を走査し、entrys() はキー値を走査することです。

console.clear();
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"

9. Array.from 静的メソッド

Array.from() メソッドは、主に 2 種類のオブジェクト (配列のようなオブジェクト) と反復可能なオブジェクトを変換するために使用されます。 object [iterable]) を実数の配列に変換します。

console.clear();
//类似数组的对象转为真正的数组
let arrayLike = {
'0': 'a',
'1': 'b',
'2': 'c',
length: 3
}
console.log(Array.from(arrayLike)); // ["a","b","c"]
//字符转数组
let arr = Array.from('w3cplus.com')  //字符转数组
console.log(arr); // ["w","3","c","p","l","u","s",".","c","o","m"]
//Set数据转数组
let namesSet = new Set(['a', 'b'])  //new Set创建无重复元素数组
let arr2 = Array.from(namesSet);  //将Set结构数据转为数组
console.log(arr2); //["a","b"]
//转换Map数据
let m = new Map([[1, 2], [2, 4], [4, 8]]);
console.log(Array.from(m)); // [[1, 2], [2, 4], [4, 8]]
//接受第二个参数为map转换参数
var arr = Array.from([1, 2, 3]);  //返回一个原样的新数组
var arr1 = Array.from(arr, (x) => x * x)
console.log(arr1);    // [1, 4, 9]
var arr2 = Array.from(arr, x => x * x);
console.log(arr2);    // [1, 4, 9]
var arr3 = Array.from(arr).map(x => x * x);
console.log(arr3);    // [1, 4, 9]
//大样本生成
var arr4 = Array.from({length:5}, (v, i) => i);
console.log(arr4);  // [0, 1, 2, 3, 4]
//第三个参数为diObj对象，map函数中this指向该对象
//该功能实现由对象自带方法转换数据
let diObj = {
  handle: function(n){
    return n + 2
  }
}
console.log(Array.from(
  [1, 2, 3, 4, 5], 
  function (x){return this.handle(x)},
  diObj
))  //[3, 4, 5, 6, 7]

10. copyWidthin メソッド

copyWidthin メソッドは、指定された位置にある配列項目を現在の配列内の別の位置にコピーできます (元の配列項目は上書きされます) )、その後、現在の配列を返します。 copyWidthin メソッドを使用すると、現在の配列が変更されます。

copyWidthin は 3 つのパラメータ [.copyWithin(target, start = 0, end = this.length)] を受け入れます:

• target: このパラメータは必須です。この位置から開始まで配列項目の置換
• start: これはオプションのパラメーターで、この位置から配列項目の読み取りを開始します。デフォルトは 0 です。負の値の場合は、配列項目の右から左に読み取りを開始することを意味します。 the array
• end: これはオプションのパラメータです。この位置で読み取りを停止する配列項目は、デフォルトでは Array.length と等しくなります。負の値の場合は、逆数

console.clear();
var arr = [1, 2, 3, 4, 5];
//从下标3开始提取2个（5-3=2）元素到下标0
var arr = arr.copyWithin(0, 3, 5);  
console.log(arr);

11 を意味します。 Fill メソッド

fill メソッドは、指定された値で配列を埋めます。このメソッドは、空の配列を初期化する場合に非常に便利です。配列内の既存の要素はすべて消去されます。

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

console.clear();
var arr = ['a', 'b', 'c',,,];
arr.fill(0, 2, 5);
console.log(arr);  // ["a", "b", 0, 0, 0]
arr.fill(0, 2);
console.log(arr);  // ["a", "b", 0, 0, 0]
arr = new Array(5).fill(0, 0, 3);
console.log(arr);  // [0, 0, 0, empty × 2]
arr = new Array(5).fill(0, 0, 5);
console.log(arr);  // [0, 0, 0, 0, 0]
console.log(new Array(3).fill({}));  //[{…}, {…}, {…}]
console.log(new Array(3).fill(1));   //[1, 1, 1]

12. Set 配列オブジェクトの使用法

ES6 は新しいデータ構造 Set を提供します。配列に似ていますが、メンバーの値は一意であり、重複する値はありません。

console.clear();
var s = new Set();
[2,3,5,4,5,2,2].forEach(x => s.add(x));
console.log(s);  //{2, 3, 5, 4}
for(let i of s) {console.log(i);}  //Set对象循环
var set = new Set([1,2,3,4,4]);
//符号”...“将一个数组转为用逗号分隔的参数序列
console.log([...set]);  //[1, 2, 3, 4]
var items = new Set([1,2,3,4,5,5,5,5,]);
console.log(items.size);  //5，元素个数
// add添加元素
var set = new Set();
set.add("a");
set.add("b");
console.log(set); //{"a", "b"}
var s = new Set();
s.add(1).add(2).add(2);  //链式添加
console.log(s.size);
console.log(s.has(1));  //has判断元素1是否存在
console.log(s.has(2));  //true
console.log(s.has(3));  //false
s.delete(2);  //删除第2个元素
console.log(s.has(2));  //false
// set转数组
var items = new Set([1,2,3,4,5]);
var array = Array.from(items);
console.log(array);  //[1, 2, 3, 4, 5]
// 数组的 map 和 filter 方法也可以间接用于Set
var s = new Set([1,2,3]);
s = new Set([...s].map(x => x * 2));
console.log(s);  //{2, 4, 6}
s = new Set([...s].filter(x => (x % 3) ==0));
console.log(s);  //6，被3整除
// 实现并集、交集、差集
var a = new Set([1,2,3]);
var b = new Set([4,3,2]);
//并集 
var union = new Set([...a, ...b]);
console.log(union);
//交集 
var intersect = new Set([...a].filter(x => b.has(x)));
console.log(intersect);
//差集 
var difference = new Set([...a].filter(x => !b.has(x)));
console.log(difference);
//遍历数据同步改变原来的Set结构
// 利用原Set结构映射出一个新的结构
var set1 = new Set([1,2,3]);
set1 = new Set([...set1].map(val => val *2));
console.log(set1);
// 利用Array.from
var set2 = new Set([1,2,3]);
set2 = new Set(Array.from(set2, val => val * 2));
console.log(set2);

13. Map 配列オブジェクトは

Map オブジェクトを使用してキーと値のペアを保存し、元のキーの挿入順序を記憶できます。任意の値 (オブジェクトまたはプリミティブ) をキーまたは値として使用できます。 Map は、キーと値のペア構造のセットとして、非常に高速な検索速度を持っています。

console.clear();
var names = ['Michael', 'Bob', 'Tracy'];
var scores = [95, 75, 85];
//Map键值对的结构
var m = new Map([['Michael', 95], ['Bob', 75], ['Tracy', 85]]);
console.log(m.get('Michael')); // 95
//初始化Map需要的二维数组
var m = new Map(); // 空Map
m.set('Adam', 67); // 添加新的key-value
m.set('Bob', 59);
console.log(m.has('Adam')); // 是否存在key 'Adam': true
m.get('Adam'); // 67
m.delete('Adam'); // 删除key 'Adam'
console.log(m.get('Adam')); // undefined
//key相同时，后面的值会把前面的值冲掉
var m = new Map();
m.set('Adam', 67);
m.set('Adam', 88);
console.log(m.get('Adam')) // 88

ES6新版本JavaScript语言给数组添加了许多面向大数据处理的新功能，使得JS在数据处理量和速度方面有了质的提升。需要提示的是，当我们处理的数据量较大时，建议使用Google Chrome浏览器。ES6数组+Chrome浏览器，使得JS在数据处理功能产生变革，完全可以媲美Python或R语言等数据处理软件。

提示：本页中JS脚本代码可复制粘贴到JS代码运行窗口调试体验； 文本编辑快捷键：Ctrl+A - 全选；Ctrl+C - 复制； Ctrl+X - 剪切；Ctrl+V - 粘贴

【推荐学习：javascript高级教程】

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