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不会改变原数组