JavaScript中创建数组的两种方式
（一）使用Array构造函数：
var arr1 = new Array() // 创建一个空数组
var arr2  = new Array(20)  //  创建一个包含20项的数组
var arr3 = new Array("lily", "lucy", "Tom"); // 创建一个包含3个字符串的数组

 （二）使用数组字面量的表示法： 
var arr4 = []; // 创建一个空数组
var arr5 = [20]; // 创建一个包含一项的数组
var arr6 = ['lily','luck','Tom']; // 创建一个包含3个字符串的

数组的方法有数组原型链方法， 也有object对象继承来的方法，这里我们只介绍数组的原型方法，数组的原型方法主要有以下这些：
join（）
push() pop()
shift() unshift()
sort()
reverse()
concat()
slice()
splice()
indexOf() lastIndexOf ()
forEach()
map()
filter()
every()
some()
reduce() reduceRight()

详细功能：
1.join（ ）
join（separator）：将数组的元素组起一个字符串， 以separator为分隔符，省略的话则用默认用逗号分隔符，该方法只接收一个参数：既分隔符
var  arr = [1,2,3];
console.log(arr.join()); // 1,2,3
console.log(arr.join(" - ")) //1-2-3
console.log(arr)  // [1,2,3] (原数组不变) 
通过join（）方法可以实现重复的字符串，只需要传入字符串以及重复的次数，就能返回重复后的字符串，函数如下：
function repeatString（str， n）{
  return new Array(n+1).join(str)
}
console.log(repeatString("abc",3)); // abcabcabc
console.log(repeatString("Hi",5)); // HiHiHiHiHi


2. push() pop ()
push(): 可以接收任意数量的参数，把他们逐个添加到数组末尾，并返回修改后数组的长度
pop(): 数组末尾的移除最后一项，减少数组的length值，然后返回移除的项

var arr = ["Lily","luck",'Tom'];
var count = arr.push("Jack","Sean");
console.log(count); // 5
console.log(arr) // [ "Lily","luck",'Tom', "Jack","Sean"]
var item = arr.pop();
console.log(item); // Sean
console.log(arr); //  [ "Lily","luck",'Tom', "Jack"]

3.shift() unshift()
shift():删除原数组第一项，并返回删除元素的值，如果数组为空则返回undefined
unshift():将参数添加到原数组的开头，并返回数组的长度
这组方法和上面的push() pop() 方法正好对应，一个是操作数组的开头，一个是操作数组的结尾的
var arr = ["Lily","luck",'Tom'];
var count = arr.unshift( "Jack","Sean")
console.log(arr) // [ "Jack","Sean","Lily","luck",'Tom']
var item = arr.shift();
console.log(item); // Jack
console.log(arr); // ["Sean","Lily","luck",'Tom']

4.sort()
sort(): 按升序排列数组项--即最小的值位于最前面，最大的值排在最后面
在排序时，sort方法会调用每个数组的toString（ ）转型方法，然后比较得到的字符串，以确定如何排序，即使数组中的每一项都是数值，sort方法比较也是字符串，因此会出现以下这种情况：
var arr1 = [''a'','' d '',''c'',''b''];
console.log(arr.sort()); // ["a","b","c","d"]
arr2 = [13,24,51,3];
console.log(arr2.sort());//[13,24,3,51]
console.log(arr2) // [13,24,3,51] （元数组被改变）
为了解决上述的问题，sort（）方法可以接收一个比较函数作为参数，以便我们制定哪个值得前面，比较函数接收两个参数，如果第一个参数应该位于第二个之前则返回一个负数，如果两个参数相等则为0，如果第一个参数应该位于第二个之后则返回一个正数，以下就是一个简单的比较函数：
function compare（value1，value2）{
  if （value1  < value2 ）{
        return  -1
}else if （value1  < value2 ）{
        return 1
} else {
  return 0;
}
}
arr2 = [ 13, 24, 51, 3 ]
console.log(arr2.sort(compare)) // [ 3, 13, 24 ,51 ]
如果需要通过比较函数产生降序排序的结果，只要交换比较函数的值即可
function compare（value1，value2）{
  if （value1  < value2 ）{
        return  1
}else if （value1  > value2 ）{
        return -1
} else {
  return 0;
}
}
arr2 = [ 13, 24, 51, 3 ]
console.log(arr2.sort(compare)) // [ 51, 24, 13,3 ]


