数组常用的方法(es4,es5,es6)

1.什么是数组

存储一组关联数据

2.数组定义方式

    1.数组直接变量(常用)

var arr = [] ;
var arr2 = [10,20,30];

    2.也可以通过new来创建

var arr3 = new Array()；
var arr4 = new Array(10,20,30)
console.log(arr4) // [ 10, 20, 30 ]

3.数组访问

数组名[下标(索引)] 索引0 1 2 3....

数组的长度可以通过数组名.length访问

4.数组元素的遍历

   1.for循环

for(var i=0; i<arr4.length; i++) {
     console.log(arr4[i]);   
 }

2.for in 对对象进行访问,数组也是对象

var arr4 = [1,3,9,11];
for(var i in arr4) {
     console.log(i+":"+arr4[i]); // i 0 1 2 3 数组下标 
     //console.log(arr4[i]);    
 }

例如:

var obj = {
     a: 100,
     b: 200
 }
 for(var k in obj) {
     console.log(k); // 打印为 a , b
     //console.log(obj.k); 用法错误，k是变量，只能通过[]
     console.log(obj[k]);  
 }

伪数组.

数组的元素可以是任何合法的值.甚至元可以是数组

var arr = [[10,20],30,40];

数组操作

push()

向数组的末尾端一个或者是多个元素,原数组变为添加后的数组,返回值是改变后的数组长度

var arr = [1, 2, 3];
// arr[arr.length] = 4;
var res = arr.push(4, 5);
console.log(arr); // [ 1, 2, 3, 4, 5 ]
console.log(res);  //5

unshift()

在数组前面添加一个或多个元素,原数组变为添加后的数组,返回值是改变后的数组长度

var arr = [1, 2, 3];
var res2 = arr.unshift(10, 20);
console.log(arr);  // [10,20,1,2,3,4,5]
console.log(res2);  // 5

pop()

删除数组的最后一个元素,返回被删除的元素,没有参数,原数组为删除后的数组

var arr = [1, 2, 3];
var res3 = arr.pop();
console.log(arr);  // [ 1, 2 ]
console.log(res3); // 3

shift()

删除数组的第一个元素,返回被删除后的元素,他也没有参数,原数组变为删除后的数组

var arr = [1, 2, 3];
var res4 = arr.shift();
console.log(arr);  // [ 2, 3 ]
console.log(res4); // 1

splice()

可以删除 和 添加 元素  例如下:

function fnSplice() {
    var arr = [11, 34, 32, 56, 37];
    // 1 从角标为1开始删除2个元素，返回值是删除元素组成的数组，原数组变为删除后的数组
    // var res1 = arr.splice(1,2);
    // console.log(arr);  // [ 11, 56, 37 ]
    // console.log(res1); // [ 34, 32 ]
    
    //  2 从角标为2开始，添加元素，第二个参数为0，返回值是删除元素组成的数组
    // var res2 = arr.splice(2,0,10);
    // console.log(arr);  // [ 11, 34, 10, 32, 56, 37 ]
    // console.log(res2); // []
    
    // 3 替换，返回值是被替换的数组，原数组变为替换后的数组
    var res3 = arr.splice(2, 2, 100, 200);
    console.log(arr);  // [ 11, 34, 100, 200, 37 ]
    console.log(res3); // [ 32, 56 ]
}
fnSplice();

slice()

作用:截取数组

返回值:返回一个新的数组(截取的) , 原数组不改变

参数:start 从什么位置开始

        end截至位置不包括end; 如果没有end,切分的数组包含从start到数组结束的所有元素

var arr = [10, 20, 30, 40];
var res = arr.slice(1, 3);
console.log(arr, res);  //[ 10, 20, 30, 40 ] [ 20, 30 ]
//console.log(arr.slice(2));  [30, 40] 

concat()

链接数组: 返回是一个新数组,原数组不改变

var arr3 = [1, 2, 3];
var arr4 = [4, 5, 6];
var arr5 = [7, 8, 9];
var arr6 = arr3.concat(arr4, arr5, 10);// [1,2,3,4,5,6,7,8,9,10]
console.log(arr6);

reverse()

对数组元素进行逆行,会改变原数组,返回值就是原数组改变后的结果

var arr3 = [1, 2, 3];
var res4 = arr3.reverse();
console.log(arr3);  //[3,2,1]
console.log(res4);  //[3,2,1]
console.log(res4 === arr3); // true
 
var arr7 = [];
for (var i = 0; i < arr3.length; i++) {
    arr7.push(arr3[i]);
}
//console.log(arr7); [1,2,3]
//逆序原理
var index = 0;
for (var i = arr7.length - 1; i >= 0; i--) {
    arr3[index++] = arr7[i];
}
console.log(arr3);

  Es5数组操作

   forEach()

  对数组进行遍历,没有返回值:

