Javascript之高级数组API的使用实例


Posted in Javascript onMarch 08, 2019

JS中我们可以根据需求新建新的对象解决问题的同时,也有一些常用的内置对象供我们使用,我们称之为API,本篇文章只是对数组部分进行了练习。

例一:伪数组,不能修改长短的数组(所以没办法清零),可以修改元素,代码实现如下:

<script>
fn(1,2);
  fn(1,2,3,4,5,6);
  fn(1,2,4,5,7,9,4);
  function fn(a,b){
  arguments[0]=0;
  console.log(arguments);
  arguments.push(1);
  console.log(arguments instanceof Array);
  console.log(arguments.length);//实参个数
  console.log(fn.length);//形参个数
  console.log(arguments.callee);//整个函数,包括注释
  }
</script>

伪数组打印的是实参,而普通函数调用打印的是形参,并且打印它的函数类型,我们发现它的类型显示并不是数组。

例二:将一个字符串数组输出为|分割的形式,比如“刘备|张飞|关羽”。使用两种方式实现

方法一:不利用内置对象,进行字符串拼接,由于第一个元素前没有特殊符号,首先将其赋值后,循环从下一个元素开始遍历

<script>
var arr=["刘备","张飞","关羽"];
var str=arr[0];
for(var i=1;i<arr.length;i++){
  str+="|"+arr[i];
}
console.log(str);
</script>

方法二:使用内置对象直接改变间隔符号

<script>
var arr=["刘备","张飞","关羽"];
var str=arr.join("|");
console.log(str);
</script>

两种方法进行对比,我们发现第一种方法使之产生了大量内存,导致内存浪费情况,从此看出对我们来说内置对象的使用帮我们解决了内存浪费的缺点。

例三:将一个字符串数组的元素的顺序进行反转。["a","b","c","d"] ->["d","c","b","a"]。使用两种种方式实现。

方法一:之前文章介绍过的方法

<script>
var str1=["a","b","c","d"];
var str2=[];
for(var i=0;i<str1.length;i++){
  str2[str1.length-i-1]=str1[i];
}
console.log(str2);
</script>

方法二:直接使用内置对象reverse()解决

<script>
var str1=["a","b","c","d"];
console.log(str1.reverse());
</script>

例四:工资的数组[1500,1200,2000,2100,1800],把工资超过2000的删除

使用内置对象filter()实现题目需求。

<script>
var arr=[1500,1200,2000,2100,1800];
var arr1=arr.filter(function(element,index,array){
  if(element<=2000){
    return true;
  }
  return false;
})
console.log(arr1);
</script>

例五:["c","a","z","a","x","a"]找到数组中每一个元素出现的次数

由于题目给出字符形式,让我们求出的相应字符的个数为数字形式,这让我们应用json更方便问题解决,将题目给出的字符作为“键”,将次数作为“键值”,来判断数组中的元素,在json中是否存在属性值,如果存在,在原有基础上加上1;如果不存在直接赋值为1。

<script>
var arr=["c","a","z","a","x","a"];
var json={};
for(var i=0;i<arr.length;i++){
    if(json[arr[i]]!==undefined){
      json[arr[i]]+=1;
    }else{
      json[arr[i]]=1;
    }
}
console.log(json);
</script>

例六:编写一个方法 去掉一个数组的重复元素

方法一:新建数组,将原数组第一个元素push进入新数组。遍历原数组的每一个元素使之在新数组每一个元素中都不存在(嵌套两层for循环),就push进入原数组,否则就跳出新数组循环,进入原数组的下一个元素循环。

<script>
var arr=[3,2,4,5,5,3,5,568,4,21,7];
var arr1=fn(arr);
function fn(array){
  var arr2=[];
  arr2.push(array[0]);
  abc:for(var i=0;i<array.length;i++){
    for(var j=0;j<arr2.length;j++){
      if(arr2[j]==array[i]){
        continue abc;
      }
    }
    arr2.push(array[i]);
  }
  return arr2;
}
console.log(arr1);
</script>

方法二:创建一个新数组,循环遍历,只要新数组中有旧数组的值,就不要在添加。每次都要判断新数组中是否有旧数组的值,保证旧数组的元素和新数组中每一个都不相等,则赋值给新数组的下一元素的值。

