JavaScript Array对象使用方法解析


Posted in Javascript onSeptember 24, 2019

1.数组的常用方法

push(val):数组的末尾添加新的元素,返回操作完成后数组的长度

pop():删除数组最后一个元素,返回被删除的元素

shift():删除数组的第一个元素,返回被删除的元素

unshift(val):数组的开头添加新的元素,返回操作完成后数组的长度

<script>
  var arr = [1,2,3,4]

  // 在数组末尾添加元素
  arr.push(5)
  console.log(arr) // [1, 2, 3, 4, 5]

  // 删除数组最后一个元素
  arr.pop()
  console.log(arr) // [1, 2, 3, 4]

  // 在数组最前面添加元素
  arr.unshift(0)
  console.log(arr) // [0, 1, 2, 3, 4]

  // 删除数组的第一个元素
  arr.shift()
  console.log(arr) // [1, 2, 3, 4]
</script>

2.数组的遍历

数组遍历可以使用for循环和foreach

<script>
  var arr = [1,2,3,4]

  // for循环
  for(var i=0;i<arr.length;i++){
    console.log(arr[i])
  }

  // foreach
  arr.forEach(function(val,index){
    console.log(val,index)
  })
</script>

3.ES6数组新增方法

<script>
  var arr = [1,2,3,4]
  var newArr = arr.map(function(val){
    return val*2
  })
  console.log(newArr) // [2, 4, 6, 8]
</script>

filter(cb):过滤

<script>
  var arr = [1,2,3,4]

  var newArr = arr.filter(function(val){
    // 只保留 >2 的元素
    return val>2
  })

  console.log(newArr) // [3, 4]
</script>

some(cb) :检测数组中是否有元素满足条件,只要有一个满足就返回true,否则返回false

<script>
  var arr = [1,2,3,4]

  var flag = arr.some(function(val){
    return val>2
  })
  console.log(flag) // true

  var flag2 = arr.some(function(val){
    return val>5
  })
  console.log(flag2) // false
</script>

every(cb):所有元素都满足才会返回true,否则返回false

<script>
  var arr = [1,2,3,4]

  var flag = arr.every(function(val){
    return val>2
  })
  console.log(flag) // false

  var flag2 = arr.every(function(val){
    return val>0
  })
  console.log(flag2) // true
</script>

reduce(cb):累加器

reduce()对数组元素进行遍历,每次遍历就进行依次累加计算,遍历结束后返回累加的最终值

语法:arr.reduce((要累加并返回的数,数组元素) => {},初始值)

var list = [
  {name:'西瓜',price:2,num:2},
  {name:'香蕉',price:4,num:1},
  {name:'玉米',price:2,num:5},
  {name:'苹果',price:8,num:1}
]
var totalPrice = list.reduce((total,item) => {
  return total + item.price * item.num
},0)
console.log(totalPrice) // 26

4.查找数组的子元素

查找数组元素的下标

indexOf():返回具体元素在数组中的下标

findIndex(cb):查找符合条件的第一个元素的下标

lastIndexOf()和indexOf()的功能一样,不同的是lastIndexOf()从后往前查找

<script>
  var arr = [1,2,3,4]

  var index = arr.indexOf(1)
  console.log(index) // 0
  var index2 = arr.indexOf(5) // 没有这个元素
  console.log(index2) // -1

  var index3 = arr.findIndex(function(val){
    return val>2
  })
  console.log(index3) // 2
  var index4 = arr.findIndex(function(val){
    // 没有一个元素符合条件
    return val>5
  })
  console.log(index4) //-1
</script>

查找符合条件的第一个数组元素 find(cb)

这个方法跟filter()差不多,只是这个只查找一个。而filter()会查找所有符合条件的数组元素

<script>
  var arr = [1,2,3,4]

  var result = arr.find(function(val){
    // 查找第一个大于3.5的子元素
    return val>3.5
  })
  console.log(result) // 4
</script>

判断一个数组是否含有某个子元素 includes()

<script>
  var arr = [1,2,3,4]

  // 数组是否含有 1
  var flag = arr.includes(2)
  // 数组是否含有 5
  var flag2 = arr.includes(5)

  console.log(flag) // true
  console.log(flag2) // false
</script>

5.数组转换

数组与字符串间的转换 split()/join()

<script>
  var str = "hello world"
  // 根据标识将字符串分割成数组
  var arr = str.split(" ")
  console.log(arr) //["hello", "world"]

  // 将数组的子元素拼接成字符串
  var str2 = arr.join("-")
  console.log(str2) // "hello-world"
</script>

伪数组转化为数组(一个对象,如果可以通过下标的形式访问属性值,那么它就属于伪数组)

Array.from() 推荐

Array.prototype.slice()

通过某些方法获取到的Dom元素是一个伪数组,不能正常使用foreach(),除非先转换成数组

