JavaScript数组方法

149 阅读5分钟

一、基本类型和引用类型

  1. 数值、字符串、布尔值、undefined、null可以直接写出来,比较简单的数据称为基本类型,在比较的时候,是直接按值比较。
  2. 对象、函数、数组复杂的数据是引用类型,在比较的时候,是按照地址比较。
console.log([1] === [1]); //false

var a = []; //a其实存的是一个空数组的地址 引用
var b = a; //赋值也是 赋的这个引用
console.log(a == b); //ture

function fn(stu){
    stu.name = "张三"; //此时实参stu和形参stu指向同一个对象,按照地址,找到对象,改变名字
    stu = {name:"李四"}; //重新给形参stu赋值,和实参以及对象没有关系
}
var stu = {name:"王五"};
fn(stu); //传的是一个引用
console.log(stu.name); //张三

二、创建数组

  1. 创建数组的三种办法: new Array(), Array(), [],三种方式创建出来都是一样的。
  2. 数组的length可读可写。
var arr = [];//字面量
var arr = new Array(5); // array 的构造函数 [5] 创造一个空数组 长度为5
var arr = Array(1,2,3,5);// 内建函数  [5] 创造一个空数组 长度为5

var arr = [1,2,3,4,5,6,7,8];
arr.length = 0;
console.log(arr);

三、数组的常用方法

  1. indexOf:查找数组中是否有待查找的数据,返回索引值,若找不到则返回-1,第二个参数表示从字符串中的哪个位置(索引值)开始搜索。使用的是===,数据类型必须一致,不能是两个复杂数据类型直接比较,但可以用变量查找。
var arr = [3];
var arr1 = [1,2,3,4,5,arr,7,8];
console.log(arr1.indexOf(arr)); //5

var arr = [1,2,"3",4,5,6,7,8]; 
console.log(arr.indexOf(3)); //-1
console.log(arr.indexOf(4,-1)); //-1
  1. concat:数组的拼接,返回的是一个新数组,不会改变原数组,存储的引用类型为地址。
var arr = [1,2,3,[4]];
var arr1 = [6,7,8];
var arr2 = arr.concat(arr1); 
arr[3][0] = 10;
console.log(arr2);// [1,2,3,[10],6,7,8]
  1. join:把数组拼接成字符串,返回新字符串,不会改变原数组,默认用,拼接,接受传参为拼接符号。
var arr = [1,2,3,4,5,6];
var str = arr.join('^');
console.log(str); //1^2^3^4^5^6
  1. slice:提取数组的一部分,生成一个新的数组,不会改变原数组,从索引取到索引[)。
var arr = [1,2,3,4,5,6];
console.log(arr.slice(1,3)); //[2,3]

//将一个类数组转化为数组的两种方法
function add(){
    // console.log(arguments);
    // var arr = [];
    // for(var i=0;i<arguments.length;i++){
    //    arr[i] = arguments[i];
    // }
    // console.log(arr)
    // console.log(arguments);
		
    var arr = [].slice.call(arguments,0);
    console.log(arr);
}
add(1,2,3)
  1. Array.isArray():判断是否是数组。
  2. reverse:反转数组,改变原数组。
var arr = [1,2,3];
arr.reverse();
console.log(arr); //[3,2,1]

四、数组元素的删除和增加

  1. delete:会留下空位。
var arr = [1,2,3,4,5,6,7,8];
for(var i=0; i<arr.length; i++){
    delete arr[i];
}
console.log(arr); //[empty*8]
  1. pop:删除数组的最后一个元素,并且改变了原数组,返回值为删除的那个元素,不能传参。
var arr  = [1,2,3,4,5,6];
console.log(arr.pop()); //6
  1. shift:删除数组的第一个元素,并且改变了原数组,返回值为删除的那个元素,不能传参。
var arr  = [1,2,3,4,5,6];
arr.shift();
arr.shift();
console.log(arr); //[3,4,5,6]
  1. push:在末尾添加新元素,可以是多个,用逗号分隔,返回值是新数组的长度。
var arr  = [1,2,3,4,5,6];
console.log(arr.push(7,8,[111])); //9
console.log(arr); //[1,2,3,4,5,6,7,8,[111]]

