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去掉空格的方法集合
Dec 28 Javascript
Javascript类定义语法,私有成员、受保护成员、静态成员等介绍
Dec 08 Javascript
JavaScript实现文字与图片拖拽效果的方法
Feb 16 Javascript
更靠谱的H5横竖屏检测方法(js代码)
Sep 13 Javascript
Vuex之理解Getters的用法实例
Apr 19 Javascript
详解微信小程序 template添加绑定事件
Jun 23 Javascript
vue如何集成raphael.js中国地图的方法示例
Aug 15 Javascript
微信小程序如何实现全局重新加载
Jun 05 Javascript
详解vue中v-bind:style效果的自定义指令
Jan 21 Javascript
浅谈vue项目,访问路径#号的问题
Aug 14 Javascript
PHP读取远程txt文档到数组并实现遍历
Aug 25 Javascript
Vue实现一种简单的无限循环滚动动画的示例
Jan 10 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
深入解析PHP中逗号与点号的区别
2013/08/05 PHP
codeigniter实现get分页的方法
2015/07/10 PHP
juqery 学习之三 选择器 可见性 元素属性
2010/11/25 Javascript
javascript学习之闭包分析
2010/12/02 Javascript
关于页面嵌入swf覆盖div层的问题的解决方法
2014/02/11 Javascript
Jquery节点遍历next与nextAll方法使用示例
2014/07/22 Javascript
JQuery 实现在同一页面锚点链接之间的平滑滚动
2014/10/29 Javascript
兼容主流浏览器的JS复制内容到剪贴板
2014/12/12 Javascript
深入理解JavaScript系列(43):设计模式之状态模式详解
2015/03/04 Javascript
卸载安装Node.js与npm过程详解
2016/08/15 Javascript
Javascript将JSON日期格式化
2016/08/23 Javascript
Vue.js基础知识小结
2017/01/13 Javascript
node.js入门教程之querystring模块的使用方法
2017/02/27 Javascript
vue.js 1.x与2.0中js实时监听input值的变化
2017/03/15 Javascript
javascript实现非常简单的小数取整功能示例
2017/06/13 Javascript
傻瓜式解读koa中间件处理模块koa-compose的使用
2018/10/30 Javascript
微信小程序实现点击图片放大预览
2019/10/21 Javascript
通过实例解析JavaScript for in及for of区别
2020/06/15 Javascript
Django1.7+python 2.78+pycharm配置mysql数据库教程
2014/11/18 Python
python修改操作系统时间的方法
2015/05/18 Python
Windows下为Python安装Matplotlib模块
2015/11/06 Python
Python使用zip合并相邻列表项的方法示例
2018/03/17 Python
Python自定义函数实现求两个数最大公约数、最小公倍数示例
2018/05/21 Python
在win10和linux上分别安装Python虚拟环境的方法步骤
2019/05/09 Python
Python Pandas数据中对时间的操作
2019/07/30 Python
HTML5之SVG 2D入门2—图形绘制(基本形状)介绍及使用
2013/01/30 HTML / CSS
汽车技术服务与营销专业在籍生自荐信
2013/09/28 职场文书
家长会主持词开场白
2014/03/18 职场文书
啦啦队口号大全
2014/06/16 职场文书
听证会主持词
2015/07/03 职场文书
课程设计感想范文
2015/08/11 职场文书
关于职业道德的心得体会
2016/01/18 职场文书
成人成长感言如何写?
2019/08/16 职场文书
2019年鼓励无偿献血倡议书
2019/09/17 职场文书
MySQL系列之一 MariaDB-server安装
2021/07/02 MySQL
MySQL库表太大怎么办? 数据库分库分表项目实践
2022/04/11 MySQL