常用的数组函数

最新推荐文章于 2022-10-19 17:45:08 发布

置顶 Leader755

最新推荐文章于 2022-10-19 17:45:08 发布

阅读量372

点赞数

文章标签： map reduce filter 数组中常见的函数操作 js数组的函数操作

本文链接：https://blog.csdn.net/weixin_41316842/article/details/82432968

版权

1.reduce（）从左往右求数组的和、阶乘。(不改变原数组)

Array.reduce() 将数组元素计算为一个值（从左到右）。
Array.reduceRight() 将数组元素计算为一个值（从右到左）。

1）求和
 var arr = [1, 3, 5, 7, 9];
 var f1 = arr.reduce(function(x, y) {
    return x + y;
 });
 console.log(f1) ;// 25
2)求积
 var arr = [1, 2, 3, 4];
 var f1 = arr.reduce(function(x, y) {
      return x * y;
 }); 
 console.log(f1);// 25
3)混合
var arr = [1, 3, 5, 7, 9];
var f1=arr.reduce(function(x, y) {
    return x * 10 + y;
}); 
console.log(f1);// 13579
变换写法：
var arr = [1, 3, 5, 7, 9];
function fn(x, y) {
  return x * 10 + y;
}
var f1 = arr.reduce(fn);//13679

2.map（）常用于数据交互，映射。（一般有return返回值）

Array.map()

通过指定函数处理数组的每个元素，return后返回新数组。

map(item,index,arr)

item ------------>数组中元素（必须存在）

index ------------>下标（可有）

arr ------------>原数组（可有）

1）常用写法

//1>
var Array = [1, 4, 9, 16];
const map1 = Array.map(x => x * 2);//箭头函数
console.log(map1); // [2, 8, 18, 32]

//2>
var Array = [1, 4, 9, 16];
const map2 = Array.map(function(x) {
   return x * 2
})
console.log(map2); // [2, 8, 18, 32]
//3>
var Array = [1, 4, 9, 16];
function fn(num, index, arr) {
  console.log(num,index,arr); //=> 1  0 (4) [1, 4, 9, 16]
   return num * 2               // 4  1 (4) [1, 4, 9, 16]
}                               // 9  2 (4) [1, 4, 9, 16]
                                // 16 3 (4) [1, 4, 9, 16]
const map3 = numbers.map(fn);
console.log(map3);//[2, 8, 18, 32]

2)将数组中所有数字转为字符串

var Array = [1, 2, 3, 4, 5, 6, 7, 8, 9];
Array.map(String); // ['1', '2', '3', '4', '5', '6', '7', '8', '9']

3)重新格式化数组中的对象（重新整理数据结构）

例如：[ { title : ' aaa ' } , { title : ' bbb ' } ] - > [ { t : ' aaa ' } , { t : ' bbb ' } ]

//案例1

let Array = [
           {title: 'aaaaaaaaa',read: 11111,hot: false},
           {title: 'bbbbbbbbb',read: 22222,hot: true},
           {title: 'ccccccccc',read: 33333,hot: false}, 
           {title: 'ddddddddd',read: 44444,hot: true}
          ];
let f1=Array.map((item,index,arr)=>{
    let json = {};
    json.t = `文章标题${item.title}`;
    json.r = item.read;
    json.hot = item.hot == true && '正邦';
    return json;
})
console.log(f1); // [{…}, {…}, {…}, {…}]
                //0:{t:"文章标题aaaaaaaaa", r: 11111, hot: false}
                //1:{t:"文章标题bbbbbbbbb", r: 22222, hot:"正邦"}
                //2:{t:"文章标题ccccccccc", r: 33333, hot: false}
                //3:{t:"文章标题ddddddddd", r: 44444, hot: "正邦"}
//案例2
var Array = [{key: 1, value: 10}, 
             {key: 2, value: 20}, 
             {key: 3, value: 30}];

