js6

最新推荐文章于 2023-05-28 18:54:10 发布

LYRZCSDN

最新推荐文章于 2023-05-28 18:54:10 发布

阅读量217

点赞数

本文链接：https://blog.csdn.net/LYRZCSDN/article/details/101521461

版权

函数、数组

解析器在调用函数每次都会向函数内部传递进一个隐含的参数,
这个隐含的参数就是this，this指向的是一个对象，
这个对象我们称为函数执行的上下文对象，
根据函数的调用方式的不同，this会指向不同的对象
1.以函数的形式调用时，this永远都是window
2.以方法的形式调用时，this就是调用方法的那个对象
*/

function fun(){
			//console.log("a = "+a+", b = "+b);
			console.log(this.name);
		}
		
		//fun();
		
		//创建一个对象
		var obj = {
			name:"孙悟空",
			sayName:fun
		};
		
		var obj2 = {
			name:"沙和尚",
			sayName:fun
		};
		
		//console.log(obj.sayName == fun);
		var name = "全局的name属性";
		//obj.sayName();
		//以函数形式调用，this是window
	fun();//全局的name属性
		
		//以方法的形式调用，this是调用方法的对象
		//obj.sayName();//孙悟空
		//obj2.sayName();//沙和尚
			
		/*
		 * 创建一个对象
		 */
		var obj = {
				name:"孙悟空",
				age:18,
				gender:"男",
				sayName:function(){
					alert(this.name);
				}
		};

		/*
		 * 使用工厂方法创建对象
		 * 	通过该方法可以大批量的创建对象
		 */
		function createPerson(name , age ,gender){
			//创建一个新的对象 
			var obj = new Object();
			//向对象中添加属性
			obj.name = name;
			obj.age = age;
			obj.gender = gender;
			obj.sayName = function(){
				alert(this.name);
			};
			//将新的对象返回
			return obj;
		}
		
		/*
		 * 用来创建狗的对象
		 */
		function createDog(name , age){
			var obj = new Object();
			obj.name = name;
			obj.age = age;
			obj.sayHello = function(){
				alert("汪汪~~");
			};
			
			return obj;
		}
		
		var obj2 = createPerson("猪八戒",28,"男");
		var obj3 = createPerson("白骨精",16,"女");
		var obj4 = createPerson("蜘蛛精",18,"女");
		/*
		 * 使用工厂方法创建的对象，使用的构造函数都是Object
		 * 	所以创建的对象都是Object这个类型，
		 * 	就导致我们无法区分出多种不同类型的对象
		 */
		//创建一个狗的对象
		var dog = createDog("旺财",3);
		
		console.log(dog);
		console.log(obj4);

创建一个构造函数，专门用来创建Person对象的
构造函数就是一个普通的函数，创建方式和普通函数没有区别,
不同的是构造函数习惯上首字母大写
构造函数和普通函数的区别就是调用方式的不同
普通函数是直接调用，而构造函数需要使用new关键字来调用
构造函数的执行流程：
1.立刻创建一个新的对象
2.将新建的对象设置为函数中this,在构造函数中可以使用this来引用新建的对象
3.逐行执行函数中的代码
4.将新建的对象作为返回值返回
使用同一个构造函数创建的对象，我们称为一类对象，也将一个构造函数称为一个类。
我们将通过一个构造函数创建的对象，称为是该类的实例
this的情况：
1.当以函数的形式调用时，this是window
2.当以方法的形式调用时，谁调用方法this就是谁
3.当以构造函数的形式调用时，this就是新创建的那个对象

function Person(name , age , gender){
			this.name = name;
			this.age = age;
			this.gender = gender;
			this.sayName = function(){
				alert(this.name);
			};
		}
		
		function Dog(){
			
		}
		
		var per = new Person("孙悟空",18,"男");
		var per2 = new Person("孙悟空",18,"男");
		var per3 = new Person("奔波霸",38,"男");
		
		var dog = new Dog();
		
		/*console.log(per==per);
		console.log(dog);*/
		
		/*
		 * 使用instanceof可以检查一个对象是否是一个类的实例
		 * 	语法：
		 * 		对象 instanceof 构造函数
		 * 如果是，则返回true，否则返回false
		 */
		//console.log(per instanceof Person);
		//console.log(dog instanceof Person);
		
		/*
		 * 所有的对象都是Object的后代，
		 * 	所以任何对象和Object左instanceof检查时都会返回true
		 */
		//console.log(dog instanceof Object);
		
		


					
		var obj = {
					name:"孙悟空",
					age:18,
					gender:"男",
					address:"花果山"
				 };

