常用的数组函数

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