var f2 = Array.map(item =>{ 
   var obj = {};
   obj[item.key] = item.value;
   return obj;
});
console.log(f2);// [{…}, {…}, {…}]
                //0:{1: 10}
                //1:{2: 20}
                //2:{3: 30}

3.filter() 过滤出符合条件的项并组成新数组返回。(return true)

Array.filter()

检测数值元素，过滤出满足条件的项并组成新数组。（不改变原数组）

filter(item,index,arr)

item ------------>数组中元素（必须存在）

index ------------>下标（可有）

arr ------------>原数组（可有）

1）实例

//案例1
var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
var arr2 = arr.filter(function(x) {
    return x >= 8;
}); 
console.log(arr2); //[8, 9, 10]

//案例2
var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
var arr2 = arr.filter(function(x, index) {
return index % 3 === 0 || x >= 8;//注意此处index为下标索引值
}); 
console.log(arr2); //[1, 4, 7, 8, 9, 10]

//案例3
var arr = [1, 2, 2, 3, 4, 5, 5, 6, 7, 7];
var arr2 = arr.filter(function(x, index,self) {
    return self.indexOf(x)===index;
}); 
console.log(arr2); //[1, 2, 3, 4, 5, 6 ,7]

2）实例2

let Array = [
           {title: 'aaaaaaaaa',read: 11111,hot: false},
           {title: 'bbbbbbbbb',read: 22222,hot: true},
           {title: 'ccccccccc',read: 33333,hot: false}, 
           {title: 'ddddddddd',read: 44444,hot: true}
          ];
 let f1 = arr.filter((item, index, arr) => {
                return item.hot == true;
            })
console.log(f1);//(2) [{…}, {…}]
               // 0:{title: "bbbbbbbbb", read: 22222, hot: true}
               // 1:{title: "ddddddd", read: 44444, hot: true}

4.查找

Array.every() 对数组中每一项运行回调函数，返回boolen值，只有所以为true,才返回true.否则返回false.(即全真为真)boolen

Array.some() 对数组中每一项运行回调函数，返回boolen值，只有其中有一个为true,则返回true。（即一真全真）boolen

every(item,index,arr) 和some(item,index,arr)

item ------------>数组中元素（必须存在）

index ------------>下标（可有）

arr ------------>原数组（可有）
1)基础案例
//every返回一个bool值，全真为真
var arr=[201,202,203,204,205];
var bool = arr.every(function (item, index, array) {
    if(item > 200){
          return true;
    }else{
          return false;
    }
})
 console.log(bool);//true

//some返回一个bool值，一真为真
var arr = [111,222,333,444,555];
var bool = arr.some(function (item,index,arr) { 
    if(item%3 == 0){
      return true;
    }
    return false;
})
console.log(bool);//true
Array.find() 返回数组中满足提供的测试函数的第一个元素的值。否则返回 undefined。（返回值）

Array.findIndex() 返回数组中满足提供的测试函数的第一个元素的索引。否则返回-1。（返回索引）

Array.indexOf() 返回数组某个指定的字符串值在数组中中首次出现的位置的索引。。否则返回-1。（返回索引）

find(item,index,arr) 和findIndex(item,index,arr)

item ------------>数组中元素（必须存在）

index ------------>下标（可有）

arr ------------>原数组（可有）

1）基础案例
//1>find（）返回第一个符合条件的值，否则返回undefined。
var Array = [5, 12, 8, 130, 44];
var found = Array.find(function(item) {
  return item > 10;
});
console.log(found);//12(值)

//2>findIndex()返回第一个符合条件值的索引,否则返回-1.
var Array= [5, 12, 8, 130, 44];
function find(x) {
      return x > 13;
}
var f1=Array.findIndex(find)
console.log(f1);//3（索引）

//3>indexOf()返回第一符合条件值的的索引，否则返回-1.
var arry = [1, 2, 3, 4, 2, 6, 2];
var ff = arry.indexOf(2, 0);//从0开始，查找2.返回第一找到的并返回索引
console.log(ff);//1(索引)
Array.includes() 一个数组是否包含一个指定的值，根据情况，如果包含则返回 true，否则返回false。
//1>
var Arry = [1, 2, 3];
console.log(array1.includes(2));//true

