js 数组

一、数组的声明：

/* 声明数组 */
var arr1 = [];//数组字面量；
var arr2 = new Array();//通过系统内置的Array构造函数声明数组，一般不使用
var arr3 = Array();//可以创建数组，一般不使用
console.log(arr1.__proto__);
console.log(arr2.__proto__);
console.log(arr3.__proto__); //Array
//所有的对象都继承于 Array.prototype

 对比与对象的声明：

/* 对象 */
var obj1 = {};//字面量声明对象；
var obj2 = new Object();//
var obj3 = Object();//
console.log(obj1.__proto__);
console.log(obj2.__proto__);
console.log(obj3.__proto__);//Object
//所有的对象都继承于 Object.prototype

对比 对象的访问

var array = [1,2,3,4,5];
//index 数组元素的下标（索引值）
var object = {
        0:1,
        1:2,
        2:3,
        3:4,
        4:5
        
}
console.log(array[2],object[2])
//查找 2 的下标；
var indexNum = array.indexOf(2);//>=0表示存在，=-1表示不存在，这里返回的是1

这里 array[2] 和 object[2]的结果是一样的；这里可不可以说，数组也是一种对象呢？数组也继承了 Object.prototype;

回到顶部

二、数组的访问 增 改 查：

 /* 数组访问 */
 //读：
 var arr = [1,2,3,4,5]
 console.log(arr[5]);//undefined ;这里的undefi 和 empty 的区别就是，empty是元素
//相当于：
var obj = {
         0:1,
         1:2,
         2:3,
         3:4
 }
console.log(obj[4])

//写：
arr[4] = "a";
//改
 arr[0] = "b";

数组的其他（增）方法；

1.在数组的前面添加数据 使用 unshift(在原数组上更改);

2.在数组的后面添加数据 使用 push(在原数组上更改);

/* 方法 push unshift 
*    继承于 Array 原型上的 push unshift方法
*/
var arr = [2,3,4]
console.log(arr.push(5,6));//5,返回值是 执行push后的新的数组的长度
console.log(arr)//2,3,4,5，6
console.log(arr.unshift(0,1));//在数组前面，添加 0，1， 结果为7
console.log(arr);//0,1,2,3,4,5,6

数组的 删除方法 （以下代码 是接着上面代码的，即第5行的 arr 是 上面 增方法的 变量）：

1.删除数组首位数据 使用 shift(在原数组上更改);;

2.删除数组末尾数据  使用pop(在原数组上更改);;

/* pop 和 shift 
 * 
 */
 
 arr.pop()// 返回数组的末位 值 
 console.log(arr);//0，1，2，3，4，5
 arr.shift()// 0 返回数组的首位 值 
 console.log(arr);//1，2，3，4，5

数组的 修改方法 ：

splice(在原数组上更改); 和 sclice (不在原数组上更改);容易混淆；大家可以把这两段代码放入浏览器 console 里面运行一下，看结果；

/**
 *splice
 * arr.splice(开始位置，剪切长度，剪切的最后一位添加数据)
 */
 
 var arr = ["a","b","c"];
 arr.splice(1,2);
 console.log(arr);//a
 
 var arr = ["a","b","c"];
 arr.splice(1,1,1,2,3);
 console.log(arr);
 arr.splice(-1,0,"d");
 console.log(arr);

 /* slice：剪切获取值的区间为 [start,end)
 splice  arr.splice(开始位置，剪切长度，剪切的最后一位添加数据); 剪切掉的的区间为：[开始位置，剪切长度]
 
 */
 var arr = ["a","b",'c',"d","e","f"];
 var arr1 = arr.slice();//slice(a,b);区间为 [start,end)
 console.log(arr1);//复制原数组
 var arr2 = arr.slice(1);//["b",'c',"d","e","f"];下标为1到结尾；
 var arr3 = arr.slice(-3,5);
 var arr4 = arr.slice(-3,-2);
 var arr5 = arr.slice(1,5);
 console.log(arr3);
 console.log(arr4);
 console.log(arr5);

解析：上面的splice的代码段：第一console.log 的结果是 a;原因就是 ：

["a","b","c"];
       ↑  → ↑ 
(start) 1  2  2（end）

