js数组笔记

一、定义

数组(array)是按次序排列的一组值。每个值的位置都有编号(从0开始)。整个数组用方括号表示,数组的值用','分割;数组的数据可以是任何类型。

本质上,数组属于一种特殊的对象,对应的键名也是字符串"0", "1", "2"。。。。

var arr = ['a', 'b', 'c'];

Object.keys(arr)
// ["0", "1", "2"]

二、获取数组值

只能通过arr[0]的方式来获取数组值。 因为单独的数值不能作为标识符,arr.0的写法不合法的。

var arr = [3, 4, 5, 6]
console.log(arr[3])      //6
console.log(arr[4])      //undefined

三、数组的基础操作

1、length属性

  • 1)可以直接设置length长度,没有具体数值的数组值,会以空位填充
  • 2)人为设置length小于当前数组长度,超过length长度的数组的成员会被删除 清空数组的方式,设置arr.length =0
var arr = [ 'a', 'b', 'c' ];
arr.length // 3

arr.length = 2;
arr // ["a", "b"]

2、in 运算符

1) 运算符in用于检查某个键名是否存在,适用于对象,也适用于数组。

var arr = [ 'a', 'b', 'c' ];
2 in arr  // true
'2' in arr // true
4 in arr // false

2) 如果数组的某个位置是空位,in运算符返回false

var arr = [];
arr[100] = 'a';

100 in arr // true
1 in arr // false

3、push (在数组最后再添加一个元素)

arr.push('jirengu')      //再数组最后添加一个元素
console.log(arr)         // [3, 4, 5, 6, 'hello', 'jirengu']

4、pop (删除数组最后一位并返回数值)

var value = arr.pop()    //把数组最后一位弹出来,返回 
console.log(value)       //'jirengu'

5、unshift (在数组第一位插入一个数值)

arr.unshift('ruoyu')     //在数组第一位新增
console.log(arr)         //['ruoyu', 3, 4, 5, 6, 'hello']

6、shift(删除数组第一位,并返回被删除值)

var value2 = arr.shift() //把数组第一位拿出来返回,数组发生变化
console.log(value2)      // 'ruoyu'

7、splice(替换数组的一部分,并把替换内容作为新数组返回)

var arr2 = arr.splice(1, 2) splice的第一个参数:截断开始的下标;splice的第二个参数:截断长度。之后的参数为替换的内容。原数组会会变化,截取的部分自动为一个数组返回。 用途一:截断数组

arr= [3, 4, 5, 6, 'hello']

var arr2 = arr.splice(1, 2)         //从下标为1的元素开始,拿出来2个元素作为一个数组返回,原数组发生改变
console.log(arr)         // [3, 6, 'hello']
console.log(arr2)        //  [4, 5]

用途二:替换数组内容

arr= [3, 6, 'hello']
arr.splice(1, 0, 8,9)    //从下标为1的位置(元素6)开始,删除0个,新增两个元素(在6前面新增8,9)
console.log(arr)         //[3, 8, 9, 6, 'hello']

7、slice(截取数组)

slice的第一个参数:开始截断的下标;slice的第二个参数:结束截断数组的下标(不包括这个数)。原数组不会变化

arr=[3, 8, 9, 6, 'hello']
var arr3 = arr.slice(2,3)           //从 arr 下标为2开始,到下标为3结束(不包括3),做为新数组,原数组不变
console.log(arr3)       // [9]
console.log(arr)        //[3, 8, 9, 6, 'hello']

8、join('-')(用某个符号连接数组所有的值,生成字符串)

原数组不变

arr=[3, 8, 9, 6, 'hello']

var str = arr.join('-')
console.log(str)        // "3-8-9-6-hello"
console.log(arr.join(',')); //"3,8,9,6,hello"

9、arr.concat(array) (连接两个数组)

concat方法用于拼接数组,a.concat(b)返回一个a和b共同组成的新数组。 不会修改任何一个原始数组

