js第六天（数组下）

目录

前言

一、数组存储结构

二、数组常用方法

1.push  向数组添加元素

2.pop 删除数组末尾的一个元素

3.unshift 在数组最前面添加一个元素

 4.shift 删除数组最前面一个元素

5.splice(下标,元素个数)  用于截取替换.......

三、ES5常用遍历数组方法

        1.forEach 遍历数组

        2.map     

        3.filter 遍历数组，过滤元素

        4.find 遍历数组

        5.every 遍历数组

        6.some 遍历数组

        7.reduce 

 四、冒泡排序

---

前言

数组在程序中使用是非常频繁的，今天主要讲解数组存储结构，数组常用方法，ES5常用遍历数组方法，以及对数组排序中的冒泡排序

---

一、数组存储结构

①基本数据类型变量都存储在栈区域里

②引用变量（对象）存储在栈区域里

③复杂数据类型存储在堆区域，赋值时是将对象在堆区域地址赋给变量

 

---

二、数组常用方法

1.push  向数组添加元素

代码如下（示例）：

<script>

 var arr = [35, 37, 45, 47, 55, 88]
        console.log(arr)

        // push向数组添加元素
        arr.push(89)
        console.log(arr)

</script>

2.pop 删除数组末尾的一个元素

代码如下（示例）：

<script>

 var arr = [35, 37, 45, 47, 55, 88]
        console.log(arr)

       //pop 删除数组末尾的一个元素
        arr.pop()
        console.log(arr)

</script>

3.unshift 在数组最前面添加一个元素

代码如下（示例）：

<script>

 var arr = [35, 37, 45, 47, 55, 88]
        console.log(arr)

        //unshift 在数组最前面添加一个元素
        arr.unshift(65)
        console.log(arr)

</script>

 4.shift 删除数组最前面一个元素

 代码如下（示例）：

<script>

 var arr = [35, 37, 45, 47, 55, 88]
        console.log(arr)

        //shift 删除数组最前面一个元素
        arr.shift()
        console.log(arr)

</script>

5.splice(下标,元素个数)  用于截取替换

 代码如下（示例）：

<script>

 var arr = [35, 37, 45, 47, 55, 88]
        console.log(arr)

         //splice(下标,元素个数)  用于截取替换
        arr.splice(1, 2) //删除从下标1开始，删除两个元素
        console.log(arr)

        arr.splice(2, 2, 45, 50) //将下标为2和三的元素分别替换为45，50
        console.log(arr)

</script>

6.reverse  反转数组元素

 代码如下（示例）：

<script>

 //reverse  反转数组元素
        var arr2 = [20, 30, 40, 50, 60]
        console.log(arr2)
        arr2.reverse()
        console.log(arr2)

</script>

7.sort 用来给数组排序，先将数组转为字符串， 使用字符编码Unicode进行排序

 代码如下（示例）：

<script>

 //sort 用来给数组排序，先将数组转为字符串， 使用字符编码Unicode进行排序
        var arr3 = [17, 20, 41, 14, 100]
        console.log(arr3)
        var fun = function (a, b) { //排序函数，改变排序规则
            if (a > b) {
                return -1 //负数升序排序，整数降序排序
            }
        }
        arr3.sort(fun)
        console.log(arr3)
</script>

8.concat 把多个数组进行拼接

代码如下（示例）：

<script>

//concat 把多个数组进行拼接
        var arr4 = [4, 5, 6, 7]
        var arr41 = arr4.concat([1, 2, 3])
        console.log(arr41)
</script>

 9.join 把数组里的每一项内容连接起来，变成一个字符串

代码如下（示例）：

<script>

 //join 把数组里的每一项内容连接起来，变成一个字符串
        var arr5 = [1, 2, 3, 4, 5] // -> 1-2-3
        var str = arr5.join('&')
        console.log('str ', str)
</script>

10.slice 返回一个新的数组对象，原数组的浅拷贝(包括begin，不包括end)，原数组不会被改变 

代码如下（示例）：

<script>

// slice 返回一个新的数组对象，原数组的浅拷贝(包括begin，不包括end)，原数组不会被改变
 var arR = ['html', 'css', 'javascript', 'vue', 'react']
        var newarr1 = arR.slice(1, 3)
        console.log(newarr1) //输出为['css', 'javascript']

        var newarr2 = arR.slice(-3)
        console.log(newarr2) //输出为['javascript', 'vue', 'react']

</script>

11.indexOf 获取索引号，如果没有对应的数组元素，就会返回-1

代码如下（示例）：

<script>

 var arr6 = [10, 20, 30, 40]
        //        0  1  2  3
        var index = arr6.indexOf(300)
        console.log('index ', index); // 如果元素不存在，返回-1

</script>

12.includes 判断数组是否有某个元素 ，元素存在返回true 不存在返回false

代码如下（示例）：

