07 - 数组

7.01 - what is array？

简单来说，数组是一个数字序列号与内容对应的容器类似于一个班级中（数组）学号（序列号）与学生（序列号对应的内容）的关系，不同的是数组的内容可以是任意的数据类型

数组的定义方式

Array对象：通过实例化 JavaScript 原生的内置 Array 构造函数产生一个数组

var arr = new Array(3); // 定义一个长度为3的数组
console.log(arr); // [empty × 3]

字面量：[]

var arr = [];
arr.length = 3;
console.log(arr);// [empty × 3]

数组的特性

数组是一个，键为数字的特殊的对象

var arr = [];
console.log(typeof arr);// object
// 通过Array.isArray()方法判断一个对象是不是数组
console.log(Array.isArray(arr)); // true
// 通过 instanceof关键字
console.log(arr instanceof Array);

数组的长度：array.length
- 固定长度：通过数组的length属性，或者通过构造函数创建数组的时候可以限定数组的长度
- 动态长度：没有固定长度的时候，数组的长度是由内容决定的
- 序列从0开始：数组的序列号是从0开始的所以最后一个成员的的序列号为长度减1
数组的成员可以是任意数据类型，包括另外一个数组或者对象

var arr = [ 1 , "2" , function(){} , [/a/] , {a:1}];
console.log(arr[3]); // [/a/]

7.02 - 数组的读写

###获取数组成员

通过下标获取

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

for 遍历

var arr = ['a','b','c','d'];
for(var i=0;i<arr.length;i++){
  console.log( arr[i] ); // 'a' 'b' 'c' 'd'
}

array.forEach(fn)

var arr = ['a','b','c','d'];
arr.forEach(function(a,b,c){
  console.log(a); // 'a' 'b' 'c' 'd'
  console.log(b); // 0 1 2 3
  console.log(c); // ['a','b','c','d']
});

设置数组成员

通过下标设置

var arr = ['a','b','c','d'];
arr[1] = "hello world!!";
console.log(arr);// ['a','hello world!!','c','d']

通过下标添加成员

var arr = ['a','b','c','d'];
arr[4] = "hello world!!";
console.log(arr);// ['a','b','c','d','hello world!!']

删除数组的成员

数组方法
- splice()
- pop()
- shift()

7.03 - 数组的方法

成员操作类

方法	功能
push(param)	往后加：向数组末尾添加元素 param （arr[arr.length]=param）
unshift(param)	往前加：向数组开始添加元素 param（[param].concat(array)）
pop()	删后边：从数组的末尾删除元素，并返回
shift()	删前边：从数组的前端删除元素，并返回
slice(s,e)	复制：复制从序列号s到e的数组中成员，默认为0~末尾，不会改变原数组
splice(s,e[,alt,...])	截取与替换：截取从序列号s开始的e个数组中成员，默认为0~末尾，替换为alt，改变原数组，返回截取到的成员
concat(array)	合并：合并数组，从末尾添加参数数组中的元素到当前数组，返回一个新数组，不会改变原数组
reverse()	反转：反转数组，改变原数组
sort( [fn] )	排序：按照(ASCII值排列数组)，可以传入一个函数参数改变排列方式，改变原数组

数组工具类

功能
拼字符串：将数组的成员以传入的参数的字符串进行拼，返回拼接完成的字符串
第一次出现：返回参数 param 在数组中第一次出现的位置，没有则返回 -1，可选起始索引值参数
最后一次出现：返回参数 param 在数组中最后出现的位置，没有则返回 -1
变字符串：返回数组的字符串形式
要找谁在那：返回第一个符合条件的元素的序列号

遍历类

方法	功能
forEach( fn [,point] )	找人：遍历数组，传递一个方法参数得到每个遍历成员，可选内部this指向的参数
filter( fn [,point])	挑人：遍历数组，筛选出所有符合条件的元素，返回一个新的数组，可选内部this指向的参数

7.04 - 类数组对象