如上示意，开始位置是a[1],长度是2，剪切是闭区间剪切 即剪掉 a[1],a[2]；所以结果就是 ['a'];
 同理 var arr = ["a","b","c"]; arr.splice(1,1,1,2,3);这个的结果呢？
["a","b","c"]

　　　 ↑^(insert)1,2,3

   (start)1(end)

如上示意，开始位置是 a[1], 剪切掉长度为 1为 ，剪切区间为闭区间，即剪掉的是 a[1] ; 在减掉的最后一位插入数据的数据 1，2，3;即 a[1] = 1;　　a[2] = 2;　　a[3] = 3; 　　所以最后的结果是

['a',1,2,3,"c"];

同理arr.splice(-1,0,"d");  console.log(arr);的结果呢？

这里需要搞清楚 起始位置是a[-1] ;-1，即倒着数，a[0]是首位, a[-1]即末位； 0，即剪切的长度为0，插入数据为 'd'，即 在a[-1]的位置插入 ‘d’,结果为：['a',1,2,3,'d',"c"];

解析：下面的sclice的代码段：

 

sclice不是对原数组的一个操作，他返回的是截取数组的长度；这里解释一个 var arr3 = arr.slice(-3,5); console.log(arr3);截取的位置是 a[-3] 到 a[5]; 即a[-3] = d 到 a[5] = f,截取区间为闭区间，所以截取的结果是：
["d","e"];
数组查询：
1.查询数组元素在数组中的位置；

var arr = [1,2,3];
console.log(arr.indexOf(1));//0
console.log(arr.indexOf(2));//1
console.log(arr.indexOf(3));//2
console.log(arr.indexOf(4));//-1

2.查询特定的JSON数组

var arr = [
  {"name":"apple", "count": 2},
  {"name":"orange", "count": 5},
  {"name":"pear", "count": 3},
  {"name":"orange", "count": 16},
];
   
var newArr = arr.filter(function(p){
  return p.name === "orange";
});
 
console.log(newArr);

结果：

0: {name: "orange", count: 5}

1: {name: "orange", count: 16}

length: 2

回到顶部

三、数组的排序

1.sort方法排序；

/* sort
 sort 默认是按照 ASCII排序的；
 */
 var arr = [-1,-5,8,2];
 arr.sort();
 console.log(arr);//对应实际的ASCII排序，
 
 var arr = ["b","z","h","i","a"]
 arr.sort();
 console.log(arr);
 
 var arr = [27,49,5,7];
 arr.sort();
 console.log(arr);//这里排序失效了，原因是 他还是按照ascii 排序了；
 //自定义排序  1.参数 必须是两个；
 //　　　　　　2.必须有返回值  若负值，a 在前 ，正数，b在前，0 ：保持不动
 arr.sort(function(a,b){
    return a-b;
 })
 console.log(arr);//正序排列
 
 //随机排序
 var arr = [1,2,3,4,5,6] 
 arr.sort(function(a,b){
     var rand = Math.random();//产生 （0，1）开区间的数据
     /* if(rand -0.5>0){
         return 1;
     }else{
         return -1
     } */
     return rand-0.5;
 })
 console.log(arr);
 
 var arr = [
     {son:"joy",age:18},
     {son:"ben",age:13},
     {son:"lucy",age:15},
     {son:"jenny",age:20},
     {son:"jone",age:12},
     {son:"leo",age:1}
     ]
 arr.sort(function(a,b){
     if(a.age>b.age){
         return 1;
     }else{
         return -1
     }
 })
 
 console.log(arr);
 
 
 var arr = ["12345","1","111"];
 arr.sort(function(a,b){
     if(a.length>b.length){
         return 1
     }else{
         return -1;
     }
 })
 console.log(arr);

2.数组倒叙:reverse

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

回到顶部

四 其他方法

1.合并两个数组 concat

 /* concat 合并两个数组 */
var arr1 = ["a","b",'c'];
var arr2 = ["d","e","f"];
var arr3 = arr1.concat(arr2);
console.log(arr3);

