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 相关文章推荐
JS模拟的QQ面板上的多级可展开的菜单
Oct 10 Javascript
打造基于jQuery的高性能TreeView(asp.net)
Feb 23 Javascript
jquery validate添加自定义验证规则(验证邮箱 邮政编码)
Dec 04 Javascript
一些老手都不一定知道的JavaScript技巧
May 06 Javascript
Javascript中判断对象是否为空
Jun 10 Javascript
使用three.js 画渐变的直线
Jun 05 Javascript
Angular2使用Angular CLI快速搭建工程(一)
May 21 Javascript
vue实现组件之间传值功能示例
Jul 13 Javascript
Angular7.2.7路由使用初体验
Mar 01 Javascript
ant design vue datepicker日期选择器中文化操作
Oct 28 Javascript
ES5和ES6中类的区别总结
Dec 21 Javascript
JavaScript实现点击切换功能
Jan 27 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
图形数字验证代码
2006/10/09 PHP
PHP开发负载均衡指南
2010/07/17 PHP
PHP逐行输出(ob_flush与flush的组合)
2012/02/04 PHP
php的数组与字符串的转换函数整理汇总
2013/07/18 PHP
php的GD库imagettftext函数解决中文乱码问题
2015/01/24 PHP
Yii2 rbac权限控制操作步骤实例教程
2016/04/29 PHP
PHP实现绘制二叉树图形显示功能详解【包括二叉搜索树、平衡树及红黑树】
2017/11/16 PHP
WordPress 插件——CoolCode使用方法与下载
2007/07/02 Javascript
js Select下拉列表框进行多选、移除、交换内容的具体实现方法
2013/08/13 Javascript
jQuery实现公告文字左右滚动的实例代码
2013/10/29 Javascript
Javascript计算二维数组重复值示例代码
2016/12/18 Javascript
不得不知的ES6小技巧
2018/07/28 Javascript
Vue 通过自定义指令回顾v-内置指令(小结)
2018/09/03 Javascript
通过vue-cli3构建一个SSR应用程序的方法
2018/09/13 Javascript
微信小程序map组件结合高德地图API实现wx.chooseLocation功能示例
2019/01/23 Javascript
JS立即执行的匿名函数用法分析
2019/11/04 Javascript
js实现移动端吸顶效果
2020/01/08 Javascript
深入理解redux之compose的具体应用
2020/01/12 Javascript
小程序实现列表倒计时功能
2021/01/29 Javascript
[04:07]显微镜下的DOTA2第八期——英雄复活动作
2014/06/24 DOTA
Python3实现生成随机密码的方法
2014/08/23 Python
详细介绍Python函数中的默认参数
2015/03/30 Python
python 读取txt,json和hdf5文件的实例
2018/06/05 Python
python进阶之多线程对同一个全局变量的处理方法
2018/11/09 Python
详解python的argpare和click模块小结
2019/03/31 Python
Python实现RabbitMQ6种消息模型的示例代码
2020/03/30 Python
django实现更改数据库某个字段以及字段段内数据
2020/03/31 Python
企事业单位求职者的自我评价
2013/12/28 职场文书
大学生表扬信范文
2014/01/09 职场文书
电台实习生求职信
2014/02/25 职场文书
学校工作推荐信范文
2014/07/11 职场文书
离婚协议书范本及离婚须知
2014/10/15 职场文书
综合素质评价个性发展自我评价
2015/03/06 职场文书
高中语文教学反思范文
2016/02/16 职场文书
golang slice元素去重操作
2021/04/30 Golang
详解Python类和对象内容
2021/06/22 Python