5. revese()
revese(): 反转数组项的顺序
var arr = [ 13, 24, 51, 3 ];
console.log(arr.revese()); // [ 3,51,24,13 ]
console.log(arr) // [3,51,24,13] (原数组改变)

6. concat() 
concat(): 将参数添加到原数组中，这个方法会先创建当前数组一个副本，然后将接收到的参数添加到这个副本的末尾，最后返回新构建的数组，在没有给concat()方法传递参数的情况下，它只是复制当前数组并返回副本
var arr = [1,3,5,7]
var arrCopy = arr.concat(9,[11,13])
console.log ( arrCopy ) // [1,3,5,7,9,11,13]
console.log ( arr ) // [1,3,5,7] (原数组未被修改) 

7. slice()
slice(): 返回从原数组中指定开始下标到结束下表之间的项组成，slice（）方法可以接受一或者两个参数，即要返回项的起始和结束位置，在只有一个参数的情况下，slice（）方法返回从该参数指定位置开始到当前数组末尾的所有项，如果两个参数，该方法返回起始和结束位置之间的项----但是不包括结束位置

var arr = [1,3,5,7,9,11];
var arrCopy = arr.slice(1)
console.log(arr); // [1,3,5,7,9,11]

8. indexOf() 和 lastIndexOf()
indexOf(): 接收两个参数：要查找的项和（可选的）表示查找起点位置的索引，其中，从数组的开头（位置0）开始向后查找，
lastIndexOf: 接收两个参数：要查找的项和 （可选的）表示查找起点位置的索引，其中，从数组的末尾开始向前查找

这两个方法都返回要查找的项在数组中的位置，或者在没有找到的情况下返回-1，在比较第一个参数与数组中的每一项时，会使用全等操作符
var arr = [1,3,5,7,7,5,3,1]
console.log(arr.indexOf(5)); // 2
console.log(arr.lastIndexOf(5)); // 5
console.log(arr.indexOf(5,2)); // 2
console.log(arr.lastIndexOf(5,4)) // 2
console.log(arr.indexOf("5")) // -1 


10. forEach()
forEach():对数组进行遍历循环，对数组中的每一项运行给定函数，这个方法没有返回值，参数都是function类型，默认有传参，参数分别是：遍历的数组内容，对应的数组索引，数组本身
var arr = [ 1,2,3,4,5 ];
arr.forEach(function( x,index,a )=> {
  console.log( x + ' | ' + index + ' | '))
})
// 输出是：
// 1| 0 | true
// 2| 1 | true
// 3| 2 | true

11. map()
map(): 指 “映射”功能，数组中的每一项运行给定函数，返回每次函数调用的结果组成数组
var arr = [ 1,2,3,4,5 ]
var arr2 = arr.map（（item）=> {
  return item * item 
}）
console.log(arr2) // [ 1,4,9,16,25 ]

12.filter()
filter():指 “过滤”功能,数组中的每一项运行给定函数，返回满足的过滤条件组成的数组
var arr = [ 1,2,3,4,5,6,7,8,9,10 ]
var arr2 = arr.filter((x,index)=> {
  return index % 3 ===0 || x>= 8
})
console.log(arr2) // [1,4,7,8,9,10]
13.every() 
every():判断数组中是否存在满足条件的项，只要有一项满足条件，才会返回true
var arr = [ 1,2,3,4,5 ]
var arr2 = arr.every((x)=>{
return x < 10 
})
console.log(arr2) // true
var arr3 = arr.every((x)=> {
return x<3
})
console.log(arr3) // false

  /*
      flat:将多为数组转换为以为数组
      数组.flat()
    
    */
    let arr = [1,[2,[3]],4]
    let newArr = arr.flat(Infinity) //必须要加上这个Infinity才可以转换过来 
    console.log(newArr);
    

### 深拷贝的业务场景:
/**
   * 这个地方需要深拷贝,需要把后端返回的数据字段进行修改,才能使用到组件中
 * **/