var oBox = document.getElementById('box');
var stu = {name:'lisi',age:19};
[].push.call(stu,oBox); //有些数组方法 对象可以借用一下
console.log(stu);
  1. unshift:在开始添加新元素,可以是多个,用逗号分隔,返回值是新数组的长度。
var arr  = [1,2,3,4,5,6];
console.log(arr.unshift(7,8,[111]));
console.log(arr); //[7,8,[111],1,2,3,4,5,6]
  1. splice:删除/添加元素。arr.splice(index, num, item1, item2.....),index是从哪开始的下标,num是删除的个数,如果是0就不会删除,item可选,表示要添加的元素。
//删除
var arr = [1,2,3,4,5];
arr.splice(2,2);
console.log(arr); //[1,2,5]
//添加
var arr = [1,2,3,4,5];
arr.splice(2,0,"hello");
console.log(arr); //[1,2,"hello",3,4,5]
//删除并添加
var arr = [1,2,3,4,5];
arr.splice(2,1,"hello");
console.log(arr); //[1,2,"hello",4,5]

五、数组的排序

  1. sort:改变原数组,将原数组转化为字符串,然后按照Unicode编码进行排序。
var arr = ['我','wangwu','zhaoliu','qianqi','lucy'];
arr.sort();
console.log(arr);
  1. sort可以接受一个回调函数,参数是一个函数体,改变排序的规则。
var arr = [156,14,21,2];
arr.sort(function(a,b){
    return a - b;
    //如果 a-b>0 表示a>b 交换位置
    //如果 a-b<0 表示a<b 不交换位置
    //如果 a-b=0 也不交换位置
});
console.log(arr);

六、数组遍历的方法

  1. filter:过滤器,真的留下,假的扔掉。不改变原数组,返回新数组,参数是一个函数。通过自定义的过滤方法,返回新的数组。
var arr = [12,5,8,123,222];
var arr1 = arr.filter(function(item,index,array){
    return item>12;
})
console.log(arr1);

var stu = [
    {name:'lisi',age:20},
    {name:'lily',age:18},
    {name:'lucy',age:22},
    {name:'hmm',age:30}
];
var newstu = stu.filter(function(item){
    return item.age>20; 
});
console.log(newstu);
  1. map:遍历数组,由回调处理之后的一个新的返回值组成数组。
var number = [1,4,9];
var num = number.map(function(item,index,array){
    return Math.sqrt(item);
});
//var num = number.map(Math.sqrt);
console.log(num);
  1. forEach:通过回调处理接收的参数,无返回值。
var number = [1,4,9];
number.forEach(function(item,index,array){
    console.log(`a[${index}]=${item}`);
})

// for(var i = 0;i < number.length; i++){
// 	console.log(`a[${i}]=${number[i]}`);
// }
  1. every所有为真则为真,some有一个为真则为真。every针对所有的回调函数的返回值,如果全为true,则最终结果为true。some针对所有的回调函数的返回值,有一个true,则最终结果为true。
var arr = [1,2,3,4];

var bool = arr.some(function(item){
    return item%2 === 0;
})
console.log(bool);

七、数组去重

  1. 使用filter去重。
var arr = ['lisi','lucy','lily','hmm','lisi','lisi','hmm','lucy'];
var arr1 = arr.filter(function(item,index,array){
    return array.indexOf(item) === index;
})
console.log(arr1);
  1. 从后往前遍历,取一个值,将这个值和数组中在这个值前面的每一个元素作比较。
var arr = ['lisi','wangwu','hmm','zhaoliu','wangwu','hmm','hmm','lisi'];
for(var i = arr.length-1; i >= 0; i--){
    for(var j = i-1; j>=0; j-- ){	
        if (arr[i] === arr[j]) {
            arr.splice(i,1);
        }
    }
}
console.log(arr);
  1. 从前往后依次遍历,根据indexOf判断是不是第一次出现的,若是第一次出现的就是push到新数组。
var arr = [1,2,3,4,5,6,5,4,3,2,1];
var arr2 = [];
for(var i=0;i<arr.length;i++){
    if( arr2.indexOf( arr[i] ) == -1 ){
        arr2.push(arr[i]);
    }
}
alert(arr2);