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实现页面打印的三种方法
Mar 05 Javascript
PNGHandler-借助JS让PNG图在IE下实现透明(包括背景图)
Aug 31 Javascript
jquery配合css简单实现返回顶部效果
Sep 30 Javascript
JS控制一个DIV层在指定时间内消失的方法
Feb 17 Javascript
AngularJS入门教程之学习环境搭建
Dec 06 Javascript
JavaScript实现的多种鼠标拖放效果
Nov 03 Javascript
js图片跟随鼠标移动代码
Nov 26 Javascript
js实现移动端微信页面禁止字体放大
Feb 16 Javascript
thinkjs 文件上传功能实例代码
Nov 08 Javascript
详解微信图片防盗链“此图片来自微信公众平台 未经允许不得引用”的解决方案
Apr 04 Javascript
vue 解决遍历对象显示的顺序不对问题
Nov 07 Javascript
基于js实现的图片拖拽排序源码实例
Nov 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
Yii框架安装简明教程
2020/05/15 PHP
js下用gb2312编码解码实现方法
2009/12/31 Javascript
jQuery Ajax方法调用 Asp.Net WebService 的详细实例代码
2011/04/27 Javascript
JavaScript 用cloneNode方法克隆节点的代码
2012/10/15 Javascript
探讨在JQuery和Js中,如何让ajax执行完后再继续往下执行
2013/07/09 Javascript
js使用removeChild方法动态删除div元素
2014/08/01 Javascript
js实现3D图片逐张轮播幻灯片特效代码分享
2015/09/09 Javascript
jQuery超简单选项卡完整实例
2015/09/26 Javascript
jQuery xml字符串的解析、读取及查找方法
2016/03/01 Javascript
bootstrapValidator表单验证插件学习
2016/12/30 Javascript
Angularjs中数据绑定的实例详解
2017/08/25 Javascript
vue.js获得当前元素的文字信息方法
2018/03/09 Javascript
使用webpack-dev-server处理跨域请求的方法
2018/04/18 Javascript
jQuery中的类名选择器(.class)用法简单示例
2018/05/14 jQuery
Angular5中提取公共组件之radio list的实例代码
2018/07/10 Javascript
微信小程序日历/日期选择插件使用方法详解
2018/12/28 Javascript
JS实现动态倒计时功能(天数、时、分、秒)
2019/12/12 Javascript
详解vue-router 动态路由下子页面多页共活的解决方案
2019/12/22 Javascript
JS删除对象中某一属性案例详解
2020/09/08 Javascript
[39:00]Optic vs VP 2018国际邀请赛淘汰赛BO3 第三场 8.24
2018/08/25 DOTA
Python算法应用实战之队列详解
2017/02/04 Python
使用Python对MySQL数据操作
2017/04/06 Python
Python线程指南分享
2019/11/19 Python
在Python中利用pickle保存变量的实例
2019/12/30 Python
Python实现CAN报文转换工具教程
2020/05/05 Python
详解pytorch中squeeze()和unsqueeze()函数介绍
2020/09/03 Python
VICHY薇姿英国官网:全球专业敏感肌护肤领先品牌
2017/07/04 全球购物
美国开幕式潮店:Opening Ceremony
2018/02/10 全球购物
我的中国梦演讲稿小学篇
2014/08/19 职场文书
2015关于重阳节的演讲稿
2015/03/20 职场文书
2015年入党积极分子评语
2015/03/26 职场文书
文明礼仪倡议书
2015/04/28 职场文书
工程款催款函
2015/06/24 职场文书
公司员工管理制度
2015/08/04 职场文书
SQLServer 错误: 15404,无法获取有关 Windows NT 组/用户 WIN-8IVSNAQS8T7\Administrator 的信息
2021/06/30 SQL Server
python index() 与 rindex() 方法的使用示例详解
2022/12/24 Python