let newArr =JSON.parse(JSON.stringify(res.data.filterCategory).replace(/name/g,'text').replace(/id/g,'value'))
  this.filtercategory = newArr
  console.log(this.filtercategory);

实际效果:

image.png

数组的总结

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <h1 id="demo"></h1>

  <h2 id="mo"></h2>
  <script>
    var arr = ["A", "B", "C", "D", "E", "F", "G", "H"];
    arr[0] = "楚楚胡";
    console.log(arr[0]); // 获取到的是数组中的第一个元素: "楚楚胡"
    console.log(arr);

    // 数组元素渲染到页面
    arr.forEach(item => {
      document.querySelector('#demo').innerHTML += item + "<br />"
    });

    document.querySelector("#mo").innerHTML = arr;

    // 数组的长度是8 数组的索引是7
    console.log(arr.length);  // 8

    // 数组的长度是8 数组的索引是7 要访问数组中的最后的一个元素 可以length - 1;
    console.log(arr[arr.length - 1]); // "H"



    // 在数组的末尾添加数据
    var num = [11, 22, 33, 44, 55, 66, 77, 88, 99];
    num.push(100, 200, 300);
    console.log(num); // [11, 22, 33, 44, 55, 66, 77, 88, 99, 100, 200, 300]

    num[num.length] = "胡振楚";
    console.log(num); // [11, 22, 33, 44, 55, 66, 77, 88, 99, 100, 200, 300, "胡振楚"]


    // 判断是不是数组 Array.isArray()
    var arr = [11, 22, 33, 44, 55, 66, 77, 88, 99];
    console.log(Array.isArray(arr)); // 返回一个布尔值  true

    // 把数组转换为字符串 toString()
    var arr = [11, 22, 33, 44, 55, 66, 77, 88, 99];
    console.log(arr.toString()); // 11,22,33,44,55,66,77,88,99

    // join() 方法也可将所有数组元素结合为一个字符串。它的行为类似 toString()，但是您还可以规定分隔符：
    var arr = [11, 22, 33, 44, 55, 66, 77, 88, 99];
    var aaaaa = arr.join("|")
    console.log(aaaaa); // // 11|22|33|44|55|66|77|88|99 返回的是你最新用 | 分割的字符串
    // console.log(arr.join("|")); // 11|22|33|44|55|66|77|88|99;




    // pop() 方法返回“被弹出”的值
    var fruits = ["Banana", "Orange", "Apple", "Mango"];
    var x = fruits.pop();      // x 的值是 "Mango"
    console.log(x); // 返回的是你删除的数组中的最后一项的值


    // slice() 方法创建新数组。它不会从源数组中删除任何元素。
    var arr = ["aaa", "bbb", "ccc", "ddd", "eee"];
    var newArr = arr.splice(3);
    console.log(newArr); // ["ddd", "eee"];


    // slice() 可接受两个参数，比如 (1, 3)。
    var arr1 = ["aaa", "bbb", "ccc", "ddd", "eee"];
    var newArr1 = arr.splice(2, 3);
    console.log(newArr1); // ['ccc']\


    // slice() 如果不传入任何参数 那么就会返回一个空数组
    var arr2 = [1, 2, 3, 34, 55555, 55, 65];
    var newArr2 = arr2.splice();
    console.log(newArr1); // [] 得到的是一个空数组


    // sort() 数组排序 sort() 方法以字母顺序对数组进行排序：
    var points = [40, 100, 1, 5, 25, 10];
    points.sort(function (a, b) {
      return b - a
    })
    console.log(points);
    // reverse() 方法反转数组中的元素。
    var points = [40, 100, 1, 5, 25, 10];
    var newpoints = points.reverse();
    console.log(newpoints);


    // 求最大值
    console.log(Math.max(1, 445, 778, 253656, 48548, 4512, 12156456, 152463225));

    var arr = [1, 445, 778, 253656, 48548, 4512, 12156456, 152463225];
    console.log(Math.max.apply(arr));


    // map() 循环
    var OPPO = [1, 2, 3, 4, 5, 6, 7, 8, 9];
    var newOppo = OPPO.map(item => {
      return item * 10
    })
    console.log(newOppo); // [10, 20, 30, 40, 50, 60, 70, 80, 90];



    // filter() 符合条件的数据返回创建一个新的数组
    var OPPO = [1, 2, 3, 4, 5, 6, 7, 8, 9];
    var newFilter = OPPO.filter(item => {
      return item > 5
    })
    console.log(newFilter); // [6, 7, 8, 9]

    // reduce() 
    var numbers = [45, 4, 9, 16, 25];
    var newNum = numbers.reduce((pro, tar) => {
      console.log(pro, "pro");
      console.log(tar, "tar");
      return pro += tar
    }, 0)
    console.log(newNum);

    // every() 使用场景:表示数组中是否每一项满足条件的，如果是就返回true,如果有一项不满足则返回false,终止循环
    var num = [15, 12, 7, 8, 154, 5, 45, 78, 8263, 14];
    var newNum = num.every(item => item > 3);
    console.log(newNum); // true   最终这个地方会返回一个布尔值

    //some() 使用场景：表示数组中是否有一项满足条件的，如果有就返回true,终止循环，如果没有，一直循环到结束，返回false，如果需要判断只要有一项满足就可以使用改方法
    var num = [15, 12, 7, 8, 154, 5, 45, 78, 8263, 14];
    var newNum = num.some(item => item > 100);
    console.log(newNum); // true   最终这个地方会返回一个布尔值

    // indexOf() 如果没有找到数组中的item 就返回-1,如果找到数组中相匹配的那么就返回数组中的匹配的item项的下标值
    var num = [15, 12, 7, 8, 154, 5, 45, 78, 8263, 14];
    var newNum = num.indexOf(1200000);
    console.log(newNum); // -1 你传入的这个参数 在num 数组中找不到所以就返回 -1  要是找得到的话就会返回 该item在数组中的位置 也就是下标值

    // lastIndexOf() 与 indexOf() 类似，但是从数组结尾开始搜索。
    var fruits = ["Apple", "Orange", "Mango"];
    var a = fruits.lastIndexOf("Apple1111");
    console.log(a); // 0 得到的是当前项的在该数组中的下标位置  你传入的这个参数 在fruits 数组中找不到所以就返回 -1  要是找得到的话就会返回 该item在数组中的位置


    // find() 使用场景：表示来查找符合条件的任意一个，找到就返回该项，没有就返回undefined, 此方法和some方法差不多，但是此方法可以把找到的选项信息打印出来.
    var info = [{ name: "楚楚胡", age: 18, sex: "男" }, { name: "古小胡", age: 28, sex: "男" },{ name: "振楚胡", age: 38, sex: "男" }];
    var newInfo = info.find(item => item.age > 18);
    console.log(newInfo); // {name: "古小胡", age: 28, sex: "男"}  这返回的是满足条件的该项  是个对象(因为这个数组中的每项是个对象)


    // findIndex() 返回满足条件的任意一个的索引
    var info = [{ name: "楚楚胡", age: 18, sex: "男" }, { name: "古小胡", age: 28, sex: "男" },{ name: "振楚胡", age: 38, sex: "男" }];
    var newInfo = info.findIndex(item => item.age > 18);
    console.log(newInfo); // 1  这返回的是满足条件的该项的索引

  </script>
</body>

</html>

2. 把一个二维数组变为obj

### 1. 以前的取值
      const arr = [
        ["foo", 1],
        ["bar", 2],
      ];
      /**
       * 如果我想获取数组中的第二个数组的bar 和 2 该怎么获取呢?
       *
       * **/
      console.log(arr[1][0]); // 'bar'
      console.log(arr[1][1]); // 2

image.png

3. 以上的那种写法是不行的,如果数组很长, 那么基本上满足不了....

  const arr = [
        ["foo", 1],
        ["bar", 2],
      ];

 const Obj = Object.fromEntries(arr);
 console.log(Obj);

image.png

4. 需求: 把aaa对象中 key的length 等于三的过滤出来

/**
       * 需求: 把aaa对象中 key的length 等于三的过滤出来
       *
       * **/
      const aaa = {
        abc: 1,
        def: 2,
        husdfg: 3,
      };

      const res = Object.fromEntries(
        Object.entries(aaa).filter(([key, val]) => key.length === 3)
      );
      console.log(res);

实际截图

image.png