JS数组相关操作

自学前端 专栏收录该内容
2 篇文章 0 订阅

数组的添加

var arr = [];
arr[0] = 1;
arr[1] = 2;
arr.push(3)  //  添加到末尾
arr; // [1,2,3]

arr[arr.length] = 4 // 相当于 equal to arr.push(4)
arr;  // [1,2,3,4]

arr.unshift(0)  // 在首位添加一个元素
arr; // [0,1,2,3,4]  

数组的删除

delete arr[2]
arr; // [0,1,undefined,3,4]
arr.length = 5
2 in arr // false

arr.length -= 1  // 也是移除最后一个
arr; // [0,1,undefined,3]

arr.pop() // 3 returned by pop
arr; // [0,1,undefined]  3 is removed

arr.shift() // 0 returned by shift 
arr; // [1,undefined]

数组方法

  • Array.prototype.join 数组拼接
  • Array.prototype.reverse 数组反转
  • Array.prototype.sort 排序
var arr = ['a','d','c','b']
arr.sort(); // ['a','b','c',d]

arr = [13,32,53,2]
arr.sort(); // [13,2.32,53]   原数组被修改  但是按照的是字符串进行的排序

arr.sort(function(a,b){
    return a - b
}) // [2,13,32,53]

arr = [{age:25},{age:59},{age:32}]
arr.sort(function(a,b){
    return a.age - b.age
})
arr.forEach(function(item){
    console.log('age',item.age)
}) // age 25  age 32  age 59
  • Array.prototype.concat
var arr = [1,2,3]
arr.contract(4,5) // [1,2,3,4,5]  会返回一个新的数组
arr // [1,2,3]   arr未被修改

arr.contract([10,11],13)  // [1,2,3,10,11,13]

arr.contract(1,[2,3]) // [1,2,3,1,[2,3]]
  • Array.prototype.slice // 返回部分数组
  • Array.prototype.splice // 数组拼接
var arr = [1,2,3,4,5]
arr.splice(2)  // returns [3,4,5]
arr; // [1,2]  原数组被修改

arr = [1,2,3,4,5]
arr.splice(2,2)  // returns [3,4]
arr[1,2,5]

arr = [1,2,3,4,5]
arr.splice(1,1,'a','b')  // returns [2]
arr;// [1,'a','b',3,4,5]
  • Array.prototype.forEach (ES5) 数组遍历 接受一个函数作为参数
var arr = [1,2,3,4,5]
arr.forEach(function(x,index,a){
    console.log(x = '|' + index + '|' + (a === arr)
}
// 1 | 0 | true
// 2 | 1 | true
// 3 | 2 | true
// 4 | 3 | true
// 5 | 4 | true
  • Array.prototype.map (ES5) 数组映射
var arr = [1,2,3]
arr.map(function(x){
    return x + 10
}) // [11,12,13]
arr // [1,2,3]  原数组没有被修改
  • Array.prototype.fliter (ES5) 数组过滤 原数组没有被修改
  • Array.prototype.every (ES5) 数组判断 每一个都符合条件才返回true
  • Array.prototype.some (ES5) 数组判断 任意一个符合条件就返回true
  • Array.prototype.reduce/reduceRight (ES5) 一个从左开始遍历 一个从右开始遍历
var arr = [1,2,3]
var sum = arr.reduce(function(x,y){
    return x + y
},0)  // 6
arr // [1,2,3]

arr = [3,9,6]
var max = arr.reduce(function(x,y){
    console.log(x +'|' + y)
    return x > y ? x : y
})  
// 3|9
// 9|6
max ;// 9
  • Array.prototype.indexOf/lastIndexOf (ES5)
  • Array.prototype.isArray (ES5) 判断是否为数组
Array.isArray([])  true

或者以下的方式
[] instanceof Array   // true
({}).toString.apply([]) === '[object Array]'  // true
[].constructor === Array  // true

数组 VS 一般对象

  • 相同
    • 都可以继承,数组是对象,对象不一定是数组,都可以当做对象添加和删除属性
  • 不同
    • 数组自动更新length,按索引访问数组常常比访问一般对象属性明显迅速,数组对象继承Array.prototype上的大量数组操作方法
  • 2
    点赞
  • 1
    评论
  • 0
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

相关推荐
©️2020 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值