week2.1数组上——每天一个JS小总结

最新推荐文章于 2022-07-31 15:36:07 发布

婷小医仙

最新推荐文章于 2022-07-31 15:36:07 发布

阅读量130

点赞数

分类专栏：前端开发 javascript 文章标签： javascript

本文链接：https://blog.csdn.net/qq_44828153/article/details/107688016

版权

前端开发同时被 2 个专栏收录

12 篇文章 0 订阅

订阅专栏

javascript

12 篇文章 0 订阅

订阅专栏

week2.1数组

数组的定义

数组就是在内存中开辟出一块连续的空间。

数组也是一个变量，可以存储一连串的变量/值。

数组的大小可以动态的调整，并且没有长度的限制。

数组可以存储任意类型的数据。

数组的创建

构造函数式创建：var arr = new Array()

字面量创建：var arr = [ ]

区别：

var arr = [8,4,"hello",false ]可以直接写

var arr = [10];代表第一个数为10

var arr = new Array（10）；代表长度为10

数组的索引

对数组中的元素进行编号，从0开始，我们可以通过对数组索引来访问数组中的元素。

  // 创建数组
    var arr = [];    
    // 为数组元素赋值， arr[索引]
    arr[0] = 12;
    arr[1] = 12.5;
// 获取数组元素的值
    console.log(arr[0]);// 12
    console.log(arr[1]);// 12.5

数组的遍历

所谓遍历，是指沿着某条搜索路线(索引)，依次对集合(数组)中每个结点(数组元素)均做一次且仅做一次访问。

所以数组的遍历就是对数组中每一个元素按照索引规律进行一次访问操作。

var arr = [12,'hello',true,20,null,'jack'];
    // 挨个访问
    arr[0];
    arr[1];
    arr[2];

利用数组的length属性我们进行循环遍历操作。

     var arr = [12,'hello',true,20,null,'jack'];
    // i=0，正好契合数组的最小索引
    // i<arr.length，所以i能够取得的最大值为：arr.length-1，正好契合数组的最大索引
    for( var i=0;i<arr.length;i++ ){
        console.log(arr[i]);// arr[0], arr[1], arr[2]...
    }

for...in

专门用来遍历数组的循环,index是字符串类型

  var arr = [12,'hello',true,20,null,'jack'];
    // 变量item就是数组的索引号
    for( var item in arr ){
        console.log(item);
        console.log(arr[item]);
    }

数组的方法

添加

push()：入栈，向数组末尾添加一个或多个元素返回数组的长度

返回数组的长度

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

    // 往数组末尾添加数据(元素)    
    // push():返回值，数组新的长度
    var newLength1 = arr.push(1909,"3月06");
    console.log( arr,newLength1 );

    // 往数组开头添加元素
    // unshift()：返回值，数组新的长度
    var newLength2 = arr.unshift("哈哈，杠精",10);
    console.log( arr,newLength2 );

删除

pop()：出栈，删除并返回数组的最后一个元素

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

    // 从数组末尾删除元素
    // pop():返回值：被删除的元素
    var ele1 = arr.pop();
    console.log( arr,ele1 );

    // 从数组开头删除元素
    // shift():返回值：被删除的元素
    var ele2 = arr.shift();
    console.log( arr,ele2 );

排序和反转

sort()：默认按字符编码的顺序排列，非string类型会自动转换为string，可自定义比较规则

reverse()：对数组元素进行反转操作

  var arr1 = [9,19,29,39,4];
    arr1.sort(function(n1,n2){
        return n2-n1;//降序
    });
    console.log( arr1 );//[39, 29, 19, 9, 4]
    arr1.sort();//sort()方法默认按字母排序
    console.log( arr1 )//[19, 29, 39, 4, 9]    var arr1 = [9,19,29,39,4];
    arr1.reverse();//反转
    console.log( arr1 );// [4, 39, 29, 19, 9]

拼接

join()：将数组拼接为字符串，对原数组没有影响

