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 题型问答有答案参考
Feb 17 Javascript
Javascript 异步加载详解(浏览器在javascript的加载方式)
May 20 Javascript
js toFixed()方法的重写实现精度的统一
Mar 06 Javascript
Js实现网页键盘控制翻页的方法
Oct 30 Javascript
常用的JavaScript模板引擎介绍
Feb 28 Javascript
javascript实现页面滚屏效果
Jan 17 Javascript
vue.js 1.x与2.0中js实时监听input值的变化
Mar 15 Javascript
JavaScript实现设置默认日期范围为最近40天的方法分析
Jul 12 Javascript
webpack 模块热替换原理
Apr 09 Javascript
JS的时间格式化和时间戳转换函数示例详解
Jul 27 Javascript
JavaScript Image对象实现原理实例解析
Aug 26 Javascript
vue实现简单全选和反选功能
Sep 15 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网站来路获取代码(针对搜索引擎)
2010/06/08 PHP
php中如何防止表单的重复提交
2013/08/02 PHP
PHP制作登录异常ip检测功能的实例代码
2016/11/16 PHP
PHP使用curl_multi实现并发请求的方法示例
2018/04/29 PHP
JQuery 应用 JQuery.groupTable.js
2010/12/15 Javascript
js模拟select下拉菜单控件的代码
2013/05/08 Javascript
JS获取html对象的几种方式介绍
2013/12/05 Javascript
JS控制图片等比例缩放的示例代码
2013/12/24 Javascript
js判断字符长度以及中英文数字等
2013/12/31 Javascript
JavaScript判断文件上传类型的方法
2014/09/02 Javascript
Nodejs关于gzip/deflate压缩详解
2015/03/04 NodeJs
JS模式之简单的订阅者和发布者模式完整实例
2015/06/30 Javascript
JS获取随机数和时间转换的简单实例
2016/07/10 Javascript
js中获取jsp表单中radio类型的值简单实例
2016/08/15 Javascript
详解在React.js中使用PureComponent的重要性和使用方式
2018/07/10 Javascript
Vue中多个元素、组件的过渡及列表过渡的方法示例
2019/02/13 Javascript
node之本地服务器图片上传的方法示例
2019/03/26 Javascript
[09:37]DOTA2卡尔工作室 英雄介绍圣堂刺客篇
2013/06/13 DOTA
[02:05]2014DOTA2西雅图邀请赛 老队长全明星大猜想谁不服就按进显示器
2014/07/08 DOTA
[07:38]2014DOTA2国际邀请赛 Newbee顺利挺进胜者组赛后专访
2014/07/15 DOTA
[04:19]DOTA2完美大师赛第四天精彩集锦
2017/11/26 DOTA
Python struct.unpack
2008/09/06 Python
python设计微型小说网站(基于Django+Bootstrap框架)
2019/07/08 Python
一行python实现树形结构的方法
2019/08/09 Python
前后端结合实现amazeUI分页效果
2020/08/21 HTML / CSS
Lookfantastic阿联酋官网:英国知名美妆护肤购物网站
2020/05/26 全球购物
linux面试题参考答案(10)
2016/10/26 面试题
《菜园里》教学反思
2014/04/17 职场文书
2014年五四青年节活动策划书
2014/04/22 职场文书
2015年学校教务处工作总结
2015/05/11 职场文书
运动会广播稿50字
2015/08/19 职场文书
python 中[0]*2与0*2的区别说明
2021/05/10 Python
Python办公自动化之教你用Python批量识别发票并录入到Excel表格中
2021/06/26 Python
C站最全Python标准库总结,你想要的都在这里
2021/07/03 Python
Vue的过滤器你真了解吗
2022/02/24 Vue.js
Python可视化动图组件ipyvizzu绘制惊艳的可视化动图
2022/04/21 Python