2.joint ,split

 /* join() 参数就是函数的分隔符
     split() 第一个参数， 分割的符号，第二个参数是 得到数组长度；
 */
 var arr = ["a","b",'c',"d","e","f"];
 var str1 = arr.join();//数组变字符串，str1 = "a,b,c,d,e,f"
 var str2 = arr.toString();//"str2 = a,b,c,d,e,f"
 var str3 = arr.join("-");////数组变字符串 并且以 '-'连接 str3 = "a-b-c-d-e-f"
 var arr1 = str3.split("-");//arr1 = ["a","b",'c',"d","e","f"];
 console.log(str1,str2,str3,arr1);

回到顶部

五、扩展方法

1.数组去重

//数组去重
 var arr = [0,0,2,1,"a","a","b","b"];
 Array.prototype.unique = function(){
     var temp = {};
     newArr = [];
     for(var i=0;i<this.length;i++){
         if(!temp.hasOwnProperty(this[i])){
             temp[this[i]] = this[i];
             newArr.push(this[i])
         }
     }
     return newArr;
 }
 var obj = {
         name :'123',
         name:"123"
 }
 console.log(obj);//只打印出一个属性来
 console.log(arr.unique());
 
 //字符串去重
 var str = "11122222222222223333";
 String.prototype.unique = function(){
     var temp = {};
     var newStr = "";
     for(var i = 0;i<this.length;i++){
         if(!temp.hasOwnProperty(this[i])){
             temp[this[i]] = this[i];
             newStr += this[i] 
         }
     }
     return newStr;
 }
 console.log(str.unique());

2.类数组

//类数组 原型对应是 Object,有下标值，有length属性,需要挂push，则挂,有splice
function test(){
    //arguments.push(7);报错
    console.log(arguments)
}
test(1,2,3,4,5);
var obj = {
        "0":1,
        "1":2,
        "2":3,
        "3":4,
        "4":5,
        "length":5,
        "push":Array.prototype.push,
        "splice":Array.prototype.splice//可以变成数组的样式
}
obj.push(7)
console.log(obj);


//push原理
Array.prototype.push=function(elem){
    this[this.length] = elem;
    this.length++;
}
//阿里面试题
var obj1 = {
        "2":3,
        "3":4,
        "length":2,
        "push":Array.prototype.push,
        "splice":Array.prototype.splice//可以变成数组的样式
}
obj1.push(1);
obj1.push(2);
console.log(obj1)

var person = {
    "0":"张小一",
    "1":"张小二",
    "2":"张小三",
    "name":"张三",
    "age":5,
    "weight":140,
    "height":180,
    "length":3,
    "push":Array.prototype.push,
    "splice":Array.prototype.splice//可以变成数组的样式
}
/* Object.prototype.push = Array.prototype.push;
Object.prototype.splice = Array.prototype.splice; */
console.log(person);
console.log(person.length)

回到顶部

 六、数组对象的过滤

1.filter:返回符合条件的数据

• 过滤符合条件的项，返回一个数组

let arr1 = [1,2,3,4]
let arr2 = arr1.filter(function(item){return item>1})
console.log(arr1, 'arr1') // [1,2,3,4] arr1
console.log(arr2, 'arr2') // [3] arr2

2.find:返回符合条件的一个值

• 查找符合条件的项，只要符合就返回这个值 ，不会返回后面的值；array.find(function(currentValue, index, arr),thisValue)  

let arr1 = [1,2,3,4]
let arr2 = arr1.find(item=>item>1)
console.log(arr1, 'arr1') // [1,2,3,4] arr1
console.log(arr2, 'arr2') // 2arr2

 等同于

var arr1 = [1,2,3,4]
 var arr2 = arr1.find(function(currentValue, index, arr){
   return currentValue>1
 })
 console.log(arr1, 'arr1');// [1,2,3,4] arr1
console.log(arr2, 'arr2');//2arr2

 

3.some:返回布尔

• 查找符合条件的项，只要符合一个，就返回true，不会往后查找

let arr1 = [1,2,3,4]
let arr2 = arr1.some(item=>item>1)
console.log(arr1, 'arr1') // [1,2,3,4] arr1
console.log(arr2, 'arr2') // true arr2

 

 

回到顶部

 其他：

1.字符串数组 转 int数组

['1','2','3'].map(Number) // [1,2,3]