JS08 数组、包装类

1、数组的方法和遍历

• 数组的方法：var arr = ["123","434","34545"];
  • push()
    • 向数组的末尾添加一个或更多元素，并返回新的长度。
    • 可以将要添加的元素作为方法的参数传递，这样这些元素将会自动添加到数组的末尾
    • 该方法会将数组的长度作为返回值返回
  • pop()
    • 删除数组的最后一个元素
    • 并将被删除的元素作为返回值返回
  • unshift()
    • 向数组的开头添加一个或更多元素unshift()，并返回新的长度。
    • 向前面加入元素以后，其他元素的索引会依次调整
    • 这里是按照添加的元素依次添加，并不会改变位置
  • shift()
    • 删除数组的第一个元素
    • 并将被删除的元素作为返回值返回

  • 	//push()
    var result = arr.push("asfas","sdfasdf","sdfas");
    var result = arr.push("asfas","sdfasdf","sdfas");
    console.log(arr);
    console.log("result="+result);  //6（长度）
    
    	// pop()
    result=arr.pop();
    console.log(arr);
    console.log("result="+result);  //返回"sdfas"
    
    	//unshift()
    result=arr.unshift("fadfas","sdfsadfa");
    console.log(arr);  
    	//"fadfas","sdfsadfa"，"123","434","34545"，"asfas","sdfasdf","sdfas"
    console.log("result="+result);  //8
    
    	//shift()
    result=arr.shift();
    result=arr.shift();
    console.log(arr);  //"34545", "asfas", "sdfasdf", "sdfas"
    console.log("result="+result);  //434

• 数组的遍历：数组的遍历就是将数组中所有的元素都取出来

• var arr1 = ["dfad","dfgh","bsdvv"];
  //使用for循环将其取出
  for (var i = 0 ; i<arr1.length ; i++){
  	console.log(arr1[i]);
  }

•  数组的方法：
  • 数组的方法：forEach()
    • 一般我们使用for循环去遍历数组
    • JS中还为我们提供了一个方法，用来遍历数组 ：forEach（）
    • 这个方法只支持IE8以上的浏览器， IE8还是使用for循环
    • forEach需要函数作为参数，直接传递一个匿名函数
      • 1、像这种函数，由我们创建，但不由我们调用的，我们称之为回调函数
      • 2、数组中有几个函数就执行几次
      • 3、每次执行时，浏览器都会将遍历到的元素以实参的形式传递进来
        • 我们可以来定义形参，来读取这些内容
      • 4、浏览器会在回调函数中传递三个参数
        • 第一个参数 ：当前正在遍历到的元素
        • 第二个参数 ：当前正在遍历的元素的索引
        • 第三个参数 ：就是正在遍历的数组
  • 数组的方法：slice()
    • 可以从数组中提取指定的元素
    • 该方法不会影响到原数组，而是将截取到的元素封装到一个新的数组中返回
    • 参数：
      • 1、截取开始位置的索引，包含开始
      • 2、截取结束位置的索引，不包含结束
    • 第二个参数可以不写，此时会截取开始往后的所有索引
    • 索引可以传递负值
      • 如果传递一个负数，则从后往前计算
      • -1 倒数第一个
      • -2 倒数第二个
  • 数组的方法：splice()
    • 删除元素，并向数组添加新元素。
    • 使用splice会影响到原数组，会将指定的元素从原数组中删除
      • 并将被删除的元素作为返回值返回
      • 参数：
        • 第一个 ：表示开始位置的索引
        • 第二个 ：表示删除的数量
        • 第三个及以后 ：可以传递新的元素，这些元素会自动插入到开始位置索引前边

//数组的方法：forEach
    //创建一个数组
var arr10 = ["123","434","34545"];
    //forEach需要函数作为参数，直接传递一个匿名函数
arr10.forEach(function (value,index,obj) {
	//console.log("sdfsa");
	console.log("value="+value);
	console.log("index="+index);
	console.log("obj="+obj);
});


//数组的方法：slice
var arr11 = ["123","434","34545"];
var result=arr11.slice(1,2);
result=arr11.slice(1);
result=arr11.slice(1,-2);
console.log(arr11);
console.log(result);

//数组的方法：slice
var arr12 = ["123","434","34545"];
var result=arr12.splice(0,1,"dfadsfasdf","sdfasdfasdfa");
console.log(arr12);  // "dfadsfasdf", "sdfasdfasdfa", "434", "34545"
console.log(result);  //"123"

2、数组剩余的方法

• concat()
  • 可以连接两个或多个数组，并将新的数组返回
  • 该方法不会对原数组产生影响
• join()
  • 该方法可以将数组转化为一个字符串
  • 该方法不会对原数组产生影响，而是将转换后代的字符串作为结果返回
  • 在join()中可以指定一个字符串作为阐述，这个字符串将会成为数组中元素的连接符
    • 如果不指定连接符，则默认使用，号作为连接符
• reverse()
  • 颠倒数组中元素的顺序。 (前后颠倒)
  • 该方法会直接影响原数组