concat()：将多个数组拼接成一个数组，对原数组没有影响

    // join()：将数组转换为字符串
    var str1 = arr1.join("|");
    console.log( arr1 );
    console.log( str1 );//true|hello|world||10|20

    // concat()：将多个数组合并成一个数组，对原数组没有影响   
    var arr2 = ['haha','晚上7.10分考试',1909];
    var arr3 = ['再次重申','考试不许作弊','泰拳警告'];
    var arr4 = arr1.concat( arr2,arr3 );
    console.log( arr4 );

选取和截取

slice() ：从某个已有的数组返回选定的元素

slice[start,end)

splice(index,删几个，加哪些)：向/从数组中删除项目，然后返回被删除的项目，也可以用作替换操作

    //选取和截取
    // slice(start,end) ：从某个已有的数组返回选定的元素
    // start,end 都是索引值
    var arr1 = ["11月5号",2019,11,5,"QF-1909"];
    var a1 = arr1.slice( 1,4 );
    console.log( a1 );//[2019, 11, 5]
    // 复制arr1数组
    var a2 = arr1.slice(2);
    console.log( a2 );//[11, 5, "QF-1909"]


    // splice()：向/从数组中删除项目，然后返回被删除的项目，也可以用作替换操作
    // 参数1：index：开始删除的索引]
    // 参数2：howmany：删除几个
    // 参数3/4/5...：从第三个参数开始为补充给数组的元素
    var a3 = arr1.splice(1,3,2018,"NJ-QF-1909",1,"hello",true,null);
    console.log( arr1 );// ctrl + shift + d
    console.log( a3 );
    var arr=[1,2,3]
    console.log(arr.push(4,5,6));

转换

toString()：将数组转换为字符串

valueOf()：返回数组对象本身，一般会自动调用

valueOf和toSring两个函数是除null和undefined两种数据类型以外其他五种数据类型（number/string/bool/object/symbol）原型链上共有的函数

遍历

/*
    forEach():遍历数组的函数,ES5中提供
        参数：传入一个实参，是一个回调函数
        回调函数中的参数:
        形参： 
            item：每一个数组元素
            index:每一个元素的索引
            array：调用的数组本身
    */ 
    var arr1 = ["11月5号",2019,11,5,"QF-1909",true,null];
    arr1.forEach(function(item,index,array){
        console.log( item,index,array );//遍历每一个元素，索引，数组本身
    });

查找

indexOf()：返回在数组中可以找到一个给定元素的第一个索引，如果不存在，则返回-1。

includes(): 用来判断一个数组是否包含一个指定的值，根据情况，如果包含则返回 true，否则返回false。

indexOf(字符串,index):返回某个指定的字符串值在字符串中首次出现的位置

    // indexOf()：返回在数组中可以找到一个给定元素的第一个索引，如果不存在，则返回-1。
    //indexOf(item,index)返回某个指定的字符串值在字符串中首次出现的位置
    var arr1 = ["hello",10,"JS",20,true,30,"hello"];
    var index = arr1.indexOf(40);
    console.log(typeof index );//类型是number
    function indexOf_create(arr,ele){//封装indexOf查找的方法
        var index = -1;
        for( var i in arr ){
            if(ele === arr[i]){
                index = +i;
                break;
            }
        }
        return index;
    }
    console.log( indexOf_create(arr1,20) );
    console.log( typeof indexOf_create(arr1,20) );//类型是number
    

    // includes(): 用来判断一个数组是否包含一个指定的值，根据情况，如果包含则返回 true，否则返回false。
    var flag = arr1.includes('world');
    console.log( flag );

筛选

filter(fn)：创建一个新数组, 其包含通过所提供函数实现的测试的所有元素。

/*
    filter()：筛选数组
        参数：传入一个实参，是一个回调函数
        回调函数中的参数:
        形参： 
            item：每一个数组元素
            index:每一个元素的索引
            array：调用的数组本身
        返回值：
            原数组符合条件的元素
    */
    var newArr = arr1.filter(function(item,index,array){
        return typeof(item) === "number";
    });
    console.log( newArr );//返回number

填充

fill() 方法用于将一个固定值替换数组的元素。

arr.fill(value, start, end)

value：填充值。

start：填充起始位置，可以省略。

