JavaScript数组高级语法及其使用

1.map方法为数组中的每一个元素依次执行回调函数,调用该方法会返回一个新的数组(即不会影响改变原始数组内容),新数组中的元素为原始数组元素调用函数经过处理后的值

 语法:
 array.map(function(curValue,index,arr){
      ...执行内容
    },thisValue)
        curValue:必须参数,当前数组元素的值
        index   :可选参数,当前数组元素的下标值
        arr     :可选参数,调用map方法的数组对象
        thisValue:可选参数,执行回调函数时,该值被用作回调函数中的this指向,若没有设置,则this指向为全局对象。
**案例:**
 let arrs = [1, 2, 4, 6, 3, 9];
    //调用map方法将arrs数组中的每一个元素同时乘以2
    let arr=arrs.map(function(curValue){
      return curValue*2
    })
    console.log(arr);//[2,4,8,12,6,18]

2.for in方法,用于循环遍历数组元素

 **语法:**
    for(let index in 数组名){
      ...执行内容
      //这里的index表示遍历到的每个数组元素的下标值.
    }
    
    案例:
        let arr=[1,2,3,4,5];
        for(let index in arr){
          console.log(index);//0,1,2,3,4
          console.log(arr[index]);//1,2,3,4,4
        }

3.for of方法,用于循环遍历数组元素

语法:
for(let value of 数组名){
  ...执行内容
  //这里的value表示遍历到的每个数组元素本身.
}
案例:
  let arr=[2,3,5,1,3];
  for(let value of arr){
    console.log(value);//2,3,5,1,3
  }

4.forEach方法,用于调用指定数组中的每个元素，并将元素传递给回调函数进行相应处理。

  语法:
    数组名.forEach(function(curValue,index,arr){
        ...元素处理内容
    },thisValue)
        curValue:必须参数,当前数组元素的值
        index   :可选参数,当前数组元素的下标值
        arr     :可选参数,调用map方法的数组对象
        thisValue:可选参数,执行回调函数时,该值被用作回调函数中的this指向,若没有设置,则this指向为全局对象。
    案例:
        let arrs = [1, 3, 5, 7, 9];
        //调用forEach方法将数组中的某个元素删除
        arrs.forEach(function (curValue,index) {
            if(curValue==7){
              arrs.splice(index,1);
            }
        })
        console.log(arrs);//[1,3,5,9]

5.filter方法为数组中的每一个元素依次执行回调函数,该方法会创建一个新的数组，新数组中的元素是满足了指定要求后返回的原始数组中的元素,若没有元素满足要球,则这个新数组为空数组

 语法：
    数组名.filter(function(curValue,index,arr){
        return  指定的需求判断(当为真时,返回出去;当为假时,自动过滤掉,进行下一个元素判断)
    },thisValue)
        curValue:必须参数,当前数组元素的值
        index   :可选参数,当前数组元素的下标值
        arr     :可选参数,调用map方法的数组对象
        thisValue:可选参数,执行回调函数时,该值被用作回调函数中的this指向,若没有设置,则this指向为全局对象。
    案例：
        let arrs=[1,3,5,2,4,6,8,9];
        let newArr=arrs.filter(function(curValue){
          return curValue>5;//这里会逐个判断arrs数组中的每个元素是否大于5,当满足条件时,会将这个元素返回到新数组中,若不满足要求,则会自动过滤掉这个元素。
        })
        console.log(newArr);//[6,8,9]

6.reduce方法为数组中的每一个元素依次执行回调函数,reduce() 方法接收一个函数作为累加器，数组中的每个值（从左到右）开始缩减，最终计算为一个值。reduce() 可以作为一个高阶函数，用于函数的 compose。

 语法：
    数组名.reduce(function(preValue,curValue,index,arr){

    },initValue)
          preValue:上一次调用回调返回的值，或者是提供的初始值（initValue）
          curValue:必须参数,当前数组元素的值
          index   :可选参数,当前数组元素的下标值
          arr     :可选参数,调用map方法的数组对象
          initValue:可选参数,作为第一次调用回调函数时的第一个参数的值。如果没有提供initValue，则将使用数组中的第一个元素(即curValue的值从下标1开始)。在没有初始值的空数组上调用 reduce 将报错。(使用reduce时,推荐设置initValue这个参数,将其设置为 0)
    注意:如果没有提供初始值initValue,reduce会从索引下标为1的地方开始执行回调函数方法，跳过第一个索引。如果提供initValue，从索引0开始。
          所以:使用reduce时,推荐设置initValue这个参数,将其设置为 0
    案例:
        let arrs=[5,3,4,2,5,1,1,6];
        //调用reduce方法进行数组去重
        let newArr=arrs.reduce(function(pre,cur){
          if(pre.indexOf(cur)==-1){
            pre.push(cur)
          }
          return pre
        },[])
        console.log(newArr);//[5,3,4,2,1,6]