var a = [1,2,3,4,5];
var b = [6,7,8,9];
console.log(a.concat(b));//[1, 2, 3, 4, 5, 6, 7, 8, 9]
console.log(a); //[1, 2, 3, 4, 5]
console.log(b); //[6, 7, 8, 9]

10、reverse()数组逆序

用于将数组逆序,它会修改原数组

var a = [1,2,3,4,5];
a.reverse();
console.log(a); //[5, 4, 3, 2, 1]

11、sort(对数组进行排序)

1)没有参数,默认根据字符串Unicode码来排序。

var a=[5,4,3,2,1]
a.sort()
console.log(a) //[1, 2, 3, 4, 5]
var a=[7,8,9,10,11]
a.sort()
console.log(a) //[10, 11, 7, 8, 9]

2)可以自定义一个排序方式,如arr.sort([compareFunction]),比较规则如下

  • 如果 compareFunction(a, b) 小于 0 ,那么 a 会被排列到 b 之前;
  • 如果 compareFunction(a, b) 等于 0 , a 和 b 的相对位置不变
  • 如果 compareFunction(a, b) 大于 0 , b 会被排列到 a 之前

或者是按照true和false来判断,true的话就会调换位置。 3)原数组会改变

var a = [7,8,9,10,11]

    a.sort(function(v1,v2){
        return v1-v2
    })
    console.log(a) //[7, 8, 9, 10, 11]

    var users = [
        {
            name: 'aaa',
            age: 21
        },
        {
            name: 'baa',
            age: 18
        },
        {
            name: 'abc',
            age: 24
        }
    ]
    // 按age 从小到大排序

    var sortByAge = users.sort(function(v1, v2){
        return  v1.age > v2.age
    })

  // 按name从大到小排序
    var sortByName = users.sort(function(v1, v2){
        return  v1.name > v2.name
    })

四:ES5 数组拓展(注意驼峰写法)

1、Array.isArray(arr)判断是不是数组

这是Array对象的一个静态函数,用来判断一个对象是不是数组

var a = [];
var b = new Date();
console.log(Array.isArray(a)); //true
console.log(Array.isArray(b)); //false

2、indexOf(element)/ lastIndexOf(element)寻找数组是否有对应的内容

这两个方法用于查找数组内指定元素位置,查找到第一个后返回其索引,没有查找到返回-1,indexOf从头至尾搜索,lastIndexOf反向搜索。

var arr =[2,3,5,7,3,9]
arr.indexOf(3) //1

3、forEach(function(element,index,arry))遍历数组,对数组的每个元素执行一次提供的函数

1)原理:遍历数组,参数为一个回调callback函数,回调函数有三个参数:

  • element:数组当前项的值
  • index:数组当前项的索引(可选)
  • array:数组对象本身(可选)
  • thisArg:当执行回调 函数时用作this的值。如果给forEach传递了thisArg参数,当调用时,它将被传给callback函数,作为它的this值。否则,将会传入 undefined 作为它的this值(可选,爱用不用)

2)注意:

  • 数组内已删除或者未初始化的项不会遍历到
  • 返回值是:undefined,原数组会改变,这个和map和reduce不一样

3)举个例子

var arr=[1,2,5,6,8]
arr.forEach(function(e,i,arr){
arr[i]=e*e
})
console.log(arr)// [1, 4, 25, 36, 64]

4、map(function(element,index,arry))遍历数组,对数组的每个值执行函数操作,并把结果返回新数组

1)原理:遍历数组,对函数的每个值执行回调函数,返回值组成一个新数组。原数组不变 2)函数参数:

  • element:数组当前项的值
  • index:数组当前项的索引(可选)
  • array:数组对象本身(可选)
  • thisArg:执行 callback 函数时使用的this 值(可选)

3)返回值: 一个新数组,每个元素都是回调函数的结果

4)举个例子