//枚举对象中的属性
//使用for … in 语句
/*

语法：
for(var 变量 in 对象){
}
for…in语句对象中有几个属性，循环体就会执行几次
每次执行时，会将对象中的一个属性的名字赋值给变量
*/

	for(var n in obj){
			console.log("属性名:"+n);
			
			console.log("属性值:"+obj[n]);
		}

原型 prototype
我们所创建的每一个函数，解析器都会向函数中添加一个属性prototype

这个属性对应着一个对象，这个对象就是我们所谓的原型对象

如果函数作为普通函数调用prototype没有任何作用

当函数以构造函数的形式调用时，它所创建的对象中都会有一个隐含的属性，

指向该构造函数的原型对象，我们可以通过__proto__来访问该属性

原型对象就相当于一个公共的区域，所有同一个类的实例都可以访问到这个原型对象，

我们可以将对象中共有的内容，统一设置到原型对象中。

当我们访问对象的一个属性或方法时，它会先在对象自身中寻找，如果有则直接使用，

如果没有则会去原型对象中寻找，如果找到则直接使用

以后我们创建构造函数时，可以将这些对象共有的属性和方法，统一添加到构造函数的原型对象中，

这样不用分别为每一个对象添加，也不会影响到全局作用域，就可以使每个对象都具有这些属性和方法了

function MyClass(){
	
}

//向MyClass的原型中添加属性a
MyClass.prototype.a = 123;

//向MyClass的原型中添加一个方法
MyClass.prototype.sayHello = function(){
	alert("hello");
};


/*
 * 创建一个构造函数
 */
function MyClass(){
	
}

//向MyClass的原型中添加一个name属性
MyClass.prototype.name = "我是原型中的名字";

var mc = new MyClass();
mc.age = 18;

//console.log(mc.name);

//使用in检查对象中是否含有某个属性时，如果对象中没有但是原型中有，也会返回true
//console.log("name" in mc);

//可以使用对象的hasOwnProperty()来检查对象自身中是否含有该属性
//使用该方法只有当对象自身中含有属性时，才会返回true
//console.log(mc.hasOwnProperty("age"));

//console.log(mc.hasOwnProperty("hasOwnProperty"));

原型对象也是对象，所以它也有原型，
当我们使用一个对象的属性或方法时，会现在自身中寻找，
自身中如果有，则直接使用，
如果没有则去原型对象中寻找，如果原型对象中有，则使用，
如果没有则去原型的原型中寻找,直到找到Object对象的原型，
Object对象的原型没有原型，如果在Object原型中依然没有找到，则返回undefined
*/

//console.log(mc.__proto__.hasOwnProperty("hasOwnProperty"));
		
		//console.log(mc.__proto__.__proto__.hasOwnProperty("hasOwnProperty"));
		
		//console.log(mc.__proto__.__proto__.__proto__);
		
		//console.log(mc.hello);
		
		//console.log(mc.__proto__.__proto__.__proto__)
		
		





		
		function Person(name , age , gender){
			this.name = name;
			this.age = age;
			this.gender = gender;
		}
		
		//修改Person原型的toString
		Person.prototype.toString = function(){
			return "Person[name="+this.name+",age="+this.age+",gender="+this.gender+"]";
		};
		
		
		//创建一个Person实例
		var per = new Person("孙悟空",18,"男");
		var per2 = new Person("猪八戒",28,"男");
		
		//当我们直接在页面中打印一个对象时，事实上是输出的对象的toString()方法的返回值
		//如果我们希望在输出对象时不输出[object Object]，可以为对象添加一个toString()方法
		//Person[name=孙悟空,age=18,gender=男]
		/*per.toString = function(){
			return "Person[name="+this.name+",age="+this.age+",gender="+this.gender+"]";
		};*/
		
		var result = per.toString();
		//console.log("result = " + result);
		//console.log(per.__proto__.__proto__.hasOwnProperty("toString"));
		console.log(per2);
		console.log(per);