<script>
  var lis = document.getElementsByTagName('li')

  // 伪数组,不能使用foreach()
  console.log(lis) // HTMLCollection(4) [li.test, li.test, li.test, li.test]

  // 已经转化为数组,但是是个空数组,依然无法遍历
  console.log(Array.prototype.slice(lis)) // []

  // 已经转化为数组,且可以遍历
  console.log(Array.from(lis)) // [li.test, li.test, li.test, li.test]

  Array.from(lis).forEach(function(item){
    console.log(item.innerHTML)
  })
</script>

6.数组排序

1.插入排序

从第二个元素开始,拿他前面的元素与它比较,如果它比前面的元素小,则这个对比元素往后挪一个位置(实际上是arr[p + 1] = arr[p]),接着往左边找对比元素左比较,直到找到最后一个或者比它小的元素位置为止,此时将这个元素放到这个相应的位置(arr[p + 1] = temp),每轮循环结束都能保证前面的数据是升序排列的

<script>
  var arr = [6, 3, 4, 7, 5, 19, 2];
  var length = arr.length;
  // 进行升序排列,大的元素往右边挤,小的元素往左边挤
  for (var i = 1; i < length; i++) {
    // i为当前元素的下标
    var temp = arr[i];
    // p为比对元素的下标
    p = i - 1;
    // 如果当前元素比目标元素小
    while (p >= 0 && temp < arr[p]) {
      // 将比对元素往右挪一个位置
      arr[p + 1] = arr[p];
      // 往左一个位置找新的比对元素
      p--;
    }
    // 将当前元素放到合适的位置
    arr[p + 1] = temp;
  }
  console.log(arr) // [2, 3, 4, 5, 6, 7, 19]
</script>

2.快速排序

将一个数组的中间元素取出(splice,这个方法会改变原数组,同时将将截取的元素以数字的形式返回),然后定义两个左右空数据,遍历这个原数组,将小于被取出元素值的元素放入左边的数组,反之放入右边的数组,一轮循环之后将这左右两个数组和中间元素拼接起来,同时对左右数组进行递归调用

var arr = [4, 3, 6, 7, 5, 19, 2];
var newArr = quickSort(arr);
console.log(newArr);
function quickSort(arr) {
  if (arr.length <= 1) return arr;
  else {
    var center = parseInt((arr.length - 1) / 2);
    var centerValue = arr.splice(center, 1)[0];
    var left = [];
    var right = [];
    for (var i = 0; i < arr.length; i++) {
      if (arr[i] <= centerValue) {
        left.push(arr[i]);
      } else {
        right.push(arr[i]);
      }
    }
    return quickSort(left).concat(centerValue, quickSort(right));
  }
}

3.sort排序

<script>
  var arr = [
    {name:"张三",age:18},
    {name:"李四",age:16},
    {name:"王五",age:10},
    {name:"赵六",age:22}
  ]
  arr.sort(function(p1,p2){
    //p1.age-p2.age就是升序
    //p2.age-p1.age就是降序
    return p1.age-p2.age
  })
  console.log(arr)
  // [{name: "王五", age: 10}
  // {name: "李四", age: 16}
  // {name: "张三", age: 18}
  // {name: "赵六", age: 22}]
</script>

7.其他方法

数组反转 reverse() 将当前数组反转,会改变当前数组

<script>
  var arr = [1,2,3,4]
  arr.reverse()
  console.log(arr) // [4, 3, 2, 1]
</script>

剪接数组 splice() 会改变当前数组

可以删除任意数组元素,还可以向数组添加元素

语法:arr.splice(index,num,item1,item2...)

index:规定从何处添加/删除元素

num:删除多少元素

后面的参数可以是0个也可以是多个,表示要添加的数组元素

<script>
  var arr = [1,2,3,4]
  // 在下标3的位置添加数组元素
  arr.splice(3,0,5)
  console.log(arr) // [1, 2, 3, 5, 4]
  // 删除下标为1的数组元素
  arr.splice(1,1)
  console.log(arr) // [1, 3, 5, 4]
  // 从下标1的位置开始删除3个元素,并添加2个元素
  arr.splice(1,3,"life","good")
  console.log(arr) // [1, "life", "good"]
</script>

数组剪切 slice() 根据给定的下标,将两个下标之间的元素以数组形式返回,不会改变原数组

语法:arr.slice(n,m) 将arr[n]到arr[m-1]之间的元素以数组形式返回

<script>
  var arr = [1,2,3,4]
  // 不包含参数二对象的下标元素
  var newArr = arr.slice(1,3)
  console.log(newArr) // [2, 3]
  // 默认剪切到最后一个元素
  var newArr2 = arr.slice(1)
  console.log(newArr2) //[2, 3, 4]
  // 可接受负数
  var newArr3 = arr.slice(0,-1)
  console.log(newArr3) //[1, 2, 3]
</script>

