精品学习网->精美文摘

上一篇    全部文章


javascript数组篇


总结数组操作的方法

修改原数组:
push/unshift  。
pop/shift
reverse
splice
sort

push与unshift  添加数据
push跟unshift都是继承Array的原型
返回值,都是执行了方法以后数组的长度
用法

var  arr  =  [1,  2,  3]
console.log(arr.push(7));  //4    这个4就是现在数组的长度
arr.push(4);
console.log(arr);  //[  1,  2,  3,  7,  4  ]      //在最后面添加
arr.unshift(8);
console.log(arr);  //[  8,  1,  2,  3,  7,  4  ]    在最前面添加

push的源码

Array.prototype.myPush  =  function()  {
        for  (var  i  =  0;  i  <  arguments.length;  i++)  {
                this[this.length]  =  arguments[i];
        }
        return  this.length;
}
arr.myPush(1,  2,  3)
console.log(arr)

重写unshift源码

var  arr  =  ['d',  'e',  'f'];
Array.prototype.myunshift  =  function()  {
        var  por  =  0;
        for  (var  i  =  0;  i  <  arguments.length;  i++)  {
                this.splice(por,  0,  arguments[i]);
                por++;
        }
        return  this.length;
};
arr.myunshift('a',  'b',  'c');
console.log(arr);

pop和shift
每次会把数组的最后一位剪切掉,然后返回剪切掉的数值给你
pop例子
pop里面是没有参数的,他就是剪切数组的最后一位

var  arr  =  ["a",  "b",  "c"];
console.log(arr.pop());  //c
console.log(arr);    //[  'a',  'b'  ]

shift例子
pop里面是没有参数的,他就是剪切数组的第一位

var  arr  =  ["a",  "b",  "c"];
console.log(arr.shift())    //a
console.log(arr)    //[  'b',  'c'  ]

reverse方法(倒序)
var  arr  =  ["a",  "b",  "c"];
arr.reverse();
console.log(arr)  //[  'c',  'b',  'a'  ]

splice
//arr.splice(开始项的下标,剪切长度,剪切以后最后一位开始添加数据);

var  arr  =  ['a',  'b',  'c'];
arr.splice(1,  1,  1,  2,  3);
console.log(arr);//[  'a',  1,  2,  3,  'c'  ],在剪切的位置添加数据

var  arr  =  ["a",  "b",  "c",  "e"];
arr.splice(3,  0,  "d");
//因为选的事第4个,也就是e,但是没有删除他,所以会在她前面添加数据
console.log(arr);  //[  'a',  'b',  'c',  'd',  'e'  ]

var  arr  =  ["a",  "b",  "c",  "e"];
arr.splice(3,  -1,  "d");
//-1的位置是指着e的
console.log(arr);  //[  'a',  'b',  'c',  'd',  'e'  ]

数组排序之sort法
升降序

var  arr  =  [-1,  -5,  8,  0,  2];
arr.sort();
console.log(arr);//[  -1,  -5,  0,  2,  8  ]用了sort方法后会升序排列


var  arr  =  [27,  48,  6,  9];
arr.sort();
console.log(arr);//[  27,  48,  6,  9  ]
sort->按照ascli码来排列的,会先对比第一位,而不是两位数



//用自己的方法来排序,必须要有的两样东西
//1.参数a,b;
//2.返回值:1.负值,a就排前面
//                  2.正值,b就排前面
//                  3.0保持不动
var  arr  =  [27,  48,  6,  9];
arr.sort(function(a,  b)  {
        //  if  (a  >  b)  {
        //          return  1;
        //  }  else  {
        //          return  -1;
        //  }
        return  a  -  b;//升序a-b,降序b-a;
});
console.log(arr);  //[  6,  9,  27,  48  ]


随机排序

//随机排序
var  arr  =  [1,  2,  3,  4,  5,  6];
//Math.random()    ->  随机返回0-1的数;开区间
arr.sort(function(a,  b)  {
        var  rand  =  Math.random();  //运用Math.random()随机生成的数来随机排序
        if  (rand  -  0.5  >  0)  {
                return  1;
        }  else  {
                return  -1;
        }
});
console.log(arr);  //[  5,  4,  3,  2,  6,  1  ]

数组里面是对象


//里面是对象
var  arr  =  [{
                son:  'jenny',
                age:  18,
        },
        {
                son:  'jone',
                age:  10,
        },
        {
                son:  'Ben',
                age:  13,
        },
        {
                son:  'Lucy',
                age:  5,
        }
];
arr.sort(function(a,  b)  {
        if  (a.age  >  b.age)  {
                return  1;
        }  else  {
                return  -1;
        }
});
console.log(arr);
//按长度排序
var  arr  =  ['1',  '123',  '1234567',  '12345',  '12'];
arr.sort(function(a,  b)  {
        if  (a.length  >  b.length)  {
                return  1;
        }  else  {
                return  -1;
        }
});
console.log(arr);

数组按照元素的字节数排序

//数组按照元素的字节数排序
//unicode  0-255  1字节    256(汉字)-    2字节

var  arr  =  ['你好啊',  'ss',  'hello',  '你在干嘛']

arr.sort(function(a,  b)  {
        return  getBytes(a)  -  getBytes(b);
})

function  getBytes(str)  {
        var  bytes  =  str.length;
        for  (var  i  =  0;  i  <  str.length;  i++)  {
                if  (str.charCodeAt(i)  >  255)  {
                        bytes++;
                }
        }
        return  bytes;
}
console.log(arr);//[  'ss',  'hello',  '你好啊',  '你在干嘛'  ]