垃圾回收（GC）

- 就像人生活的时间长了会产生垃圾一样，程序运行过程中也会产生垃圾
这些垃圾积攒过多以后，会导致程序运行的速度过慢，
所以我们需要一个垃圾回收的机制，来处理程序运行过程中产生垃圾
- 当一个对象没有任何的变量或属性对它进行引用，此时我们将永远无法操作该对象，
此时这种对象就是一个垃圾，这种对象过多会占用大量的内存空间，导致程序运行变慢，
所以这种垃圾必须进行清理。
- 在JS中拥有自动的垃圾回收机制，会自动将这些垃圾对象从内存中销毁，
我们不需要也不能进行垃圾回收的操作
- 我们需要做的只是要将不再使用的对象设置null即可

 var obj = new Object();
 
 	//对对象进行各种操作。。。。
 	
 	
 	obj = null;

内建对象
宿主对象
自定义对象
数组（Array）
数组也是一个对象
它和我们普通对象功能类似，也是用来存储一些值的
不同的是普通对象是使用字符串作为属性名的，
而数组时使用数字来作为索引操作元素
索引：
从0开始的整数就是索引
数组的存储性能比普通对象要好，在开发中我们经常使用数组来存储一些数据
//创建数组对象
var arr = new Array();

//使用typeof检查一个数组时，会返回object
console.log(typeof arr);

/*
 * 向数组中添加元素
 * 语法：数组[索引] = 值
 */
arr[0] = 10;
arr[1] = 33;
arr[2] = 22;
arr[3] = 44;
arr[10] = 31;
//arr[100] = 90;

/*
 * 读取数组中的元素
 * 语法：数组[索引]
 * 	如果读取不存在的索引，他不会报错而是返回undefined
 */

console.log(arr[3]);
console.log(arr);//arr[4]~arr[9]   

/*
 * 获取数组的长度
 * 可以使用length属性来获取数组的长度(元素的个数)
 * 	语法：数组.length
 * 
 * 对于连续的数组，使用length可以获取到数组的长度（元素的个数）
 * 对于非连续的数组，使用length会获取到数组的最大的索引+1
 * 		尽量不要创建非连续的数组
 */
/*console.log(arr.length);
console.log(arr);*/

/*
 * 修改length
 * 	如果修改的length大于原长度，则多出部分会空出来
 *  如果修改的length小于原长度，则多出的元素会被删除
 */

//arr.length = 10;

arr.length = 2;

console.log(arr.length);
console.log(arr);

