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 相关文章推荐
prototype1.4中文手册
Sep 22 Javascript
读jQuery之八 包装事件对象
Jun 21 Javascript
jQuery防止click双击多次提交及传递动态函数或多参数
Apr 02 Javascript
ionic开发中点击input时键盘自动弹出
Dec 23 Javascript
详解VueJs异步动态加载块
Mar 09 Javascript
node实现简单的反向代理服务器
Jul 26 Javascript
vue组件初学_弹射小球(实例讲解)
Sep 06 Javascript
使用socket.io制做简易WEB聊天室
Jan 02 Javascript
JavaScript函数节流和函数去抖知识点学习
Jul 31 Javascript
Vue.js实现可排序的表格组件功能示例
Feb 19 Javascript
vue实现带过渡效果的下拉菜单功能
Feb 19 Javascript
ESLint 是如何检查 .vue 文件的
Nov 30 Vue.js
详解基于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的数据库抽象层函数库
2006/10/09 PHP
php获取服务器信息的实现代码
2013/02/04 PHP
php实现统计邮件大小的方法
2013/08/06 PHP
ThinkPHP3.1.3版本新特性概述
2014/06/19 PHP
PHP+MySQL插入操作实例
2015/01/21 PHP
PHP Smarty模版简单使用方法
2016/03/30 PHP
PHP格式化显示时间date()函数代码
2018/10/03 PHP
php屏蔽错误及提示的方法
2020/05/10 PHP
JavaScript高级程序设计 读书笔记之十一 内置对象Global
2012/03/07 Javascript
Uglifyjs(JS代码优化工具)入门 安装使用
2020/04/13 Javascript
将Datatable转化成json发送前台实现思路
2013/09/06 Javascript
JS获取各种宽度、高度的简单介绍
2014/12/19 Javascript
jquery实现仿JqueryUi可拖动的DIV实例
2015/07/31 Javascript
JavaScript Length 属性的总结
2015/11/02 Javascript
JS从数组中随机取出几个数组元素的方法
2016/08/02 Javascript
微信小程序 实现tabs选项卡效果实例代码
2016/10/31 Javascript
js判断用户是输入的地址请求的路径(实例讲解)
2017/07/18 Javascript
jQuery+css last-child实现选择最后一个子元素操作示例
2018/12/10 jQuery
vue中子组件传递数据给父组件的讲解
2019/01/27 Javascript
微信小程序websocket实现即时聊天功能
2019/05/21 Javascript
js实现tab栏切换效果
2020/08/02 Javascript
微信小程序通过websocket实时语音识别的实现代码
2020/08/19 Javascript
[01:01:18]DOTA2上海特级锦标赛主赛事日 - 2 败者组第二轮#2COL VS LGD
2016/03/03 DOTA
Python使用正则表达式过滤或替换HTML标签的方法详解
2017/09/25 Python
Python使用修饰器进行异常日志记录操作示例
2019/03/19 Python
Python3视频转字符动画的实例代码
2019/08/29 Python
python列表推导和生成器表达式知识点总结
2020/01/10 Python
Matlab中plot基本用法的具体使用
2020/07/17 Python
HTML5新标签兼容——&gt; 的两种方法
2018/09/12 HTML / CSS
定义一结构体数组表示分数,并求两个分数相加之和
2013/06/11 面试题
医学实习生自我鉴定
2013/12/12 职场文书
大学生求职自我评价
2014/01/16 职场文书
电工技术比武方案
2014/05/11 职场文书
汽车4S店前台接待岗位职责
2015/04/03 职场文书
旷工检讨书大全
2015/08/15 职场文书
大学生心理健康教育心得体会
2016/01/12 职场文书