JS数组基本解析

第一部分: 定义阐述

  • 数组的定义:
  • 数组就是值的有序集合.
    每个值所在数组中的位置称为 索引
  • 表现形式: 就是内存中的一段连续的内存地址
    数组名称其实就是连续内存地址的首地址
  • 数组的创建:

① 构造函数

var newArr = new Array();
newArr[0] = 2;
newArr[1] = 'li';
newArr[2] = 'wang';

构造函数简洁方法:

var newArr = new Array('zhang','wang','liu');

③ 字面量写法(推荐)

var newArr = ['left','middle','right'];
  • 数组特点:

①: 包容性: 数组的值可以是任意类型.

var arr = [1,'hello',true,{name: 'li', age: 23},['wang','25']]

②: 弹性: 可根据需求增长或缩短.

// 把数组的length = 0. 会直接清除数组里所有元素值
var arr = [1,2,3,4]
arr.push(5,6) //  [1, 2, 3, 4, 5, 6]
console.log(arr) // 
arr.length = 0
console.log(arr) // []  输出一个空数组

③: 稀疏性: 数组的值可以不一定是连续的.

var arr = [1,2,3,4]
arr[100] = 100
console.log(arr) // [1,2,3,4,...undefined*95...,100]

// 小知识点: 数组索引值可以为负值,但遍历数组时,索引值为负值的,不被算入长度
var arrNegative = [1,2,3,4,5]
arrNegative[-3] = -3  // 负索引赋值
console.log(arrNegative)  // [1, 2, 3, 4, 5, -3: -3]
console.log(arrNegative.length) // 5  (长度仍然是5)

第二部分

为了方便记忆,我们把字符串的基本方法先分类: 查 ,增, 删, 改, 转.

查:

方法 功能 释    意
arr[index] 查索引 通过数组名+ 中括号[索引值]里面的来访问所在的元素或值
.indexOf() 查位置 查询返回特定元素在数组中的索引值,匹配不到则返回 -1
.length 查长度 用.length 可以返回 数组的长度值.
includes() 查存在 判定是否存在一个指定的值, 存在返回true,不存在为false
isArray() 查类型 完整用法:Array.isArray(arrObj) , 数组则返回true, 非数组则返回false
"查"类案例:
  • arrName[index]
var arr = [1,2,3,true,false,'a','b','c',{name: 'li',age: 16}]

console.log( arr[1] ) // 2
console.log( arr[3] ) // true
console.log( arr[6] ) // "b"
console.log( arr[8] ) // {name: "li", age: 16}
  • arrName.indexOf(Element)
var arr = [1,2,3,true,false,'a','b','c',{name: 'li',age: 16}]

console.log( arr.indexOf( 'a' )) // 5
console.log( arr.indexOf( {name: 'li',age: 16} )) // -1 注意indexOF()方法不接受对象类型参数,一律返回 -1 

//在数组中查找所有出现的x，并返回一个包含匹配索引的数组
function findAll(a,x){
  var results=[],
      len=a.length,
      pos=0;
  while(pos<len){
    pos=a.indexOf(x,pos);
    if(pos===-1){//未找到就退出循环完成搜索
      break;
    }
    results.push(pos);//找到就存储索引
    pos+=1;//并从下个位置开始搜索
  }
  return results;
}
var arr=[1,2,3,1,4,1,4,1];
findAll(arr,1);//返回[0,3,5,7]
  • arrName.length
var arr = [1,2,3,true,false,'a','b','c',{name: 'li',age: 16}]
console.log(arr.length) // 9  如果是空数组则返回 0 .
  • arrName.includes( value )