//2>
var pets = ['cat', 'dog', 'bat','cat'];
console.log(pets.includes('cat'));//true
console.log(pets.includes('at'));//false
Array.isArray() 判断参数是否是数组，是则为 true；否则为 false。
Array.isArray([1, 2, 3]);  
// true
Array.isArray({foo: 123}); 
// false
Array.isArray("foobar");   
// false
Array.isArray(undefined);  
// false

5.转化为数组

到这里有件事提醒大家注意，ES6语法如果不能在编辑器中打开运行，而且你的语法也没毛病。这时候你就应该考虑是编辑器不兼容Es6语法。我用的Vscode就出现这种情况，找了半天，才发现是编辑器问题。这时候就直接打开谷歌或火狐浏览器在控制台输入调试：console.log(Array.of(1,2,3))。（如果此处解决了你的问题，点播关注赞一个再走呗）

Array.of() 将一组值，转换为数组。
Array.of() 和 Array 构造函数之间的区别在于处理整数参数. Array.of(7) 创建一个具有单个元素 7 的数组，而 Array(7) 创建一个长度为7的空数组（ 注意：这是指一个有7个空位的数组，而不是由7个 undefined组成的数组）。

a)Array( ) 方法没有参数，一个参数、三个参数时，返回结果都不一样

Array() // [] //返回一个空数组

Array(3) // [, , ,] //参数为1个时，指定数组的长度

Array(3,2,1) // [3, 2, 1] //只有参数不少于2时，才会返回参数组成的新数组

b)Array.of( ) 总是返回参数值组成的数组。如果没有参数，就返回一个空数组。

Array.of(3,2,1) // [3, 2, 1]

Array.of(3) //[ 3 ]

Array.of(3).length // 1

1）Array.of(）和Array创建实例不同之处
Array.of(7);       // [7] 创建包含7的数组实例
Array.of(1, 2, 3); // [1, 2, 3]
Array(7);          // [ , , , , , , ]创建7个空对象数组
Array(1, 2, 3);    // [1, 2, 3]
2）Array.of(）将一组值转换为数组
//1>字符串类型
let arr=Array.of('banana','apple','orange');
console.log(arr);//["apple", "orange", "banner"]

//2>数字类型
let arr=Array.of(1,2,3,4,5);
console.log(arr);//["apple", "orange", "banner"]
3）如果原生不支持的话，在其他代码之前执行以下代码会创建 Array.of() 。
if (!Array.of) {
  Array.of = function() {
    return Array.prototype.slice.call(arguments);
  };
}
Array.from() 把类数组（获取一组元素，arguments...）转化为真正数组。(对象加上length属性也可以使用)
Array.from(arr,function)

arr ----------------->原数组

function ------------------>可以执行一个方法（可有）

1）字符串转数组
var str='Hello world'
console.log(Array.from(str));//["H", "e", "l", "l", "o", " ", "w", "o", "r", "l", "d"]

var str2="foo";
console.log(Array.from(str2));//["f", "o", "o"]
2)对象转数组(后面必须加上length属性)
let obj = {0: 'tom', 1: '65',2: '男',3: ['jane','john','Mary'],'length': 4};
var newArr=Array.from(obj);
console.log(newArr);//["tom", "65", "男", Array(3)]
                    //  0: "tom"
                    //  1: "65"
                    //  2: "男"
                    //  3: (3) ["jane", "john", "Mary"]
3)参数为数组，会生成一模一样的新数组
var arr=[12,45,47,56,213,4654,154];
console.log(Array.from(arr));// [12, 45, 47, 56, 213, 4654, 154]
4)有2个参数时。一个参数为数组，一个为执行数组中元素的方法
var arr=[1, 2, 3];
console.log(Array.from(arr,x=>x+x));//[2,4,6]

console.log(Array.from([1, 2, 3],x=>{return x+x}))

console.log(Array.from([1, 2, 3],function(x){return x+x}))

