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 Lightbox 图片展示插件使用说明
Apr 25 Javascript
Angularjs 基础入门
Dec 26 Javascript
jQuery元素的隐藏与显示实例
Jan 20 Javascript
在其他地方你学不到的jQuery小贴士和技巧(欢迎收藏)
Jan 20 Javascript
Select2.js下拉框使用小结
Oct 24 Javascript
关于jquery中attr()和prop()方法的区别
May 28 jQuery
angularjs 的数据绑定实现原理
Jul 02 Javascript
vue 引用自定义ttf、otf、在线字体的方法
May 09 Javascript
微信小程序之侧边栏滑动实现过程解析(附完整源码)
Aug 23 Javascript
解决vue单页面多个组件嵌套监听浏览器窗口变化问题
Jul 30 Javascript
JavaScript实现无限轮播效果
Nov 19 Javascript
ztree+ajax实现文件树下载功能
May 18 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与java通过socket通信的实现代码
2013/10/21 PHP
PHP中substr函数字符串截取用法分析
2016/01/07 PHP
Laravel 类和接口注入相关的代码
2019/10/15 PHP
PHP如何使用JWT做Api接口身份认证的实现
2020/02/03 PHP
win10下 php安装seaslog扩展的详细步骤
2020/12/04 PHP
javascript实例分享---具有立体效果的图片特效
2014/06/08 Javascript
JavaScript访问字符串中单个字符的两种方法
2015/07/03 Javascript
JS 实现倒计时数字时钟效果【附实例代码】
2016/03/30 Javascript
浅谈js里面的InttoStr和StrtoInt
2016/06/14 Javascript
Three.js学习之文字形状及自定义形状
2016/08/01 Javascript
分享bootstrap学习笔记心得(组件及其属性)
2017/01/11 Javascript
js 博客内容进度插件详解
2017/02/19 Javascript
详解webpack介绍&amp;安装&amp;常用命令
2017/06/29 Javascript
VueJs 搭建Axios接口请求工具
2017/11/20 Javascript
10个在JavaScript开发中常遇到的BUG
2017/12/18 Javascript
JS实现DOM删除节点操作示例
2018/04/04 Javascript
jQuery实现导航样式布局操作示例【可自定义样式布局】
2018/07/24 jQuery
js实现淘宝首页的banner栏效果
2019/11/26 Javascript
JQuery中的常用事件、对象属性与使用方法分析
2019/12/23 jQuery
python调用java的Webservice示例
2014/03/10 Python
Python编写简单的HTML页面合并脚本
2016/07/11 Python
django 简单实现登录验证给你
2019/11/06 Python
使用Pycharm分段执行代码
2020/04/15 Python
分享一枚pycharm激活码适用所有pycharm版本我的pycharm2020.2.3激活成功
2020/11/20 Python
Python 利用argparse模块实现脚本命令行参数解析
2020/12/28 Python
中国一家专注拼团的社交购物网站:拼多多
2018/06/13 全球购物
英国第一独立滑雪板商店:The Snowboard Asylum
2020/01/16 全球购物
Prototype如何为一个Ajax添加一个参数
2015/12/06 面试题
职专应届生求职信
2013/11/16 职场文书
企业年度评优方案
2014/06/02 职场文书
大学生职业生涯十年规划书范文
2014/09/17 职场文书
党员个人对照检查材料
2014/10/01 职场文书
六查六看心得体会
2014/10/14 职场文书
婚前协议书范本
2014/10/27 职场文书
Golang 切片(Slice)实现增删改查
2022/04/22 Golang
MySQL 数据库 增删查改、克隆、外键 等操作
2022/05/11 MySQL