arr[4] = 50;
arr[5] = 60;

   /*		
    元素：		1 2 3 4
    index:  0 1 2 3  arr.length=4	 arr[arr.lenth]	
	*/
	
	//向数组的最后一个位置添加元素
	//语法：数组[数组.length] = 值;
	arr[arr.length] = 70;
	arr[arr.length] = 80;
	arr[arr.length] = 90;
	
	console.log(arr);

		
		//创建一个数组
		//var arr = new Array();
		
		//使用字面量来创建数组
		//语法:[]
		//var arr = [];
		
		//console.log(typeof arr);
		
		//使用字面量创建数组时，可以在创建时就指定数组中的元素
		var arr = [1,2,3,4,5,10];
		
		//console.log(arr[3]);
		
		//使用构造函数创建数组时，也可以同时添加元素，将要添加的元素作文构造函数的参数传递
		//元素之间使用,隔开
		var arr2 = new Array(10,20,30);
		//console.log(arr2);
		
		//创建一个数组数组中只有一个元素10
		arr = [10];
		
		//创建一个长度为10的数组
		arr2 = new Array(10);
		
		//console.log(arr2.length);
		//数组中的元素可以是任意的数据类型
		arr = ["hello",1,true,null,undefined];
		
		//也可以是对象
		var obj = {name:"孙悟空"};
		arr[arr.length] = obj;
		arr = [{name:"孙悟空"},{name:"沙和尚"},{name:"猪八戒"}];//arr[0]:{name:"孙悟空"}  arr[1]：{name:"沙和尚"}
		
		//也可以是一个函数
		arr = [function(){alert(1)},function(){alert(2)}];//arr[1]:function(){alert(1)}
		
		//console.log(arr);
		//arr[0]();
		
		//数组中也可以放数组，如下这种数组我们称为二维数组
		arr = [[1,2,3],[3,4,5],[5,6,7]];
		console.log(arr[1]);
		//?  输出二维数组中的1？


		//创建一个数组
		var arr = ["孙悟空","猪八戒","沙和尚"];
		
		/*
		 * push()
		 * 	- 该方法可以向数组的末尾添加一个或多个元素，并返回数组的新的长度  
		 * 	- 可以将要添加的元素作为方法的参数传递，
		 * 		这样这些元素将会自动添加到数组的末尾
		 * 	- 该方法会将数组新的长度作为返回值返回
		 */
		
		var result = arr.push("唐僧","蜘蛛精","白骨精","玉兔精");
		
		
		console.log(arr);
		//console.log("result = "+result);
		
		/*
		 * pop()
		 * 	- 该方法可以删除数组的最后一个元素,并将被删除的元素作为返回值返回
		 */
		result = arr.pop(); 
		result = arr.pop(); 
		result = arr.pop();  
		console.log(arr);
		//console.log("result = "+result);
		
		/*
		 * unshift()
		 * 	- 向数组开头添加一个或多个元素，并返回新的数组长度
		 * 	- 向前边插入元素以后，其他的元素索引会依次调整
		 */
		//console.log(arr);
		
		arr.unshift("牛魔王","二郎神");
		
		console.log(arr);
		
		/*
		 * shift()
		 * 	- 可以删除数组的第一个元素，并将被删除的元素作为返回值返回
		 */
		result = arr.shift();
		result = arr.shift();
		
		console.log(arr);
		console.log("result = "+result);
		

		




		
		//创建一个数组
		var arr = ["孙悟空","猪八戒","沙和尚","唐僧","白骨精"];
		
		//所谓的遍历数组，就是将数组中所有的元素都取出来
		/*console.log(arr[0]);
		console.log(arr[1]);
		console.log(arr[2]);
		console.log(arr[3]);*/
		
		for(var i=0 ; i<arr.length ; i++){
			console.log(arr[i]);
		}
		





window.onload=function(){
	
var qx=document.getElementById('bt');
	var dx=document.getElementsByTagName('input');
	qx.onclick=function(){
		//dx.checked=true;
		console.log(dx.length)
		for(var i=0;i<dx.length;i++){
			dx[i].checked=true;
		}
		 
	}				
	
}    	
		
</head>
<body>
	<p id='bt' >全选</p>
	<input type="checkbox" /><br />
	<input type="checkbox" /><br />
	<input type="checkbox" /><br />
	<input type="checkbox" /><br />
	<input type="checkbox" /><br />
	<input type="checkbox" /><br />
	<input type="checkbox" /><br />
	<input type="checkbox" /><br />
	<input type="checkbox" /><br />
	<input type="checkbox" /><br />
	<input type="checkbox" /><br />
	<input type="checkbox" /><br />
	<input type="checkbox" /><br />
	<input type="checkbox" /><br />
	<input type="checkbox" /><br />  
