JavaScript数据类型之间存储的区别，数组常用的方法、数组遍历的方法、数组的排序（冒泡排序）

本文链接：https://blog.youkuaiyun.com/qq_56756602/article/details/126460020

一.数据类型之间存储的区别

1.基本数据类型都存储在栈区域

var obj={

name:"jack"

age:18

}

2.var obj引用变量存储在栈区域

对象放在堆区域

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

<script>
        // 字面量方式创建对象obj
        var obj={
            name:"jack",
            age:18,
        }
        var obj1=obj
        obj.age=20
        console.log("obj.age",obj.age)

        var arr=[12,20,30]
        var arr1=arr
        arr1[1]=200
        console.log("arr[1]",arr[1])



    </script>

 <script>
        var obj ={
            name:"jack",
            age:18
        }
        function fun(obj1){
            obj1.age=20
            console.log("fun age",obj1.age)
        }
        fun(obj)
        console.log("age",obj.age)

        // =============
        var m=100
        function fun1(m){  
            m=200        
            console.log("fun1 m",m) //局部作用域，只在函数体中

        }
        fun1(m)
        console.log("m",m);//调用全局作用域



    </script>

二、数组常用的方法

object对象

数组对象

属性和方法

var arr=[10,20,30]

var.length 属性

方法

1.push

=>arr.push(40) //push 方法将40添加至数组arr中

2.pop

=> arr.pop() //删除数组后面的元素

3.unshift

=>arr.unshift() //数组前面添加元素

4.shift

=>arr.shift() //删除数组最前面的一个元素

5.splice(下标，元素个数)

=>arr.splice(1，2)

6.reverse()

=>反转数组元素 [1,2,3]->[3,2,1]

<script>
        var arr = [10, 20, 30]
        console.log(arr)

        arr.push(40)
        arr.push(50)
        console.log(arr)

        arr.pop()//从后面往前删除
        // arr.pop()
        // arr.pop()
        // console.log(arr)

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

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

        arr.splice(1, 2)//永远有数组的第一个，2代表从后面往前数两个不包含最后一个  1代表从后面往前数从倒数第几个开始截取
        console.log(arr)

        arr.splice(1, 1, 50)//将截取信息中间的数更换成50
        console.log(arr)

        var arr1 = [3, 2, 1]
        arr.reverse()
        console.log(arr1)

        arr1.sort()
        console.log(arr1)

        console.log("==============")

        var arr2 = [12, 30, 11, 47, 100]  //默认按字符unicode编码排序
        arr2.sort()
        console.log(arr2)

        console.log("==================")
        var arr3 = [12, 30, 11, 47, 100]

        // 排序函数，改变之前利用Unicode码进行比较的方法
        var fun = function (a, b) {  //对数组中的数进行两两比较
            if (a < b) { //返回负数  升序排列
                return -1
            }
            if (a > b) {
                return 1
            }
            if (a == b) {
                return 0
            }


        }
        arr3.sort(fun)
        console.log(arr3)

        console.log("==================")
        var arr4 = [1, 2, 3]
        var arr6 = arr4.concat([4, 5, 6])
        console.log(arr6)

        console.log("==================")
        var arr7 = [1, 5, 7]
        var str = arr7.join("&")//定义每一项之间链接的内容 join(要以什么内容链接)
        console.log("str", str)

        console.log("==================")
        var arr = ["html", "css", "javascript", "lucy", "jack"]
        //          0     1       2           3    4
        //           -4      -3         -2      -1

        var newArr = arr.slice(1, 3)
        var newArr = arr.slice(-4, 2)
        console.log(newArr)


        console.log("==================")
        var arr = [10, 20, 30, 40, 50]
        var index = arr.indexOf(40)//数组元素40的索引
        console.log("index", index);//如果元素不存在返回-1

        // 判断数组是否有某个元素
        console.log(arr.includes(20));

        if (arr.indexOf(300) == -1) {
            console.log("30不存在数组中");
        }else{
            console.log("30在数组中");
        }
/*
输出结果：
(3) [10, 20, 30]
(5) [10, 20, 30, 40, 50]
(5) [9, 10, 20, 30, 40]
(3) [9, 30, 40]
(3) [9, 50, 40]
(3) [3, 2, 1]
(3) [1, 2, 3]

(5) [100, 11, 12, 30, 47]

(5) [11, 12, 30, 47, 100]

(6) [1, 2, 3, 4, 5, 6]

str 1&5&7
 
 ['css']
 
 index 3
 true
 30不存在数组中


*/

练习：

1.创建一个学生成绩数组 [98,78,86,59,94]

2.向数组中追加一个成绩100分

3. 删除第1个不及格的成绩

提示: 1. 删除数组元素，使用splice(索引号,1)

2. 遍历数组,查找不及格元素索引号

4. 数组成绩由低到高排序输出