var arr = [1,2,3,true,false,'a','b','c',{name: 'li',age: 16}]
var obj1 = {name: "li", age: 16}
console.log( arr.includes( obj1 ) // false　注意这个方法不能判断数组里对象类型的存在.
console.log( arr.includes( 'a' )) // true
  • arrName.isArray( arrName )
var arr = [1,2,3,true,false,'a','b','c',{name: 'li',age: 16}]
console.log( Array.isArray(arr) ) //  true

增

在数组里, 经常需要对数组进行添加元素, 除了最直观的队尾,队首添加.还需要其他一些操作来满足我们对数组的操作.

方法 返回值 描   述 原数组是否改变
concat() 被连接数组的副本 连接两个或更多的数组,结果返回给新数组变量 否
push() 新原数组的长度 向数组的末尾添加一个或多个元素 是
unshift() 新原数组的长度 向数组的开头添加一个或多个元素 是
splice() 被删除的元素 向数组插入/删除/替换元素 是
  • concat ()

连接数组用法实例:
① 一个数组
② 多个数组
③ 增添多个元素

var arr = [1,2,3,'a','b',['A','B','C']]
var arr1 = ['li','liu','wang']
    //  ①连接一个数组
var concatArr = arr.concat(arr1)
console.log( concatArr ) // [1, 2, 3, "a", "b", Array(3), "li", "liu", "wang"]
console.log( arr ) // [1, 2, 3, "a", "b", ["A", "B", "C"]] //  原数组不变
   //  ②连接多个数组
var arr2 = ['age','name','sex']
var concatArrs = arr.concat(arr1,arr2)
console.log( concatArrs ) // [1, 2, 3, "a", "b", ["A", "B", "C"], "li", "liu", "wang", "age", "name", "sex"]
 //  ③也可以把元素当成数组,'续'给数组的末尾
var concatArrEle = arr.concat('zhang','zhou')
console.log( concatArrEle ) // [1, 2, 3, "a", "b", ["A", "B", "C"], "zhang", "zhou"]

注意: 使用 "+" 号运算符, 不能连接数组, 会把数组转换成 字符串

var arr = [1,2,3]
var arr1 = [4,5,6]

arr[3]= 'li'
console.log(arr) // [1, 2, 3, "li"]


var plusArr = arr + arr1 
console.log( plusArr ) // "1,2,3,li4,5,6"

var plusArr1 = arr+'wang'
console.log( plusArr1 ) //"1,2,3,liwang"

var plusArr2 = arr+''
console.log( plusArr2 ) //"1,2,3,li"
  • push()
var arr = [1,2,3,'li']
console.log( arr.push(4,5) ) // 6
console.log( arr ) // [1, 2, 3, "li", 4, 5]  原数组改变

var obj = [{name: 'li',age: 20}]
console.log( arr.push(obj)) // 7 
console.log( arr ) // [1, 2, 3, "li", 4, 5, [{age: 20,name: "li"}]]  支持多种类型添加到数组尾部
  • unshift()
var arr = [11,22,44,55,33]

var unshift = arr.unshift(66)
console.log( unshift) // 6 插入元素后新数组的长度
console.log(arr) // [11, 22, 44, 55, 33]  // 元素数组改变

// 可以插入多个,多种类型的元素
arr.unshift('姓名','学号',{age: 18, name: "MG"})
console.log(arr) //  ["姓名", "学号", {age: 18,name: "MG"}, 66, 11, 22, 44, 55, 33]
  • splice(statr-index,length,element,....)

start-index: 起始位置
length: 是插入/替换的长度
element: 插入数组的元素

var arr= [1,2,3,4,'a','b']
var newArr = arr.splice(2,0,'c','d')

console.log(arr) //   [1, 2, "c", "d", 3, 4, "a", "b"]
console.log(newArr) // [] 第二个参数为0,所以返回一个空数组

删

方法 返回值 描   述 原数组是否改变
pop()         最后一个元素 删除并返回数组的最后一个元素 是, 原数组长度-1
shift()         第一个元素 把数组第一个元素抛出来 是,原数组长度-1
delete         true或false 把数组下标所占的内存清空 是,原数组被delete的下标变为 undefined,原数组长度保持不变
slice()         被切取的子项目段的数组, 前标n1 (包括n1) 到 前标 n2(不包括n2) 切取数组的一部分数组子项目段 否
splice()         被删除的元素组成的数组 向数组插入/删除/替换元素 是

·实例演示；·

  • pop()

pop在英文里有泡泡的意思..
在JS 里, 可以理解为 数组里的元素都是泡泡..泡泡冒出水面 就是 消失掉.
用法: ```arrayObject.pop()``

tips:

如果数组已经为空，则 pop() 不改变数组，并返回 undefined 值。(判定数组是否为空方法之一)

var arr = [1,2,3,4,'a','b','c']

var pop = arr.pop()
console.log(pop) // "c" 抛出最后一个元素
console.log(arr) // [1, 2, 3, 4, "a", "b"] 园数组长度减1


  • shift()

把 数组 第一个元素 给 转(抛出,挪出) 出去..原数组长度-1.
用法: arrayObject.shift()

tips:

如果数组是空的，那么 shift() 方法将不进行任何操作，返回 undefined 值

var arr = [1,2,3,4,'a','b','c']

var shift = arr.shift()
console.log(shift) // 1 抛出最后一个元素
console.log(arr) // [2, 3, 4, "a", "b", "c"] 园数组长度减1


  • delete

清除数组下标值在 内存栈值. 数组长度不变.
用法: delete array[index]

var arr = [1,2,3,4,'a','b','c']

console.log(delete arr[3]) // true 成功清除组下标3的元素的栈内存
console.log(arr) // [1, 2, 3, undefined, "a", "b", "c"] 被删除的下标为undefined


  • slice()

slice 在英文里 有 把…切成 的意思..
在JS数组里, 我们可以理解成 用一个透明胶把数组一片段给 胶 出来. 它还是个数组.

用法: arrayObject.slice(start,end)

var arr = [1,2,3,4,'a','b','c']
var slice = arr.slice(2,4)
console.log( slice ) // [3, 4] 复取(复制获取)数组下标2到下标4(不包括下标4)的片段值再组成数组.
console.log( arr ) //  [1, 2, 3, 4, "a", "b", "c"] 原数组不变.

slice拓展:

slice()的参数可以接受负数, 这个负值表示倒数元素的索引值

var arr = [1,2,3,4,'a','b','c']
var slice1 = arr.slice(2,-1)
console.log( slice1 ) // 3, 4, "a", "b"]  复取(复制获取)下标2到下标倒数-1之间的数组段.


  • splice()

数组删减替换的万能函数.
做删除的时候.关键是 第三个参数一定要为0.(代表替换的元素不存在)
用法: arrayObject.splice(start,length,element)

var arr = [1,2,3,4,'a','b','c']
var splice = arr.splice(2,3,0) 
console.log( splice ) // [3, 4, "a"] 从下标2开始 (包括自己)长度为3的数组.
console.log( arr ) // [1, 2, 0, "b", "c"] 原数组改变.长度减去参数2.




改

改 引申为: 元素的改变.替换. 元素顺序的改变调整

方法 返回值 描   述 原数组是否改变
fill()         替换后数组 将一个固定值替换数组所有的元素 是
copyWith()         替换后数组 于从数组的指定位置拷贝元素到数组的另一个指定位置中 是
reverse()        原数组颠倒后的新数组 颠倒数组中元素的顺序 是
splice()        被替换的元素组成的数组插入功能是返回空数组 向数组插入/替换/删除/元素 是
sort()        排序后的数组直接在原数组上排序 对数组的元素进行排序 是


  • fill()

将一个固定值替换数组所有的元素
用法: array.fill(value, start, end) 注:替换的元素不包括下标为start元素, 但包括end所在元素
注意: start,end参数 可选..如果不填写.表示全部数组元素替换成参数value

var arr = [1,2,3,4,'a','b','c']

var fill = arr.fill('apple',2,5)
console.log(fill ) //  [1, 2, "apple", "apple", "apple", "b", "c"] 下标3 4 5 替换成 value值
console.log( arr ) // [1, 2, "apple", "apple", "apple", "b", "c"] 原数组改变

如果不填写参数start 和 end , 表示全部替换 ..如下:

var arr = [1,2,3,4,'a','b','c']
var fill = arr.fill('banana')
console.log( fill ) // ["banana", "banana", "banana", "banana", "banana", "banana", "banana"]


  • copyWhthin()

从数组的指定位置拷贝元素到数组的另一个指定位置中
用法: array.copyWithin(target, start, end)

参数.png

注意: 拷贝范围 包括start下标元素, 但不包含end所在下标元素

var arr = [1,2,3,4,'a','b','c']

var copyWithin = arr.copyWithin(3,0,2)
console.log( copyWithin ) // [1, 2, 3, 1, 2, "b", "c"] 选择范围为 下标0到2(不包括2下标元素), 从 索引值3开始 替换.
console.log( arr ) // [1, 2, 3, 1, 2, "b", "c"] // 原数组改变


  • reverse()

reverse() 方法用于颠倒数组中元素的顺序,并改变原数组
用法: arrayObject.reverse()

var arr = [1,2,3,4,'a','b','c']
var reverse = arr.reverse()
console.log( reverse ) // ["c", "b", "a", 4, 3, 2, 1]
console.log( arr ) // ["c", "b", "a", 4, 3, 2, 1] // 原数组改变


  • splice()

数组删减替换的万能函数.
做替换的时候.关键是 第三个参数..
用法: arrayObject.splice(start,length,element)

start-index: 起始位置
length: 是插入的长度 注意 插入功能的话 第二个参数值要为0.表示不替换的任何元素
element: 插入数组的元素插入的个数不能超过length

var arr = [1,2,3,4,'a','b','c']
var splice = arr.splice(4,0,5,6,7) // 插入功能 第二个参数要为 0 .

console.log( splice )  // []没有替换任何元素..返回空数组
console.log( arr ) // [1, 2, 3, 4, 5, 6, 7, "a", "b", "c"] 原数组改变


  • sort()

它能对数组的元素进行排序

① 默认按字母升序排列
② 按数字开头的大小进行升序排列,如果是两位数以上.则要调用函数作为参数.

字母

var sort = arr.sort()
console.log(sort) // ["apple", "banana", "orange", "watermelon"] 默认按字母的升序排列

数字
如果是个位数排序,可以不传递函数参数

var arr2 = [20,23,32,49,7,9,16]
var sort2 = arr2.sort(function(x1,x2){
  return x1-x2 //升序 [7, 9, 16, 20, 23, 32, 49]
  // return x2-x1 //降序 [49, 32, 23, 20, 16, 9, 7]
})

console.log( sort2 ) // [7, 9, 16, 20, 23, 32, 49]




转

转 引申为: 数组类型转换成其他类型


  • 数组转数字

第一种: 改变数组元素的类型
效果

['1','2','3'] => [1,2,3]

    方法

var map = arr.map(Number)
console.log( map ) // [1, 2, 3, 4, NaN, NaN, NaN] 非数字类型转为为NaN

    第二种: 将数字数组转化成纯数字
效果

arr[1,2,3] => 123

    方法

function number(arr){
　　var sum=0
　　var arr3=arr.reverse();
　　for(var i=0;i<arr3.length;i++){
　　　　var num=arr3[i]*Math.pow(10,i)
　　　　sum+=num;
　　}
　　return sum;
}

var arr = [1,2,3]
console.log( number(arr) ) // 123


  • 数组转字符串

方法一: arr.toString()
原数组不改变

var arr = [1,2,3,4,'a','b','c']

var toString = arr.toString()
console.log( toString ) // "1,2,3,4,a,b,c"

拓展: toString 对于多重数组可以起到去重作用

var arr = [[1],[2,3],[4,'a'],['b','c']]

var toString1 = arr.toString()
console.log(toString1  ) // "1,2,3,4,a,b,c"

方法二: 空数组 + 数组
原数组不改变

var arr = [1,2,3,4,'a','b','c']
var newArr = [] + arr
console.log( newArr) // "1,2,3,4,a,b,c"

方法三: join()
join()还可以指定传递一个参数作为分隔符,原数组不变
当不传递参数时,默认为丢分隔符为逗号","'

var arr = [1,2,3,4,'a','b','c']

var join = arr.join()
var join1 = arr.join("-")
console.log( join ) // "1,2,3,4,a,b,c" // 不传递参数时,默认为丢分隔符为逗号
console.log( join1 ) // "1-2-3-4-a-b-c"


  • 数组转对象

方法一: for( x in arr ) 赋值

var obj = {};
var arr = [1,2,3,4,5];
for (var x in arr){
obj[x] = x;
}

console.log( obj ) // { 0: "0", 1: "1", 2: "2",3: "3",4: "4"}

方法二: arrayToObj(arr){} 函数

var arr = [
  {name: 'li',age: 18},
  {sex: 'male', other: 'none'}
]
function arrayToObj(arr){
 
    return Object.assign({},arr);
}
console.log( arrayToObj(arr) ) 
// {
//   0: [object Object] {
//     age: 18,
//     name: "li"
//   },
//   1: [object Object] {
//     other: "none",
//     sex: "male"
//   }
// }

遍历

  • forEach()
    forEach() 方法用于调用数组的每个元素，并将元素传递给回调函数。
    它改变原数组.
    语法: array.forEach(function(currentValue, index, arr), thisValue) 
var numArr = [1,2,3,4,5,6]
numArr.forEach(function(value,index,arr){
   arr[index] = value + 1
})

console.log( numArr  )
  • map()
    它创建一个新的数组..不会对元素组做出改变.
    它能对数组每一个元素进行遍历操作..可以针对 数组里每一个元素进行操作..
    map()接受一个函数.这个函数里能传递三个参数: currentValue, index,arr
    语法: array.map(function(currentValue,index,arr), thisValue) 
var arr = [1,2,3,4,'a','b','c']

var mapArr = arr.map( function(currentValue,idx,arr){
  return currentValue+2
} ) 

console.log( mapArr ) // [3, 4, 5, 6, "a2", "b2", "c2"]
console.log( arr ) // [1, 2, 3, 4, "a", "b", "c"] 原数组不发生改变
  • every()

对数组里没有元素,进行判断.
只有全部为true,时候才返回ture, 当遇到一个为false就停止运行.返回false
语法: arr.every( function(value,index,arr){ ... } ) 注意:参数index,arr可选

var arr = [1,2,3,4,5]
console.log(  arr.every(function(value,index){return value>0 ? true:false}) ) // true

var arr1 = [1,4,-3,5]
console.log( arr1.every(function(value,index){return value>0 ? true:false}) // false
 )
  • some()
var arr = [1,2,-1,4,5]
arr.some( function(value,index){ value<4?true:false })
console.log( arr.some( function(value,index){ return value<0?true:false }) ) // true 有一个元素 -1 < 0 .成立, 返回true
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 212,686评论 6赞 492
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 90,668评论 3赞 385
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 158,160评论 0赞 348
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 56,736评论 1赞 284
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 65,847评论 6赞 386
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 50,043评论 1赞 291
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 39,129评论 3赞 410
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 37,872评论 0赞 268
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 44,318评论 1赞 303
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,645评论 2赞 327
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,777评论 1赞 341
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 34,470评论 4赞 333
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 40,126评论 3赞 317
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,861评论 0赞 21
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,095评论 1赞 267
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 46,589评论 2赞 362
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 43,687评论 2赞 351