和数组一样，键名都是大于等于0的正整数，并且拥有length属性的对象被称之为类数组对象，比如：字符串，dom节点对象，arguments参数列表等等

类数组对象与数组的对比

类数组不能直接使用数组方法

var arrayLikeObj = {
  0 : "a",
  1 : "b",
  2 : "c",
  3 : "d",
  length : 4
};
// Error 
/*
arrayLikeObj.forEach(function(a){
  console.log(a);
});
*/
// 但是可以通过call方法使用
Array.prototype.forEach.call(arrayLikeObj,function(a){
  console.log(a);
});

类数组对象的length属性不是动态的
可以通过数组的slice方法将大部分类数组转变成数组

var str = "abcdef";
var arr = Array.prototype.slice.call(str);
console.log(arr);// [a,b,c,d,e,f]

类数组转变成数组的方法

遍历添加

<div>老大</div>
<div>老二</div>
<div>三儿</div>
<div>四儿</div>
<script>
  	function changeArr(arrayLike){
        var arr = [];
        for(var i=0,l=arrayLike.length;i<l;i++){
            arr.push(dDiv[i]);
        }
      	return arr;
    }
  	Array.isArray(changeArr(document.getElementsByTagName("div"))); // true
</script>

arrray.selice.call(arrayLike)

<div>老大</div>
<div>老二</div>
<div>三儿</div>
<div>四儿</div>
<script>
  function changeArr(arrayLike){
    return Array.prototype.slice.call(arrayLike));
  }
  Array.isArray(changeArr(document.getElementsByTagName("div"))); // true
</script>

##7.05 - 数组方法的使用技巧

getClass 兼容

循环遍历每个标签的每个类名进行判断

function getClass(name,parent){
				parent = parent || document;
				if(typeof name !== "string" || typeof paent !== "object")return;
				if(parent.getElementsByClassName){
					return parent.getElementsByClassName(name);
				}else{
					var
						all = parent.getElementsByTagName("*"),
						arr = [],
						cName = cNames = "";
					for(var i=0,lenI=all.length;i<lenI;i++){
						cName = all[i].className;
						if(cName){
							cNames = cName.split(" ");
							for(var j=0,lenJ=cNames.length;j<lenJ;j++){
								if(cNames[j] === name){
									arr.push(all[i]);
									break;
								}
							}
						}
					}
					return arr;
				}
			}

filter( 伪兼容，因为filter方法本身就不兼容 )

function getClass(name,parent){
				parent = parent || document;
				if(typeof name !== "string" && typeof paent !== "object")return;
				if(parent.getElementsByClassName){
					return parent.getElementsByClassName(name);
				}else{
					var
						all = [].slice.call(parent.getElementsByTagName("*")),
                        cName = "";
					return all.filter(function(item){
                      	cName = item.className;
						return cName?cName.split(" ").indexOf(name) !== -1:false;
					});
				}
			}

类名操作

添加类名

function addClass(addNames,dom){
	var cName = dom.className.trim();
	if(!cName){dom.className = addNames;return;};
	var
		cNameArr = cName.split(" "),
		addNameArr = addNames.trim().split(" "),
		len = cNameArr.length,
		addLen = addNameArr.length;

	if(len === 1 && addLen === 1 && cName !== addNames){
		dom.className += " " + addNames;
	}else{
		
		// 筛选剔除添加项的重复项
		var str = addNameArr.filter(function(item){
			return cNameArr.indexOf(item) === -1?item:false;
		}).join(" ");
        
		dom.className += str?" "+str:"";

		// 遍历剔除添加项的重复项
		// for(var i=0;i<len;i++){
		// 	for(var j=0;j<addNameArr.length;j++){
		// 		if(cNameArr[i] === addNameArr[j]){
		// 			addNameArr.splice(j,1);
		// 			break;
		// 		}
		// 	}
		// }
		// var str = addNameArr.join(" ")
		// dom.className += str?" "+str:""; 

	}
}

删除类名

