JavaScript数组

数组(Array)

what

数组：用来存储多个数据的，其中的每一个数据都有一个编号，叫做下标，可 以通过下标来区分数组中的数据。

数组是一种数据结构，数组是一个类，而每一个具体的数组元素就是一个对象。

Array可以包含任意的数据类型

JS 是不能使用‘’或‘=’直接判断两个数组是否相同的。

如果想要判断两个数组是否相等可以将数组转换数组进行比较

将数组转换为字符串的方法

1、arr. toString();

2、arr+“”;//运用加法运算符进行类型转换

3、arr. join();

4、String(arr);

定义

由两种定义方法，但大多数情况下使用第二种定义方法

new

通过new关键字来创建一个空数组

• new Array( ) 创建一个空数组

​ ①new 关键字，用来创建对象

​ ②Array( ) 构造函数，构建创造一个数组

• new Array(6) 创建一个 初始容量为 6 的空数组
• new Array(1,2,3,4,5,6,7 ) 创建一个具有 初始数据的 数组

字变量创建（常用）

• var arr=[ ]; 空数组
• var arr=[1,2,3]; 初始数据的数组

数组的取值和赋值

数组的取值和赋值都通过下标来完成。

下标编号从0开始，按照顺序排列

var arr=[1,5,6,3];
arr[1];
arr[1]=5;

• 数组取值：数组名[下标]；
• 数组赋值（修改）：数组名[下标]=要修改的值；

数组的遍历

• 使用普通for循环遍历

var arr=[1,5,9,'gdht',45,true];

for(var i=0;i<arr.length;i++){
                               document.write(arr[i]);
                               }
//结果：输出数组中的值

• 使用for in 遍历

var arr=[1,5,9,'gdht',45,true];

for(var i in arr){
 document.write(i);
}
//结果：输出数组下标

for(var i in arr){
document.write(arr[i]);
}
//结果：输出数组中的值

• 使用 for of 遍历(ES6新增)

var arr=[1,5,9,'gdht',45,true];

for(var i of arr){
document.write(i)
}
//结果：输出数组中的值

• 使用forEach遍历

arr.forEach(function(value){
	console.log(value);
})

数组的操作

数组的增删改查都是建立在查的基础上，只有查找到要增加/删除/修改的位置，才能进行相应的操作。

增加

 function insert(targetArr,targetNum,newNum){
        var index=getNumber(targetArr,targetNum);
        for(var i=targetArr.length-1;i>index;i--){
            targetArr[i+1]=targetArr[i];          
        }
        targetArr[index+1]=newNum;
        return targetArr;
    }

删除

   //数组的删除
    function delte(targetArr,targetNum){
        var index=getNumber(targetArr,targetNum);

        for(var i=index;i<targetArr.length;i++){
            targetArr[i]=targetArr[i+1];
        }

        return targetArr;
    }

修改

 //数组的修改

    function change(targetArr,targetNum,newNum){
        var index=getNumber(targetArr,targetNum);
        targetArr[index]=newNum;

        return targetArr;
    }

查询

  //数组的查询
       function getNumber(targetArr,targetNum){
           for(var i=0;i<targetArr.length;i++){
               if(targetArr[i]==targetNum){
                   var res=i;
                   break;
               }
           }  
           return res;
       }

数组的常用方法/函数

名称	描述
join(‘-’)	将数组转换为使用符号连接的字符串
concat(arr1,arr2)	与另一个数组合并为一个新数组
reverse()	将数组反转
sort(function(){排序规则})	对数组进行排序
push(ele1,ele2)	向数组末尾添加新元素
unshift(ele1,ele2)	向数组的开头添加新元素
pop()	删除数组中末尾的值 返回删除的值
shift()	删除数组中开头的值 返回删除的值 与pop()相反
splice(1,2,3,4)	删除、替换、插入数组元素
indexOf(ele)	查找元素的下标位置

数组的常用方法可以大概分为两种：

• 直接调用

​ ① includes()：判断一个数组是否包含一个指定的值

 <script>
        var arr=[1,5,3,9,89,75,2]
        //判断该数组是否包含5这个值。
        document.write(arr.includes(5));//判断一个数组是否包含一个指定的值
    </script>

