创建数组

  1.         var arr = [1, 2, 3, 4];
  2.         console.log(arr)
  3.         var a = [1, "html", { "name": "cheng" }];
  4.         console.log(a)

二维数组

  1.         // 二维数组  数组里面套数组
  2.         var arr = [[1,2],[3,4]];
  3.         //arr[数组下标][数组中数组下标]   
  4.         console.log(arr[0][1])//输出：2
  5.         console.log(arr[1][0])//输出：3

数组长度

  1. var arr = ["html","css","javascript"];
  2.         console.log(arr.length);
  3.         // length-1
  4.         // 获取数组最后面的数据
  5.         console.log(arr[arr.length-1]);

数组的方法

Array.isArray

该**Array.isArray()** 方法确定传递的值是否为Array。

  1. Array.isArray([1, 2, 3]);  // true
  2. Array.isArray({foo: 123}); // false
  3. Array.isArray('foobar');   // false
  4. Array.isArray(undefined);  // false

数组的增,删,改,查

数组的添加

push(),unshift()

特点：

  1. 改变数组中数据；
  2. 可以添加一个值，也可添加多个值；
  3. 不能拼接数组。


  1. var arr = [1,2,3];
  2.         arr.push(4);
  3.         arr.unshift(0)
  4.         console.log(arr);
  6. //输出[0,1,2,3,4]

push()在数组最后添加

  1.  var arr = [1,2,3,4];
  2.         var b = [5,6,7,8];
  3.         arr.push(b);
  4.         console.log(arr);

dwed.png

unshift() 向数组前面添加

  1. var arr = [1,2,3,4]; //[1,2,3,4,5,6,7]
  2.         var b = [5,6,7,8];
  3.         arr.unshift(b);
  4.         console.log(arr);

un.png

concat()

concat() 方法用于连接两个或多个数组。 该方法不会改变现有的数组，而仅仅会返回被连接数组的一个副本。 arrayObject.concat(arrayX,arrayX,……,arrayX) arrayX：该参数可以是具体的值，也可以是数组对象

  1. /* concat 不能改变数组结构*/
  2.         var arr = [1,2,3];
  3.         var c = [ 5,6,7]
  4.         var b = arr.concat(c);
  5.         console.log(arr);
  6.         console.log(b);

ww.png

数组的删除

pop(),shift()

pop() 方法用于删除并返回数组的最后一个元素。 shift() 方法用于把数组的第一个元素从其中删除，并返回第一个元素的值。

  1. /*
  2.         pop --从末尾删除
  3.         shift --从前面删除
  4.         */
  5.         var arr = [1,2,3,4];
  6.         arr.pop();
  7.         arr.shift();
  8.         console.log(arr)
  9. //输出：[2,3]

splice() 增删改

splice() 方法向/从数组中添加/删除项目，然后返回被删除的项目。 注释：该方法会改变原始数组。 arrayObject.splice(index,howmany,item1,…..,itemX)

index 必需。整数，规定添加/删除项目的位置，使用负数可从数组结尾处规定位置。
howmany 必需。要删除的项目数量。如果设置为 0，则不会删除项目。
item1, …, itemX 可选。向数组添加的新项目。

