Was sind die Array-Methoden in Javascript es6?

es6 Array-Methoden: 1. Methode „find“; 4. Methode „jede“; 8. Methode „reduktion“; ; 10. Schlüsselmethode usw.

Die Betriebsumgebung dieses Tutorials: Windows 7-System, JavaScript-Version 1.8.5, Dell G3-Computer.

Ein Array ist eine Sammlung von Daten desselben Datentyps, die in einer bestimmten Reihenfolge angeordnet sind. In der neuen Version des JavaScript-Sprachstandards ES6 (ECMAScript 6) fügt ES6 einige neue Funktionen zu Arrays hinzu, und diese neuen Funktionen erweitern die Fähigkeit von Arrays, Daten zu verarbeiten. Bei großen Datensammlungen können häufig Akkumulation und Filterung durchgeführt werden ohne Schleifenoperationen, Konvertierung und andere Arbeiten. In diesem Artikel wird zusammengefasst, wie einige neue Funktionen von ES6 für Arrays verwendet werden.

1. Die Kartenmethode

verarbeitet jedes Element im Array, indem sie eine Methode formuliert und das verarbeitete Array zurückgibt.

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. Die Methoden „find“ und „findIndex“ rufen Elemente im Array ab. Die Methode „find“ gibt das erste Element zurück, das die Anforderungen erfüllt, und die Methode „findIndex“ gibt den Index des ersten Elements zurück, das die Anforderungen erfüllt.

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. Die Filtermethode

ruft die Elemente im Array ab und gibt alle Elemente, die die Anforderungen erfüllen, in Form eines Arrays zurück.

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. Die every-Methode

erkennt, ob jedes Element im Array die Bedingungen erfüllt. Wenn ja, gibt sie true zurück, andernfalls ist sie false.

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

5. Eine Methode

erkennt, ob Elemente im Array vorhanden sind, die die Bedingungen erfüllen. Wenn ja, gibt sie true zurück, andernfalls ist sie false.

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

6. Die Methoden „reduce“ und „reduceRight“ empfangen eine Funktion als Akkumulator (Akkumulator). Jeder Wert im Array beginnt sich zu reduzieren und wird schließlich zu einem Wert. Reduce akzeptiert eine Funktion mit vier Parametern: dem letzten Wert previousValue, dem aktuellen Wert currentValue, dem Index des aktuellen Werts und dem Array-Array.

Die Methode „reduceRight“ ist mit der Methode „reduce“ identisch. Beide ermitteln die kumulative Anzahl des Arrays. Der Unterschied besteht darin, dass ReduceRight() die Array-Elemente im Array vom Ende des Arrays an akkumuliert. Wenn ReduceRight() die Callback-Funktion callbackfn zum ersten Mal aufruft, können prevValue und curValue einer von zwei Werten sein. Wenn ReduceRight() mit einem InitialValue-Argument aufgerufen wird, ist PrevValue gleich InitialValue und CurValue gleich dem letzten Wert im Array. Wenn der Parameter initialValue nicht angegeben wird, ist prevValue gleich dem letzten Wert im Array und curValue gleich dem vorletzten Wert im Array.

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. Die foreach-Methode

durchläuft die Elemente des Arrays, was einer for-Schleife entspricht und keinen Rückgabewert hat.

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

8. Schlüssel, Werte, Eingabemethoden

ES6 bietet drei neue Methoden, Einträge(), Schlüssel() und Werte(), zum Durchlaufen von Arrays. Sie alle geben ein Traverser-Objekt zurück, das mit einer for...of-Schleife durchlaufen werden kann. Der einzige Unterschied besteht darin, dass „keys()“ Schlüsselnamen durchläuft, „values()“ Schlüsselwerte durchläuft und „entrys()“ Schlüsselwerte durchläuft.

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. Statische Methode Array.from

Die Methode Array.from() wird hauptsächlich verwendet, um zwei Arten von Objekten (array-ähnliche Objekte [array-ähnliche Objekte] und durchquerbare Objekte [iterierbar]) in reale Objekte umzuwandeln Array.

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-Methode

Die copyWidthin-Methode kann das Array-Element an der angegebenen Position an andere Positionen innerhalb des aktuellen Arrays kopieren (das ursprüngliche Array-Element wird überschrieben) und dann das aktuelle Array zurückgeben. Durch die Verwendung der Methode copyWidthin wird das aktuelle Array geändert.

copyWidthin akzeptiert drei Parameter [.copyWithin(target, start = 0, end = this.length)]:

target: Dieser Parameter ist erforderlich und das Array-Element wird ab dieser Position ersetzt

start: this Ist ein optionaler Parameter. Der Standardwert ist 0. Wenn es sich um einen negativen Wert handelt, bedeutet dies, dass das Lesen von rechts nach links erfolgt.

Ende: Dies ist ein optionaler Parameter An dieser Position ist das Array-Element standardmäßig gleich Array.length. Wenn es sich um einen negativen Wert handelt, bedeutet dies die reziproke

• 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 Füllmethode
Die Füllmethode füllt ein Array mit dem angegebenen Wert. Diese Methode ist sehr praktisch zum Initialisieren leerer Arrays. Alle vorhandenen Elemente im Array werden gelöscht.

Die Füllmethode kann auch den zweiten und dritten Parameter akzeptieren, mit denen die Start- und Endpositionen des Füllvorgangs angegeben werden.

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. Array-Objektverwendung festlegen

ES6 bietet einen neuen Datenstruktursatz. Es ähnelt einem Array, aber die Werte der Mitglieder sind eindeutig und es gibt keine doppelten Werte.

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. Das Map-Array-Objekt verwendet das

Map-Objekt zum Speichern von Schlüssel-Wert-Paaren und kann sich die ursprüngliche Einfügereihenfolge der Schlüssel merken. Jeder Wert (Objekt oder Grundelement) kann als Schlüssel oder Wert verwendet werden. Als eine Reihe von Schlüssel-Wert-Paarstrukturen verfügt Map über eine extrem schnelle Suchgeschwindigkeit.

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高级教程】

Das obige ist der detaillierte Inhalt vonWas sind die Array-Methoden in Javascript es6?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!