concat方法拼接数组
var  arr1  =  ['a',  'b',  'c'];
var  arr2  =  ['d',  'e',  'f'];
var  arr3  =  arr1.concat(arr2);
console.log(arr3);//[  'a',  'b',  'c',  'd',  'e',  'f'  ]

slice方法
//从第几位开始剪切到第几位
//slice-->[start,end)
var  arr  =  ['a',  'b',  'c',  'd',  'e',  'f'];
var  arr1  =  arr.slice();  //[  'a',  'b',  'c',  'd',  'e',  'f'  ]
var  arr1  =  arr.slice(1);  //[  'b',  'c',  'd',  'e',  'f'  ]
var  arr1  =  arr.slice(1,  3);  //[  'b',  'c'  ]
console.log(arr1);

toString方法(数组转成字符串)
var  arr  =  ['a',  'b',  'c'];
console.log(arr.toString());//a,b,c

join和split方法
join

var  arr  =  ['a',  'b',  'c'];
//join里面什么都不填他就用逗号隔开,要是填什么就用什么隔开
var  arr1  =  arr.join();//a,b,c
var  arr1  =  arr.join("");//abc
console.log(arr1);  

split
把字符串变成一个数组,分隔符要跟字符串的分隔符一样才可以
join和split是一组的

var  arr  =  ['a',  'b',  'c'];
//join里面什么都不填他就用逗号隔开,要是填什么就用什么隔开
var  str  =  arr.join("-");  //a-b-c
console.log(str);
var  arr1  =  str.split('-');  //[  'a',  'b',  'c'  ]
//第二个参数是剪切的长度,长度多少里面就有多少位数
var  arr1  =  str.split('-',  2);//[  'a',  'b'  ]
console.log(arr1);

类数组
他不是继承Array的原型,而是继承Object

类数组

var  obj  =  {
        '0':  0,
        '1':  1,
        '2':  2,
        'name':  '你好啊',
        'age':  23,
        'length':  3,
        'splice':  Array.prototype.splice,  //让obj可以以数组的形式显示
        'push':  Array.prototype.push  //继承push方法
}
console.log(obj[2]);//2
console.log(obj.age);//23

//继承push的原理
Array.prototype.push  =  function(elem)  {
        this[this.length]  =  elem;
        this.length++;
}

数组去重
a  =  [1,  1,  1,  2,  2,  2,  3,  3,  3]
Array.prototype.unique  =  function()  {
        var  temp  =  {},
                newArr  =  [];
        for  (var  i  =  0;  i  <  this.length;  i++)  {
        //hasOwnProperty查看数组里面有没有这个属性
                if  (!temp.hasOwnProperty(this[i]))  {
                        temp[this[i]]  =  this[i];
                        newArr.push(this[i]);
                }
        }
        return  newArr;
}
console.log(a.unique());//[  1,  2,  3  ]

字符串去重
var  str  =  "sdasdsfasfgsadsdsds";
String.prototype.unique  =  function()  {
        var  temp  =  [],
                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());//sdafg

forEach循环
简单实用

var  arr  =  [1,  2,  3];
arr.forEach((elmen)  =>  {
        console.log(elmen);
})

参数介绍

forEach方法中的function回调有三个参数:
array.forEach(function(遍历的数组内容,对应的数组索引,数组本身)  {
        
});

应用

var  arr  =  [1,  2,  3];
var  a  =  0;
arr.forEach(function(value,  index,  array)  {
        array[index]  ==  value;
        a  +=  value;
});
console.log(a);  //结果为  6

实现小项目
function  test(day)  {
        var  weekday  =  ['星期一',  '星期二',  '星期三',  '星期四',  '星期五',  '星期六',  '星期日'];
        weekday[day  -  1]  !==  undefined  ?
                console.log(weekday[day])  :
                console.log("erry");
}
test(2);//星期二

稀松数组
//稀松数组
var  arr  =  [,  1,  1,  ,  1,  ];
//因为前面的逗号数组会识别,最后一个逗号数组不会识别,所以长度只有5
console.log(arr.length);//5    
//逗号中间的地址访问都会返回undefined
console.log(arr[0])//undefined
console.log(arr);//[  <1  empty  item>,  1,  1,  <1  empty  item>,  1  ]

ES6数组去重,求交集,并集,差集
Set介绍
Set  ES6提供的新的数据结构Set(集合)。它类似于数组
集合的属性和方法
sise  返回集合的元素个数
add  增加一个新的元素,返回当前的集合
delete  删除元素,但会boolean值
has  检测集合中是否包含某个元素,放回boolean值

let  ss  =  new  Set();  //会自动去重
1
实践

//Set实践
let  arr  =  [1,  2,  3,  4,  5,  4,  3,  2,  1];
//1.数组去重
let  resultq  =  [...new  Set(arr)];  //[...]不用这个的话不是数组
console.log(resultq);
//2.交集
let  arr2  =  [4,  5,  6,  5,  6];
let  resultq2  =  [...new  Set(arr)].filter((item)  =>  {
    let  ss2  =  new  Set(arr2);  //4  5  6
    if  (ss2.has(item))  {
        return  true;
    }  else  {
        return  false;
    }
});
console.log(resultq2);  //[  4,  5  ]
//3.并集
let  union  =  [...new  Set([...arr,  ...arr2])];
console.log(union);
//4.差集
let  diff  =  [...new  Set(arr)].filter((item)  =>  {
    !new  Set(arr2).has(item);
});
console.log(diff);

     返回顶部
javascript数组篇