JS数组的相关知识

首先要明确一点,JS其实没有真正的数组,只是用对象来模拟数组。以下是典型数组与JS数组之间的不同。

典型的数组
  • 元素的数据类型相同
  • 使用连续的内存存储
  • 通过数字下标获取元素
JS数组
  • 元素的数据类型可以不同
  • 内存不一定是连续的(对象是随机存储的)
  • 不能通过数字下标,而是通过字符串下标
    例如
let  arr  =  [1,2,3]
arr ['xxx'] = 1

创建数组

新建一个数组

let arr = [1,2,3]

let arr = new  Array(1,2,3)

把不是数组的转化成为一个数组
可以利用split()方法
split()方法通过在指定分隔符字符串的每个实例处分离字符串,将String转换为字符串数组.

let  arr = '1,2,3'.split(',')

let  arr = '123'.split('')

Array.from('123')

合并两个数组,得到新的数组

arr1.concat(arr2)

截取一个数组的一部分

arr1.slice(1)     //注意是从第二个元素开始的

arr1.slice(0)   //全部拷贝

扩展

伪数组 : 没有数组共用属性的数组,即伪数组的原型链中并没有数组的原型。
例如

let   divList = document.querySelectorAll('div')

增删改查(指的是数组中的元素)

删除元素

删除元素与删除对象的方法差不多,只不过删除数组中的元素之后数组的长度并没有什么变化
例如:运行以下代码

let  arr = ['a','b','c']
delete arr['0']

会得到这样的结果


虽然删除了第一个元素,但是在第一个元素的位置上有一个empty元素,数组的长度其实并没有改变。
所以基于此,一般采取这样的方式来进行数组元素的删除操作

  • 删除头部元素
arr.shift()    //arr被修改,并返回被删元素
  • 删除尾部元素
arr.pop()   //arr被修改,并返回被删元素
  • 删除中间元素
    例如
let  arr = [1,2,3,4,5]
arr.splice(2,1)         //删除arr数组中位置是2的一个元素
arr.splice(2,1,'x')    //并在删除位置添加'x'
arr.splice(2,1,'x','y')   //并在删除位置添加'x','y'

查看所有元素

  • 查看所有属性名
let   arr = [1,2,3,4,5];   arr.x = 'xxx'

Object.keys(arr)

for(let  key  in  arr){console.log(`${key}:${arr[key]}`)}
  • 查看数字(字符串)属性名和值
for(let  i = 0;i<arr.length;i++){
       console.log(`${i}:${arr[i]}`)
}

注意:要自己让i从0增长到length-1

  • 也可以用forEach/map等原型上的函数
arr.forEach(function(item,index){
     console.log(`${index}:${item}`)
})

查看单个属性

  • 跟对象一样
let   arr = [111,222,333]
arr[0]

(这样写的话一般会出现问题)

  • 索引越界
arr[arr.length] ===undefined
arr[-1] ===undefined

例如:如下代码

for(let  i=0; i<=arr.length; i++){
   console.log(arr[i].toString())
}

会出现报错 : Cannot read property 'toString' of undefined
意思如下:你读取了undefined的toString属性,不是toString是undefined

注意 : x.toString()其中x如果是undefined就报这个错。

所以一般采取如下方式进行单个元素的查看

  • 查找某个元素是否在数组里
arr.indexOf(item)    //存在返回索引,否则返回-1
  • 使用条件查找元素
arr.find(item => item % 2 ===0)    //找第一个偶数
  • 使用条件查找元素的索引
arr.findIndex(item => item % 2 ===0)   //找第一个偶数的索引
扩展
function  forEach(array,fn){
     for(let   i=0;  i<array.length;i++){
         fn(array[i] , i , array)
    }
}
  • forEach用for访问array的每一项
  • 对每一项调用fn(array[i], i , array)

增加数组中的元素

  • 在尾部加元素
arr.push(newItem)   //修改arr,返回新长度

arr.push(item1,item2)    //修改arr,返回新长度
  • 在头部加元素
arr.unshift(newItem)   //修改arr,返回新长度

arr.unshift(item1,item2)    //修改arr,返回新长度
  • 在中间添加元素
arr.splice(index,0,'x')       //在index处插入'x'

arr.splice(index,0,'x','y')

修改数组中的元素

  • 反转顺序
arr.reverse()     //修改原来数组
  • 自定义顺序
arr.sort((a,b) => a-b)

数组变换

  • map : n变n
    通过arr.map把数字变成星期
let arr = [0,1,2,2,3,3,3,4,4,4,4,6]
let arr2 = arr.map(item=>{return{0:'周日',1:'周一',2:'周二',3:'周三',4:'周四',6:'周六'}[item]})
console.log(arr2)
  • filter : n变少
    通过filter找出所有大于 60 分的成绩
let scores = [95,91,59,55,42,82,72,85,67,66,55,91]
let scores2 = scores.filter(item=>item-60>0?true : false)
console.log(scores2)

或者

let scores = [95,91,59,55,42,82,72,85,67,66,55,91]
let scores2 = scores.filter(n => n>= 60)
console.log(scores2) //  [95,91,82,72,85,67,66, 91]
  • reduce : n变1
    通过reduce算出所有奇数之和
let scores = [95,91,59,55,42,82,72,85,67,66,55,91]
let sum = scores.reduce((sum, n)=>{
 if(n%2===1){
   return sum+n
 }else{
   return sum
 }
},0)
console.log(sum)

或者可以这样写

let scores = [95,91,59,55,42,82,72,85,67,66,55,91]
let sum = scores.reduce((sum, n)=>{
  return n%2===0?sum:sum+n
},0)
console.log(sum) // 奇数之和:598 
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 216,692评论 6 501
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 92,482评论 3 392
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 162,995评论 0 353
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 58,223评论 1 292
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 67,245评论 6 388
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 51,208评论 1 299
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 40,091评论 3 418
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,929评论 0 274
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 45,346评论 1 311
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,570评论 2 333
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,739评论 1 348
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,437评论 5 344
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 41,037评论 3 326
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,677评论 0 22
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,833评论 1 269
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 47,760评论 2 369
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,647评论 2 354

推荐阅读更多精彩内容