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页面不刷新时全选择,全删除(GridView)
Apr 14 Javascript
js定时器(执行一次、重复执行)
Mar 07 Javascript
关于JavaScript对象的动态选择及遍历对象
Mar 10 Javascript
jquery动态更换设置背景图的方法
Mar 25 Javascript
根据当前时间在jsp页面上显示上午或下午
Aug 18 Javascript
JavaScript中实现异步编程模式的4种方法
Sep 24 Javascript
javascript实现方法调用与方法触发小结
Mar 26 Javascript
JavaScript鼠标事件,点击鼠标右键,弹出div的简单实例
Aug 03 Javascript
JS实现iframe自适应高度的方法示例
Jan 07 Javascript
Jquery EasyUI $.Parser
Jun 02 jQuery
写给小白看的JavaScript异步
Nov 29 Javascript
JavaScript中的执行环境和作用域链
Sep 04 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
第二节 对象模型 [2]
2006/10/09 PHP
php代码中使用换行及(\n或\r\n和br)的应用
2013/02/02 PHP
PHP编写daemon process 实例详解
2016/11/13 PHP
laravel如何开启跨域功能示例详解
2017/08/31 PHP
php命名空间设计思想、用法与缺点分析
2019/07/17 PHP
JavaScrip单线程引擎工作原理分析
2010/09/04 Javascript
解决jquery的datepicker的本地化以及Today问题
2012/05/23 Javascript
JQuery EasyUI 日期控件如何控制日期选择区间
2014/05/05 Javascript
javascript验证身份证号
2015/03/03 Javascript
百度地图自定义控件分享
2015/03/04 Javascript
Javascript简单实现面向对象编程继承实例代码
2015/11/27 Javascript
使用递归遍历对象获得value值的实现方法
2016/06/14 Javascript
JavaScript基于Dom操作实现查找、修改HTML元素的内容及属性的方法
2017/01/20 Javascript
vue-自定义组件传值的实例讲解
2018/09/18 Javascript
只有 20 行的 JavaScript 模板引擎实例详解
2020/05/11 Javascript
Python工程师面试必备25条知识点
2018/01/17 Python
python+opencv识别图片中的圆形
2020/03/25 Python
Python实现的根据IP地址计算子网掩码位数功能示例
2018/05/23 Python
Python格式化输出字符串方法小结【%与format】
2018/10/29 Python
python定时截屏实现
2020/11/02 Python
python matplotlib工具栏源码探析三之添加、删除自定义工具项的案例详解
2021/02/25 Python
css3实现的多级渐变下拉菜单导航效果代码
2015/08/31 HTML / CSS
设计师家具购买和委托在线市场:Viyet
2016/11/16 全球购物
DC Shoes官网:美国滑板鞋和服饰品牌
2017/09/03 全球购物
Crabtree & Evelyn欧盟:豪华洗浴、身体和护发
2021/03/09 全球购物
shell程序中如何注释
2012/01/28 面试题
工厂厂长的职责
2013/12/12 职场文书
师范学院美术系毕业生自我鉴定
2014/01/29 职场文书
土建工程师岗位职责
2014/06/10 职场文书
运动会跳远广播稿5篇
2014/09/17 职场文书
2015小学五年级班主任工作总结
2015/05/21 职场文书
关爱留守儿童主题班会
2015/08/13 职场文书
我爱我班主题班会
2015/08/13 职场文书
大学毕业生自我鉴定范文
2019/06/21 职场文书
python如何进行基准测试
2021/04/26 Python
详解Redis主从复制实践
2021/05/19 Redis