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

相关文章
|
10月前
|
JavaScript 前端开发 索引
40个JS常用使用技巧案例
大家好,我是V哥。在日常开发中,JS是解决页面交互的利器。V哥总结了40个实用的JS小技巧,涵盖数组操作、对象处理、函数使用等,并附带案例代码和解释。从数组去重到异步函数,这些技巧能显著提升开发效率。先赞再看后评论,腰缠万贯财进门。关注威哥爱编程,全栈开发就你行!
292 16
|
9月前
|
JavaScript 前端开发 API
JavaScript中通过array.map()实现数据转换、创建派生数组、异步数据流处理、复杂API请求、DOM操作、搜索和过滤等,array.map()的使用详解(附实际应用代码)
array.map()可以用来数据转换、创建派生数组、应用函数、链式调用、异步数据流处理、复杂API请求梳理、提供DOM操作、用来搜索和过滤等,比for好用太多了,主要是写法简单,并且非常直观,并且能提升代码的可读性,也就提升了Long Term代码的可维护性。 只有锻炼思维才能可持续地解决问题,只有思维才是真正值得学习和分享的核心要素。如果这篇博客能给您带来一点帮助,麻烦您点个赞支持一下,还可以收藏起来以备不时之需,有疑问和错误欢迎在评论区指出~
|
9月前
|
JavaScript 前端开发 Java
深入理解 JavaScript 中的 Array.find() 方法:原理、性能优势与实用案例详解
Array.find() 是 JavaScript 数组方法中一个非常实用和强大的工具。它不仅提供了简洁的查找操作,还具有性能上的独特优势:返回的引用能够直接影响原数组的数据内容,使得数据更新更加高效。通过各种场景的展示,我们可以看到 Array.find() 在更新、条件查找和嵌套结构查找等场景中的广泛应用。 在实际开发中,掌握 Array.find() 的特性和使用技巧,可以让代码更加简洁高效,特别是在需要直接修改原数据内容的情形。 只有锻炼思维才能可持续地解决问题,只有思维才是真正值得学习和分享的核心要素。如果这篇博客能给您带来一点帮助,麻烦您点个赞支持一
|
9月前
|
监控 JavaScript 前端开发
MutationObserver详解+案例——深入理解 JavaScript 中的 MutationObserver:原理与实战案例
MutationObserver 是一个非常强大的 API,提供了一种高效、灵活的方式来监听和响应 DOM 变化。它解决了传统 DOM 事件监听器的诸多局限性,通过异步、批量的方式处理 DOM 变化,大大提高了性能和效率。在实际开发中,合理使用 MutationObserver 可以帮助我们更好地控制 DOM 操作,提高代码的健壮性和可维护性。 只有锻炼思维才能可持续地解决问题,只有思维才是真正值得学习和分享的核心要素。如果这篇博客能给您带来一点帮助,麻烦您点个赞支持一下,还可以收藏起来以备不时之需,有疑问和错误欢迎在评论区指出~
MutationObserver详解+案例——深入理解 JavaScript 中的 MutationObserver:原理与实战案例
|
9月前
|
数据采集 JavaScript 前端开发
JavaScript中通过array.filter()实现数组的数据筛选、数据清洗和链式调用,JS中数组过滤器的使用详解(附实际应用代码)
用array.filter()来实现数据筛选、数据清洗和链式调用,相对于for循环更加清晰,语义化强,能显著提升代码的可读性和可维护性。博客不应该只有代码和解决方案,重点应该在于给出解决方案的同时分享思维模式,只有思维才能可持续地解决问题,只有思维才是真正值得学习和分享的核心要素。如果这篇博客能给您带来一点帮助,麻烦您点个赞支持一下,还可以收藏起来以备不时之需,有疑问和错误欢迎在评论区指出~
|
自然语言处理 前端开发 JavaScript
🛠️ JavaScript数组操作指南:20个精通必备技巧🚀
本文详细介绍了 JavaScript 中的 20 个高效数组操作技巧,涵盖了从基本的添加、移除元素,到数组转换和去重等高级操作。强调了不可变性的重要性,提供了清晰的代码示例,帮助开发者编写更整洁和高效的代码。无论是新手还是经验丰富的开发者,这些技巧都将显著提升您的编码能力,使您在项目中更具竞争力。
229 2
|
JavaScript 前端开发 测试技术
JS都有哪些操作数组的方法
JS都有哪些操作数组的方法
423 3
|
缓存 JavaScript 前端开发
JavaScript中数组、对象等循环遍历的常用方法介绍(二)
JavaScript中数组、对象等循环遍历的常用方法介绍(二)
183 1
|
JavaScript 前端开发 API
JS中数组的方法flat()怎么用
JS中数组的方法flat()怎么用
207 0
|
JavaScript 前端开发 索引
JavaScript中数组、对象等循环遍历的常用方法介绍(一)
JavaScript中数组、对象等循环遍历的常用方法介绍(一)
195 0

热门文章

最新文章