var arr = [10,30,50,70];
arr.forEach(function(item,index,arr) {
    //item表示元素、index表示下标、arr为数组
    //console.log(item,index); // 10 0
    //console.log(arr);  
    if(item >= 20) {
        console.log(item);    
    }
});
// 找数组中最小值
var arr2 = [-2,34,0,-5,6];
var min = arr2[0];
arr2.forEach(function(item,index,arr) {
    if(item < min) {
        min = item;
    }
});
alert(min);

indexOf()

判断一个元素是否在数组中,存在的话,返回元素所在数组下标,不存在返回-1

var arr2 = [-2,34,0,-5,6];
var index = arr2.indexOf(34);
var index2 = arr2.indexOf(134);
console.log(index,index2); // 1 -1
 
// 练习 数组去重  [10,23,10,34,23,11] 返回 [10,23,34,11]
var arr = [10,23,10,34,23,11];
var res = [];
arr.forEach(function(item, index, arr) {
    if(res.indexOf(item) === -1) {
        res.push(item);
    }
});
console.log(res);

filter()

对原数组进行过滤,每次函数返回值为true对应的元素组成一个新数组,原数组不变

var array = [10,23,21,34,44,88];
var res = array.filter(function(item,index,arr) {
    console.log(item);
    return item%2 === 0; //控制返回的值，保留偶数，return 1 为全部保留，0为都不保留
});
console.log(res); // [ 10, 34, 44, 88 ]
console.log(array); // [ 10, 23, 21, 34, 44, 88 ]

reduce()

array.reduce(function(total, currentValue, currentIndex, arr), initialValue)

Es6数组操作:

Array.from()

把数组或类数组传化成数组,并复制一份

function fn() {
     //下面两种方式将....转为数组 
     let arr = Array.from(arguments);
     //let arr = [...arguments];
     console.log(arr);  
}
fn(1,2,3);

Array.of()

给数组添加值

console.log(new Array(3).length);// [,,]  其中3代表长度 长度为3
 
console.log(Array.of(3).length);// 1     [3]  3是元素  长度为1
 
console.log(new Array(3,2));  // [3,2]
console.log(new Array(3,2).length); // 2

fill() 填充

let arr = [1,2,3,4,5]; 
arr.fill('a',1,3);  //[1,a,a,4,5]  用‘a’填充下标1-3（不包含3）
console.log(arr);

copyWithin() 替换

let arr2 = [1,2,3,4,5];
arr2.copyWithin(0,2,4);  
console.log(arr2); // [3, 4, 3, 4, 5]  用下标2-4（不包含4）的元素从0开始替换

find()  findIndex()  some()  every()

// find() findIndex() es5 some/every
let res = [2,3,3].findIndex(item => item > 1 );   //找到第一个返回值为true的值的下标作为返回值。找不到返回-1
console.log(res); // 0
        
let res2 = [1,2,3].some(item=>item>12);
console.log(res2);   //某个值大于12就返回true
        
let res3 = [1,2,3].every(item=>{
       console.log(123);   
       return item<2;    //每个值小于2就返回true
});
console.log(res3);

Es6  keys()  values()  entries()  遍历键名  遍历键值  遍历键名+键值

for (let index of ['a', 'b'].keys()) {
  console.log(index);
}
// 0
// 1    
for (let elem of ['a', 'b'].values()) {
  console.log(elem);
}
// 'a'
// 'b'    
for (let [index, elem] of ['a', 'b'].entries()) {
  console.log(index, elem);
}
// 0 "a"
// 1 "b"

手写filter map reduce方法

// filter 实现
function filter(arr, callback) {
    if(!Array.isArray(arr) || !arr.length || typeof callback !== 'function') {
        return [];
    } else {
        let res = [];
        for(let i=0; i<arr.length; i++) {
            // 返回结果为真
            if(callback(arr[i], i, arr)) {
                res.push(arr[i]);
            }
        }
        return res;
    }
}
 
// 实现 map 方法
function map(arr, callback) {
    if (!Array.isArray(arr) || !arr.length || typeof callback !== 'function') {
        return [];
    } else {
        let res = [];
        for (let i=0; i<arr.length; i++) {
            res.push(callback(arr[i], i, arr));
        }
        return res;
    }
}
 
// 实现 reduce
function reduce(arr, callback, initValue) {
    if(!Array.isArray(arr) || !arr.length || typeof callback !== 'function') {
        return [];
    } else {
        let hasInitValue = initValue !== undefined;
        let prexValue = hasInitValue ? initValue : arr[0];
 
        for (let i = hasInitValue ? 0 : 1; i < arr.length; i++) {
            prexValue = callback(prexValue, arr[i], i ,arr)
        }
        return prexValue;
    }
}