数组

数组 可以有序的存储一组数据，每个数据对应的有索引 可以根据索引访问数组中的数据

  1.    1.可以根据索引**获取**数组中的数据<br />       2.可以根据索引**修改**数组中的数据<br />       3.可以根据索引在数组的**末尾添加**新数据<br />       4.数组对象的属性：length 获取数组中元素的数量(数组的长度)<br />       5.遍历数组

增加元素：开头arr.unshift()

末尾arr.push()

删除元素：开头arr.shift()

末尾arr.pop()

删除几位元素：arr.splice(1,2)//1开始。删除两位。

删除几位元素并插入：arr.splice(1,2,’w’,’e’)

将元素拼接成字符串:arr.join(‘—‘)//每两个元素之间都会出现拼接的符号

截取元素返回新数组：arr.slice(1,4)//相当于数学[1,4)

倒叙：arr.reverse()

合并数组：arr4.concat(arr5,arr6）

数组元素排序，返回排序之后的新数组

  1.     var arr7 = [12,5,14,3,2,54,28,36];<br />        var res4 = arr7.sort();<br />        console.log(res4);
  3.     // 自定义排序规则  升序  降序<br />        var res5 = arr7.sort(function (a,b) {<br />            // a,b 表示数组中正在比较的两个元素<br />            if(a > b){<br />                return -1;  //交换两个元素的位置<br />            }else{<br />                return 1;  //不交换位置<br />            }<br />        });
  1.  <script>
  2.         var arr = ['a','b','c','d'];
  3.     // 1.增加新元素
  4.         // 末尾追加
  5.         arr.push("hello");
  7.         // 开头追加
  8.         arr.unshift("world")
  11.     // 2.删除元素
  12.         // 末尾删除
  13.         arr.pop()
  15.         // 开头删除
  16.         arr.shift()
  19.     // 3.删除、插入、替换
  20.         // 从某个位置开始，删除几位 
  21.         // arr.splice(1,2)
  23.         // 从某个位置开始，删除几位，并插入元素
  24.         arr.splice(1,1,'e','f','g')
  26.         console.log(arr);
  28.     // 4.将数组中的元素拼接成字符串,返回拼接之后的字符串
  29.         var arr2 = ['苹果','香蕉','葡萄'];
  30.         // '苹果/香蕉/葡萄'
  31.         var res1 = arr2.join('/');
  32.         console.log(res1);
  34.     // 5.截取数组中的元素,返回一个新数组
  35.         var arr3 = [1,2,3,4,5,6];
  36.         // 从哪开始，到哪结束（包含开始，不包含结束）
  37.         var res2 = arr3.slice(1,4);
  38.         console.log(res2);
  40.     // 6.颠倒数组中元素的排列循序,返回一个新数组
  41.         var res3 = arr3.reverse();
  42.         console.log(res3);
  44.     // 7.合并数组,返回合并之后的数组
  45.         var arr4 = ['a','b'],arr5 = ['c','d'],arr6 = ['e','f'];
  46.         var maxArr = arr4.concat(arr5,arr6);
  47.         console.log(maxArr);
  49.     // 8.数组元素排序，返回排序之后的新数组
  50.         var arr7 = [12,5,14,3,2,54,28,36];
  51.         var res4 = arr7.sort();
  52.         console.log(res4);
  54.         // 自定义排序规则  升序  降序
  55.         var res5 = arr7.sort(function (a,b) {
  56.             // a,b 表示数组中正在比较的两个元素
  57.             if(a > b){
  58.                 return -1;  //交换两个元素的位置
  59.             }else{
  60.                 return 1;  //不交换位置
  61.             }
  63.         });
  64.         console.log(res5);
  66.         // 例子 按照价格排序
  67.         var goodList = [
  68.             {
  69.                 name:"苹果",
  70.                 price:3.99
  71.             },{
  72.                 name:"香蕉",
  73.                 price:2.99
  74.             },{
  75.                 name:"橘子",
  76.                 price:5
  77.             },{
  78.                 name:"葡萄",
  79.                 price:6.99
  80.             },{
  81.                 name:"西瓜",
  82.                 price:2.58
  83.             },{
  84.                 name:"李子",
  85.                 price:2.78
  86.             },
  87.         ]
  89.         // 降序
  90.         var goodList2 = goodList.sort(function (item1,item2) {
  91.             if (item1.price > item2.price) {
  92.                 return -1; //不交换位置
  93.             }else{
  94.                 return 1; //交换位置
  95.             }
  96.         });
  97.         console.log(goodList2);
  98.     </script>

image.png

数组常用API

Array.from(arrLike，callback)：转换成数组

把一个类似数组的数据转换为真正的数组，返回转换后的新数组也可以对返回的新数组进行二次操作，具体操作方式可以写在第二个参数中Array.from(arrLike,function(ele,i){}),ele是返回的数组元素，i是索引
这也是一个回调函数，用来操作每个元素，将处理好的元素值放到一个新数组中

forEach(): 遍历数组

arr1.forEach(function(ele,i,array){})只能遍历数组arr1，回调函数的三个参数的意义 ele是返回的数组元素，i是索引，数组本身；这三个参数使用写，不使用可以不写，具体的操作写在回调函数中，比如绑定个点击事件。

map(callback): 映射

改变
对数组中的每一个元素运行指定操作，返回操作之后的结果，返回一个新数组，
newArr=arr1.map(function(ele,i){return ele+i})

filter(callback)

过滤，筛选满足指定条件的元素，并返回一个数组
这是一个静态的方法，只能通过构造函数去访问
var arr2 = [5,16,3,26,8,9,10,4,17];
newArr = arr2.filter(function(ele){
return ele > 10
});
console.log(newArr);

some(callback)

判断是否存在满足指定条件的元素（无改变，过滤筛选），返回布尔值
var result = arr2.some(function(ele){
return ele.score < 60
});
console.log(result);

find()

返回第一个满足条件的元素

findIndex()

返回第一个满足条件索引
result = arr2.find(function(ele){});
console.log(result);

includes()

判断数组中是否包含某个元素，返回布尔值
arr.includes(XXX)

  1. <body>
  2.     <ul>
  3.         <li>1</li>
  4.         <li>2</li>
  5.         <li>3</li>
  6.         <li>4</li>
  7.         <li>5</li>
  8.     </ul>
  9.     <script>
  10.         var lis = document.getElementsByTagName('li');
  11.         console.log(lis);
  13.         // 1. Array.from(arrLike,callback) ：把一个类数组转换为真正的数组，返回转换之后的新数组。
  14.         var arr_lis = Array.from(lis);
  15.         console.log(arr instanceof Array);
  17.         // 回到函数：用来操作每个元素，将处理好的元素值放在一个新数组中
  18.         var str = 'abcdeg';
  19.         var arr = Array.from(str,function(ele,i){
  20.             // console.log(ele,i);
  21.             return ele + (i+1)
  22.         })
  23.         console.log(arr);
  25.         // 2. forEach(callback)  遍历数组
  26.         var arr1 = ['a','b','c'];
  27.         arr1.forEach(function(ele,i,array){
  28.             console.log(ele,i,array);
  29.         })
  31.         arr_lis.forEach(function(ele,i){
  32.             ele.onclick = function(){
  33.                 this.style.color = 'red'
  34.             }
  35.         })
  37.         // 3. map(callback) 映射
  38.         // 对数组中的每一个元素运行指定的操作，返回每次操作之后的结果，并将其组成一个新数组。
  39.         var newArr = arr1.map(function(ele,i){
  40.             return ele + i
  41.         });
  42.         console.log(newArr);
  44.         // 4.filter(callback)
  45.         // 过滤、筛选数组中满足指定条件的元素，并返回一个新数组
  46.         var arr2 = [5,16,3,26,8,9,10,4,17];
  47.         newArr = arr2.filter(function(ele){
  48.             return ele > 10
  49.         });
  50.         console.log(newArr);
  52.         arr2 = ['王五','张三','王二麻子','李四','王小二'];
  53.         newArr = arr2.filter(function(ele){
  54.             var reg = /^王/;
  55.             return reg.test(ele)
  56.         });
  57.         console.log(newArr);
  59.         arr2 = [{name:'张三1',score:78},{name:'张三2',score:56},{name:'张三3',score:99},{name:'张三4',score:16},{name:'张三5',score:61}];
  61.         newArr = arr2.filter(function(ele){
  62.             return ele.score > 60;
  63.         });
  65.         // some(callback)
  66.         // 判断数组中是否存在满足指定条件的元素，返回布尔值
  67.         var result = arr2.some(function(ele){
  68.             return ele.score < 60
  69.         });
  70.         console.log(result);
  72.         // find() 查找第一个满足条件的元素
  73.         // findIndex() 查找第一个满足条件的元素索引。
  74.         result = arr2.find(function(ele){
  75.             return ele.score < 60
  76.         });
  77.         console.log(result);
  79.         // includes() 判断数组中是否包含某个元素。
  80.         var arr3 = [1,2,3,4,5];
  81.         console.log(arr3.includes(5));
  82.     </script>
  83. </body>
  84. </html>

对象

对象：以键值对形式存储数据

取值采用打点的方式
修改属性值直接重新赋值
新增属性也是直接打点赋值

对象的方法

  1. <script>
  2.         // 函数  方法
  4.         // 对象  属性:描述对象的静态特征  方法:表示对象的动态行为
  5.         var person = {
  6.             name: "张三",
  7.             age:18,
  8.             isMale:true,
  9.             // 对象的方法
  10.             speak:function(lang){
  11.                 alert(lang);
  12.             }
  13.         }
  15.         // 打点
  16.         // person.name
  17.         // 调用对象的方法
  18.         person.speak("中文");
  20.         // 数组对象的方法
  21.         var arr = [1,2,3]
  22.         // arr.pop()
  24.         var str = arr.join('-');
  25.         console.log(str);
  26.         console.log(typeof str);
  28.     </script>

遍历for in

  1. // 遍历对象 for in
  2.         // const 声明常量的关键字
  3.         for (var key in car) {
  4.             // 变量 key 指代的是对象中的 键 
  5.             console.log(key);
  6.             console.log(typeof key);
  7.             console.log('-----------');
  8.             // 根据 键 取 值，在这里中能采用 [] 的方式
  9.             // console.log(car[key]);
  10.             // car.key  不能采用 打点的形式
  11.             // console.log(car.key);  //undefined
  12.         }

统计数组中元素的出现次数

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>Document</title>
  8. </head>
  9. <body>
  10.     <script>
  12.         /*
  13.             统计的过程中会出现两种情况：
  14.             1.元素首次出现，在对象中新增一个属性，值1；
  15.             2.元素不是首次出现，在原本的基础上，值+1.
  17.         */
  19.         var arr = ['a','d','y','d','y','e','a','y'];
  21.         var obj = {}; //准备一个空对象
  23.         // 开始统计
  24.         for(var i=0;i<arr.length;i++){
  25.             var item = arr[i];
  26.             // 如何判断该元素是否是首次出现
  27.             // =>判断 对象中是否存在 某个属性(数组中是否存在某个元素)
  28.             var flag = false;// 银针
  29.             for(var key in obj){
  30.                 if (key == item) {  //证明对象中存在该属性
  31.                     flag = true;
  32.                     break;
  33.                 }
  34.             }
  36.             if (flag == false) { //对象中不存在某属性 （首次出现）
  37.                 obj[item] = 1;  //给对象新增属性，属性值：1
  38.             } else {
  39.                 // 对象中存在某个属性（不是首次出现）
  40.                 obj[item] = obj[item] + 1; //获取属性值后，在原来的基础上+1
  41.             }
  43.         }
  45.         console.log(obj);
  46.     </script>
  47. </body>
  48. </html>
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>Document</title>
  8. </head>
  9. <body>
  10.     <script>
  11.         // 统计结果：{a:2,b:1}
  12.         // 变形-统计结果：[{code:"a",count:2},{code:"b",count:1}]
  13.         var arr = ['a','s','d','e','s','a','e','s'];
  15.         var resArr = []; //用来存放统计结果
  16.         // 开始统计
  17.         for(var i=0;i<arr.length;i++){
  18.             var item = arr[i];
  19.             // 判断 当前元素item是否在resArr中出现过
  20.             var flag = false; //银针的初始状态
  21.             for(var j=0;j<resArr.length;j++){
  22.                 if(item == resArr[j].code){
  23.                     flag = true;
  24.                     // 不是首次出现
  25.                     // resArr[j].count++
  26.                     break;
  27.                 }
  28.             }
  29.             if(flag == false){
  30.                 // 首次出现
  31.                 // 往数组中新增元素？？？
  32.                 // resArr[resArr.length] = {code:item,count:1}
  33.                 resArr.push({code:item,count:1})
  35.             }else{
  36.                 // 不是首次出现
  37.                 resArr[j].count++;
  38.             }
  39.         }
  41.         console.log(resArr);
  43.         // 排序sort 方法是在原来数组的基础上进行修改，返回修改之后的数组。
  44.         resArr.sort(function (a,b) {
  45.             if (a.count < b.count) {
  46.                 return 1; //交换位置
  47.             } else {
  48.                 return -1; //不交换位置
  49.             }
  50.         });
  51.         console.log(resArr);
  54.     </script>
  55. </body>
  56. </html>

产生几个不重复的随机数

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>Document</title>
  8. </head>
  9. <body>
  10.     <script>
  11.         var arr = [0,1,2,3,4,5,6,7,8,9,'a','b','d','e','f','j'];
  12.         // 1. 随机  索引
  13.         // 2. 不重复
  14.         // 3. 6个数
  16.         for(var i=0;i<6;i++){
  17.             // 1.产生一个随机数 [0  arr.legnth-1]
  18.             var randomNum = Math.ceil(Math.random()*(arr.length - 1));
  19.             // 把随机数作为索引，从arr中取元素
  20.             var item = arr[randomNum];
  21.             document.write(`<span>${item}</span>`)
  23.             // 2.不重复，将已经取过的元素从数组中删除
  24.             arr.splice(randomNum,1)
  25.         }
  27.         // 产生 0-9之间 6个不重复的随机数
  28.         var arr1 = []
  29.         while(arr1.length != 6){
  30.             // 1.产生0-9之间的随机数
  31.             var randomNum = Math.floor(Math.random()*10);
  32.             // 2.判断 此次产生的随机数是否在数组中存在
  33.             var flag = false;
  34.             for(var i=0;i<arr1.length;i++){
  35.                 if(randomNum == arr1[i]){
  36.                     flag = true;
  37.                     break;
  38.                 }
  39.             }
  40.             if(flag == false){
  41.                 arr1.push(randomNum);
  42.             }
  44.         }
  45.         console.log(arr1);
  47.     </script>
  48. </body>
  49. </html>

数组的对象中的字段进行去重，再对某些属性值累加（合并相同项，并对其他字段进行累加）

  1. let newArray = this.list.reduce((a, b, index) => {
  2.   //type是合并的相同字段，allmoney是需要进行累加的字段
  3.           let hasValue = a.findIndex(r => {
  4.             return r.type === b.type
  5.           })
  6.           hasValue === -1 && a.push(b)
  7.           hasValue !== -1 && (a[hasValue].allmoney = a[hasValue].allmoney + b.allmoney)
  8.           return a
  9.         }, [])
  10.         console.log("合并累加后",newArray)
  11.         this.xList = newArray.map(item => {
  12.           return item.type
  13.         })
  14.         console.log("合并累加后x",this.xList)
  16.         this.yList = newArray.map(item => {
  17.           return item.allmoney
  18.         })