本文介绍了JavaScript数组的各种操作方法，包括扁平化、去重、排序等实用技巧，并探讨了数组深拷贝的实现方式及ES6带来的继承优化。
JS数组扁平化
1.递归
var arr=[1,2,[3,4,[5,6]]];
var nArr=[];
function flatten(arr){
for(var i=0;i<arr.length;i++){
if(Array.isArray(arr[i])){
return arguments.callee(arr[i]);
}
else{
nArr.push(arr[i]);
}
}
return nArr;
}
console.log(flatten(arr));
2.toString（如果数组元素都是数字）
[1, [2, [3, 4]]].toString() // "1,2,3,4"
3.reduce
var a=arr.reduce((a,b)=>{b
return a.concat(b)
})
4.扩展运算符
apply，call，bind方法的区别
都是函数的方法，用来改变函数的执行上下文，即this的指向。
- apply--fn.apply(A,[a,b,c])，为A对象绑定方法fn，参数为a,b,c,并立即执行；
- call--fn.call(A,a,b,c)，为A对象绑定方法fn,参数为a，b，c，并立即执行；
- bind--fn.bind(A),为A绑定方法fn，不立即执行。
通常用到的地方，即解决了什么问题？
- 数组之间的追加
var a=[1,2,3]; var b=[4,5,6]; Array.prototype.push.apply(a,b); console.log(a);//[1,2,3,4,5,6] - 求数组中的最大值最小值
var arr=[1,4,25,23,666];
var MaxInArray=Math.max.apply(Math,arr);
console.log(MaxInArray)//666
- 判断是否为数组，函数，对象等
Object.prototype.toString.call(obj); //[object Array]数组
Object.prototype.toString.call(obj); //[object Object]对象
Object.prototype.toString.call(obj); //[object Function]函数
- 伪数组使用数组方法
Array.prototype.slice.call(obj)补充另一种es6方法：Array.from（）
es5和es6中数组的方法
- join( ) 将数组中所有元素转化成字符串并连接在一起，返回最后生成的字符串。可以自己指定分割的符号。
- reverse( ) 将数组中的元素颠倒顺序，返回逆序的数组，返回的数组是其本身
- sort( ) 将数组中的元素排序并返回排序后的数组
- cancat( ) 创建并返回一个新数组，它的元素包括调用concat( )的原始数组的元素和concat的每个参数
- slice (start，end) 提取数组的一部分，索引从start开始到end结束，若不设置start就返回从start到数组结束，如果出出现负数如slice（-3），则表示相对于数组中最后一个元素相距3的位置
- splice（index，num，replace等） 常用于删除或者添加修改数组元素。第一个参数指开始的索引位置，第二个参数指要删除或者要修改的元素个数，第三个及之后的参数表示要在此位置添加的元素
- push( ),unshift( ) 在数组末尾或开头添加新的元素，并返回新数组的长度
- pop( ),shift( ) 从数组末尾或开头删除数组，并返回删除的元素
- forEach( ) 从头至尾遍历数组，为每个数组调用指定的函数
- map( ) 将调用的数组中每个元素传递给指定的函数，并返回一个数组，它包含这个函数的返回值，原来数组不变
- filter( ) 这个方法返回的是调用的数组的一个子集，传递的函数是用逻辑来判断的，该函数返回true或false。如果返回值是true或者是能转化为true的值，那么传递给判定函数的元素就是这个子集的成员，它将被添加到一个作为返回值的数组中。
- every( ) 数组中所有元素都满足函数指定的条件时返回true
- some( ) 数组中只要某一项满足函数指定的条件就返回true
- reduce( ) 这个方法使用指定的函数将数组进行合并，生成单个值。接收两个参数，第一个是执行简化操作的函数，就是说用某种方法把两个值简化为一个值，并返回简化后的值。第二个参数可选，用来传递给第一个参数函数作为初始值，若没有第二个参数，则将数组的第一个元素作为初始值
- reduceRight( ) 和reduce差不多，从后往前
- indexOf( )和lastIndexOf( ) 搜索整个数组中具有给定元素的值，返回找到的元素的索引，找到第一个就返回它的索引值，没有找到就返回-1.一个从头开始，一个从尾开始
- Array.isArray( ) 判断一个对象是不是数组
- Array.from( ) 将类数组对象转为数组
数组去重的方法
1.简单的去重方法
var arr=[1,1,6,3,1,5,10,4,4];
function unique(arr){
var newArr=[];
for(var i=0;i<arr.length;i++){
if(newArr.indexOf(arr[i])==-1){
newArr.push(arr[i]);
}
}
return newArr;
}
console.log(unique(arr));//[1,6,3,5,10,4]
2.排序后相邻去重
function unique(arr){
arr.sort(function (a, b) {
return a-b;
});
var temp=[arr[0]];
for(var i=1;i<arr.length;i++){
if(arr[i]!==temp[temp.length-1]){
temp.push(arr[i]);
}
}
return temp;
}
console.log(unique(arr));//[1,3,4,5,6,10]
3.查找数组某一项与索引判断是否一致
function unique(){
var temp=[];
for(var i=0;i<arr.length;i++){
if(arr.indexOf(arr[i])==i){
temp.push(arr[i]);
}
}
return temp;
}
console.log(unique(arr));//[1,6,3,5,10,4]
如何实现深拷贝
1.递归实现--判断obj是不是对象和数组，新建变量保存为相应的格式，再遍历对象中每一个元素，检测是object类型还是普通类型，如果是object，递归深拷贝函数，将值赋给新的变量，如果是普通类型，直接将元素赋给新的变量
function deepC(obj){
var newObj=obj instanceof Array?[]:{};
for(var i in obj){
newObj[i]=typeof obj[i]=='object'?deepC(obj[i]):obj[i];
}
return newObj;
}
2.转成json格式再转回来--只适用于能转成json格式的对象，像function和regexp这种不适用
var obj1={a:{b:6}};
var obj2=JSON.parse(JSON.stringify(obj1));
obj2.a.b=4;
console.log(obj1.a.b);//6
console.log(obj2.a.b);//4
3.jQuery的$.extend()方法---底层依然是递归循环调用
var obj1={a:{b:6}};
obj2= $.extend(true,{},obj1);
4.es6深拷贝实现---数据只有一层的话可以用
- Array.from( ) --数组只有一层 arr2=Array.from(arr1)
- 扩展运算符 --数组只有一层 arr2=[...arr1]
- Object.assign() --对象只有一层 obj2=Object.assign({},obj1)
ES6怎么优化了继承
class VersionedArray extends Array
position
- absolute--绝对定位，脱离文档流的布局，遗留下来的空间由后面的元素填充。定位的其实位置为最近的父元素，否则为body文档本身
- relative--相对定位，不脱离文档流的布局，只改变自身的位置，在文档流原来的位置遗留空白区域。定位的起始位置为此元素原先在文档流的位置
- fixed--固定定位，类似于absolute，但是不随着滚动条的移动而改变位置
- static--默认值 默认布局
display
- none--表示该元素不会显示，其空间也不会存在。visiblility:hide表示只是将元素隐藏，但不会改变页面布局，但也不会触发该元素已经绑定的事件。opacity:0表示将元素隐藏，不会改变原来的布局，但会触发该元素绑定的事件。
- inline--内联元素，与其他元素在一行，不可设置宽高，margin-top与margin-bottom无效，但left 和right的margin有效，左右padding也有效，但是上下padding不会影响元素的高度，会影响元素的背景高度
- inline-block--行内块元素，既是内联元素，又可设置宽高以及行高及上下边距<img><input>
- block--块级元素
字符串的方法
- str.charAt(n) 返回字符串的第n个字符，如果越界，返回控制符
- str.indexOf('s') 返回字符串中第一次出现字符s的位置，如果不在，返回-1
- str.lastIndexOf('s') 类似于上条，从后往前
- str.substring(start,[end]) 表示截取从start到end（不包含）的所有字符串，若第二个参数省略，表示从start到结束,俩参数不能为负值
- str.slice(start,[end]) 与上条相似，可以传负值
- str.substr(start,[length]) 截取从start开始的指定长度字符串
- replace
- search
- match
- split
- toLowerCase
- toUpperCase
快排
function quickSort(arr){
if(arr.length<=1){
return arr;
}
var left=[];
var right=[];
var base=arr[Math.floor(Math.random()*arr.length)];
for(var i=0;i<arr.length;i++){
if(arr[i]<base){
left.push(arr[i])
}
if(arr[i]>base){
right.push(arr[i])
}
}
return quickSort(left).concat(base,quickSort(right));
}
var arr=[2,4,21,6,85,23,1];
console.log(quickSort(arr))
冒泡
for(var i=0;i<arr.length;i++){
for(var j=0;j<arr.length-i;j++){
if(arr[j]>arr[j+1]){
var temp=arr[j];
arr[j]=arr[j+1];
arr[j+1]=temp
}
}
}
return arr;
}
var arr=[2,4,21,6,85,23,1];
console.log(arrSort(arr))
前端优化
- 减少http请求，合理设置http缓存--合并css，合并JavaScript，合并图片，CSS sprites等
- 使用浏览器缓存
- 启用压缩--在浏览器端对文件进行压缩，尽量将外部脚本样式进行合并，多个合为一个
- css放在最顶部，js放在最下面，因为浏览器在下载完所有的css才会进行渲染
- 异步请求callback--将一些行为样式提取出来，慢慢的加载信息的内容
- 减少cookie传输，因为cookie包含在每次请求和响应中，太大的话严重影响数据传输，另一方面，对于某些静态资源的访问，如CSS、script等，发送cookie没有意义，可以考虑静态资源使用独立域名访问，避免请求静态资源时发送cookie，减少cookie传输次数。
- js代码层面：需要遍历DOM结点时，通过Array.prototype.slice.call(obj),转化为数组；慎用with，使用 with相当于增加了作用域链长度。而每次查找作用域链都是要消耗时间的，过长的作用域链会导致查找性能下降。 ；避免使用eval和Function，脚本引擎都需要将源代码转换成可执行代码。这是很消耗资源的操作 —— 通常比简单的函数调用慢 100倍以上；减少作用域链查找，减少闭包使用；尽量少使用字符串拼接，在 Javascript中使用”+”号来拼接字符串效率是比较低的，因为每次运行都会开辟新的内存并生成新的字符串变量，然后将拼接结果赋值给新变量。与之相比更为高效的做法是使用数组的 join方法，即将需要拼接的字符串放在数组中最后调用其 join方法得到结果。不过由于使用数组也有一定的开销，因此当需要拼接的字符串较多的时候可以考虑用此方法。
分页
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
