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 相关文章推荐
一些有关检查数据的JS代码
Sep 07 Javascript
几个比较实用的JavaScript 测试及效验工具
Apr 18 Javascript
jQuery 打造动态渐变按钮 详细图文教程
Apr 25 Javascript
Javascript 自适应高度的Tab选项卡
Apr 05 Javascript
js jquery数组介绍
Jul 15 Javascript
模拟多级复选框效果的jquery代码
Aug 13 Javascript
JS模拟实现方法重载示例
Aug 03 Javascript
javascript 面向对象实战思想分享
Sep 07 Javascript
Three.js中网格对象MESH的属性与方法详解
Sep 27 Javascript
JavaScript实现二叉树的先序、中序及后序遍历方法详解
Oct 26 Javascript
vue+element-ui+ajax实现一个表格的实例
Mar 09 Javascript
如何编写一个 Webpack Loader的实现
Oct 18 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多态的实现详解
2013/06/09 PHP
Windows下安装PHP单元测试环境PHPUnit图文教程
2014/10/24 PHP
注释PHP和html混合代码的小技巧(分享)
2016/11/03 PHP
PHP基于mcript扩展实现对称加密功能示例
2019/02/21 PHP
动手学习无线电
2021/03/10 无线电
使用自定义setTimeout和setInterval使之可以传递参数和对象参数
2009/04/24 Javascript
一个简单的JavaScript 日期计算算法
2009/09/11 Javascript
下拉列表select 由左边框移动到右边示例
2013/12/04 Javascript
浅谈javascript 迭代方法
2015/01/21 Javascript
JavaScript获取表单内所有元素值的方法
2015/04/02 Javascript
JavaScript中Date对象的常用方法示例
2015/10/24 Javascript
jquery插件autocomplete用法示例
2016/07/01 Javascript
基于Bootstrap仿淘宝分页控件实现代码
2016/11/07 Javascript
jquery实现提示语淡入效果
2017/05/05 jQuery
Node解决简单重复问题系列之Excel内容的获取
2018/01/02 Javascript
JS获取浏览器地址栏的多个参数值的任意值实例代码
2018/07/24 Javascript
解决vue props 拿不到值的问题
2018/09/11 Javascript
关于angular 8.1使用过程中的一些记录
2020/11/25 Javascript
[50:17]Newbee vs Serenity 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/18 DOTA
基于Python的身份证号码自动生成程序
2014/08/15 Python
django基础之数据库操作方法(详解)
2017/05/24 Python
python smtplib模块自动收发邮件功能(一)
2018/05/22 Python
python后端接收前端回传的文件方法
2019/01/02 Python
pycharm访问mysql数据库的方法步骤
2019/06/18 Python
python代码编写计算器小程序
2020/03/30 Python
python 用 xlwings 库 生成图表的操作方法
2019/12/22 Python
pandas to_excel 添加颜色操作
2020/07/14 Python
python中lower函数实现方法及用法讲解
2020/12/23 Python
函数指针的定义是什么
2016/08/14 面试题
工商管理实习自我鉴定
2013/09/28 职场文书
茶叶店创业计划书范文
2014/01/19 职场文书
企业内控岗位的职责
2014/02/07 职场文书
情人节活动策划方案
2014/02/27 职场文书
义和团口号
2014/06/17 职场文书
党建工作整改措施
2014/10/28 职场文书
简历上的自我评价,该怎么写呢?
2019/06/13 职场文书