<script> 
var arr=[98,78,86,59,94]
       arr.push(100)
       console.log(arr)
       for (var i=0;i<=arr.length;i++){
        if(arr[i]<60)
        arr.splice(i,1)//使用splice(索引号,1) 
       }console.log(arr)

       var score=function(a,b){
        if(a<b){
            return -1
        }
        if(a>b){
            return 1
        }
        if(a==b){
            return 0
        }
       }
        arr.sort(score)
        console.log(arr)
     

    </script>

三、数组遍历常用的方法

forEach

function(){

}

arr.forEach(function(index,item){

//第一个形参：item 数组元素

//第二个形参：index 索引号（下标）

})

map

arr.map(function(item,index){

return 新元素

})

[新元素1，新元素2.....]

filter

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

return 条件

})

find

查找第一个满足条件的元素

every

遍历数组查找数组元素是否全部满足条件，全部满足返回真

some

    <script>
        var arr = [98, 67, 78, 95, 87]
        function testForEach() {
            // for (var i=0;i<arr.length;i++){
            //     console.log(arr[i])
            // }
            // 循环遍历数组
            arr.forEach(function (item, index) {//item:98,67,78,95,87
                console.log("index:", index, "item:", item)
            })

            // 练习：查找数组最大值

            var max = 0
            arr.forEach(function (item, index) {//item:98,67,78,95,87
                if (item > max) {
                    max = item
                }
            })
            console.log("最大值是", max)
        }
        // testForEach()

        function testMap() {
            var newArr = []
            for (var i = 0; i < arr.length; i++) {
                newArr.push(arr[i] - 10)
            } console.log(newArr);

        } 
        // testMap()

        /*
            1.遍历数组
            2.映射新数组  是return的返回值
        
        */

        function testMap1() {
            var newArr = arr.map(function (item) {
                console.log(item)
                return item - 10
            })
            console.log(newArr)
        } 
        // testMap()

        // 查找大于70的成绩

        function testFilter() {
            var newArr = arr.filter(function (item) {
                return item > 70
            })
            console.log(newArr)

        } 
        // testFilter()
    function testFind(){
      var newArr=  arr.find(function(item){
            return item<80
        })
        console.log(newArr)
       
    }
    // testFind()
      
    /*
    判断是否所有学生成绩都及格
    
    */ 
   function testEvery(){
    var isOk=arr.every(function(item){
        return item>60  //判断遍历数组，查找是否都满足条件
    })
    console.log("isOk",isOk)
   }
   testEvery()   //返回值为flase或true

   function testSome(){
    var isOk=arr.some(function(item){
        return item<60
    })
    
    console.log("isOk",isOk)
   }
   testSome() //返回值为flase或true
    </script>

数组遍历reduce方法

reduce(callFun,[initValue])

callFun:function(previousValue,currentValue,currentIndex,arr){

previousValue 上一个值,如果initValue存在，第一遍历时previousValue就是initValue

currentValue 当前数组元素

currentIndex 当前数组下标

arr 原数组

}

<script>
         var arr = [98, 67, 78, 95, 87]
         function test1(){

        
         arr.reduce(function(previousValue,currentValue,currentIndex,arr){

           
            console.log(" previousValue", previousValue,"currentValue",currentValue,"currentIndex",currentIndex);
            // return 100   previousValue通过计算返回一个值 
         
        },0)
    }
    // text1()

    function test2(){
        function test2(){
                arr.reduce(function(previousValue,currentValue,currentIndex,arr){
                   
                  
                    console.log('previousValue',previousValue, ' currentValue :',currentValue, ' currentIndex :',currentIndex);
                    return 10
                })
            }

    }
    // text2()

// 应用累加求和
function test3(){
   var sum= arr.reduce(function(previousValue,currentIndex){
        return previousValue+currentIndex
    },0)
    console.log("sum",sum)
}
test3()
function test4(){
    var sum=0
    for(var i=0;i<arr.length;i++){
        var item=arr[i]
        sum=sum+item
    }
    console.log("sum>>",sum)
}
test4()



    </script>

四、冒泡排序

冒泡排序

相邻两个数,两两比较,如果前面的数比后面的数大,交换位置,第一轮比较完,最大数放到最后面

第二轮重复上述操作,找到第二大的数

n个数 n-1轮 i(冒泡次数）比较次数

5 1 0 4

2 1 3

3 2 2

4 3 1

n n-1 n-i-1

<script>
var arr = [89, 98, 78, 68, 76]
        //外层循环，冒泡排序的轮数  n个数进行n-1轮冒泡排序
        for (var j = 0; j < arr.length - 1; j++) {

            //内层循环，两两比较交换位置
            for (var i = 0; i < arr.length - 1 - j; i++) {//i<4  0 1 2 3
                console.log("比较次数")
                // 相邻两个数，两两比较
                if (arr[i] > arr[i + 1]) {
                    // 交换位置
                    var temp = arr[i]
                    arr[i] = arr[i + 1]
                    arr[i + 1] = temp
                }
            }
            console.log(arr)

        }

    </script>