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 相关文章推荐
firefox火狐浏览器与与ie兼容的2个问题总结
Jul 20 Javascript
Javascript this 关键字 详解
Oct 22 Javascript
JavaScript Math 对象常用方法总结
Apr 28 Javascript
bootstrap3 兼容IE8浏览器!
May 02 Javascript
Vue中的v-cloak使用解读
Mar 27 Javascript
Angular 4依赖注入学习教程之ValueProvider的使用(七)
Jun 04 Javascript
基于AngularJs select绑定数字类型的问题
Oct 08 Javascript
JavaScript中关于base64的一些事
May 06 Javascript
vuex + keep-alive实现tab标签页面缓存功能
Oct 17 Javascript
js实现简单的贪吃蛇游戏
Apr 23 Javascript
vue各种事件监听实例(小结)
Jun 24 Javascript
html+vue.js 实现漂亮分页功能可兼容IE
Nov 07 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 eval函数用法 PHP中eval()函数小技巧
2012/10/31 PHP
hadoop中一些常用的命令介绍
2013/06/19 PHP
PHP下载远程文件到本地存储的方法
2015/03/24 PHP
优化WordPress中文章与评论的时间显示
2016/01/12 PHP
扩展JS Date对象时间格式化功能的小例子
2013/12/02 Javascript
jquery 获取dom固定元素 添加样式的简单实例
2014/02/04 Javascript
JavaScript DSL 流畅接口(使用链式调用)实例
2015/03/15 Javascript
使用JavaScript 实现的人脸检测
2015/03/24 Javascript
JavaScript模拟深蓝vs卡斯帕罗夫的国际象棋对局示例
2015/04/22 Javascript
jquery通过name属性取值的简单实现方法
2016/06/20 Javascript
jQuery Dialog 打开时自动聚焦的解决方法(两种方法)
2016/11/24 Javascript
Bootstrap fileinput文件上传预览插件使用详解
2017/05/16 Javascript
JavaScript实现动态添加Form表单元素的方法示例
2017/08/14 Javascript
JavaScrip关于创建常量的知识点
2017/12/07 Javascript
Angular中使用MathJax遇到的一些问题
2017/12/15 Javascript
vue cli2.0单页面title修改方法
2018/06/07 Javascript
js中的深浅拷贝问题简析
2019/05/10 Javascript
js实现上下左右键盘控制div移动
2020/01/16 Javascript
CKEditor扩展插件:自动排版功能autoformat插件实现方法详解
2020/02/06 Javascript
vue 获取到数据但却渲染不到页面上的解决方法
2020/11/19 Vue.js
[00:56]跨越时空加入战场 全新祈求者身心“失落奇艺侍祭”展示
2019/07/20 DOTA
Python实现确认字符串是否包含指定字符串的实例
2018/05/02 Python
如何用Python来理一理红楼梦里的那些关系
2019/08/14 Python
基于Python共轭梯度法与最速下降法之间的对比
2020/04/02 Python
python 监控logcat关键字功能
2020/09/04 Python
一个非常简单好用的Python图形界面库(PysimpleGUI)
2020/12/28 Python
运动鞋中的劳斯莱斯:索康尼(SAUCONY)
2017/08/09 全球购物
洛佩桑酒店官方网站:Lopesan Hotels
2019/04/15 全球购物
国际经济贸易专业推荐信
2013/11/06 职场文书
七匹狼男装广告词
2014/03/21 职场文书
《中国梦我的梦》大学生演讲稿
2014/08/20 职场文书
兴趣班停课通知
2015/04/24 职场文书
《领导干部从政道德启示录》学习心得体会
2016/01/20 职场文书
《颐和园》教学反思
2016/02/19 职场文书
面试被问select......for update会锁表还是锁行
2021/11/11 MySQL
Win10 和 Win11可以共存吗? win10/11产品生命周期/服务更新介绍
2021/11/21 数码科技