JS进阶-数组 数组搜索 map 数组扁平化 数组排序 解构

数组搜索方法：

indexof():返回数组中某个指定的元素位置，没有找到返回-1  从头到尾

arrName.indexof(searchElement,[startIndex]);

lastindexof():将从指定位置开始搜索,若果未指定开始位置。则从末尾开始，并在数组的开头结束搜索。如果未找到该项目-1.如果搜索的值不止一次出现，将返回最后一次出现的位置

arrName.lastIndexof(searchElement,[startIndex])

默认startIndex的值为arr.length-1

includes():判断一个数组是否包含一个指定的值，如果是返回true 否则为false

arrName.includes(searchElement,startIndex])

默认startIndex的值为0

let arr = ['One', 'Two', 'One', 'Three', 'Four', 'One', 'Five'];
console.log(arr.indexOf('One')) //只会查询第一个查询的位置
console.log(arr.indexOf('One',3))//5
console.log(arr.indexOf('one'))//-1
console.log(arr.lastIndexOf('One'));//5
console.log(arr.lastIndexOf('One',3));//2  往头部开始搜索

console.log(arr.includes('One'));//true

console.log(arr.includes('Three',4));//false

条件搜索 find(), findIndex filter()

find() 接收一个回调函数，只会返回第一个查到的值 查不到为undefined

findIndex() 接收一个回调函数 只会返回第一个查到的值的下标 查不到为-1

filter() 接收一个回调函数 返回一个判定成立数组 否则返回一个空数组

indexOf和inCludes方法之间的区别

indexOf返回第一个匹配到的元素的下标位置；

includes返回匹配的结果值为布尔值；

数组Map方法

作用：返回一个新数组，数组中的元素为原始数组元素调用函数处理的值

arrName.map(callback,thisValue)

特征：不会对空数组进行检测， 不会改变原始数组

let arr = [1, 2, 4, 5, 6];
const result = arr.map(element => element * element);
console.log(result);

//获取数组里面每个值的长度并返回一个新数组
let arr1 = ['apple', 'orange', 'peach'];
 let lengthArr = arr.map((element) => element.length);

//开平方根
 let arr2 = [25, 16, 144, 36]; 
let result2= arr2.map((element) => Math.sqrt(element));
console.log(result2);

let products = [
  { pCode: 1, pName: 'apple' },
  { pCode: 2, pName: 'banana' },
  { pCode: 3, pName: 'orange' },
  { pCode: 4, pName: 'peach' },
];

let names=products.map(
  product=>product.pName
)
console.log(names) //[ 'apple', 'banana', 'orange', 'peach' ]

数组扁平化 二维三维 变为一维数组

最常使用reduce()方法实现数组的扁平化

reduce 接收一个函数作为累加器，数组中的每个值（从左到右）开始缩减，最终计算为一个值

reduceRight():从右往左开始遍历

array.reduce(callback,initialValue) 

callback参数:total,currentCalue,currentlndex,arr

initialValue:传递给函数的初始值

let arr=[2,4,6,8];

//求和
let result=arr.reduce((accumulator,currentValue)=>{
   return accumulator+currentValue;
},0)
console.log(result);
//乘
let result1=arr.reduce((accumulator,currentValue)=>{
  return accumulator*currentValue;
},10)
console.log(result1);
//求平均值

let result2=arr.reduce((accumulator,currentValue,index,arr)=>{
     accumulator+=currentValue;
  if(index === arr.length-1){
    return accumulator/arr.length
  }
  return accumulator;
});

console.log(result2)

//reduceRight():从右往左开始遍历

//数组扁平化
 let arr3 = [
   [1, 2],
   [3, 4],
   [5, 6],
 ];
 //concat() 方法用于连接两个或多个数组。该方法不会改变现有的数组，而仅仅会返回被连接数组的一个副本。
 let fArr = arr3.reduce((accumulator, currentValue) => {
  return accumulator.concat(currentValue);
}, []);
console.log(fArr)//[ 1, 2, 3, 4, 5, 6 ]

//获取数组中的对象的键值之和
let employees = [
  { eCode: 1, salary: 4000 },
  { eCode: 2, salary: 5000 },
  { eCode: 3, salary: 3800 },
  { eCode: 4, salary: 4500 },
];

let totalSalaries = employees.reduce((accumulator, current) => {
  return accumulator + current.salary;
}, 0);
console.log(totalSalaries)

数组排序 sort reverse

let products = ['Banana', 'Orange', 'Grapes', 'Apple'];
//比较函数返回值
//-1:第一个参数放在第二个参数前面
//0：意味着不需要变化位置
//1: 第一个参数放在第二个参数后面

//升序
products.sort((a,b)=>{
  if(a<b){
    return -1;
  }
  if(a>b){
    return 1;
  }
  if(a===b){
    return 0;
  }
});


//降序

products.sort((a,b)=>{
  if(a<b){
    return 1;
  }
  if(a>b){
    return -1;
  }
  if(a===b){
    return 0;
  }
});

console.log(products);

//数值比较

 let price = [45, 23, 10, 89, 5];

// price.sort((a,b)=>{
//   if(a<b){
//     return -1
//   }
//   if(a>b){
//     return 1;
//   }
//   if(a===b){
//     return 0;
//   }
// })
//简写方式
price.sort((a,b)=>{
  //升序
  // return a-b;
  return b-a;
})

console.log(price)

//字母降序
 let productss= ['Banana', 'Orange', 'Grapes', 'Apple'];
 productss.sort();
 console.log(productss.reverse());


//对象排序
const employees = [
  { eNo: 1001, salary: 3000 },
  { eNo: 1002, salary: 2200 },
  { eNo: 1003, salary: 3400 },
  { eNo: 1004, salary: 6000 },
];

employees.sort( (a, b) =>{
  if (a.salary < b.salary) {
    return 1;
  }
  if (a.salary > b.salary) {
    return -1;
  }
  if (a.salary == b.salary) {
    return 0;
  }
});

console.log(employees);

数组结构：

ES6允许按照一定模式，从对象和数组中提取值，对变量进行赋值，被称为解构

数组结构：可以从数组或对象中提取数据片段并分配给单个变量；

//数组解构
let arr = [80, 90, 93, 26];
let [a, b, c, d] = arr;
console.log(a, b, c, d);

//函数解构
function test() {
  return [80, 90, 93, 26];
}
let [a1, b1, c1, d1] = test();
console.log(a1, b1, c1, d1);

//不完全解构
let arr1 = [80, 90, 93, 26];
 let [a2, , c2, d2] = arr;
 console.log(a2, c2, d2);

 //值交换
//传统方法
var a3, b3, tmp;
tmp = a3;
a3 = b3;
b3 = tmp;
//解构方法
let a4 = 4;
let b4 = 5;
[a4, b4] = [b4, a4];
console.log(a4, b4);//5 4

//结合展开运算符
 let arr3 = [4, 5, 6];
 let [a5, ...b5] = arr3;
 console.log(a5, b5);//4 [ 5, 6 ]

 //默认值
let [a6, b6= 0, c3] = [5, 6, 7];
console.log(a6, b6, c3);//5 6 7