JavaScript - 数组相关知识

这是我参与2022首次更文挑战的第6天，活动详情查看：2022首次更文挑战

数组：

1.数组的2种创建方式

• [ ]
• new Array(1,2,3,3)

2.封装：在JavaScript中，以下函数都封装好了，可以直接调用。但是我们仍然需要掌握这些函数封装的原理。

includes()：

判断数组中是否存在某个值（假设法，假设存在） includes的原生封装。

        //includes() :判断数组中是否存在某个值
        function includes(arr , a){
            //循环遍历数组
            for(var i = 0 ; i < arr.length ; i++){
                //如果存在，结束整个函数，返回true
                if(arr[i] == a){
                    return true ;
                }
            }
            return false ;
        }

        var res = includes([1,2,3,4,5]  , 4) ;
        console.log(res) ;

includes()用法：

var arr = [1,2,3,4,2,5] ;
        console.log(arr.includes(20));   //false
        console.log(arr.includes(1));    //true

indexOf():

判断数组中是否存在某个值，存在返回第一次出现的下标,不存在就返回-1 indexOf()的原生封装。

        function indexOf(arr,n){
            //循环整个数组
            for(var i = 0 ; i < arr.length ; i++){
                if(arr[i] == n) {
                    return i ;
                }
            }
            return -1 ;
        }

        var res = indexOf([1,2,3,4,5]  , 4) ;
        console.log(res) ;   // 3

indexOf()用法：第一次出现的下标,找不到就返回-1

var arr = [1,2,3,4,2,5] ;
        console.log(arr.indexOf(2));  // 1
        console.log(arr.indexOf(8));  // -1

lastIndexOf()：

判断数组中是否存在某个值，存在返回最后一次出现的下标，不存在返回 -1

        function lastIndexOf(arr , n){
            for(var i = arr.length - 1 ; i >= 0 ; i--){
                if(arr[i] == n){
                    return i ;
                }
            } 
            return -1 ;
        }

        var res = lastIndexOf([1,2,3,4,5,2]  , 2) ;
        console.log(res) ;   // 5

lastIndexOf()用法：

var arr = [1,2,3,4,2,5] ;
        console.log(arr.lastIndexOf(2));  // 4
        console.log(arr.lastIndexOf(8));  // -1

join()：

把数组变成字符串 1.有关join()的封装

        function join(arr){
            res = '' ;
            for(var i = 0 ; i < arr.length ; i++){
                i < arr.length - 1 ? res += arr[i] + ',' : res += arr[i] ;
            }
            return res ;
        }

        var res = join([1,2,3,4]) ;
        console.log(res) ;  // 1, 2, 3, 4 

2.join()的用法

var arr = [1,2,3,4] ;
console.log(arr.join('&')) ;  //1&2&3&4
console.log(arr.join('')) ;  //1234

push()：

通过遍历可以向数组尾部追加无数个数

var arr = [1, 2, 3];
        console.log(arr.push('hello')); 

arguments：把数组的长度变长 arr[arr.length] = arguments[i] pop()：删除数组中最后一个值 ,创建一个新的数组 .遍历原数组时丢掉最后一个 i < arr.length - 1

concat()：

拼接数组，返回一个新的数组 concat()的原生封装：

function concat(){
            var newArr = [] ;
            for(var i in arguments){
                var arr = arguments[i] ;
                for(var j in arr){
                    newArr.push(arr[j]) ;
                }
            }
            return newArr ;
        }

        var res = concat([1,2,3] , ['a','b','c']) ;
        console.log(res) ;

concat()的用法

var arr1 = [1,2,3,4] ;
var arr2 = [6,7,8] ;
var arr3 = arr1.concat(arr2) ;
console.log(arr3) ;

slice(i,i)：

截取数组中的部分值,返回一个新的数组，截取数组中的值 (包前不包后)

var arr = [1,2,3,4,5,6,7] ;
        var arr1 = arr.slice(2 , 3) ;
        console.log(arr1) ;   //3

splice

splice(i , 删除的个数 ， 新增的值...) 新增，删除，替换 --- 直接改变原数组

用法1：在任意位置插入数据

        arr.splice(i , 0 , v1 ,v2 , v3 ....)

用法2：删除

        arr.splice(i , 删除的个数)
        