var obj2 =[{ key:1,value:2},
          { key:4,value:8},
          { key:5,value:78}]
var array= obj2.map(function(obj){
var arr2=[]
 arr2[obj.key] =obj.value
return arr2})})        

5、filter(function(element,index,arry))遍历数组,对数组每一个元素执行callback函数,并将满足条件的值返回新数组

1)原理:遍历数组,对数组每一个元素执行callback函数,并将满足条件的值返回新数组。原数组不变 2)函数参数:

  • element:数组当前项的值
  • index:数组当前项的索引(可选)
  • array:数组对象本身(可选)
  • thisArg:执行 callback 函数时使用的this 值(可选)

3)返回值: 一个新的通过测试的元素的集合的数组,如果没有通过测试则返回空数组

4)举个例子

var a =[2,3,4,5,7,9,6]
console.log(a.filter(function(e){
return e%2==0
}))  //[2, 4, 6]

参考文献

6、reduce(function(v1, v2), value)遍历数组,对数组的值依次两两执行回调函数,将两个数组值合成一个值,reduce从索引最小值开始

1)原理:对累计器和数组中的每个元素(从左到右)应用一个函数,将其简化为单个值。 2)函数参数:

  • currentValue:数组中正在处理的元素
  • index:数组当前项的索引(可选)
  • array:数组对象本身(可选)
  • Accumulator (累计器):累计器累计回调的返回值; 它是上一次调用回调时返回的累积值,或initialValue(初始值)
  • initialValue(初始值)(可选)作为第一次调用 callback函数时的第一个参数的值。 如果没有提供初始值,则将使用数组中的第一个元素。在没有初始值的空数组上调用 reduce 将报错

3)返回值: 函数累计处理的结果

4)举个例子

var a = [1, 2, 3, 4, 5, 6]
var sumvalue= a.reduce(function(v1,v2){
return v1+v2})

将二维数组转化为一维

var flattened = [[0, 1], [2, 3], [4, 5]].reduce(
  function(a, b) {
    return a.concat(b);
  },
  []
);
// flattened is [0, 1, 2, 3, 4, 5]

mdn文档 5)要点 回调函数第一次执行时,accumulator 和currentValue的取值有两种情况:如果调用reduce()时提供了initialValue,accumulator取值为initialValue,currentValue取数组中的第一个值;如果没有提供 initialValue,那么accumulator取数组中的第一个值,currentValue取数组中的第二个值

7、every(function(element, index, array))测试数组的所有元素是否都通过了指定函数的测试

1)原理: every 方法为数组中的每个元素执行一次 callback 函数,直到它找到一个使 callback 返回 false(表示可转换为布尔值 false 的值)的元素。如果发现了一个这样的元素,every 方法将会立即返回 false。否则,callback 为每一个元素返回 true,every 就会返回 true 2)函数参数:

  • element:数组当前项的值
  • index:数组当前项的索引(可选)
  • array:数组对象本身(可选)
  • thisArg:执行 callback 函数时使用的this 值(可选)

3)返回值: true/false

4)举个例子

var a = [1, 2, 3, 4, 5, 6]

console.log(a.every(function(e){
return e>0}))  //true

5)every不会改变原数组 mdn

8、some(function(element, index, array))测试数组中的某些元素是否通过由提供的函数实现的测试

1)原理: some 为数组中的每一个元素执行一次 callback 函数,直到找到一个使得 callback 返回一个“真值”(即可转换为布尔值 true 的值)。如果找到了这样一个值,some 将会立即返回 true。否则,some 返回 false 2)函数参数:

  • element:数组当前项的值
  • index:数组当前项的索引
  • array:数组对象本身

3)返回值: true/false

4)举个例子

var a = [1, 2, 3, 4, 5, 6]

console.log(a.some(function(e){
return e>5}))  //true

5)some不会改变原数组

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

扫码关注云+社区

领取腾讯云代金券