<script>

    var arr = [35, 37, 45, 47, 55, 88]
    console.log(arr)

 // includes 判断数组是否有某个元素 ，元素存在返回true 不存在返回false
        console.log(arr.includes(200));

        if (arr.indexOf(30) == -1) {
            console.log('30不存在数组中');
        } else {
            console.log('30存在数组中');
        }

</script>

---

三、ES5常用遍历数组方法

1.forEach 遍历数组

代码如下（示例）： 

<script>
var arr=[89,78,64,56,91,54,95]
   forEach 遍历数组
        arr.forEach(function(item,index,arr){
            //item  第一个形参（数组元素）
            //index 第二个形参（索引号）
            //arr 第三个形参 （原数组）

        }) 
        console.log(arr)

        //forEach 遍历数组  求最大值
        var max=0
        arr.forEach(function(item,index){
            if(item > max){
               max=item
            }
        })
        console.log('数组最大值为：',max)

</script>

2.map     作用：1.遍历数组   2.映射数组，return返回值

代码如下（示例）：  

<script>

     var arr=[89,78,64,56,91,54,95]
      // map 1.遍历数组   2.映射数组，return返回值
        function textMap(){
            var arr1=arr.map(function(item,index){
                console.log('item,',item)
                return item-10
            })
            console.log(arr1)
        }
        textMap()

</script>

3.filter 过滤元素，选择满足条件的元素，过滤掉不满足条件的元素 

代码如下（示例）：   

<script>

    //filter 过滤元素，选择满足条件的元素，过滤掉不满足条件的元素 

   var newArr=arr.filter(function(item){

      return 条件

   })


  //输出 [新元素1,新元素1,....]
</script>

4.find 遍历数组，查找到满足条件的第一个元素就返回

代码如下（示例）：  

<script>

    //find 遍历数组，查找到满足条件的第一个元素就返回

   var newArr=arr.find(function(item){

      return 条件

   })
</script>

5.every 遍历数组，判断数组所有元素是否满足条件，如果全部满足，就返回true，如果有一个不满足，返回false

代码如下（示例）：  

<script>

    //every 遍历数组，判断数组所有元素是否满足条件，如果全部满足，就返回true，如果有一个不满足，返回false

   var newArr=arr.every(function(item){

      return 条件

   })
</script>

6.some 遍历数组，判断数组所有元素是否满足条件，只要有一个元素满足条件就返回true

 代码如下（示例）：  

<script>

    //some 遍历数组，判断数组所有元素是否满足条件，只要有一个元素满足条件就返回true

   var newArr=arr.some(function(item){

      return 条件

   })
</script>

7.reduce 

reduce() 方法主要接收一个方法作为累加器，数组中的每个值(从左至右) 开始合并，最终为一个值。 

 代码如下（示例）：  

<script>
//  数组遍历reduce方法
             [98, 57, 78, 95, 89, 99]

            reduct(callFun, [initValue])

               callFun:  function(previousValue,currentValue,currentIndex,arr){
                              
                         }
            forEach(function(currentValue,currentindex,arr){

            })
            //previousValue 上一个值,如果initValue存在，第一遍历时previousValue就是initValue
                    // currentValue 当前数组元素
                    // currentIndex 当前数组下标
                    // arr 原数组
</script>

reduce 实例

<script>
 // reduce应用累加求和
            function test3(){
                //  [98, 57, 78, 95, 89, 99]
                // currentValue: 98: 57 , 78
                var sum = arr.reduce(function(previousValue,currentValue){ //previousValue: 0, 98 (98 + 57)
                    return previousValue + currentValue//previousValue: 0 + 98 + 57 +78
                },0)
                console.log('sum ',sum)
            }
            test3()


</script>

---

 四、冒泡排序

原理：相邻两个数两两比较，如果前一个数比后一个数大，就交换位置

第一轮结束后，最大的数在最后面，之后重复此步骤

n个数 比较n-1次

 [89,98,78,68,76]
            冒泡排序
              相邻两个数，两两比较，如果前面的数大于后面的数，交换位置, 第一轮比较完，最大数到最后面
              第二轮重复上述操作，找到第2大数
              三                     3
              四                     4
              n个数     n-1轮      比较次数
                5        1          4
                         2          3 
                         3          2
                         4          1
                 

冒泡排序实例 

 <script>
        // var arr=[89,78,64,56,91,54,95]

       
        var i
        var j
        var temp
        var arr=[89,78,64,56,95,54,91]
        var n=arr.length
        // 外层循环，冒泡的轮数
        
        for(i=0;i<n-1;i++){
        //内层循环，相邻两两比较，前面较大就交换
        for(j=0;j<n-i-1 ;j++){
            if(arr[j] > arr[j+1]){
                temp=arr[j]
                arr[j]=arr[j+1]
                arr[j+1]=temp

            }
        }
    }
        console.log(arr)
    </script>

---