用法3：替换

        var arr = [1,2,3,4,5,6] ;
        //插入数据
        arr.splice(2 , 0 ,'a' , 'b') ;
        console.log(arr) ;  //[1, 'b', 3, 4, 5, 6]

        //删除
        arr.splice(1 , 2) ;
        console.log(arr) ;  //[1, 'b', 3, 4, 5, 6]

        //替换
        arr.splice(1 , 1 ,'hello') ;
        console.log(arr) ;  //[1, 'hello', 3, 4, 5, 6]

判断数组

• 基本数据类型：number string boolean null undefined
• 基本数据类型可以通过 typeof 来判断
• 引用数据类型：function 数组 对象
• 用 Array.isArray() 判断是不是数组

var arr = [1, 2, 3] ;
console.log(typeof arr) ;   //object 不能判断
console.log(Array.isArray(arr)) ;  //true  证明是数组

数组去重

数组去重的两种方法： 1.得到新的数组

        var arr = [1,2,3,42,1,3,2,2,1,3,5] ;
        var newArr = [] ;
        // 遍历原数组
        for(var i in arr) {
            // 判断原数组中每一个值是否在新数组中存在
            // if(newArr.indexOf(arr[i]) === -1)
            // if(!newArr.includes(arr[i])) {
            //     newArr.push(arr[i])
            // }

            // 自己把includes方法写了一遍
            var flag = false ;  
            for(var j in newArr) {
                if(newArr[j] === arr[i]) {
                    flag = true ;
                    break ;
                }
            }
            if(!flag) {
                newArr.push(arr[i])   
            }

        }

        console.log(newArr);  //[1, 2, 3, 42, 5]

2.直接改变原数组。原理是出现重复的就删掉

        //   拿第一个值出来跟后面所有的值作比较
        var arr = [1,2,3,42,1,3,2,2,1,3,5] ;
        
        // 比较的轮数
        for(var i = 0 ; i < arr.length - 1 ; i++) {
            // 拿第i个数与后面所有的数进行比较
            for(var j = i + 1 ; j < arr.length ; j++) {
                // 只要相同就删除
                if(arr[i] === arr[j]) {
                    // 没删除一个的时候，数组塌陷!!!!!!!!!!
                    arr.splice(j , 1);
                    j--;
                }
            }
        }

        console.log(arr);  //[1, 2, 3, 42, 5]

统计数组中每一个值出现的次数

方法一：统计每一个值出现的次数

        function sta(arr){
            //比较的轮数
            for(var i = 0 ; i < arr.length ; i++){
                var count = 0 ;
                //拿每一个值与所有的值比较
                for(var j = 0 ; j < arr.length ; j++){
                    if(arr[i] === arr[j]){
                        count++ ;
                    }
                }
                console.log(arr[i] + '出现了' + count + '次');
            }
            return count ;
        }
        sta([1,2,3,42,1,3,2,2,1,3,5]) ;

方法二：先去除重复再统计

// 方法1：先去重再统计
        var arr = [1,2,3,42,1,3,2,2,1,3,5] ;
        var arr2 = [] ;
        for(var i = 0 ; i < arr.length ; i++) {
            if(!arr2.includes(arr[i])) {
                arr2.push(arr[i])
            }
        } 
        console.log(arr2);


        // 拿新数组中的每一个值与原数组进行比较
        for(var i = 0 ; i < arr2.length ; i++) {
            var count = 0 ; 
            for(var j = 0 ; j < arr.length ; j++) {
                if(arr2[i] === arr[j]) {
                    count++
                }
            }
            console.log(arr2[i] + '出现了' + count + '次');
        }

方法三：一边删除一边统计

        for(var i = 0 ; i < arr.length ; i++) {
            // 拿第一个值与后面的值进行比较
            var count = 1 ;
            for(var j = i + 1 ; j < arr.length ; j++) {
                if(arr[i] === arr[j]) {
                    count++ ;
                    arr.splice(j , 1) ;
                    j-- ;
                }
            }
            console.log(arr[i] + '出现了' + count + '次');
        }
        console.log(arr);

方法四：先排序，再统计

//假设数组已经排好序了
var arr = [1,1,1,1,2,2,2,3,4,4];
        
        for(var i = 0 ; i < arr.length ;  ) {
            var count = 1 ;
            for(var j = i + 1 ; j < arr.length ; j++) {
                if(arr[i] === arr[j]) {
                    count++ ;
                }
                else {
                    // 只要不相等说明后面没有相同 的了
                    break ;
                }
            }
            console.log(arr[i] + '出现了' + count + '次');
            i += count
        }

