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 相关文章推荐
Jquery easyui 下loaing效果示例代码
Aug 12 Javascript
jquery获取元素索引值index()示例
Feb 13 Javascript
Javascript实现可旋转的圆圈实例代码
Aug 04 Javascript
jquery动态遍历Json对象的属性和值的方法
Jul 27 Javascript
微信小程序 封装http请求实例详解
Jan 16 Javascript
javascript设计模式之单体模式学习笔记
Feb 15 Javascript
JS html时钟制作代码分享
Mar 03 Javascript
jQuery实现多张图片上传预览(不经过后端处理)
Apr 29 jQuery
vue绑定class与行间样式style详解
Aug 16 Javascript
JavaScript解决浮点数计算不准确问题的方法分析
Jul 09 Javascript
JavaScript ES 模块的使用
Nov 12 Javascript
原生js实现表格循环滚动
Nov 24 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
新的一年,新的期待:DC在2020年的四部动画电影
2020/01/01 欧美动漫
使用PHPMailer实现邮件发送代码分享
2014/10/23 PHP
php动态生成缩略图并输出显示的方法
2015/04/20 PHP
php实现base64图片上传方式实例代码
2017/02/22 PHP
jquery 上下滚动广告
2009/06/17 Javascript
jQuery-Easyui 1.2 实现多层菜单效果的代码
2012/01/13 Javascript
jquery怎样实现ajax联动框(二)
2013/03/08 Javascript
javascript中如何处理引号编码&amp;#034;
2013/08/15 Javascript
利用jQuery实现可以编辑的表格
2014/05/26 Javascript
微信企业号开发之微信考勤Cookies的使用
2015/09/11 Javascript
Jquery Mobile 自定义按钮图标
2015/11/18 Javascript
JS把内容动态插入到DIV的实现方法
2016/07/19 Javascript
jQuery EasyUI封装简化操作
2016/09/18 Javascript
js实现碰撞检测特效代码分享
2016/10/16 Javascript
给easyui datebox扩展一个清空的实例
2016/11/09 Javascript
详解JS-- 浮点数运算处理
2016/11/28 Javascript
js倒计时小实例(多次定时)
2016/12/08 Javascript
Nodejs多站点切换Htpps协议详解及简单实例
2017/02/23 NodeJs
详解使用grunt完成requirejs的合并压缩和js文件的版本控制
2017/03/02 Javascript
jQuery使用eraser.js插件实现擦除、刮刮卡效果的方法【附eraser.js下载】
2017/04/28 jQuery
vue实现添加与删除图书功能
2018/10/07 Javascript
JavaScript简单实现的仿微博留言功能示例
2019/01/17 Javascript
vue 实现tab切换保持数据状态
2020/07/21 Javascript
[00:35]2016完美“圣”典风云人物:冷冷宣传片
2016/12/08 DOTA
Python3使用requests包抓取并保存网页源码的方法
2016/03/15 Python
Python迭代器和生成器定义与用法示例
2018/02/10 Python
Python3+selenium配置常见报错解决方案
2020/08/28 Python
Python 实现一个简单的web服务器
2021/01/03 Python
详解css position 5种不同的值的用法
2019/07/30 HTML / CSS
Derek Rose官网:英国高档睡衣、家居服和内衣品牌
2020/01/18 全球购物
软件工程专业推荐信
2013/10/28 职场文书
化学教师教学反思
2014/01/17 职场文书
党员群众路线教育实践活动学习笔记
2014/11/05 职场文书
财产保全担保书
2015/01/20 职场文书
限期整改通知书
2015/04/22 职场文书
收入证明范本
2015/06/12 职场文书