您好,欢迎访问一九零五行业门户网

javascript es6数组方法有哪些

es6数组方法:1、map方法;2、find方法;3、findindex方法;4、filter方法;5、every方法;6、some方法;7、reduce方法;8、reduceright方法;9、foreach方法;10、keys方法等等。
本教程操作环境:windows7系统、javascript1.8.5版、dell g3电脑。
数组是相同数据类型的数据按一定顺序排列的集合。在es6(ecmascript 6)新版本javascript语言标准中,es6给数组添加了一些新特性,而这些新特性扩展了数组处理数据的能力,面对大数据集合往往不需循环操作即可完成累加、筛选、转换等工作。在本文将总结有关于es6给数组提供一些新特性的使用方法。
1、map方法通过制定方法处理数组中的每一个元素,并返回处理后的数组。
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; //假如这个是要找的人的idvar 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、filter方法检索数组中的元素,并以数组的形式返回所有符合要求的元素。
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、every方法检测数组中的每一个元素是否符合条件,是则返回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、some方法检测数组中是否符合条件的元素,有则返回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方法接收一个函数作为累加器(accumulator),数组中的每个值(从左到右)开始缩减,最终为一个值。reduce接受一个函数,函数有四个参数,分别是:上一次的值previousvalue,当前值currentvalue,当前值的索引index,数组array。
reduceright方法和reduce方法一样,都是求数组累计数。不同的是reduceright()从数组的末尾向前将数组中的数组项做累加。
reduceright()首次调用回调函数callbackfn时,prevvalue 和 curvalue 可以是两个值之一。如果调用 reduceright() 时提供了 initialvalue 参数,则 prevvalue 等于 initialvalue,curvalue 等于数组中的最后一个值。如果没有提供 initialvalue 参数,则 prevvalue 等于数组最后一个值, curvalue 等于数组中倒数第二个值。
console.clear();var arr = [0,1,2,3,4];var total = arr.reduce((a, b) => a + b); //10console.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;}); // 10var 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); //30console.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、keys,values,entries方法es6 提供三个新的方法,entries(),keys()和values(),用于遍历数组。它们都返回一个遍历器对象,可以用for...of循环进行遍历,唯一的区别是keys()是对键名的遍历、values()是对键值的遍历,entries()是对键值对的遍历。
console.clear();for (let index of ['a', 'b'].keys()) {console.log(index);}// 0// 1for (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()方法主要用于将两类对象(类似数组的对象[array-like 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将会接受三个参数[.copywithin(target, start = 0, end = this.length)]:
target: 这个参数是必须的,从该位置开始替换数组项start: 这是一个可选参数,从该位置开始读取数组项,默认为0,如果为负值,表示从数组的右边向左开始读取end: 这是一个可选参数,到该位置停止读取的数组项,默认等于array.length。如果为负值,表示倒数console.clear();var arr = [1, 2, 3, 4, 5];//从下标3开始提取2个(5-3=2)元素到下标0var arr = arr.copywithin(0, 3, 5); console.log(arr);
11、fill方法fill方法使用给定的值填充一个数组。这种方法用于空数组的初始化非常方便。数组中已有的元素会全部被抹去。
fill方法还可以接受第二个和第三个参数,用于指定填充的起始位置和结束位置。
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)); //trueconsole.log(s.has(3)); //falses.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 方法也可以间接用于setvar 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.fromvar 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(); // 空mapm.set('adam', 67); // 添加新的key-valuem.set('bob', 59);console.log(m.has('adam')); // 是否存在key 'adam': truem.get('adam'); // 67m.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数组方法有哪些的详细内容。
其它类似信息

推荐信息