Quelles sont les méthodes de tableau en javascript es6

Méthodes de tableau es6 : 1. méthode map ; 2. méthode find ; 3. méthode findIndex ; 4. méthode filter ; 6. méthode some ; ; 10. Méthode des clés, etc.

L'environnement d'exploitation de ce tutoriel : système Windows 7, JavaScript version 1.8.5, ordinateur Dell G3.

Un tableau est une collection de données du même type de données disposées dans un certain ordre. Dans la nouvelle version du standard de langage JavaScript ES6 (ECMAScript 6), ES6 ajoute de nouvelles fonctionnalités aux tableaux, et ces nouvelles fonctionnalités élargissent la capacité des tableaux à traiter les données. Face à de grandes collections de données, l'accumulation et le filtrage peuvent souvent être effectués. sans opérations de boucle, conversion et autres travaux. Cet article résumera comment utiliser certaines nouvelles fonctionnalités fournies par ES6 pour les baies.

1. La méthode map

traite chaque élément du tableau en formulant une méthode et renvoie le tableau traité.

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. Les méthodes find et findIndex

récupèrent les éléments du tableau. La méthode find renvoie le premier élément qui répond aux exigences et la méthode findIndex renvoie l'indice du premier élément qui répond aux exigences.

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. La méthode filter

récupère les éléments du tableau et renvoie tous les éléments qui répondent aux exigences sous la forme d'un tableau.

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. La méthode each

détecte si chaque élément du tableau remplit les conditions. Si c'est le cas, elle renvoie vrai, sinon elle est fausse.

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

5. Une méthode

détecte s'il y a des éléments dans le tableau qui remplissent les conditions. Si c'est le cas, elle renvoie vrai, sinon elle est fausse.

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

6. Les méthodes réduire et réduireRight

reçoivent une fonction comme accumulateur (accumulateur). Chaque valeur du tableau (de gauche à droite) commence à diminuer, et devient finalement une valeur. réduire accepte une fonction qui a quatre paramètres : la dernière valeur previousValue, la valeur actuelle currentValue, l'index de la valeur actuelle et le tableau array.

La méthode réduireRight est la même que la méthode réduire, les deux trouvent le nombre cumulé du tableau. La différence est que réduireRight() accumule les éléments du tableau dans le tableau à partir de la fin du tableau.

Lorsque réduireRight() appelle la fonction de rappel callbackfn pour la première fois, prevValue et curValue peuvent être l'une des deux valeurs suivantes. Si réduireRight() est appelé avec un argument initialValue, prevValue est égal à initialValue et curValue est égal à la dernière valeur du tableau. Si le paramètre initialValue n'est pas fourni, prevValue est égal à la dernière valeur du tableau et curValue est égal à l'avant-dernière valeur du tableau.

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. La méthode foreach

parcourt les éléments du tableau, ce qui équivaut à une boucle for et n'a aucune valeur de retour.

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

8. Clés, valeurs, méthodes d'entrées

ES6 fournit trois nouvelles méthodes, entrées(), clés() et valeurs(), pour parcourir les tableaux. Ils renvoient tous un objet traverseur, qui peut être parcouru à l'aide d'une boucle for...of. La seule différence est que Keys() traverse les noms de clés, Values() traverse les valeurs de clé et Entry() traverse les valeurs de clé.

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. Méthode statique Array.from

La méthode Array.from() est principalement utilisée pour convertir deux types d'objets (objets de type tableau [objets de type tableau] et objets traversables [itérables]) en objets réels. tableau.

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. Méthode copyWidthin

La méthode copyWidthin peut copier l'élément du tableau à la position spécifiée vers d'autres positions (l'élément du tableau d'origine sera écrasé) dans le tableau actuel, puis renvoyer le tableau actuel. L'utilisation de la méthode copyWidthin modifiera le tableau actuel.

copyWidthin acceptera trois paramètres [.copyWithin(target, start = 0, end = this.length)] :

• target : ce paramètre est obligatoire et l'élément du tableau sera remplacé à partir de cette position
• start : ceci Est un paramètre facultatif. Commencez à lire les éléments du tableau à partir de cette position. La valeur par défaut est 0. S'il s'agit d'une valeur négative, cela signifie lire de la droite vers la gauche du tableau.
• end : Il s'agit d'un paramètre facultatif. à cette position, l'élément de tableau pris est égal à Array.length par défaut. S'il s'agit d'une valeur négative, cela signifie l'inverse

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 méthode fill

La méthode fill remplit un tableau avec la valeur donnée. Cette méthode est très pratique pour initialiser des tableaux vides. Tous les éléments existants dans le tableau seront effacés.

La méthode de remplissage peut également accepter les deuxième et troisième paramètres, qui sont utilisés pour spécifier les positions de début et de fin du remplissage.

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. Définir l'utilisation des objets du tableau

ES6 fournit un nouvel ensemble de structures de données. C'est similaire à un tableau, mais les valeurs des membres sont uniques et il n'y a pas de valeurs en double.

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. L'objet tableau Map utilise l'objet

Map pour enregistrer les paires clé-valeur et peut mémoriser l'ordre d'insertion d'origine des clés. N'importe quelle valeur (objet ou primitive) peut être utilisée comme clé ou valeur. En tant qu'ensemble de structures de paires clé-valeur, Map a une vitesse de recherche extrêmement rapide.

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

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!