7.数组元素查询的方法

1.indexOf方法,用于查询某个元素是否在数组中,若元素存在,则返回该元素的下标值;若元素不存在,则返回-1。

 语法: 
 数组名.indexOf(需要查找的数组元素);
    案例:
        let arr=['h','l','o','w','j'];
        arr.indexOf('o');//因为字符o存在于数组中,所以返回值为字符在数组中的位置 2
        arr.indexOf('k');//因为字符k不存在数组中,所以返回值为 -1

2.includes方法,用来判断一个数组中是否包含某个指定的元素,如果该元素存在于数组中,则返回 true,不存在,则false。

 语法
    :数组名.includes(需要查询的数组元素);
    案例:
        let arr=['h','l','o','w','j'];
        arr.includes('k');//因为数组中不存在元素 'k',所以返回值为false
        arr.includes('w');//因为数组中存在元素 'w',所以返回值为true
    注意:
        使用includes方法并不能查找引用类型(对象类型),因为它们的内存地址是不相等的

3.find()方法,该方法返回查询的数组中满足判定条件的第一个元素,如果检索到满足条件的元素，那么返回此元素，否则返回undefined。
语法：

 数组名.find(function(curValue,index,arr){
      ...条件判断内容
    },thisValue)
          curValue:必须参数,当前数组元素的值
          index   :可选参数,当前数组元素的下标值
          arr     :可选参数,调用find方法的数组对象
          thisValue:可选参数,执行回调函数时,该值被用作回调函数中的this指向,若没有设置,则this指向为全局对象。
    案例:
        let arrs=[3,2,1,5,7,4];
        let num=arrs.find(function(curValue){
          return curValue>4
        });
        console.log(num);//5,因为当查询到5大于4时,就满足了条件,不再继续执行后面的判断,所以只输出5

4.findIndex方法,该方法返回数值中满足条件的第一个元素的索引值(下标值);若都不满足条件,则返回值为-1

语法：
    数组名.findIndex(function(curValue,index,arr){
      ...//判断条件执行
    },thisValue)
          curValue:必须参数,当前数组元素的值
          index   :可选参数,当前数组元素的下标值
          arr     :可选参数,调用find方法的数组对象
          thisValue:可选参数,执行回调函数时,该值被用作回调函数中的this指向,若没有设置,则this指向为全局对象。
    案例：
        let arrs=[3,2,1,5,7,4];
        let num=arrs.find(function(curValue){
          return curValue>4
        });
        console.log(num);//3,因为当查询到5大于4时,就满足了条件,不再继续执行后面的判断,所以只输出5的下标值3

8.数组转换

在ES6中存在，为Array对象新增了一些方法，用于我们对数组进行处理。

1.Array.from()方法

Array.from方法用于将两类对象转为真正的数组：类似数组的对象（array-like object）和可遍历（iterable）的对象（包括 ES6 新增的数据结构 Set 和 Map）。

语法:

Array.from(arraylike,fn)

arraylike：被转换的类数组对象
fn：可选函数，若是声明了此函数，则在进行转换时，数组中的每一个元素都将调用一次此函数。

案例:

// 将类数组对象转换为数组
// 类似数组对象即对象中的键名为数字或字符串数字的对象，同时对象中存在length属性，用于表示数组的长度
// 对象中的数字键名即表示该属性在数组中的下标位置.

// 案例一
let list={
	1:'张三',
	3:14,
	'5':'男',
	6:'江苏南京',
	length:8
}
console.log(Array.from(list)); // [undefined,'张三',undefined,14,undefined,'男','江苏南京',undefined]

// 案例二
let fn=function(a,b,c){
	let arr=Array.from(arguments);
	arr.map(item=>{
		console.log(item);
	})
}

// 案例三
let sets=new Set([1,2,3,1,4,5]); // 注意：Set集合中不会有重复值，因此，这里最终为 Set(5){1,2,3,4,5}
let arr=Array.from(sets);
console.log(arr); // [1,2,3,4,5];

2.Array.of()方法

Array.of方法用于将一组值，转换为数组。

语法:

Array.of(参数)

当没有传递参数时，该方法返回值为一个空数组。
当传入一个undefined参数时，该方法返回一个元素为undefined的数组 --[undefined]
当传入一个参数时，该方法返回一个元素为传入值的元素 --[传入值]
当传入多个参数时，该方法返回一个元素为传入参数的数组

案例：

Array.of(); // []
Array.of(undefined); //[undefined]
Array.of('Hello'); // ['Hello']
Array.of('Hello',true,12) ; // ['Hello',true,12]