sort 排序

sort() 方法用于对数组的元素进行排序,并返回数组。默认排序顺序是根据字符串ASCII码 ----- 升序

        var arr = [3,5,2,6,1];
        var res = arr.sort() ;
        console.log(res);   //[1, 2, 3, 5, 6]

使用 sort() 方法时，应该注意下面几个问题。

1. 所谓的字母顺序，实际上是根据字母在字符编码表中的顺序进行排列的，每个字符在字符表中都有一个唯一的编号。

2. 如果元素不是字符串，则 sort() 方法试图把数组元素都转换成字符串，以便进行比较。

3. sort() 方法将根据元素值进行逐位比较，而不是根据字符串的个数进行排序。

var arr = [3,5,21,6,1];
        var res = arr.sort() ;
        console.log(res);   //[1, 21, 3, 5, 6]

注意：sort() 方法是在原数组基础上进行排序操作的，不会创建新的数组。

*如果想按照其他规则进行排序，就需要提供比较函数，该函数要比较两个值，然后返回一个用于说明这两个值的相对顺序的数字。比较函数应该具有两个参数 a 和 b，其返回值如下：

• 若 a 小于 b，在排序后的数组中 a 应该出现在 b 之前，则返回一个小于 0 的值。
• 若 a 等于b，则返回 0。
• 若 a 大于 b，则返回一个大于 0 的值。

也就是说：比较函数两个参数a和b，返回a-b 升序，返回b-a 降序

sort(function(a,b){return a - b}) 升序 sort(function(a,b){return b - a}) 降序

var arr = [3,5,21,6,1];
        
        var res = arr.sort(function (a , b) { 
            //降序排列 
            return a - b
        })

        console.log(res);  //[1, 3, 5, 6, 21]

callback:回调函数

含义：被当作参数使用的函数叫回调函数

        function xunHuan(n , fn){
            for(var i = 0 ; i < n ; i++){
                fn()
            }
        }

        xunHuan(5 , function(){
            document.write(1 + '<br>') ;
        })

输出结果：

数组的迭代方法：

1.sort() ASCII升序（上文已经讲解，不再过多赘述，举个简单的例子吧~

        var arr = [5,3,22,1,7] ; 
        var res = arr.sort(function (a , b){
            //降序排列
            return b - a ;
        })
        console.log(res) ;   //[22, 7, 5, 3, 1]

2.forEach(function(v , i , arr){}) ：遍历数组，其中 v 表示值，i 表示角标 ,arr表述数组。 3.map(function(v,i,arr){}) ：改变数组中的值，返回一个新的数组 必须return 4.filter(function(v,i,arr){}) ： 过滤器，找到满足条件的值，返回一个新的数组 5.every(function(v,i){}) ：判断数组中是不是每一个值都满足条件 6.some(function(v,i){}) ：判断数组中有没有满足条件的值

训练：利用遍历数组的方法求和

        var arr = [1,2,3,4,5,6,7] ;
        var sum = 0 ;
        //遍历数组
        arr.forEach(function (v , i , arr){
            //累加求和
            sum += v ;
        })
        console.log(sum) ;  //8

function forEach(arr , cb){
            for(var i = 0 ; i < arr.length ; i++){
                cb(arr[i] , i)
            }
        }

        forEach([1,2,3] , function(v , i){
            console.log(v) ;  // 1 2 3  值
            console.log(i) ;  // 0 1 2  角标
        })

训练：把数组中的每个值加1

var arr = [1 , 2 , 3] ;
        function countArr(arr , cb){
            for(var i = 0 ; i < arr.length ; i++){
                arr[i] += cb(arr[i])
            }
            console.log(arr) ;
        }

        countArr([2,3,4] , function(v){
            return v * 3 ;    
        })

最后：总结一个return的知识，return只对当前的 if 和函数管用。对上一层的循环是没用的。请看下面的例子 此时：return 不起作用，也没有任何意义。还是会输出数组的值

var arr = [5,3,22,1,7] ; 
        //遍历数组
        arr.forEach(function(v , i){
            //控制台打印数组的值
            console.log(v);   // 5 3 22 1 7
            if(i == 2){
                // break ;   // 报错
                return ;  //没有任何意义  还是会输出5 3 22 1 7
            }
        })