<script>
var arr=[1,2,3,4,5,2,3,4];
console.log(arr);
console.log(fn(arr));
function fn(array){
  var newArr=[];
  for(var i=0;i<array.length;i++){
    var bool=true;
    for(var j=0;j<newArr.length;j++){
      if(array[i]===newArr[j]){
        bool=false;
      }
    }
    if(bool){
      newArr[newArr.length]=array[i];
    }
  }
  return newArr;
}
</script>

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,谢谢大家对三水点靠木的支持。如果你想了解更多相关内容请查看下面相关链接

Javascript 相关文章推荐
一个javascript图片阅览组件
Nov 09 Javascript
jQuery插件Tmpl的简单使用方法
Apr 27 Javascript
jQuery实现带延迟的二级tab切换下拉列表效果
Sep 01 Javascript
RequireJS 依赖关系的实例(推荐)
Jan 21 Javascript
JavaScript 事件对内存和性能的影响
Jan 22 Javascript
canvas实现图片根据滑块放大缩小效果
Feb 24 Javascript
JS实现移动端判断上拉和下滑功能
Aug 07 Javascript
微信{"errcode":48001,"errmsg":"api unauthorized, hints: [ req_id: 1QoCla0699ns81 ]"}
Oct 12 Javascript
js中对象与对象创建方法的各种方法
Feb 27 Javascript
ES6知识点整理之对象解构赋值应用示例
Apr 17 Javascript
浅谈vue3中effect与computed的亲密关系
Oct 10 Javascript
原生JavaScript实现购物车
Jan 10 Javascript
详解基于vue-cli3快速发布一个fullpage组件
Mar 08 #Javascript
JavaScript实现预览本地上传图片功能完整示例
Mar 08 #Javascript
详解JavaScript 的变量
Mar 08 #Javascript
Angular使用ControlValueAccessor创建自定义表单控件
Mar 08 #Javascript
小程序测试后台服务的方法(ngrok)
Mar 08 #Javascript
详解JavaScript函数callee、call、apply的区别
Mar 08 #Javascript
利用angular自动编译andriod APK的绕坑经历分享
Mar 08 #Javascript
You might like
php定义参数数量可变的函数用法实例
2015/03/16 PHP
php基于mcrypt_encrypt和mcrypt_decrypt实现字符串加密解密的方法
2016/07/12 PHP
一键生成各种尺寸Icon的php脚本(实例)
2017/02/08 PHP
详解PHP的抽象类和抽象方法以及接口总结
2019/03/15 PHP
php扩展开发入门demo示例
2019/09/23 PHP
用JavaScript脚本实现Web页面信息交互
2006/10/11 Javascript
符合标准的js表单提交的代码
2007/09/13 Javascript
javascript脚本编程解决考试分数统计问题
2008/10/18 Javascript
javascript 面向对象编程  function是方法(函数)
2009/09/17 Javascript
判断用户是否在线的代码
2011/03/05 Javascript
基于JQuery实现的类似购物商城的购物车
2011/12/06 Javascript
JavaScript定时器详解及实例
2013/08/01 Javascript
选择复选框按钮置灰否则按钮可用
2014/05/22 Javascript
Javascript 完美运动框架(逐行分析代码,让你轻松了运动的原理)
2015/01/23 Javascript
js如何实现淡入淡出效果
2020/11/18 Javascript
需要牢记的JavaScript基础知识
2016/09/25 Javascript
Vue.js分页组件实现:diVuePagination的使用详解
2018/01/10 Javascript
jquery实现动态添加附件功能
2018/10/23 jQuery
JS实现的图片选择顺序切换和循环切换功能示例【测试可用】
2018/12/28 Javascript
vue实现密码显示与隐藏按钮的自定义组件功能
2019/04/23 Javascript
微信小程序之下拉列表实现方法解析(附完整源码)
2019/08/23 Javascript
javascript实现左右缓动动画函数
2020/11/25 Javascript
python的mysqldb安装步骤详解
2017/08/14 Python
python实现人脸识别代码
2017/11/08 Python
Python实现的建造者模式示例
2018/08/06 Python
浅谈python的dataframe与series的创建方法
2018/11/12 Python
简单了解django文件下载方式
2020/02/10 Python
MATLAB数学建模之画图汇总
2020/07/16 Python
用Python进行websocket接口测试
2020/10/16 Python
世界最大的海报和艺术印刷商店:AllPosters.com
2017/02/01 全球购物
介绍一下Ruby的多线程处理
2013/02/01 面试题
演讲稿的写法
2014/05/19 职场文书
2014离婚协议书范文两篇
2014/09/15 职场文书
中学生旷课检讨书500字
2014/10/29 职场文书
教师先进个人材料
2014/12/17 职场文书
Django基础CBV装饰器和中间件
2022/03/22 Python