end：填充结束位置，可以省略，实际结束位置是end-1。

    let arr = [1,2,3,4,5,6,7,8]

     let arr2 = arr.fill('a',2,3)

     console.log(arr);// [1, 2, "a", 4, 5, 6, 7, 8]

练习

// 需求1：编写函数has(arr , 60) 判断数组中是否存在60这个元素，返回布尔类型。
// 需求2：编写函数map(arr) 把数组中的每一位数字都增加30%。
// 需求3：编写自己的reverse(arr)方法，将原有的数组进行反转操作，返回一个新的数组。
// 需求4：有数组 ["哈哈，杠精", 10, "hello", "js", "abc", 123]; 将数字arr1的元素复制到新数组arr2中;将数字arr1的元素剪切到新数组arr2中; 将数字arr1的元素倒叙剪切到新数组arr2中

答案

// 需求1：编写函数has(arr , 60) 判断数组中是否存在60这个元素，返回布尔类型。

//方法一，直接用if。。。。else 判断true false
// function has(arr,ele){
//  for(var index in arr){
//      if(arr[index] === ele){
//          return true;
//      }
//      else{
//          return false;
//      }
//  }
    
// }
// var arr = [1,5,7,33,55,78,3,9];
// var result = has(arr,33);
// console.log(result);

//方法二：
// function has(arr,ele){
//  var f = false;//注意咯
//  for(var index in arr){
//      if(arr[index] === ele) {
//          f = true;//注意咯
//          break   //注意咯       
//      }
//      return f;//注意咯
//  }
    
// }

// var arr = [1,5,7,33,55,78,3,9];
// var result = has(arr,44);
// console.log(result);

// 需求2：编写函数map(arr) 把数组中的每一位数字都增加30%。
//定义函数
// var result = 0;
// function map(arr){
//  //遍历数组，计算
//  for(var index in arr){
//      arr[index] = arr[index]*.3;

//       result =  arr[index];
//       console.log(result)
//  }
// }
//  //定义一个数组
// var arr = [3,4,6,55,7,8,10]
//  //将数组的值传入函数，并调用
//  map(arr);
 
// 需求3：编写自己的reverse(arr)方法，将原有的数组进行反转操作，返回一个新的数组。

    //定义一个数组
    var arr = [1,2,3,4,5,6,7,8,9]
    var arr1 = [];
    //方法1遍历数组
    // for(var index= arr.length-1; index>=0;index--){
    //  arr1[arr1.length] = arr[index];
    // }
    // console.log(arr,arr1)

    //方法2直接反转
    // arr.reverse();
    // console.log(arr)

    //方法3 用一个函数封装，再用push()
    function reverse(arr){
        // for(var index = arr.length-1;index>=0;index-- ){
            
        //  arr1.push(arr[index]);
        // }
        for(var index = 0;index<arr.length;index++ ){
            
            arr1.unshift(arr[index]);
        }
        return arr1;
    }
    var result = reverse(arr);
console.log(result);

// 需求4：有数组 ["哈哈，杠精", 10, "hello", "js", "abc", 123];
    // 将数字arr1的元素复制到新数组arr2中
    var arr1 = ["哈哈，杠精", 10, "hello", "js", "abc", 123];
    var arr2 = [];
    for( var index in arr1 ){
        // arr2[index] = arr1[index]
        arr2.push(arr1[index]);
    }
    console.log( arr2 );//["哈哈，杠精", 10, "hello", "js", "abc", 123]


    // 将数字arr1的元素剪切到新数组arr2中

    while( arr1.length>0 ){
        arr2.push( arr1.shift() )
    }
    console.log(arr1);//[]
    console.log( arr2 );//["哈哈，杠精", 10, "hello", "js", "abc", 123]


    // 将数字arr1的元素倒叙剪切到新数组arr2中
    var arr1 = ["哈哈，杠精", 10, "hello", "js", "abc", 123];
    var arr2 = [];
    while( arr1.length>0 ){
        arr2.unshift( arr1.shift() )
    }
    console.log( arr2 );// [123, "abc", "js", "hello", 10, "哈哈，杠精"]