• sort()
  • 对数组的元素进行排序
  • 也会直接影响元素
  • 它默认按照Unicode编码进行排序
  • 即使对于纯数字的数组，使用它进行排序时，也会按照Unicode编码来排序
    • 对于数字进行排序时，可能会得到错误的结果
  • 所以我们可以自己指定排序的规则
    • 在sort()中添加一个回调函数，来指定排序规则
    • 回调函数中需要定义两个参数
      • 浏览器会分别将使用数组中的元素作为实参去调用回调函数
      • 使用哪个元素不确定，但a一定是在b前边的
    • 浏览器会根据回调函数的返回值来决定元素的顺序
      • 如果返回一个大于0的数，则元素会交换位置
      • 如果返回一个小于0的数，则元素不会交换位置
      • 如果返回一个等于0的值，则元素也不会交换位置
        • 如果想要升序排列:return a-b;
        • 如果想要降序排列：return b-a;

var arr = ["123","434","34545"];
var arr2 = ["dfsdf","asdfasdf","dfdfdfz"];
var arr3 = ["方法","答复","手动阀"];

    //concat()
var result=arr.concat(arr2,arr3,"发士大夫","上帝发誓");
console.log(result);

    //join()
arr= ["覆盖","浮动","的法国队"];
result = arr.join("@");
console.log(result);//覆盖@浮动@的法国队
console.log(typeof result);//string

    //reverse()
arr.reverse();
console.log(arr);//"的法国队", "浮动", "覆盖"

    //sort()
arr = ["a","s","d","v","b","c"];
arr.sort();
console.log(arr);//"a", "b", "c", "d", "s", "v"
arr = [1,3,4,8,5,25,7,0];
arr.sort();
console.log(arr);//0, 1, 25, 3, 4, 5, 7, 8

arr = [5,4];
arr.sort(function(a,b){
	//前面的大
	/*if (a>b){
		return 1;
	} else if (a<b){
		return -1;
	} else{
		return 0;
	}*/

	//简写：
	//升序排列
	return a-b;
	//降序排列
	return b-a;
});
console.log(arr);

• 练习1

function Person(name , age ){
	this.name = name;
	this.age = age;
}
Person.prototype.toString=function(){
	return "Person[name="+this.name+",age="+this.age+"]";
};

//创建一个Person对象
var per = new Person("爸爸",18);
var per2 = new Person("爷爷",48);
var per3 = new Person("天天",78);
var per4 = new Person("祖宗",118);
var per5 = new Person("老祖宗",148);
//将这些person放入数组中
var perArr = [per ,per2, per3 ,per4,per5];

//练习：
	//创建一个函数，可以将perArr中的满18随的Person提取出来
		//然后封装到一个数组中并返回
//arr作为形参，是要提取的数组
function getAdult(arr){
	//创建一个新数组
	var newArr = [];
	//遍历Arr，获取arr中的Person对象
	for (var i=0; i<arr.length ;i++){
		var p = arr[i];
		//判断Person对象里面的数组age是否大于等于18
		if (p.age >=18){
			//如果对象大于等于18，则将这个对象添加到newArr中
			//将我们的对象放在新数组里面
			newArr.push(p);
		}
	}
	//将新的数组作为返回值返回
	return newArr;
}
var result = getAdult(perArr);
console.log(result);

•   练习2：数组去重复

//创建一个数组
var arr6=[1,2,3,2,2,1,3,4,2,5];

//去除数组中重复的数字
//获取数组中的每一个元素
for(var i=0 ; i<arr6.length;i++){
	console.log(arr[i]);
	//获取当前元素后的所有元素
	for (var j=i+1;j<arr6.length;j++) {
		console.log(arr6[j]);
		//判断两个元素是否相等
		if (arr6[i] == arr[j]){
			//如果相等则证明出现了重复的元素，则删除j对应的元素
			arr6.splice(j,1);
			//当删除了当前j所在的元素以后，后边的元素会自动补位
			//此时将不会再比较这个元素，我们需要再比较一次j所在位置的元素
			//为的是害怕连续重复元素
			//这时候就可以使用j自减
			j--;
		}
	}
}

3、包装类

• 在JS中为我们提供了三个包装类
  • 通过这三个包装类可以将基本数据类型的数据转化为对象
  • String() ：可以将基本数据类型的字符串转换为String对象
  • Number() ：可以将基本数据类型的数字转换为Number对象
  • Boolean() ：可以将基本数据类型的布尔值转换为Boolean对象
  • 我们在实际开发中不会使用基本数据类型的对象
    • 如果使用可能会出现问题，他是浏览器自己用的

  • var a = 123;
    console.log(typeof a)
    var num = new Number(9);
    console.log(typeof num);  //number

• 方法和属性能添加给对象，不能添加给基本数据类型
  • 当我们对一些基本数据类型的值去调用属性和方法时
  • 浏览器会临时使用包装类将其转化为对象，然后再调用对象的属性和方法
  • 调用完之后，再将其转换为基本数据类型

  • var s=123;
    s = s.toString();
    console.log(s);
    console.log(typeof s);