// [2, 4, 6]不同的写法，结果相同

6.制定的元素填充数组（填充与替换）非增加

Array.fill()
用一个固定值填充一个数组中从起始索引到终止索引内的全部元素。不包括终止索引。

splice() 删除元素，并向数组添加新元素。（改变原数组）
Array.fill(value, indexStart , indexEnd)

value --------------------> 需要填充的值（必须有）

indexStart--------------------> 起始索引（可有）

indexEnd --------------------> 终止索引（可有）

indexStart和indexEnd可以不同时出现，出现一个时，默认起始位置到终止位置

实例1：
var arr=[0,1,2,3,4,5];
//1>一个参数时
console.log(arr.fill(6));// [6, 6, 6, 6, 6, 6]

//2>2个参数
console.log(arr.fill(6,2));//[0, 1, 6, 6, 6, 6]

//3>3个参数
console.log(arr.fill(6,2,4));//[0, 1, 6, 6, 4, 5]
实例2：
let arr=new Array(10);
arr.fill('默认值',1,3);
console.log(arr);//[empty, "默认值", "默认值", empty × 7]


let arr=[1,2,3,4,5,6];
arr.splice(2,2,7,7);
console.log(arr);//[1, 2, 7, 7 , 5, 6]

7.ES6提供3种新方法遍历数组

keys() 对数组中键名的遍历

values() 对数组中键值的遍历

entries() 对数组中键值对的遍历
注意：在此种情况下遍历，需要用for....of方法。

for in

for in一般用于遍历对象的属性；
作用于数组的for in除了会遍历数组元素外，还会遍历自定义可枚举的属性，以及原型链上可枚举的属性；
作用于数组的for in的遍历结果是数组的索引，且都为字符串型，不能用于运算；
某些情况下，可能按照随机顺序遍历数组元素；

for of

ES6中添加的循环语法；
for of支持遍历数组、类对象（例如DOM NodeList对象）、字符串、Map对象、Set对象；
for of不支持遍历普通对象，可通过与Object.keys()搭配使用遍历；
for of遍历后的输出结果为数组元素的值；
搭配实例方法entries()，同时输出数组内容和索引；

实例1：
var arr=[1,3,5,7,9];
//1>keys()
for(let i of arr.keys()){
    console.log(i)
}
//0,1,2,3,4(索引)

//2>values()
for(let i of arr.values()){
    console.log(i)
}
//1,3,5,7,9

//3>entries()
for(let i of arr.enteries()){
    console.log(i)
}
//  [0, 1]
//  [1, 3]
//  [2, 5]
//  [3, 7]
//  [4, 9]

8.循环

for() for则在较复杂的循环中效率更高，for循环更为灵活。

forEach() foreach适用于只是进行集合或数组遍历，不能对数组或集合进行修改（添加删除操作）

1、for 循环

　continue --------------->结束本次循环，继续执行循环体；

break -------------------->结束所有循环。

2、forEach(在forEach中，不能使用 continue 和 break )

　 return 或 return false --------->结束本次循环，继续执行循环体（效果与 for 中 continue 一样）；

　注意该方法无法一次结束所有循环，需要一次性结束所有循环，还是老老实实使用for方法。

3、$.each() （jQuery的方法，用于遍历 DOM时很方便，偷懒必备。）

return 或 return false ------------------->结束所有循环(效果类似效果与 for 中 break，结束所有循环)

结束语：本篇文章对你有帮助，希望点波关注点个赞。
版权声明：版权所有，转载请注明原址。 https://blog.csdn.net/weixin_41316842/article/details/82432968

Leader755

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
常用的数组函数

1.reduce（）从左往右求数组的和、阶乘。(不改变原数组)Array.reduce() 将数组元素计算为一个值（从左到右）。 Array.reduceRight() 将数组元素计算为一个值（从右到左）。 1）求和 var arr = [1, 3, 5, 7, 9]; var f1 = arr.reduce(function(x, y) { return...
复制链接

扫一扫