</body>


		//创建一个Person对象
		//将这些person对象5个放入到一个数组中
		//遍历arr，获取arr中Person对象
		如果大于等于18，则将这个对象添加到newArr中
		//创建一个Person对象
		var per = new Person("孙悟空",18);
		var per2 = new Person("猪八戒",28);
		var per3 = new Person("红孩儿",8);
		var per4 = new Person("蜘蛛精",16);
		var per5 = new Person("二郎神",38);



		
		function Person(name , age , gender){
			this.name = name;
			this.age = age;
		}
		
		//修改Person原型的toString
		Person.prototype.toString = function(){
			return "Person[name="+this.name+",age="+this.age+"]";
		};
		
		//创建一个Person对象
		var per = new Person("孙悟空",18);
		var per2 = new Person("猪八戒",28);
		var per3 = new Person("红孩儿",8);
		var per4 = new Person("蜘蛛精",16);
		var per5 = new Person("二郎神",38);
		
		/*
		 * 将这些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);

一般我们都是使用for循环去遍历数组，

JS中还为我们提供了一个方法，用来遍历数组

forEach()

这个方法只支持IE8以上的浏览器

IE8及以下的浏览器均不支持该方法，所以如果需要兼容IE8，则不要使用forEach

还是使用for循环来遍历

//创建一个数组
  var arr = ["孙悟空","猪八戒","沙和尚","唐僧","白骨精"];

forEach()方法需要一个函数作为参数

像这种函数，由我们创建但是不由我们调用的，我们称为回调函数
数组中有几个元素函数就会执行几次，每次执行时，浏览器会将遍历到的元素
以实参的形式传递进来，我们可以来定义形参，来读取这些内容

浏览器会在回调函数中传递三个参数：
第一个参数，就是当前正在遍历的元素

第二个参数，就是当前正在遍历的元素的索引

第三个参数，就是正在遍历的数组

		arr.forEach(function(value , index , obj){
			console.log(index+":"+value+obj);
		});
		
		

		
		var arr = ["孙悟空","猪八戒","沙和尚","唐僧","白骨精"];

slice() [)
- 可以用来从数组提取指定元素
- 该方法不会改变元素数组，而是将截取到的元素封装到一个新数组中返回
- 参数：
1.截取开始的位置的索引,包含开始索引[
2.截取结束的位置的索引,不包含结束索引)
- 第二个参数可以省略不写,此时会截取从开始索引往后的所有元素
- 索引可以传递一个负值，如果传递一个负值，则从后往前计算
-1 倒数第一个
-2 倒数第二个
*/

var result = arr.slice(1,4);
		
		result = arr.slice(2);
		
		result = arr.slice(1,-2);//猪八戒","沙和尚
		
		console.log("看这里："+result);

splice()
- 可以用于删除数组中的指定元素
- 使用splice()会影响到原数组，会将指定元素从原数组中删除
并将被删除的元素作为返回值返回
- 参数：
第一个，表示开始位置的索引
第二个，表示删除的数量
第三个及以后。。
可以传递一些新的元素，这些元素将会自动插入到开始位置索引前边

arr = ["0孙悟空","1猪八戒","2沙和尚","3唐僧","4白骨精"];
		//var result = arr.splice(1,2,"牛魔王","铁扇公主","红孩儿");//从下标为1的位置开始删除2个元素 并且在下标为1的位置添加三个"牛魔王","铁扇公主","红孩儿"元素
		//var result = arr.splice(1,2);作用是删除从下标为1的地方开始删2个元素
		
		console.log(arr);
		//console.log(result); 
		
		



		//创建一个数组
		var arr = [1,2,3,2,2,1,3,4,2,5];		
		
		//去除数组中重复的数字
		//获取数组中的每一个元素
		for(var i=0 ; i<arr.length ; i++){
			//console.log(arr[i]);
			/*获取当前元素后的所有元素*/
			for(var j=i+1 ; j<arr.length ; j++){
				//console.log("---->"+arr[j]);
				//判断两个元素的值是否相等
				if(arr[i] == arr[j]){
					//如果相等则证明出现了重复的元素，则删除j对应的元素
					arr.splice(j,1);
					//当删除了当前j所在的元素以后，后边的元素会自动补位
					//此时将不会在比较这个元素吧，我需要在比较一次j所在位置的元素
					//使j自减
					j--;
				}
			}
		}
		
		console.log(arr);

LYRZCSDN

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js6

函数、数组/*解析器在调用函数每次都会向函数内部传递进一个隐含的参数,这个隐含的参数就是this，this指向的是一个对象，这个对象我们称为函数执行的上下文对象，根据函数的调用方式的不同，this会指向不同的对象1.以函数的形式调用时，this永远都是window2.以方法的形式调用时，this就是调用方法的那个对象*/function fun(){ //consol...
复制链接

扫一扫