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 onmouseout 解决办法
Jul 17 Javascript
js父窗口关闭时子窗口随之关闭完美解决方案
Apr 29 Javascript
javascript实现十秒钟后注册按钮可点击的方法
May 13 Javascript
javascript实现拖放效果
Dec 16 Javascript
Avalon中文长字符截取、关键字符隐藏、自定义过滤器
May 18 Javascript
如何利用JQuery实现从底部回到顶部的功能
Dec 27 Javascript
vue实现app页面切换动画效果实例
May 23 Javascript
在vscode中统一vue编码风格的方法
Feb 22 Javascript
JavaScript函数apply()和call()用法与异同分析
Aug 10 Javascript
微信小程序使用setData修改数组中单个对象的方法分析
Dec 30 Javascript
JS 数组和对象的深拷贝操作示例
Jun 06 Javascript
three.js中多线程的使用及性能测试详解
Jan 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 无限级缓存的类的扩展
2009/03/16 PHP
php 获取可变函数参数的函数
2009/08/26 PHP
php_screw 1.5:php加密: 安装与使用详解
2013/06/20 PHP
浅析php中json_encode()和json_decode()
2014/05/25 PHP
php中ftp_chdir与ftp_cdup函数用法
2014/11/18 PHP
php提取字符串中网站url地址的方法
2014/12/03 PHP
php实现获取文件mime类型的方法
2015/02/11 PHP
php+mysql实现简单的增删改查功能
2015/07/13 PHP
ThinkPHP框架搭建及常见问题(XAMPP安装失败、Apache/MySQL启动失败)
2016/04/15 PHP
php实现商城购物车的思路和源码分析
2020/07/23 PHP
jQuery 联动日历实现代码
2012/05/31 Javascript
CSS鼠标响应事件经过、移动、点击示例介绍
2013/09/04 Javascript
同域jQuery(跨)iframe操作DOM(示例代码)
2013/12/13 Javascript
css3元素简单的闪烁效果实现(html5 jquery)
2013/12/28 Javascript
深入解析Javascript闭包的功能及实现方法
2016/07/10 Javascript
用jQuery.ajaxSetup实现对请求和响应数据的过滤
2016/12/20 Javascript
JS+jQuery实现注册信息的验证功能
2017/09/26 jQuery
在vue中使用cookie记住用户上次选择的实例(本次例子中为下拉框)
2020/09/11 Javascript
vue 二维码长按保存和复制内容操作
2020/09/22 Javascript
Vue+Java 通过websocket实现服务器与客户端双向通信操作
2020/09/22 Javascript
html5以及jQuery实现本地图片上传前的预览代码实例讲解
2021/03/01 jQuery
基于python的图片修复程序(实现水印去除)
2018/06/04 Python
python3实现域名查询和whois查询功能
2018/06/21 Python
Django框架视图函数设计示例
2019/07/29 Python
django rest framework serializer返回时间自动格式化方法
2020/03/31 Python
使用keras和tensorflow保存为可部署的pb格式
2020/05/25 Python
保安自我鉴定范文
2013/12/08 职场文书
大学生自我评价范文分享
2014/02/21 职场文书
家电业务员岗位职责
2014/03/10 职场文书
借款担保书范文
2014/05/13 职场文书
大二学生自我检讨书
2014/10/23 职场文书
2015年法制宣传月活动总结
2015/03/26 职场文书
初中军训感言
2015/08/01 职场文书
优秀党员先进事迹材料2016
2016/02/29 职场文书
Golang 编译成DLL文件的操作
2021/05/06 Golang
MySQL数据库安装方法与图形化管理工具介绍
2022/05/30 MySQL