数组基本操作案例(面试手写题)

冒泡排序:

通过一种排序算法,将一个乱序的数组,调整为指定顺序的数组.冒泡排序属于数组排序的算法之一;

冒泡排序:
<script>
    var arr1 =[7,4,2,8,5,1,9,40,99,10,3,6]
    //         0 1 2 3 4 5 6  7  8 9 10 11
       console.log("原始数组:",arr1);
       
        for(var k=0;k<arr1.length-1;k++){
         for(var i =0; i<arr1.length-1-k;i++){
          if(arr1[i]>arr1[i+1]){
            var temp = arr1[i]
            arr1[i] = arr1[i+1]
            arr1[i+1] = temp
        }
       }
      }
       console.log("冒泡排序后的数组:",arr1);
</script>

选择排序:

选择排序:
<script>
   var arr1 =[7,4,2,8,5,1,9,40,999,10,3,6]
   //         0 1 2 3 4 5 6  7  8  9 10 11
       console.log("原始数组:",arr1);
       
    for(var k=0; k <arr1.length; k++){
        var minIndex = k
        for(var i =k+1; i < arr1.length; i++){
          if(arr1[minIndex]>arr1[i]){
           minIndex = i
       }
    }
       var temp = arr1[k] 
       arr1[k] = arr1[minIndex] 
       arr1[minIndex] = temp 
       }
        console.log("选择排序后的数组:",arr1);
</script>

数据类型之间(基本数据类型和引用数据类型)的区别:

存储的区别:

堆栈空间介绍:

栈(操作系统):由操作系统自动分配释放存放函数的参数值,局部变量的值等.其操作方法类似于数据结构中的栈;
堆(操作系统):存储复杂类型(对象),一般由程序员分配释放,若程序员不释放,由垃圾回收机制回收

基本数据类型与引用数据类型:

基本数据类型存储在栈内存中;比如: String Number Undefined Null Boolean
引用数据类型的存储是先将数据本体存放在堆内存中,再将指向该内存的地址存放在数组名或者对象名或者函数名中,最后将数组/函数/对象名存放在栈内存中;

面试题:
面试官: 数据类型之间有什么区别?
答案: 基本数据类型分为:string number undefined null boolean;它们存储的地方是: 栈内存中;
     引用数据类型分为: 函数 对象和数组;他们的数据本体存放的地方是: 堆内存中;
                                         然后变量名存储的位置是 栈内存中;

赋值的区别:

基本数据类型赋值:
<script>
       var num1 = 100
       var num2 = num1 //num2 = 100
       num2 = 666
       console.log(num1);//100
       console.log(num2);//666
</script>

复杂数据类型存储:
<script>
    var obj1 ={
        name:"QF001",
        age:18
    }
    var obj2 = obj1
//  console.log(obj2);//{ name:"QF001",age:18}
   obj2.name ="付国丽"
   console.log(obj2);//{name: "付国丽", age: 18}
   console.log(obj1);//{name: "付国丽", age: 18}
</script>

比较的区别:

基本数据类型: 对比的是值;
复杂数据类型:对比的是地址;地址相同返回ture;地址不同返回false;

简单数据类型对比:
<script>
  var num1 = 100
  var num2 = 200
  console.log(num1 === num2); //faLes
  
  var num1 = 100
  var num2 = "100"
  console.log(num1 === num2); //faLes
  
  
  var arr1 =[1,2,3]
  var arr2 = arr1
  console.log(arr1 === arr2);//true
</script>

复杂数据类型的对比:
<script>
   var obj1 ={
        name:"QF001",
        age:18
    }
    var obj2 ={
        name:"QF001",
        age:18
    }
    obj2.name ="果粒"
    console.log(obj1.name);//"QF001"
    console.log(obj1===obj2);//false
</script>

传参的区别:

基本数据类型:将值拷贝一份传递给形参,在函数内修改不会影响外界

基本数据类型传参:
<script>
  function fn(num){
        num = "QF001"
    }
    var str = "abc" //将str = "abc" 拷贝一份传递给fn(num),在函数内部修改不影响外界
    fn(str)
    // console.log(str);//"abc"
</script>

复杂数据类型:将存储地址赋值给形参,在函数内修改会影响外界

复杂数据类型传参:
<script>
  function fn1(o){
        o.name = "fgl"//3-->在函数内部修改会影响外界
    }
    var obj = {       //1-->它是一个对象,所以是复杂数据类型,
        name :" A B C"//2-->将存储的这个地址赋值给上边的形参,
    }
    fn1(obj)
    console.log(obj.name);//fgl
</script>

数组常用方法 (面试必问100%)

1. push方法:

语法:数组.push(数据)
作用:向数组末尾添加数据
返回值:追加数据后,数组最新的长度(length)

push方法:
<script>
 var arr = [1, 2, 3]
 console.log('原始数组: ', arr)
 
        var len = arr.push(500)
        console.log(len)    // 4
        console.log(arr)    // [1, 2, 3, 500]
</script>

1. pop方法:

语法:数组.pop()
作用:删除数组最后一条数据
返回值:被删除的数据

pop方法:
<script>
 var arr = [1, 2, 3]
 console.log('原始数组: ', arr)
 
        var po = arr.pop()
        console.log(po)     // 3
        console.log(arr)    // [1, 2]

</script>

1. unshift方法:

语法:数组.unshift(数据)
作用:向数组开头添加数据
返回值:添加数据后,数组最新得长度(length)

unshift方法:
<script>
 var arr = [1, 2, 3]
 console.log('原始数组: ', arr)
 
        var len = arr.unshift(666)
        console.log(len)    // 4
        console.log(arr)    // [666, 1, 2, 3]
</script>

1. shift方法:

语法:数组.shift()
作用:删除数组第一条数据,一次只能删除一个数据;不能删除多个数据
返回值:被删除的数据

shift方法:
<script>
 var arr = [1, 2, 3]
 console.log('原始数组: ', arr)
 
        var st = arr.shift()
        console.log(st)     // 1
        console.log(arr)    // [2, 3]
</script>

1. reverse方法:

语法:数组.reverse()
作用:反转数组
返回值:反转后的数组

reverse方法:
<script>
 var arr = [1, 2, 3]
 console.log('原始数组: ', arr)
 
        var newArr = arr.reverse()
        console.log('newArr: ', newArr)//[3,2,1]
        console.log('arr: ', arr)//[3,2,1]

</script>

1. sort方法:[本质上是按照字符 ASSIC 码表顺序排列对数组进行排序]

语法1:数组.sort()
作用1:会将数组转换为字符串后,一位一位的对比;它一般不会对字符串和数字混合存储的数组排序
语法2:数组.sort(function(a,b){return a - b})
作用2:会按照数字进行升序排列
语法3:数组.sort(function(a,b){return b - a})
作用3:会按照数字进行降序排列
返回值:排序后的数组

sort方法:
<script>
var arr = [100, 101, 200, 10, '999', 'qwe', '123abc']
console.log('原始数组: ', arr)

        var newArr = arr.sort()//出现频率较高的是 英文人名会按照首字符排序
        console.log("newArr:",newArr);
        
        var newArr = arr.sort(function (参数1, 参数2) {return 参数1 - 餐数2})
        console.log('newArr', newArr)
        console.log('arr', arr)
        
        var newArr = arr.sort(function (参数1, 参数2) {return 参数2 - 餐数1})
        console.log('newArr', newArr)
        console.log('arr', arr)

</script>

1. splice方法:

语法1:数组.splice(开始索引,多少个)
作用1:截取数据部分内容
语法2:数组.splice(开始索引,索引多少个,插入新数组1,插入新数组2,插入新数组3...)
作用2:截取数组部分内容,并插入新数组
截取出来的部分内容组成的数组

splice方法:
<script>
 var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9]
 //         0  1  2  3  4  5  6  7  8
        console.log('原始数组: ', arr)
        
        var newArr = arr.splice(3, 4)   // 从下标3 开始截取, 截取 4 个成员/数据
        console.log('截取后的数组newArr', newArr)   // [4, 5, 6, 7]
        console.log('原本的数组arr', arr)         // [1, 2, 3, 8, 9]
        
        var newArr = arr.splice(2, 3, '数据1', '数据2', '数据3', '数据4', '数据5')  // 不管插入多少个数据, 都是从下标2开始的
        console.log('newArr', newArr)
        console.log('arr', arr)
        
</script>
数组的方法中能够改变原数组的就只有上边这 7 个

1. slice方法:

语法:数组.slice(开始索引,结束索引)
参数特点1: +包前不包后:包含开始索引位置的数据,不包含结束索引位置的数据;
参数特点2: +不写开始索引,默认是0; 不写结束索引,默认是数组的length;
参数特点3: +参数支持写负数,表示倒数第几个,其实就是 length+(负数)
作用:截取数组部分内容
返回值:截取出来的部分内容组成的新数组

