前端零基础 JS 教学第七天 07 - 数组方法 ,数组去重，截取url网页地址-CSDN博客

Array 对象

创建数组对象的两种方式
字面量方式
new Array();
字面量方式
var arr = []
arr[0] = 10; //追加进去

<!--这里使用new Array的方式-->
var arr = new Array();
console.log(arr);  //空数组

var arr = new Array(3);//数组是undefined的空的 里面的长度为3 
console.log(arr);

var arr = new Array(1,2,3,4);//里面包含1,2,3,4 四个元素 
console.log(arr);
复制代码

检测一个对象是否是数组

instanceof

var  arr = [1,2,3]; // 数组 
var o = {}  //对象 
console.log(arr instanceof Array); true
console.log(o  instanceof Array);  false

isArray 是html5 新增的方法 

var arr = [1,2,3,4];
var o = {}
console.log(Array.isArray(arr)); true
console.log(Array.isArray(o));   false
复制代码

数组常见方法

var str = '1,2,3,4,5';
console.log(str.split(','));  //把字符串转换为数组 

var arr = [1,2,3,4,5];
console.log(arr.toString()); //把数组转换成字符串 
复制代码

数组添加删除方法

		数组方法
方法名 		   说明								返回值
push() 		修改原数组，末尾添加一个或多个元素 		并返回新的长度
pop()      删除数组的最后一个元素把数组长度减1无参数    返回它删除的元的值
unshift()   向数组的开头添加一个或多个元素 			  并返回新的长度
shift()     把数组的第一个元素从其中删除，把数组长度减1 无参数    并返回第一个元素的值

    push() 后面追加
var arr = ['red','green'];
arr.push('pink');  //给arr 末尾添加一个 pink
console.log(arr); //这里修改原数组 打印出 'red','green'，'pink'

    pop() 后面删除不需要给参数记住
var arr = ['red','green'];
var newPop = arr.pop(); //从后面删除，修改原数组
console.log(newPop); //返回删除的元素green
console.log(arr); //删除后的数组 red 
    
    unshift 在前面进行追加 
var arr = ['red','green'];
arr.unshift('blue'); //像数组的开头添加
console.log(arr.unshift('blue'));//返回新数组的长度 3
console.log(arr); //返回一个新的数组
	
    shift 在前面删除
var arr = ['red','green'];
arr.shift(); //一次只删除1个 不跟参数
console.log(arr)//green
复制代码

反转数组和排序

    reverse() 修改原数组 无参数 
    
var arr = ['pink','blue','red'];
a = arr.reverse() //反转数组修改原数组，无参数 
console.log(arr);

	sort() 修改原数组 无参数 
	 只能排列个位 数字  如果 var arr = [11,23,32,,24,21,32];这样将无法排序
	 
var arr = [2,5,6,9,1,3,4];
a = arr.sort() //sort()无参数 按照ascii 排序 只能排列个位 数字 
console.log(a);
console.log(arr.sort());


   XXX.sort(function(a,b){}) 
var arr = [11,23,32,,24,21,32];
// sort里面传的是一个函数 
arr.sort(function(a,b){
	// 里面 形参给的 是a 和b 因为好记忆 原理也是根据冒泡进行比较
	// 升序排序 
	return a - b;
	<!--这里如果降序 b - a -->
})
console.log(arr);
复制代码

清空数组的三种方法

 var arr = ['pink','red','blue','yellow','black'];
 arr = []; //清空数组给空 
 console.log(arr);


 // 第二种方法根据长度修改
 var arr = ['pink','red','blue','yellow','black'];
 arr.length = 0;
 console.log(arr);

  var arr = ['pink','red','blue','yellow','black'];
  arr.splice(0,arr.length);
  console.log(arr);
复制代码

join 方法

可以根据分隔符 把数组转为 字符串

var arr = ['red','pink','color'];
	// 把数组转为字符串,如果join 里面没有参数和toString()是一样的
	a = arr.join();
	console.log(a);
	console.log(arr.toString());

	console.log(arr.join('-')); //join里面有参数 
复制代码

迭代方法类似于循环 filter()过滤

filter() HTML5新增加

// arr.filter(callback[,thisArg])//回调函数

 var arr =[1000,2000,1500,2400,5000,1800];
	arr.filter(function(index,i) {
		// console.log(index); 这里打印出来的 里面的数值所有的数组元素 相当于for 循环
		// console.log(i);  是索引号
	});

// 谨记 filter 不修改原数组 所有需要新数组存储 
var newArr  = arr.filter(function(index){
	return index < 2500;
})
console.log(newArr);
复制代码

练习题1 删除超过2500的数字

var arr =[1000,2000,1500,2400,5000,1800];
var newArr =[];
for(var i=0; i<arr.length;i++){
	// 小于 2500存入新数组
	if(arr[i] <= 2500){
		// 存给新数组，追加新数组
		newArr.push(arr[i]);
	}
}

console.log(newArr);


    
    concat 合并连接数组 不修改
    xxx.concat(arr,arr2);
var  arr = ['red','yeddlow'];
var arr1 = ['blue','black'];
console.log(arr+ arr1); //这样变成字符串了
console.log(arr.concat(arr1)); // 数组相加 使用concat 链接 合并曾为一个 数组


    splice 修改原数组 

var arr = ['pink','red','blue','yellow','black'];
arr.splice(1,3); //删除1到第三个 
console.log(arr.splice(1,3)); // 返回被删除的元素 
console.log(arr);//'pink','black'
复制代码

练习题：数组去重

    编写一个方法 去掉一个数组的重复元素
    
    var arr = ['c','a','b','s','s','a','a','d','d','c'];
    // 昨天学的 首先需要一个新对象 
var o = {};
// 然后通过for 进行循环 
for(var i=0; i<arr.length; i++){

	var item = arr[i];

	if(o[item]){
		o[item] ++;
	}else{	
		o[item] = 1;
	}
}
console.log(o);

var newArr = [];
// 处理对象赛选元素 
// 存放我们选出来的内容元素
for(var k in o){
	// 如果数字是1 直接保存，要是大于1怎么办
	// newArr.indexOf(k) === -1 说明没找到 
	if(o[k] == 1 || newArr.indexOf(k) === -1){
		newArr.push(k);
	}
}
console.log(newArr);
复制代码

练习截取 url 网页地址

<body>
<form action="" method="get">
	用户名：<input type="text" name="userName" id="">	 <br>
	密码：<input type="text" name="password" id="">
	<input type="submit" name="" value="点击我">
</form>
</body>
下面是浏览器地址栏
复制代码

截取 url网页地址

var url = 'js.03lianxi.html?userName=xzliang&password=woxiangjingjing';

function getParames(url){
	// 思路： 我们先找到？号 indexOf('?');
	var index = url.indexOf('?')+1;
	// 下面开始截取字符串
	// console.log(index);
	var params = url.substr(index);
	// console.log(params);//这里我们会发现多了一个？号
	// 得到这个 userName=xzliang&password=woxiangjingjing

	// 第三步继续拆分 观察发现我们&隔开的 
	var arr = params.split('&');
	//得到 console.log(arr);  ["userName=xzliang", "password=woxiangjingjing"]
	var o = {} //声明一个对象 
	// 使用遍历 每一个 
	for(var i=0; i<arr.length;i++){
		var newArr = arr[i].split('=');
		// console.log(newArr);
		//  ["userName", "xzliang"],["password", "woxiangjingjing"]
		o[newArr[0]] = newArr[1];
	}
	return o;

}

console.log(getParames(url));复制代码