function removeClass(reNames,dom){
	var cName = dom.className.trim();
	if(!cName)return;
	var
		cNameArr = cName.split(" "),
		reNameArr = reNames.trim().split(" "),
		len = cNameArr.length,
		reLen = reNameArr.length;

	// 遍历剔除
	for(var i=0;i<reLen;i++){
		for(var j=0;j<cNameArr.length;j++){
			if(reNameArr[i] === cNameArr[j]){
				cNameArr.splice(j,1);
			}
		}
	}
	dom.className = cNameArr.join(" ");

	// 筛选剔除
	// dom.className = cNameArr.filter(function(item,index){
	// 	return reNameArr.indexOf(item) === -1;
	// }).join(" ");
    
}

自动检测

function toggleCass(cNames,dom){
	var cName = dom.className.trim();
	if(!cName){dom.className = cNames;return;};
	var
		cNameArr = cName.split(" "),
		addNameArr = cNames.trim().split(" "),
		len = cNameArr.length,
		addLen = addNameArr.length;

	// 遍历判断
	 var off;
	 for(var i=0;i<addLen;i++){
	 	off = true;
	 	for(var j=cNameArr.length-1;j>=0;j--){
	 		if(addNameArr[i] === cNameArr[j]){
	 			cNameArr.splice(j,1);
	 			off = false;
	 		}
	 	}
	 	if(off){
	 		cNameArr.push(addNameArr[i]);
	 	}
	 }
	 dom.className = cNameArr.join(" ");
	
}

筛选排序

价格排序

<div id="box">
  <p>100</p>
  <p>20</p>
  <p>310</p>
  <p>30</p>
</div>
<script>
  var
      dBox = document.getElementById("box"),
      dP = dBox.getElementsByTagName("p");
  var dPArr = [].slice.call(dP);
  var off = false,_dPArr;

  document.onclick = function(){

    _dPArr = dPArr.sort(function(a,b){
      if(off)a = [b,b=a][0];
      return b.innerText*1 - a.innerText*1;
    });

    off= !off;
    _dPArr.forEach((item)=>{
      dBox.appendChild(item);
    })
  }
</script>

数组去重

遍历删除重复

var arr = [1,1,1,2,2,3,3,1];
function unique(arr){
  if(arr instanceof Array){
    for(var i=0;i<arr.length-1;i++){
      for(var j=i+1;j<arr.length;){
        arr[i] === arr[j]?arr.splice(j,1):j++;
      }
    } 
  }
  return arr;
}

遍历添加不重复的项

function unique(arr){
	if(arr instanceof Array){
		var
			arr1 = [arr[0]],
			len = arr.length,
			off;
		for(var i=1;i<len;i++){
			off = true;
			for(var j=0;j<arr1.length;j++){
				if(arr[i] === arr1[j]){
					off=false;
					break;
				}	
			}
			if(off)arr1.push(arr[i]);
		} 
		return arr1;
	}
}

序列号的唯一性

// filter
function unique(arr){
	if(arr instanceof Array){
		return arr.filter(function(item,index,Arr){
			return Arr.indexOf(item) === index;
		});
	}
}

复制数组

遍历添加

var arr = [1,2,3,4,5];
function copyArr(arr){
  var _arr;
  arr.forEach(function(item){
	_arr.push(item);
  }); 
  return _arr;
}

slice()

var arr = [1,2,3,4,5];
function copyArr(arr){
  return arr.slice(0);
}

07 - 数组

07 - 数组

7.01 - what is array？

数组的定义方式

数组的特性

7.02 - 数组的读写

设置数组成员

删除数组的成员

7.03 - 数组的方法

成员操作类

数组工具类

遍历类

7.04 - 类数组对象

类数组对象与数组的对比

类数组转变成数组的方法

getClass 兼容

类名操作

筛选排序

数组去重

复制数组

7.06 - 数组练习

1. 移除数组中的某个元素返回新数组

2. 统计一个字符串中某个字符出现的次数

3. 找出数组中重复出现的元素,返回一个新数组

猜你喜欢