javascript 内置对象数组总结及案例

简介: 前言今天总结javascript中的数组的知识点,并且写一写小案例,很简单的哦!数组创建的两种方式

image.png

image.png

检测是否为数组的两种方式

  • 1.instanceof 运算符,可以用来检测是否为数组。
  • 2.Array.isArray(参数);H5新增的方法,ie9以上支持。
 // 检测是否为数组
        // 1.instanceof 运算符,可以用来检测是否为数组
        var arr = [1,2,3,4];
        var obj = {}
        console.log(arr instanceof Array);
        console.log(obj instanceof Array);
        // 2.Array.isArray(参数)
        console.log(Array.isArray(arr));
        console.log(Array.isArray(obj));

image.png

添加数组元素

  • push() :在数组末尾添加一个或多个元素,push完毕之后,返回新数组的长度
  var arr = [1,2,3];
  arr.push(7);
  console.log(arr.push(2,'aniu'));  //返回当前数组长度
  console.log(arr);

image.png

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

image.png

删除数组元素

  • pop() : 删除数组最后一个元素,返回删除的值。
  • shift() : 删除数组第一个元素,返回删除的值。
    var arr = [1,2,3];
    console.log(arr.pop());
    console.log(arr.shift());
    console.log(arr);

image.png

数组排序

  • 法一:用各种排序算法,这里不再写。
  • 法二:用内置的sort()方法,这里写一下sort的用法(不是直接调用sort)
   var arr = [1,2,3,8,9,11,13,23,6];
   arr.sort(function (a,b){
        return a-b;//升序
   });
   console.log(arr);
   arr.sort(function (a,b){
       return b-a;//降序
  });
   console.log(arr);

image.png

image.png

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

image.png

image.png

var arr = ['aniu','ai','ni'];
console.log(arr.toString()); //'aniu','ai','ni'
console.log(arr.join('&'));  //'aniu'&'ai'&'ni' 

image.png

     // 翻转数组
        function reverse(arr){
            //检测参数是否为数组
            if (arr instanceof Array){
                var newArr = [];
                for (var i = arr.length - 1;i>=0;i--){
                    newArr [newArr.length] = arr[i];
                }
                return newArr;
            }else{
                return 'error 这个参数要求必须是数组格式[1,2,3]'
            }
        }
        console.log(reverse([1,2,3]));

image.png

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

案例-数组去重

目标:把旧数组里面不重复的元素选取出来放到新数组中,重复的元素只保留一个,放到新数组中去重。


核心算法:

1.我们遍历旧数组,然后拿着旧数组元素去查询新数组,如果该元素在新数组里面没有出现过,我们就添加,否则不添加。

2.我们怎么知道该元素没有存在?利用新数组.indexOf (数组元素),如果返回是 -1 就说明新数组里面没有该元素。

//数组去重
  function fun(arr){
      var newArr = [];
      for (var i = 0;i<arr.length;i++){
          if(newArr.indexOf(arr[i]) == -1){
              newArr.push(arr[i]);
          }
      }
      return newArr;
  }
  var demo = fun(['a','c','f','a','c','g','f','z'])
  console.log(demo);

image.png

相关文章
|
1月前
|
自然语言处理 前端开发 JavaScript
🛠️ JavaScript数组操作指南:20个精通必备技巧🚀
本文详细介绍了 JavaScript 中的 20 个高效数组操作技巧,涵盖了从基本的添加、移除元素,到数组转换和去重等高级操作。强调了不可变性的重要性,提供了清晰的代码示例,帮助开发者编写更整洁和高效的代码。无论是新手还是经验丰富的开发者,这些技巧都将显著提升您的编码能力,使您在项目中更具竞争力。
22 2
|
1月前
|
JavaScript 前端开发 测试技术
JS都有哪些操作数组的方法
JS都有哪些操作数组的方法
20 3
|
1月前
|
JavaScript
js删除数组中已知下标的元素
js删除数组中已知下标的元素
35 4
|
1月前
|
缓存 JavaScript 前端开发
JavaScript中数组、对象等循环遍历的常用方法介绍(二)
JavaScript中数组、对象等循环遍历的常用方法介绍(二)
31 1
|
1月前
|
JavaScript 前端开发 Java
【javaScript数组,函数】的基础知识点
【javaScript数组,函数】的基础知识点
23 5
|
1月前
|
JavaScript 前端开发 索引
JS 删除数组元素( 5种方法 )
JS 删除数组元素( 5种方法 )
37 1
|
1月前
|
JavaScript 前端开发 API
JS中数组的方法flat()怎么用
JS中数组的方法flat()怎么用
13 0
|
1月前
|
JavaScript 前端开发 索引
JavaScript中数组、对象等循环遍历的常用方法介绍(一)
JavaScript中数组、对象等循环遍历的常用方法介绍(一)
20 0
|
1月前
|
前端开发 JavaScript 索引
JavaScript 数组常用高阶函数总结,包括插入,删除,更新,反转,排序等,如map、splice等
JavaScript数组的常用高阶函数,包括遍历、插入、删除、更新、反转和排序等操作,如map、splice、push、pop、reverse等。
18 0
|
1月前
|
前端开发 JavaScript
JavaScript动态渲染页面爬取——CSS位置偏移反爬案例分析与爬取实战
JavaScript动态渲染页面爬取——CSS位置偏移反爬案例分析与爬取实战