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 02 Javascript
jquery增加时编辑jqGrid(实例代码)
Nov 08 Javascript
window.location 对象所包含的属性
Oct 10 Javascript
JavaScript学习笔记之JS对象
Jan 22 Javascript
Ionic默认的Tabs模板使用实例
Aug 29 Javascript
JS正则替换掉小括号及内容的方法
Nov 29 Javascript
详解angularjs利用ui-route异步加载组件
May 21 Javascript
JavaScript中in和hasOwnProperty区别详解
Aug 04 Javascript
JavaScript使用ul中li标签实现删除效果
Apr 15 Javascript
JavaScript RegExp 对象用法详解
Sep 24 Javascript
详解如何在Javascript和Sass之间共享变量
Nov 13 Javascript
vuejs中父子组件之间通信方法实例详解
Jan 17 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编程效率的53个要点(经验小结)
2010/09/04 PHP
PHP Web木马扫描器代码分享
2015/09/06 PHP
总结PHP内存释放以及垃圾回收
2018/03/29 PHP
php 输出缓冲 Output Control用法实例详解
2020/03/03 PHP
Javascript中的匿名函数与封装介绍
2015/03/15 Javascript
jQuery.extend 函数及用法详细
2015/09/06 Javascript
jqPlot jQuery绘图插件的使用
2016/06/18 Javascript
jQuery实现右下角可缩放大小的层完整实例
2016/06/20 Javascript
使用gulp搭建本地服务器并实现模拟ajax
2017/04/05 Javascript
微信小程序中使用Promise进行异步流程处理的实例详解
2017/08/17 Javascript
通过button将form表单的数据提交到action层的实例
2017/09/08 Javascript
基于模板引擎Jade的应用(详解)
2017/12/12 Javascript
webpack 打包压缩js和css的方法示例
2018/03/20 Javascript
js实现烟花特效
2020/03/02 Javascript
es6函数之严格模式用法实例分析
2020/03/17 Javascript
vue-cli3 热更新配置操作
2020/09/18 Javascript
微信小程序实现签到弹窗动画
2020/09/21 Javascript
vue 解决mintui弹窗弹起来,底部页面滚动bug问题
2020/11/12 Javascript
[02:42]DOTA2城市挑战赛收官在即 四强之争风起云涌
2018/06/05 DOTA
[04:51]TI10典藏宝瓶Ⅱ外观视频展示
2020/08/15 DOTA
详解Django定时任务模块设计与实践
2019/07/24 Python
python如何保证输入键入数字的方法
2019/08/23 Python
简单了解Django ORM常用字段类型及参数配置
2020/01/07 Python
CSS3中的5个有趣的新技术
2009/04/02 HTML / CSS
很酷的小工具和电子产品商城:GearBest
2016/11/19 全球购物
美国时尚女装在线:Missguided
2016/12/03 全球购物
美国顶级品牌男士大码服装店:DXL
2017/08/30 全球购物
Harrods美国:英国最大的百货公司
2018/11/04 全球购物
Ajax的工作原理
2015/12/04 面试题
园艺师求职信
2014/03/10 职场文书
挂牌仪式策划方案
2014/05/18 职场文书
孩子教育的心得体会
2014/09/01 职场文书
个人借款协议书范本
2014/11/17 职场文书
毕业欢送会致辞
2015/07/29 职场文书
Nginx的rewrite模块详解
2021/03/31 Servers
JDK8中String的intern()方法实例详细解读
2022/09/23 Java/Android