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 22 Javascript
从阿里妈妈发现的几个不错的表单验证函数
Sep 21 Javascript
jQuery插件的写法分享
Jun 12 Javascript
js实现幻灯片效果(基于jquery插件)
Nov 05 Javascript
基于JS实现移动端向左滑动出现删除按钮功能
Feb 22 Javascript
js for循环倒序输出数组元素的实例
Mar 01 Javascript
Vue.js结合Ueditor富文本编辑器的实例代码
Jul 11 Javascript
用Golang运行JavaScript的实现示例
Nov 25 Javascript
Vue的状态管理vuex使用方法详解
Feb 05 Javascript
vue 使用插槽分发内容操作示例【单个插槽、具名插槽、作用域插槽】
Mar 06 Javascript
js中调用微信的扫描二维码功能的实现代码
Apr 11 Javascript
ES5 模拟 ES6 的 Symbol 实现私有成员功能示例
May 06 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/01/01 PHP
php把数据表导出为Excel表的最简单、最快的方法(不用插件)
2014/05/10 PHP
分享微信扫码支付开发遇到问题及解决方案-附Ecshop微信支付插件
2015/08/23 PHP
基于PHP实现发微博动态代码实例
2020/12/11 PHP
表单内同名元素的控制
2006/11/22 Javascript
仅img元素创建后不添加到文档中会执行onload事件的解决方法
2011/07/31 Javascript
jquery实现的随机多彩tag标签随机颜色和字号大小效果
2014/03/27 Javascript
js 设置缓存及获取设置的缓存
2014/05/08 Javascript
深入探讨JavaScript、JQuery屏蔽网页鼠标右键菜单及禁止选择复制
2014/06/10 Javascript
基于编写jQuery的无缝滚动插件
2014/08/02 Javascript
DEDECMS如何为文章添加HOT NEW标志图片
2015/08/14 Javascript
webpack入门必知必会
2017/01/16 Javascript
初探nodeJS
2017/01/24 NodeJs
对称加密与非对称加密优缺点详解
2017/02/06 Javascript
js实现九宫格的随机颜色跳转
2017/02/19 Javascript
提高Web性能的前端优化技巧总结
2017/02/27 Javascript
Vuex之理解state的用法实例
2017/04/19 Javascript
[43:43]完美世界DOTA2联赛PWL S2 LBZS vs Forest 第三场 11.29
2020/12/02 DOTA
Python自定义scrapy中间模块避免重复采集的方法
2015/04/07 Python
Python数据类型详解(二)列表
2016/05/08 Python
Python 装饰器使用详解
2017/07/29 Python
Python编程argparse入门浅析
2018/02/07 Python
Python实现通讯录功能
2018/02/22 Python
使用DataFrame删除行和列的实例讲解
2018/04/08 Python
Python 获取指定文件夹下的目录和文件的实现
2019/08/30 Python
python与js主要区别点总结
2020/09/13 Python
python中time包实例详解
2021/02/02 Python
html5音频_动力节点Java学院整理
2018/08/22 HTML / CSS
土耳其时尚潮流在线购物网站:Trendyol
2017/10/10 全球购物
台湾最大网路书店:博客来
2018/03/18 全球购物
Opodo意大利:欧洲市场上领先的在线旅行社
2019/10/24 全球购物
文明礼仪事迹材料
2014/01/09 职场文书
公司周年庆活动方案
2014/08/25 职场文书
教师正风肃纪剖析材料
2014/10/20 职场文书
教你怎么用Python实现GIF动图的提取及合成
2021/06/15 Python
Python面向对象编程之类的概念
2021/11/01 Python