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 iframe中打开文件,并检测iframe存在否
Dec 28 Javascript
jQuery数据显示插件整合实现代码
Oct 24 Javascript
js函数setTimeout延迟执行的简单介绍
Jul 17 Javascript
向左滚动文字 js代码效果
Aug 17 Javascript
jquery事件preventDefault()方法用法实例
Jan 16 Javascript
创建自己的jquery表格插件
Nov 25 Javascript
js实现对ajax请求面向对象的封装
Jan 08 Javascript
Thinkphp5微信小程序获取用户信息接口的实例详解
Sep 26 Javascript
在vue项目中使用sass的配置方法
Mar 20 Javascript
详解angular2如何手动点击特定元素上的点击事件
Oct 16 Javascript
js实现旋转木马轮播图效果
Jan 10 Javascript
react基本安装与测试示例
Apr 27 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
基于mysql的论坛(2)
2006/10/09 PHP
openflashchart 2.0 简单案例php版
2012/05/21 PHP
关于php程序报date()警告的处理(date_default_timezone_set)
2013/10/22 PHP
[原创]php token使用与验证示例【测试可用】
2017/08/30 PHP
javascript判断单选框或复选框是否选中方法集锦
2007/04/04 Javascript
ExtJs 3.1 XmlTreeLoader Example Error
2010/02/09 Javascript
Jquery Ajax 学习实例2 向页面发出请求 返回JSon格式数据
2010/03/15 Javascript
移动设备web开发首选框架:zeptojs介绍
2015/01/29 Javascript
JavaScript实现图片轮播的方法
2015/07/31 Javascript
js淡入淡出的图片轮播效果代码分享
2015/08/24 Javascript
基于jquery实现全屏滚动效果
2015/11/26 Javascript
JavaScript中Function函数与Object对象的关系
2015/12/17 Javascript
莱鸟介绍window.print()方法
2016/01/06 Javascript
javascript动态获取登录时间和在线时长
2016/02/25 Javascript
js 弹出对话框(遮罩)透明,可拖动的简单实例
2016/07/11 Javascript
JavaScript ES6中CLASS的使用详解
2016/11/22 Javascript
微信小程序 出现错误:{&quot;baseresponse&quot;:{&quot;errcode&quot;:-80002,&quot;errmsg&quot;:&quot;&quot;}}解决办法
2017/02/23 Javascript
利用 spin.js 生成等待效果(js 等待效果)
2017/06/25 Javascript
Vue.JS项目中5个经典Vuex插件
2017/11/28 Javascript
[04:41]2014DOTA2国际邀请赛 Liquid顺利突围晋级正赛
2014/07/09 DOTA
python二叉树遍历的实现方法
2013/11/21 Python
python生成式的send()方法(详解)
2017/05/08 Python
Python爬虫天气预报实例详解(小白入门)
2018/01/24 Python
OpenCV+python手势识别框架和实例讲解
2018/08/03 Python
python 实现批量xls文件转csv文件的方法
2018/10/23 Python
Python Flask框架模板操作实例分析
2019/05/03 Python
python 计算数据偏差和峰度的方法
2019/06/29 Python
用Python写一个自动木马程序
2019/09/17 Python
医科大学生毕业的自我评价分享
2013/11/12 职场文书
机关门卫岗位职责
2013/12/30 职场文书
在校大学生的职业生涯规划书
2014/03/14 职场文书
八荣八耻演讲稿
2014/09/15 职场文书
清明祭英烈活动总结
2015/05/11 职场文书
Anaconda配置各版本Pytorch的实现
2021/08/07 Python
spring cloud 配置中心native配置方式
2021/09/25 Java/Android
Nginx跨域问题解析与解决
2022/08/05 Servers