数组使用方法中，带是否字样，表示返回值为布尔值，返回true或false

​ ②indexOf()： 搜索数组中的元素，并返回它所在的位置。

 <script>
        var arr=[1,5,3,9,89,75,2]
       //获取一个数组元素的下标
        document.write(arr.indexOf(75));//获取arr数组中元素75的下标
    </script>

​ ③lastIndexOf()： 搜索数组中的元素，并返回它最后出现的位置。

<script>
        var arr=[1,5,3,9,75,89,75,2]
        //获取数组中最后出现该元素的下标
        document.write(arr.lastIndexOf(75)+"<br/>");//获取arr数组中75出现的最后位置的下标
 </script>

• ​ 尾部操作 ④push(): 向数组的末尾添加一个或更多元素，并返回新的长度。

<script>
        var arr=[1,5,3,9,75,89,75,2]
        //向尾部添加一个或多个元素，并返回给数组
        arr.push(100,200,300);
        document.write(arr+"<br/>");//push里的元素已经添加到arr数组中
   </script>

​ ⑤pop()：删除数组的最后一个元素并返回删除的元素。

 <script>
        var arr=[1,5,3,9,75,89,75,2]
        //从尾部弹出一个元素
        arr.pop()
        document.write(arr+"<br/>");//pop一次，便从尾部弹出一个，即删除arr数组中的最后一个元素
   </script>

• 头部操作⑥unshift()： 向数组的开头添加一个或更多元素，并返回新的长度。

<script>
       var arr=[1,5,3,9,75,89,75,2]
       //向头部添加一个或者多个元素，并返回给数组
       arr.unshift(11,22,33);
       document.write(arr+"<br/>");//unshift里的元素已经添加到arr数组末尾
  </script>

​ ⑦shift()： 删除并返回数组的第一个元素。

 <script>
        var arr=[1,5,3,9,75,89,75,2]
        //从头部弹出一个元素
        arr.shift();
        document.write(arr+"<br/>");//shift一次，便从头部弹出一个，即删除arr数组中的第一个元素
   </script>

​ ⑧reverse()： 反转数组的元素顺序。

<script>
        var arr=[1,5,3,9,75,89,75,2]
		//反转元素的顺序
        // var res=arr.reverse();
        // document.write(res+"<br>");
        arr.reverse();
        document.write(arr+"<br>");
    //可以给反转后的数组重新赋值给一个变量，也可以不赋值
</script>

	⑨slice()： 选取数组的一部分，并返回一个新数组。**包头不包尾，前闭后开** 

<script>
        var arr=[1,5,3,9,75,89,75,2]
	 //截取
        var res=arr.slice(1,4);//[1,4)
        document.write(res+"<br/>");
</script>

​ ⑩toString()： 把数组转换为字符串，并返回结果。

<script>
        var arr=[1,5,3,9,75,89,75,2]
 		//转换成字符串
        document.write(arr.toString());
</script>

上述方法可以直接调用数组，有返回值，若是判断是否，则返回布尔值

• 回调函数

以下数组的操作方法，参数是一个回调匿名函数，返回值里是判断条件

arr.every(function(item,index){

​ return 条件;

​ })

回调函数中都内带循环，有两个参数，数组的元素，数组元素对应的下标

①every()： 检测数值元素的每个元素是否都符合条件。

​ 有返回值，且返回值为布尔类型，需要一个变量来接收

 <script>
        var arr=[1,5,3,9,75,89,75,2]
        // arr.every(function(item,index){
        //     return 条件;
        // })
        //判断该数组中元素是否都大于5
        var res1=arr.every(item=>item>5);
        document.write(res1+"<br/>");
    </script>

②some()： 检测数组元素中是否有元素符合指定条件。

 <script>
        var arr=[1,5,3,9,75,89,75,2]
        //判断该数组中是否有元素大于5
        var res2=arr.some(item=>item>5);
        document

③filter()： 检测数值元素，并返回符合条件所有元素的数组。

​ 过滤，将数组中满足条件的数据过滤出来，返回一个新数组