slice方法:
<script>
var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9]
//         0  1  2  3  4  5  6  7  8
        console.log('原始数组: ', arr)
        
        var newArr = arr.slice(3, 4)    // 从下标3 开始截取, 截取到 下标4
        console.log('newArr', newArr)   // 包前不包后:[4]
        console.log('arr', arr)
        
        var newArr = arr.slice(5)   // 不写结束索引, 相当于 写了数组.length, 所以这里相当于写了 slice(5, arr.length) ->slice(5, 9)
        console.log(newArr) // [6, 7, 8, 9]
        
        var newArr = arr.slice(3, -2) //slice 这个方法允许写负数,写负数的时候 就相当于写了 length + (负数)
        console.log(newArr) // [4, 5, 6, 7]
</script>

面试题:数组中有两个方法, splice 与 slice, 你能描述一下他们两个的区别吗?

参数含义不同, 然后介绍一下参数哪里不同
splice 会改变原数组, 而 slice 不会改变

9.concat方法:

语法:原始数组.concat(数组1,数组2,..., 数组1,数组2,...)
作用:进行数据拼接,把数组...数组之类的小括号里的1内容,拼接在原始数组中
返回值:拼接好的新数组

concat方法:
<script>
var arr = [1,  2, 3, ]
//         0   1  2  
        console.log('原始数组: ', arr)
        
       var newArr = arr.concat([4, 5, 6], [10, 20], ['a', 'b', 'c'], 'qwe')
        console.log('newArr', newArr)   // [1, 2, 3, 4, 5, 6, 10, 20, 'a', 'b', 'c', 'qwe']
</script>

10.join方法:

语法:数组.join("连接符")
作用:使用"连接符",把数组内的每一个数据连接成一个字符串(不写连接符,会默认使用逗号)
返回值:连接好的新字符串

join方法:
<script>
var arr = [1, 2, 3, 4]
//         0  1  2  3  
        console.log('原始数组: ', arr)
        
        var newArr = arr.join() // 不传递连接符, 默认使用的是 逗号连接
        var newArr = arr.join('!')  // 使用 ! 将数组内的所有数据拼接成一个 字符串
        console.log(newArr) //"1!2!3!4"
</script>

11.indexOf方法:

语法1:数组.indexOf(要检查的数据)
作用1:从左往右检查该数据第一次在该数组内出现的索引;
语法2:数组.indexOf(要检查的数据,开始索引) //开始索引不写的时候,默认是 0;
作用2:在开始索引的位置,按照从左往右的顺序,检查该数据第一次在该数组内出现的索引
返回值:找到数据的情况下,会将该数据第一次出现的下标返回;没有找到的情况下,会直接返回一个 -1;

indexOf方法:
<script>
var arr = [1, 1, 2, 2, 3, 3, 0, 4, 0]
//         0  1  2  3  4  5  6  7  8
        console.log('原始数组: ', arr)
        
        var num = arr.indexOf(100) // 此时要检查的数据是 数字100, 但是数组中并没有出现过 数字 100, 所以返回值应该是 -1
        var num = arr.indexOf(0) // 此时要检查的数据是 数字0, 数字0按照从左到右的顺序, 第一次出现的下标为 6, 所以返回值应该是 6
        var num = arr.indexOf(1) // 此时要检查的数据是 数字1, 数字1按照从左到右的顺序, 第一次出现的下标为 0, 所以返回值应该是 0
        
        var num = arr.indexOf(1, 3) // 此时要检查的数据是 数字1, 但是是从下标3的位置开始按照从左往右的顺序查找, 因为后续并没有数字1, 所以此处应该返回 -1
        console.log(num)

        
</script>

12.lastIndexOf方法:

语法1:数组.lastIndexOF(要检查的数组)
作用1:从后往前(从右往左),检查该数据第一次在该数组内出现的索引;
语法2:数组.lastIndexOf(要检查的数据,开始索引)
作用2:在开始索引的位置,从右往左的顺序,检查该数据第一次在该数组内出现的索引;
返回值:在找到该数据的情况下,返回该数据所对应得下标,如果没有找到的情况下,直接返回 -1;

lastIndexOf方法:
<script>
  var arr = [1, 1, 2, 2, 3, 3, 0, 4, 0]
  //         0  1  2  3  4  5  6  7  8
        console.log('原始数组: ', arr)
        
         var num = arr.lastIndexOf(3)   // 此时按照从右向左的顺序查找, 发现第一次出现的位置是 下标 5 的位置
        var num = arr.lastIndexOf(3, 2) // 此时在下标2的位置按照从右向左的顺序查找, 但是此时在数组中后续的位置并没有出现数字3, 所以按照规则, 应该返回 -1
        console.log(num)  
</script>

写给 Javascript 初级学者的第 4 份笔记持续更新中~~~

数组基本操作案例(面试手写题)

冒泡排序:

选择排序:

数据类型之间(基本数据类型和引用数据类型)的区别:

存储的区别:

赋值的区别:

比较的区别:

传参的区别:

数组常用方法 (面试必问100%)