拼接splice( index 从下标，howmany删多少个）

  1.  var arr = [1,2,3,4,5];
  2.         arr.splice(2,2);
  3.         console.log(arr)
  4. //输出：[1,2,5]
  1.   /* splice(index,howmany)
  2.         index  从哪个下标开始
  3.         howmany  删除多少个
  4.          */
  5.         var arr = [1,2,3,4,5]; //[1,2,3,5];
  6.         arr.splice(3,1);
  7.         console.log(arr);

修改 arr[index] = num

  1. var arr = [1,2,3,4,5];  //[1,2,7,4,5]
  2.         // arr[2] = 7;
  3.         // 修改splice(index,howmany,value);
  4.         /* 
  5.         index  从哪个下标开始
  6.         howmany  删除多少个
  7.         value  插入的值(可以是多个值)
  8.          */
  9.         arr.splice(2,1,7);
  10.         console.log(arr);

增

从下标前面放值

  1. var arr = [1,2,3,4];
  2.         arr.splice(2,0,6,7)//输出[1,2,6,7,3,4] 从下标前面放值
  3.         console.log(arr)

…arr

数组的展开（解构）

  1.     var arr = [1,2,3,4];
  2.     console.log(arr);
  3.     console.log(...arr);
  4.     var a = [4,5,6];
  5.     var b = [7,8,9];
  6.     a.push(...b);
  7.     console.log(a)
  8.     //b.unshift(...a)
  9.     //console.log(b)

吸塑灯箱.png
indexOf

数组的查询

slice()

查询 slice（startIndex，endIndex）不包括endIndex (startIndex<=arr[i]<endIndex) 若没有endIndex，从start到最后

  1.  var arr = [1,2,3,4];
  2.         // arr[i]
  3.         /* indexOf --查询数组某个值的下标*/
  4.         // slice(startIndex,endIndex)  不包含endIndex
  5.         /* slice(startIndex)  截取从startIndex开始到后面所有的值 */
  6.         console.log(arr.indexOf(4));
  7.         console.log(arr.slice(1,3))
  8.         console.log(arr.slice(1))

includes()

返回Boolean值

  1.  var arr= [1,2,3,4]
  2.      console.log(arr.includes(5));//false 返回Boolean值

findIndex()

对数组执行遍历,查询对应值得下标

  1. var arr = [1,2,3,2];
  2. var index = arr.findIndex(item=>{
  3.     return item == 2;
  4. })
  5. console.log(index);

filter()

只要满足某个条件,返回数组

  1. var arr = [1,2,3,4];
  2. // var res = [];
  3. // for(var i=0;i<arr.length;i++){
  4. //     if(arr[i]>2){
  5. //         res.push(arr[i]);
  6. //     }
  7. // }
  8. // console.log(res)
  9. var res = arr.filter(item=>item>2);
  10. console.log(res);

例子

  1. var  arr = [
  2.     {name:"小米",price:1999},
  3.     {name:"红米",price:999},
  4.     {name:"iphone",price:9999},
  5.     {name:"华为",price:3000},
  7. ]
  8. /* price>1000
  9. 放到一个新的数组中
  10.  */
  11. var res = arr.filter(item=>item.price>1000);
  12. console.log(res);

find()

返回满足它条件的第一个值

  1.  var arr = [1,5,3,4];
  2.  var value = arr.find(item=>{
  3.      return item>2;
  4.   })
  5. console.log(value)  //5

如果满足条件则返回那个值，如果不满足返回undfined

  1.  var arr=[1,2,3];
  2.  var value=arr.find(item=>item==2);
  3.  console.log(value)    //2

join()

join() 方法用于把数组中的所有元素拼接成一个字符串。 元素是通过指定的分隔符进行分隔的。

  1.  /* join(seprate) 将数组拼接成字符串*/
  2.         var arr = ["html","css","javascript"];
  3.         console.log(arr.join());
  4.         console.log(arr.join(""))
  6.         console.log(arr.join("|"))
  7.         console.log(arr.join(" "))

qwe.png

  1. <p id="p"></p>
  2.     <script>
  3.         var p = document.getElementById("p")
  4.         var arr = [1994,"犯罪","剧情"]
  5.         var str = arr.join("/")
  6.         p.innerHTML = str
  7.         console.log(str)
  8.     </script>

11111.png

data+join

  1. var data = {
  2.             country:"美国",
  3.             year:1994,
  4.             story:"犯罪"
  5.         }
  6.         console.log(data);//输出Object
  7.         /* 美国/1994/犯罪 */
  8.         var  arr = []
  9.         for(var i in data){
  10.             console.log(i);//输出“：”前
  11.             console.log(data[i]);//输出“：”后
  12.             arr.push(data[i])  
  13.         }
  14.         var str = arr.join("/");
  15.         console.log(str);

22222.png

sort()

sort() 方法用于对数组的元素进行排序。按照字符编码的顺序进行排序。所以只能比较单个数。 按照数值的大小对数字进行排序，要实现这一点，就必须使用一个排序函数： 升序算法 arr.sort((a,b)=>{ return a-b; }) 降序算法 arr.sort((a,b)=>{ return b-a })

  1.  var arr = [3,2,7,15,1];
  2.        var res1 = arr.sort((a,b)=>{
  3.            return a-b;
  4.        })
  5.        console.log(res1)
  6.        var res2 = arr.sort((a,b)=>{
  7.            return b-a;
  8.        })
  9.        console.log(res2)

升降.png

例：

  1. var students = [
  2.             {name:"zhang",age:20},
  3.             {name:"li",age:18},
  4.             {name:"wang",age:9},
  5.             {name:"chen",age:14},
  6.         ]
  7.         /* 
  8.         根据年龄升序
  9.         根据年龄降序
  10.          */
  11.          var result = students.sort((a,b)=>{
  12.              return a["age"]-b["age"]
  13.          })
  14.          console.log(result)

3333.png

先封装再排序

  1. <button id="like">通过好评数排序</button>
  2.     <button id="price">通过价格排序</button>
  3.     <script>
  4.         var like = document.getElementById("like");
  5.         var sales = [
  6.             { name: "张三", like: 60, distance: 1000, price: 10 },
  7.             { name: "张三", like: 30, distance: 100, price: 40 },
  8.             { name: "张三", like: 20, distance: 500, price: 6 },
  9.         ]
  10.         /* 升序 */
  11.         function addOrder(arr, value) {
  12.             if (Array.isArray(arr)) {
  13.                 var res = arr.sort((a, b) => {
  14.                     return a[value] - b[value];
  15.                 })
  16.                 return res;
  17.             }else{
  18.                 return null;
  19.             }
  20.         }
  21.         like.onclick = function () {
  22.             console.log(addOrder(sales, "like"))
  23.         }
  24.         price.onclick = function () {
  25.             console.log(addOrder(sales, "price"))
  26.         }
  27.     </script>

数组求和

  1.   var arr = [1,2,3,4];
  2.         var sum = 0;
  3.         for(var i=0;i<arr.length;i++){
  4.             sum = sum + arr[i]
  5.         }
  6.         console.log(sum)//输出10

归并求和 reduce()

  1.  var  arr = [1,2,3,4];
  2.         var sum = arr.reduce((a,b)=>{
  3.             return a+b;
  4.         })
  5.         console.log(sum)//输出10
  6.         console.log(arr)//不改变数组结构

取最大最小值

Math.max()

  1.  var arr = [1,2,3];
  2.         console.log(Math.max(12,1,2))//输出12
  3.         console.log(Math.max(...arr))//输出3

Math.min()

  1. var arr = [4,2,6];
  2.         console.log(Math.min(...arr));//输出2

forEach() 遍历数组

  1.  var arr = [2,3,4,5];
  2.         arr.forEach((item,index)=>{
  3.             console.log(item+"   "+index)
  4.         })

遍历.png

var…of… , map()

  1. /* for-of  for in */
  2.         var arr = [1,2,3];
  3.         for(var i of arr){
  4.             console.log(i)
  5.         }
  6.         // map  可以改变数组每一个项,得到一个新的值
  7.         var res = arr.map(item=>{
  8.            return item*2
  9.         })
  10.         console.log(arr);
  11.         console.log(res);

4433.png

例1：

方法1

  1. var arr = [
  2.             {name:"html",value:"12px"},
  3.             {name:"css",value:"13px"},
  4.             {name:"vue",value:"11px"},
  5.         ]
  6.         /*
  7.         实现
  8.         var res = [
  9.             {name:"html",value:24},
  10.             {name:"css",value:26},
  11.             {name:"vue",value:22},
  12.         ]
  13.          */
  14.         arr.map(item=>{
  15.             var value = parseInt(item["value"])*2;
  16.             return item["value"] = value;
  17.         })
  18.         console.log(arr);

666.png

方法2

  1. var arr = [
  2.             {name:"html",value:"12px"},
  3.             {name:"css",value:"13px"},
  4.             {name:"vue",value:"11px"},
  5.         ]
  6.         var res = []
  7.         for( var key in arr){
  8.             console.log(key)
  9.             console.log(arr[key])
  10.             arr[key].value = parseInt(arr[key].value)*2;
  11.             res.push(arr[key]);
  12.         }
  13.         console.log(res);

456.png

例2：

  1. var arr = [1,2,3];
  2.         /* 
  3.         1.数组的每一项是基础(简单)类型,执行map不会改变数组原来的结构
  4.         2.数组的每一项是复杂类型{object},那么执行map方法会改变原来的数据结构
  5.          */
  6.         var res = arr.map(item=>{
  7.             return item*3;
  8.         })
  9.         console.log(res);
  10.         console.log(arr);  
  12.         var obj = [{name:"li",age:10},{name:"zhang",age:11}];
  13.         var result  = obj.map(item=>{
  14.             return item.age = 0;
  15.         })
  16.         console.log(result);
  17.         console.log(obj)

123456.png

some(),every()

some: 返回boolean 只要数组中有一项满足条件,就输出true every: 返回boolean 只有数组中每一项都满足条件,才输出true

  1.         var arr = [1,2,3,4];
  2.         var res = arr.some(item=>{
  3.             return item>2;
  4.         })
  5.         var b = arr.every(item=>item>2);
  6.         console.log(res)//true
  7.         console.log(b);//false

reverse()

reverse() 方法用于颠倒数组中元素的顺序。

  1.  var arr = ["html","css","javascript"]
  2. console.log(arr.reverse());  // ["javascript","css","html"]