<script>
        var arr=[1,5,3,9,75,89,75,2]
        //将数组中大于5的元素过滤出来
        var res3=arr.filter(item=>item>5);
        document.write(res3+"<br/>");
    </script>

④forEach()： 数组每个元素都执行一次回调函数。

​ 函数遍历，和普通for循环一样，没有返回值，就是普通遍历

 <script>
        var arr=[1,5,3,9,75,89,75,2]
        //forEach遍历
        var res=[];
        arr.forEach((item,index)=>{
            console.log(item);
        });
    </script>

⑤from()： 通过给定的对象中创建一个数组。

​ Array.from():把一个伪数组转换成一个真数组

• 真数组：可以调用数组内置的方法，但是伪数组不行
• 伪数组：可以被遍历循环，也具有 length属性

<body>
    <p class="aaa">1</p>
		<p class="aaa">2</p>
		<p>3</p>
		<p class="aaa">4</p>
		<p>5</p>
   
</body>

⑥ map()： 通过指定函数处理数组的每个元素，并返回处理后的数组。

​ 对数组中的每一个数据进行二次加工

 <script>
        var arr=[1,5,3,9,75,89,75,2]
        //通过map让数组中的每一个数据都+10
        var res4=arr.map(item=>item+10);
        document.write(res4+"<br/>");
  </script> 

⑦sort()： 对数组的元素进行排序。

​ 没有返回值，是在原数组上 做修改

  <script>
        var arr=[1,5,3,9,75,89,75,2]
        //排序，从大到小
        arr.sort(function(a,b){
            return b-a;
        })
        document.write(arr+"<br/>");
         //排序，从小到大
         arr.sort(function(a,b){
            return a-b;
        })
       document.write(arr);
  </script> 

⑧reduce()： 将数组元素计算为一个值（从左到右）。

​ total 用来存储 计算的结果，0是total的初始值

  <script>
        var arr=[1,5,3,9,75,89,75,2]
       //求该数组所有数据的和
        var res5=arr.reduce((total,item)=>total+=item,0);
        document.write(res5+"<br/>");
  </script> 

冒泡排序

把数组中的数据，按照从大到小或者从小到大的顺序排列

相邻两个数组元素比较大小，arr[i]和arr[i+1]

需要第三方变量：设一个临时变量——temp，便于数组元素交换位置。

外层循环：控制比较的轮数

内层循环：控制每轮比较的次数

<script>
      /*
        函数名
        参数变量 目标数组 
        返回值 目标数组
      */
        //将数值从小到大排列
      //将相邻的两个数组元素进行比较、置换，遍历一次找出最大值，将最大值置换到最后面。依次遍历，找出最大值并置换到后面
      var arr=[45,6,8,87,43,1];
     for(var i=0;i<arr.length-1;i++){
        for(var j=0;j<arr.length-i;j++){
          var temp;
          if(arr[j]>arr[j+1]){
              temp=arr[j];
              arr[j]=arr[j+1];
              arr[j+1]=temp;
          }
      }
    }    
      document.write(arr);
  </script>   

获取页面标签对象的常用方法

document.getElementById("id值")//根据id获取标签对象  获取到的是1个
document.getElementsByClassName("类名")//根据类名获取相应的标签  多个
document.getElementsByName("")// 根据name属性 获取相应的标签   多个   用的少
Tag 标签
document.getElementsByTagName("")//根据标签名字 获取相应的标签  多个

query查询  
document.querySelector(".aaa");//根据选择器获取标签  第1个
document.querySelectorAll(".aaa");//根据选择器获取标签 全部

箭头函数

声明变量： var let const 声明常量(不能被改变)
ES6:新特性 箭头函数

箭头函数 只是一种新的写法形式

箭头函数都是 匿名函数

箭头函数的调用跟普通函数一样

箭头函数 如果只有一个参数 小括号 可以省略

箭头函数 如果 代码块只有一行 {} 可以省略

箭头函数 如果代码块只有一样，且 这一行是返回值
return 可以省略

数据源思想

数组 在开发中 一般用来作为数据源
eg：点击按钮改变页面背景颜色，使用数组作为数据源