JavaScript学习笔记——数组的方法以及部分方法的重构

目录

什么是数组

数组的新建方式

数组和对象中 点方法和中括号的区别

 遍历数组

for 和 for in的区别

数组的方法

arr.push("a","b");

arr.unshift("a","b");

arr.pop(); //pop中没有参数,

arr.shift() ； // shift 中没有参数

     清空数组 ↓  

重构pop方法

重构unshift方法

arr.concat(arr1);

arr.join(); // 参数为字符串的连接符

重构join方法

toString也可直接将数组转换为字符串

判断两个数组的内容是否相同

判断两个数组的内容是否相同（存在顺序不同）

_________________________面试题

arr.splice(从什么位置开始,删除多少个元素,要插入的元素);

数组去重

arr.slice(start，end)

arr.indexOf(要查询的元素,从哪开始查询)  

Array.from(类似于数组的列表)  转为数组

使用 indexOf 查询到数组中所有的为3的元素

lastIndexOf(查找得元素，从什么位置开始查找)   从后向前查找

遍历数组（forEach 和 map）

冒泡排序      

arr.sort(); 排序，仅能10以内数字 缺点：按字符排序

arr.sort(function(后一项,前一项){})  仅适用于数值

arr.some(function(item,index,arr){  });

        //  重构 some     桥接模式

arr.every(function(item,index,arr){  })

arr.filter(function(item,index,arr){ return 条件  });

arr.reduce(function(累积值,元素,下标,数组){ },初始值);

重构reduce

Array.isArray()

arguments 参数列表（类数表）

     重构多参数push

arguments.callee & arguments.callee.caller

二维数组

---

 

 

 

 

什么是数组

可以理解为数据的组合

 

var arr1=["a","b","c","d","e","f"];        // 数据可以是任何类型，顺序排列，可以重复

var arr2=[6,2,4,5,8,0,2,1,3,5,6];      // 把数组中的每个数据叫做元素，简称元，元素间使用逗号分隔

console.log(arr1[0]);      // “a” 数组中的数据按照顺序排列，从0开始，把这个叫做索引，也叫做下标

arr1[0]="z";          // 这里的0是下标，"z" 是元素  ,arr1[0]叫做下标变量 给arr[0]重新赋值 “z”

 

数组和对象一样都是引用数据类型

     

 

数组的新建方式

字面量创建 var arr=[4,5,3,6,2,1];

构造函数创建 var  arr1=new Array(4,5,3,6,2,1);

var arr=new Object([1,2,3,4,5]); //一般不用这种创建数组

数组的本质是对象 继承于对象

 

如果通过数组的构造函数创建数组，参数仅有1个，且这个参数是正整数，则表示新建一个具备该正整数长度的空数组，里面有这个长度的若干空元素，如果是负数或者小数时，报错，如果输入的不是数值，是其他类型时，这个数据就会作为该数组的第0个元素，长度为1 如下

var arr2=new Array(5); // 创建一个长度为5的空数组

var arr2=new Array(3.5); // 报错

var arr2=new Array("a"); // arr2[0]="a"

    

数组长度就是元素的个数

数组的最大下标是数组的长度-1(元素个数-1);

var arr=[1,2,3,5,,2,3,,5,2];

console.log(arr.length); // 就是数组的长度，也是元素的个数

arr[arr.length-1]=20; // 把数组中最后一个元素赋值为20

arr[arr.length]=20; // 在数组的最尾部添加一个元素

arr.length=3; // 数组的长度是可以被修改  超出长度的元素会被删掉

arr.length=0; // 清空整个数组

 

 

对象的属性 => 字符型 对象的属性名会隐式转换成字符

数组的索引 => 数值型 数组的下标会隐式转换成数值

不能转换成数值的（NaN）会默认添加为数组中的对象属性名（把数组当作对象添加属性）

数组不能用点语法取元素，但是可以用点语法取属性值

数组的长度仅记录数组中下标的个数，不包括数组中属性的数量

 

______________________________________________________

 

数组和对象中 点方法和中括号的区别

中括号运算符总是能代替点运算符。但点运算符却不一定能全部代替中括号运算符。

中括号运算符可以用字符串变量的内容作为属性名。点运算符不能。

中括号运算符可以用纯数字为属性名。点运算符不能。