拼接2个数组 concat()

不会改变原数组,而是将拼接后的新数组返回

<script>
  var arr = [1,2,3,4]
  var arr2 = [5,6,7,8]
  var newArr = arr.concat(arr2)
  console.log(arr) // [1,2,3,4]
  console.log(arr2) // [5,6,7,8]
  console.log(newArr) // [1, 2, 3, 4, 5, 6, 7, 8]
</script>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
提升PHP安全:8个必须修改的PHP默认配置
Nov 17 Javascript
深入理解JavaScript编程中的原型概念
Jun 25 Javascript
QQ登录背景闪动效果附效果演示源码下载
Sep 22 Javascript
微信js-sdk界面操作接口用法示例
Oct 12 Javascript
利用JavaScript实现栈的数据结构示例代码
Aug 02 Javascript
jQuery使用zTree插件实现可拖拽的树示例
Sep 23 jQuery
JS+HTML5 Canvas实现简单的写字板功能示例
Aug 30 Javascript
vue中利用simplemde实现markdown编辑器(增加图片上传功能)
Apr 29 Javascript
通过vue手动封装on、emit、off的代码详解
May 29 Javascript
javascript的惯性运动实现代码实例
Sep 07 Javascript
VUE+elementui面包屑实现动态路由详解
Nov 04 Javascript
node.JS事件机制与events事件模块的使用方法详解
Feb 06 Javascript
详解简单易懂的 ES6 Iterators 指南和示例
Sep 24 #Javascript
layui实现下拉复选功能的例子(包括数据的回显与上传)
Sep 24 #Javascript
基于layui的下拉列表的数据回显方法
Sep 24 #Javascript
Layui动态生成select下拉选择框不显示的解决方法
Sep 24 #Javascript
layui动态渲染生成select的option值方法
Sep 23 #Javascript
微信小程序全局变量GLOBALDATA的定义和调用过程解析
Sep 23 #Javascript
layui-select动态选中值的例子
Sep 23 #Javascript
You might like
php 生成唯一id的几种解决方法
2013/03/08 PHP
php将gd生成的图片缓存到memcache的小例子
2013/06/05 PHP
详细解读php的命名空间(二)
2018/02/21 PHP
php判断某个方法是否存在函数function_exists (),method_exists()与is_callable()区别与用法解析
2020/04/20 PHP
HR vs CL BO3 第一场 2.13
2021/03/10 DOTA
Zero Clipboard js+swf实现的复制功能使用方法
2010/03/07 Javascript
jquery插件 autoComboBox 下拉框
2010/12/22 Javascript
JS模拟面向对象全解(二、类型与赋值)
2011/07/13 Javascript
基于jquery的多彩百分比 动态进度条 投票效果显示效果实现代码
2011/08/28 Javascript
JQuery操作iframe父页面与子页面的元素与方法(实例讲解)
2013/11/20 Javascript
JS中自定义定时器让它在某一时刻执行
2014/09/02 Javascript
AngularJS入门知识之MVW类框架的编程思想探讨
2014/12/08 Javascript
jQuery实现提交按钮点击后变成正在处理字样并禁止点击的方法
2015/03/24 Javascript
浏览器中url存储的JavaScript实现
2015/07/07 Javascript
fastclick插件导致日期(input[type=&quot;date&quot;])控件无法被触发该如何解决
2015/11/09 Javascript
js清除浏览器缓存的几种方法
2017/03/15 Javascript
vue使用drag与drop实现拖拽的示例代码
2017/09/07 Javascript
使用rollup打包JS的方法步骤
2018/12/05 Javascript
在Python的Django框架中生成CSV文件的方法
2015/07/22 Python
Python的CGIHTTPServer交互实现详解
2018/02/08 Python
Python装饰器用法示例小结
2018/02/11 Python
Python3 实现随机生成一组不重复数并按行写入文件
2018/04/09 Python
Python装饰器语法糖
2019/01/02 Python
python计算Content-MD5并获取文件的Content-MD5值方式
2020/04/03 Python
UGG澳洲官网:UGG Australia
2018/04/26 全球购物
致短跑运动员广播稿
2014/01/09 职场文书
《诺贝尔》教学反思
2014/02/17 职场文书
桥梁工程专业求职信
2014/04/21 职场文书
抗洪救灾先进集体事迹材料
2014/05/26 职场文书
社区班子个人对照检查材料思想汇报
2014/10/07 职场文书
500字小学生检讨书
2015/02/19 职场文书
创业项目大全(适合在家创业的项目)
2019/08/15 职场文书
22句经典语录:送给优柔寡断和胡思乱想的朋友们
2019/12/13 职场文书
Oracle创建只读账号的详细步骤
2021/06/07 Oracle
Nginx实现负载均衡的项目实践
2022/03/18 Servers
Java中生成微信小程序太阳码的实现方案
2022/06/01 Java/Android