中括号运算符可以用js的关键字和保留字作为属性名。点运算符不能。

______________________________________________________

 

 遍历数组

数组的循环是根据下标的数字从0开始循环到最大下标，有序

对象是循环所有属性名，无序 属性遍历是根据对象属性名添加的顺序

 

var arr = [5, 2, 7, , 4, 9, 6];
arr["a"] = 10;
for(var i=0;i

var obj={
    a:1,
    be:2,
    c:3
}
for(var prop in obj){
    console.log(prop);		// 打印obj 的属性名	prop => 变量
    console.log(obj[prop])；	// 打印obj 的属性值
}

 

var obj={a:1,b:2,c:3};		
var o={};
for(var prop in obj){	// 使用 for in遍历时，会将所有属性包括下标转为字符型
    o[prop]=obj[prop];	// for in 遍历对象时，变量代表的是属性，遍历数组时，遍历代表的是下标
 }
obj.a=100;			// 浅复制  将对象 obj 复制到o中  obj和o没有引用关系 
console.log(o.a);		// 改变obj 中a 的值，不会影响o中a 的值
// 这样只能复制解除最外层的引用关系，当对象属性值为一个对象时，这种浅复制就不起作用了

var obj={
    a:1,
    b:{
        a:1,
        b:2
    }
}
var o={};
for(var prop in obj){
    o[prop]=obj[prop];
}
obj.a=10;
obj.b.a=10;			    // 这时 改变obj中 b的a的属性值 就会影响o中b的a的属性值
console.log(o);			 // 要解决这类问题，就考虑到对象深复制

 

——————————————————————————————————————————————————

 

for 和 for in的区别

1. for in不会遍历空元素，for会遍历空元素=>undefined
2. for in可以遍历到数组内所有的属性包括下标，for只能遍历数组所有下标

 

(属性包含字符和下标（数字）)

arr[0]=5;  //   0就是arr的下标，也是arr的属性

arr["aa"]=10; //   aa就是arr的属性

 

in

x in arr 判断数组时，x表示下标=>arr数组中有下标为x的元素

x in obj 判断对象时，x表示对象的属性=>obj中有没有x属性

   

        

 //  这样可以完成不遍历空元素

var arr=[2,4,6,,8,10];

for(var i=0;i

________________________________________________

 

 

 

数组的方法

不管删除还是添加都会改变数组的长度

 

• arr.push("a","b");

在数组尾部添加一个或者多个元素，并且返回数组的新长度

arr.push(6); //在数组的尾部插入一个新元素

arr.push(6,7,8); //在数组的尾部插入多个新元素

 

• arr.unshift("a","b");

在数组头部添加一个或者多个元素，并且返回数组的新长度

arr.unshift(0); //在数组的头部插入一个新元素

arr.unshift(-3,-2,-1,0); //在数组的头部插入多个新元素

 

• arr.pop(); //pop中没有参数,

删除数组的最尾部一个元素 , 并且将这个被删除的元素返回

arr.length--;  // 等同 速度更快，但是不会返回被删除的元素

arr.pop(); // 速度慢，但是会返回被删除的元素

 

var arr1=["a","b","c","d","e","f","g"];

while((arr1.pop())!="d"){}; // 先删除 删除后得到返回值再判断

console.log(arr1); // [ a,b,c ]

 

• arr.shift() ； // shift 中没有参数

删除数组的第一个元素，并且返回被删除的元素

arr.shift();//将数组的第一个元素删除

 

     清空数组 ↓  

for(var i=0;i0){ // 也可以这样清空数组

      arr.pop();

}

 

 

重构pop方法

 

var arr=[1,2,3,4,5,6,7];
function pops(arr){
      var item=arr[arr.length-1];
      arr.length--;
      return item;
}
var item=pops(arr);
arr.pop();
console.log(arr,item);

重构unshift方法

 

function unshifts(arr,item){
    var maxIndex=arr.length-1;
    for(var i=maxIndex;i>=0;i--)     arr[i+1]=arr[i];
    arr[0]=item;
    return arr.length;
}
var n=unshifts(arr,5);
console.log(n,arr);

 

• arr.concat(arr1);

数组的合并，合并后会返回一个新数组

var arr2=arr.concat(arr1); //合并两个数组，原来的两个数组不会变化，写在前面的数组，合并后也在前面

var arr3=arr.concat(0,-1,-2);        // 数组除了可以合并数组，也可以合并元素，将多个元素与原数组合并，返回新数组

var arr4=arr.concat(0,arr1,["A","B"]);        // concat既可以合并元素，也可以合并数组      

var arr5=arr.concat();         // 如果直接使用concat，就可以完成数组的复制功能

        

 

• arr.join(); // 参数为字符串的连接符

将数组的每个元素以指定的字符连接形成新字符串返回 默认使用,连接

var str=arr.join("|");   // 以 | 作为字符串的连接符

var str=arr.join("");   // ""作为连接符，会将数组元素首尾相连成为字符串

 

重构join方法

 

function join(arr,separ){
     if(separ===undefined) separ=",";	// 默认情况使用 逗号分隔
     var str="";
     for(var i=0;i

 

 

toString也可直接将数组转换为字符串

   var arr=[1,2,3,4,5];

   var str=arr.toString();

   console.log(str); // 1,2,3,4,5 不能给参数 只能是逗号分隔

 

判断两个数组的内容是否相同

        var arr=[1,2,3,4];

        var arr1=[1,2,3,4];

        console.log(arr1===arr); // 存在弊端 只能判断顺序和数量都相同 的数组

        if(arr.toString()===arr1.toString()){

            console.log("他们的内容是相同的")

        } 

 

判断两个数组的内容是否相同（存在顺序不同）

 

var arr=[1,2,3,4];
var arr1=[1,4,3];
var b=false;			// 假设两个数组时不同的
for(var i=0;i

 

 

_________________________面试题

！优先级高， 转换为布尔值进行比较

空数组做比较时会转换为“” 空字符串

        // console.log([]==[]); //false

        // console.log(![]==[]); //true false == “”

        // console.log(![]==![]); //true false == false

        // console.log(![]==false); //true

        // console.log([]==true); //false ""==true;

        // console.log([]==""); //true  ""==""

        // console.log(0==![]); //true 0==false

        // console.log(0==[]); //true

 

 

• arr.splice(从什么位置开始,删除多少个元素,要插入的元素);

从指定的位置删除给定数量的元素，并且在这个位置插入需要的元素并且返回被删除的元素组成的新数组

 

var arr1=arr.splice(); // 没有任何参数时,返回一个空数组

var arr1=arr.splice(0); // 将所有数据转移到新数组

var arr1=arr.splice(-2);  // 从第几位开始可以是负数，从后向前数（倒数）,因为没有给要删除的数量，因此删除到尾部

第一个参数是0，表示从第0位开始，第二个参数删除多少个没有填，意味着删除到尾部

var arr1=arr.splice(0,3);  // 从第0位开始删除3个元素，返回到新数组arr1

var arr1=arr.splice(0,1,-1); // 从数组的第0位开始，删除1个元素，并且在这个位置插入一个元素 -1,替换

var arr1=arr.splice(-1,1,0);  // 数组的最后一位替换位0

var arr1=arr.splice(2,2,10,11); // 将数组中第二位开始两位元素替换为10，11

arr.splice(2,0,-1);  // 在数组的第二位插入一个元素 -1

arr.splice(2,0,-1,-2,-3,-4); // 在数组的第二位插入四个元素 -1，-2，-3，-4

     

当元素过多的一个数组需要插入到另一个数组中时，为了提高效率，一般不使用 splice

而是将被插入数组先分割，再拼接

 

 

 

 

数组去重

方式一：有弊端

 

var arr=[1,2,3,4,1,2,3,2,1,1,3,7,7,2,1,6,1,2,4,5,1,2,3];
 for(var i=0;i

 方式二：

var arr=[1,2,3,4,1,2,3,2,1,1,3,7,7,2,1,6,1,2,4,5,1,2,3];
var arr1=[];			// 用来承接不重复的元素
for(var i=0;i

方式三：

        var arr=[1,3,1,2,3,5,2,3,4,6];
        var arr1=[];
        for(var i=0;i

 

• arr.slice(start，end)

按指定位置截取复制数组的内容，返回新数组，不会改变原数组

从下标start开始，截取到end，包括start但不包括end

第二个参数不写，默认截取到尾部，只能从前向后截取

var arr1=arr.slice(1,4);         // 从第1位开始截取到第4位之前

var arr1=arr.slice(); // 复制数组arr

var arr1=arr.slice(0);  // 复制数组

var arr1=arr.slice(3); //从第三位截取到尾部复制

var arr1=arr.slice(-2); //从倒数第二位开始截取到尾部

var arr1=arr.slice(-3,-1); //从倒数第三位到倒数第一位

 

 

 

• arr.indexOf(要查询的元素,从哪开始查询)  

在数组中查找元素，找到返回元素下边，找不到返回-1，查询到第一个后，就返回下标不再继续查询

 

var  index=arr.indexOf(4);  // 在数组中查找元素4，如果查找到，返回该元素所在的下标，如果没有查找到，则返回-1

  

var arr=[

      {a:1},

      {a:2},

      {a:3},

     {a:4}

];

var index=arr.indexOf({a:1});  // 这是错误得，查找不到，因为查找得是新对象 地址不同

      

 

• Array.from(类似于数组的列表)  转为数组

根据标签名获取到标签列表 （获取到的是列表，不是数组，不能直接使用数组的方法）

 

var divs=document.getElementsByTagName("div");

divs.pop()； //错误，不是数组不能直接使用数组的方法

var arr=Array.from(divs); //ES6 的写法 要先把divs这个列表 转为数组 才能使用数组的方法

                                       //ES5 =>  var arr=Array.prototype.slice.call(divs);

 

使用 indexOf 查询到数组中所有的为3的元素

 

       var arr=[1,3,1,2,3,5,2,3,4,6];
       var index=arr.indexOf(3); 	// 这样 只能查询到第一个3 （下标为1）
       console.log(index);
       var index=arr.indexOf(3,2);	// 这样 只能查询到第二个3 （下标为4）
       console.log(index);

        var index=0;			// 使用循环，查询到数组中所有为3的元素，并打印下标
        while(true){
            index=arr.indexOf(3,index);
            console.log(index);
            if(index===-1) break;	// 查询到最后，查不到时返回-1  如果为-1 跳出循环，不再查询
            index++;
        }

• lastIndexOf(查找得元素，从什么位置开始查找)   从后向前查找

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

var index=arr.lastIndexOf(3);

console.log(index); // 打印下标 7

 

 

• 遍历数组（forEach 和 map）

 arr.forEach(function(数组中的元素，每个元素对应的下标，数组自身){ })

   var arr=[1,2,3,5,6,7,8,9];

   arr.forEach(function(a,b,c){

         console.log(a,b,c);

        })

 

 

 // 求数组中所有元素的和

———使用for循环遍历数组

        var sum=0;

        for(var i=0;i

            sum+=arr[i];

        }

        console.log(sum); 

 

 ——— forEach 遍历数组

        var sum=0;

        arr.forEach(function(item){

            sum+=item;

        })

        console.log(sum); 

 

 

var arr=[1,2,3,5,,6,7,8,9];

 arr.forEach(function(item,index){  // 使用forEach可以跳过空元素

       console.log(item,index);

  })



 var arr1=[];

arr.forEach(function(item,index){ // 保留空元素

        arr1[index]=item;

})

console.log(arr1); 

 

arr.map(function(item,index,arr){ }）

map会返回一个与原数组长度相等的新数组，可以通过return修改每一项的值

        var arr=[3,5,7,9,1,2,4];

        var arr2=arr.map(function(item,index,arr){

            // console.log(item,index,arr);

            // return "a";

            return item+10;  // 在map中使用return 就是在对应的下标中添加对应的数据

        });

        console.log(arr2);

 

forEach没有返回值，使用return无效

map 有返回值，与原数组等长的新数组，元素内容由return确定，不写return返回undefined

forEach 和 map 都不会遍历空元素  

 

 

 

// 遍历数组arr，将大于4的元素生成一个新的数组（新数组中会有undefined）    

    var arr=[1,3,5,7,2,4,6,8];

        var arr1=arr.map(function(item){

            if(item>4){

                return item;

            }

        });

   console.log(arr1); 

 

// 使用 forEach 实现给数组添加 数量和总价属性及值

     var arr=[ // 元素是对象的数组

            {id:1001,name:"电视",price:4500},

            {id:1002,name:"电脑",price:6500},

            {id:1003,name:"冰箱",price:2000},

            {id:1004,name:"洗衣机",price:1000},

            {id:1005,name:"手机",price:5500}

        ];

       arr.forEach(function(item){ // 遍历 arr 数组，给元素添加 num 属性

            item.num=parseInt(Math.random()*9+1); // 给num属性赋值 随机数 1-10

            item.total=item.price*item.num; // 给元素添加 total属性 属性值为 单价*数量

        })

        console.log(arr);

// 使用 map 实现给数组添加 数量和总价属性及值 

       var arr1=arr.map(function(item){ // 创建一个遍历 arr1 承接map遍历后 返回的数组

            item.num=parseInt(Math.random()*9+1);

            item.total=item.price*item.num;

            return item; // 给每个map遍历的元素添加内容，item

        })

        console.log(arr1,arr);  // 每个元素都是对象 有引用关系，会改变原数组

     

   // 不改变原数组，完成一个新数组，里面有num和总价

        var arr1=arr.map(function(item){

            var o={};

            for(var prop in item){ // 把对象元素 复制出来 给到o

                o[prop]=item[prop]; // 在将o对象当作arr1数组中的元素 切断通过遍历过来的元素对象的引用关系

            }

            o.num=parseInt(Math.random()*9+1);

            o.total=o.price*o.num;

            return o;

        })

        console.log(arr1,arr);

 

 

时间复杂度   算法计算花费时间  花时间越少时间复杂度越小  

空间复杂度   算法计算需要花费堆栈空间（内存）越多代表空间复杂度越高

 

 

冒泡排序      

var arr=[4,2,7,2,5,8,0,4,5,7,3,8,9];
function sorts(arr){
    var len=arr.length-1;
    for(var i=0;iarr[j+1]){	
                var temp=arr[j+1];			// j 和 j+1 比较 满足条件 进行交换
                arr[j+1]=arr[j];
                arr[j]=temp;
            }
        }
    }
}
sorts(arr);
console.log(arr); 

 

• arr.sort(); 排序，仅能10以内数字 缺点：按字符排序

• arr.sort(function(后一项,前一项){})  仅适用于数值

 

arr.sort(function(a,b){      

        return  a-b； //  从小到大   

        return  b-a； //  从大到小    

    

arr.sort(function(a,b){ // 将字符排序

         console.log(a.charCodeAt(0),b.charCodeAt(0)); // str.charCodeAt(0) => 将str字符串的第0项转换为Unicode编码

         return a.charCodeAt(0)-b.charCodeAt(0); // a-z

         return b.charCodeAt(0)-a.charCodeAt(0); // z-a

        })

 

 

arr.sort(function(){ // 数组元素随机乱序

       return Math.random()-0.5;

 });

      

 

 

 

• arr.some(function(item,index,arr){  });

判断数组中是否存在满足条件的元素，如果有就返回true，如果没有就返回false

遍历数组，如果有一个满足条件的元素，都会直接返回true，不继续向后遍历

 

var arr=[1,4,6,2,7,9,0];

var bool=arr.some(function(item,index,arr){ // 遍历数组，是否存在大于5的元素

       return item>5;

});

console.log(bool);

 

 

 

        //  重构 some     桥接模式

function somes(arr,fn){		 // fn就是回调函数
    for(var i=0;i5;
}
console.log(b); 

 

 

• arr.every(function(item,index,arr){  })

var bool=arr.every(function(item,index,arr){  });

判断数组中是否每一个都满足条件，如果有一个不满足条件，直接跳出，所有都满足时返回为ture

 

var bool=arr.every(function(item,index,arr){ // 判断数组中 是否所有的元素都大于2

        return item>2;

});

console.log(bool); 

 

利用数组的 every some 可以实现全选框和反选框

 

 

 

 

• arr.filter(function(item,index,arr){ return 条件  });

过滤条件，将满足条件的元素组成一个新的数组返回

      

var arr1=arr.filter(function(item,index,arr){

       return item>5;

});

 

 

 

• arr.reduce(function(累积值,元素,下标,数组){ },初始值);

reduce返回的是一个值，就是遍历到最后一次return出来的值

在函数中使用return 就会将返回值在下次数组的遍历中赋予value，如果没有return，返回undefiend

如果reduce没有设置初始值，累计值是数组的第0位元素，遍历从下标1开始

如果reduce设置了初始值，累积值就是从这个初始值开始，遍历从下标0开始

 

        // 累积相加数组元素求和
        var sum=arr.reduce(function(value,item){
             return value+item;
        });
        console.log(sum);

       // 希望求累积相加数组元素求和，在基数100的前提下，100就是初始值
        var sum=arr.reduce(function(value,item){
            console.log(value);
            return value+item;
        },100); 	// 函数后面的参数就是累加的初始值

 

 

重构reduce

function reduces(arr,fn,initValue){
      var i=0;
      if(initValue===undefined){
             initValue=arr[0];
             i=1;
       }
        while(i

 

 

• Array.isArray()

判断元素是否是数组，如果是数组返回true否则返回false  ES6

console.log(Array.isArray(arr));

console.log(arr.toString()); // 数组会显示为字符串而 对象会显示 [ object Object ]

console.log(arr.constructor===Array);  // 数组的构造函数是数组类型

判断是否为数组，不能使用typeOf 因为数组和对象都会显示为 object

 

 

• arguments 参数列表（类数表）

所有的列表（类数组，伪数组）都可以通过[下标]的方式调用   

 

       function fn(){

            arguments；    //这个对象仅能在函数内调用，函数外没有这个对象

            console.log(arguments); //类数组列表，伪数组

        }

        fn(1,2,3,4,5); 

 

     重构多参数push

 

function pushs(arr){
    console.log(arguments);
    for(var i=1;i

 

 

• arguments.callee & arguments.callee.caller

// ES6  arguments.callee arguments.callee.caller被禁止使用

        function fn1(){ 

            console.log(arguments.callee);   //arguments.callee 就是当前函数(arguments所在函数)   fn1

        }

        fn1(); 

 

  // arguments.callee 可用于完成匿名函数的递归

         var i=0;

        (function(){

            i++;

            if(i<10) arguments.callee();

        })();

 

        

 

        function fn1(){

            //如果该函数是回调执行的，arguments.callee.caller就是指代调用该回调函数的函数 fn2

            console.log(arguments.callee.caller);

        }   //arguments.callee.caller只有在当前函数是回调函数时，才能使用

        function fn2(fn){

            fn();

        }

        fn2(fn1);

 

二维数组

var arr=[];
for(var i=0;i<10;i++){	   // i是外层数组的下标
    arr[i]=[];
    for(var j=0;j<10;j++){	  // j是内层数组的下标
        arr[i][j]=i*10+j;
    }
} 
console.log(arr);

 

 

 

目录

什么是数组

数组的新建方式

数组和对象中 点方法和中括号的区别

 遍历数组

for 和 for in的区别

数组的方法

arr.push("a","b");

arr.unshift("a","b");

arr.pop(); //pop中没有参数,

arr.shift() ； // shift 中没有参数

     清空数组 ↓  

重构pop方法

重构unshift方法

arr.concat(arr1);

arr.join(); // 参数为字符串的连接符

重构join方法

toString也可直接将数组转换为字符串

判断两个数组的内容是否相同

判断两个数组的内容是否相同（存在顺序不同）

_________________________面试题

arr.splice(从什么位置开始,删除多少个元素,要插入的元素);

数组去重

arr.slice(start，end)

arr.indexOf(要查询的元素,从哪开始查询)  

Array.from(类似于数组的列表)  转为数组

使用 indexOf 查询到数组中所有的为3的元素

lastIndexOf(查找得元素，从什么位置开始查找)   从后向前查找

遍历数组（forEach 和 map）

冒泡排序      

arr.sort(); 排序，仅能10以内数字 缺点：按字符排序

arr.sort(function(后一项,前一项){})  仅适用于数值

arr.some(function(item,index,arr){  });

        //  重构 some     桥接模式

arr.every(function(item,index,arr){  })

arr.filter(function(item,index,arr){ return 条件  });

arr.reduce(function(累积值,元素,下标,数组){ },初始值);

重构reduce

Array.isArray()

arguments 参数列表（类数表）

     重构多参数push

arguments.callee & arguments.callee.caller

二维数组

---