js基础知识汇总07
2024-05-11 02:56:41
复习
<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title></title><script type="text/javascript">/*alert("hello");function fun(){a = 10;}*/var obj = {sayHello:function(){//console.log(this); function test(){console.log(this);}test();}};obj.sayHello();var fun = obj.sayHello;//fun();</script></head><body></body>
</html>
构造函数
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><script type="text/javascript">/** 创建一个Person构造函数* - 在Person构造函数中，为每一个对象都添加了一个sayName方法，* 目前我们的方法是在构造函数内部创建的，* 也就是构造函数每执行一次就会创建一个新的sayName方法* 也是所有实例的sayName都是唯一的。* 这样就导致了构造函数执行一次就会创建一个新的方法，* 执行10000次就会创建10000个新的方法，而10000个方法都是一摸一样的* 这是完全没有必要，完全可以使所有的对象共享同一个方法*/function Person(name , age , gender){this.name = name;this.age = age;this.gender = gender;//向对象中添加一个方法//this.sayName = fun;}//将sayName方法在全局作用域中定义/** 将函数定义在全局作用域，污染了全局作用域的命名空间* 而且定义在全局作用域中也很不安全*//*function fun(){alert("Hello大家好，我是:"+this.name);};*///向原型中添加sayName方法Person.prototype.sayName = function(){alert("Hello大家好，我是:"+this.name);};//创建一个Person的实例var per = new Person("孙悟空",18,"男");var per2 = new Person("猪八戒",28,"男");per.sayName();per2.sayName();//console.log(per.sayName == per2.sayName);</script></head><body></body>
</html>原型
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><script type="text/javascript">/** 原型 prototype* * 我们所创建的每一个函数，解析器都会向函数中添加一个属性prototype* 这个属性对应着一个对象，这个对象就是我们所谓的原型对象* 如果函数作为普通函数调用prototype没有任何作用* 当函数以构造函数的形式调用时，它所创建的对象中都会有一个隐含的属性，* 指向该构造函数的原型对象，我们可以通过__proto__来访问该属性* * 原型对象就相当于一个公共的区域，所有同一个类的实例都可以访问到这个原型对象，* 我们可以将对象中共有的内容，统一设置到原型对象中。* * 当我们访问对象的一个属性或方法时，它会先在对象自身中寻找，如果有则直接使用，* 如果没有则会去原型对象中寻找，如果找到则直接使用* * 以后我们创建构造函数时，可以将这些对象共有的属性和方法，统一添加到构造函数的原型对象中，* 这样不用分别为每一个对象添加，也不会影响到全局作用域，就可以使每个对象都具有这些属性和方法了*/function MyClass(){}//向MyClass的原型中添加属性aMyClass.prototype.a = 123;//向MyClass的原型中添加一个方法MyClass.prototype.sayHello = function(){alert("hello");};var mc = new MyClass();var mc2 = new MyClass();//console.log(MyClass.prototype);//console.log(mc2.__proto__ == MyClass.prototype);//向mc中添加a属性mc.a = "我是mc中的a";//console.log(mc2.a);mc.sayHello();</script></head><body></body>
</html>原型
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><script type="text/javascript">/** 创建一个构造函数*/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__)</script></head><body></body>
</html>toString
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><script type="text/javascript">function Person(name , age , gender){this.name = name;this.age = age;this.gender = gender;}//修改Person原型的toStringPerson.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);</script></head><body></body>
</html>
垃圾回收
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><script type="text/javascript">/** 垃圾回收（GC）* - 就像人生活的时间长了会产生垃圾一样，程序运行过程中也会产生垃圾* 这些垃圾积攒过多以后，会导致程序运行的速度过慢，* 所以我们需要一个垃圾回收的机制，来处理程序运行过程中产生垃圾* - 当一个对象没有任何的变量或属性对它进行引用，此时我们将永远无法操作该对象，* 此时这种对象就是一个垃圾，这种对象过多会占用大量的内存空间，导致程序运行变慢，* 所以这种垃圾必须进行清理。* - 在JS中拥有自动的垃圾回收机制，会自动将这些垃圾对象从内存中销毁，* 我们不需要也不能进行垃圾回收的操作* - 我们需要做的只是要将不再使用的对象设置null即可* */var obj = new Object();//对对象进行各种操作。。。。obj = null;</script></head><body></body>
</html>数组
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><script type="text/javascript">/** 内建对象* 宿主对象* 自定义对象* * 数组（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]);/** 获取数组的长度* 可以使用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;//向数组的最后一个位置添加元素//语法：数组[数组.length] = 值;arr[arr.length] = 70;arr[arr.length] = 80;arr[arr.length] = 90;console.log(arr);</script></head><body></body>
</html>
数组
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><script type="text/javascript">//创建一个数组//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);//创建一个数组数组中只有一个元素10arr = [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 = [function(){alert(1)},function(){alert(2)}];//console.log(arr);//arr[0]();//数组中也可以放数组，如下这种数组我们称为二维数组arr = [[1,2,3],[3,4,5],[5,6,7]];console.log(arr[1]);</script></head><body></body>
</html>
数组的方法
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><script type="text/javascript">//创建一个数组var arr = ["孙悟空","猪八戒","沙和尚"];/** push()* - 该方法可以向数组的末尾添加一个或多个元素，并返回数组的新的长度* - 可以将要添加的元素作为方法的参数传递，* 这样这些元素将会自动添加到数组的末尾* - 该方法会将数组新的长度作为返回值返回*/var result = arr.push("唐僧","蜘蛛精","白骨精","玉兔精");//console.log(arr);//console.log("result = "+result);/** 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);</script></head><body></body>
</html>数组的遍历
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><script type="text/javascript">//创建一个数组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]);}</script></head><body></body>
</html>
练习
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><script type="text/javascript">function Person(name , age , gender){this.name = name;this.age = age;}//修改Person原型的toStringPerson.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是否大于等于18if(p.age >= 18){//如果大于等于18，则将这个对象添加到newArr中//将对象放入到新数组中newArr.push(p);}}//将新的数组返回return newArr;}var result = getAdult(perArr);console.log(result);</script></head><body></body>
</html>
forEach
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><script type="text/javascript">/** 一般我们都是使用for循环去遍历数组，* JS中还为我们提供了一个方法，用来遍历数组* forEach()* - 这个方法只支持IE8以上的浏览器* IE8及以下的浏览器均不支持该方法，所以如果需要兼容IE8，则不要使用forEach* 还是使用for循环来遍历*///创建一个数组var arr = ["孙悟空","猪八戒","沙和尚","唐僧","白骨精"];/** forEach()方法需要一个函数作为参数* - 像这种函数，由我们创建但是不由我们调用的，我们称为回调函数* - 数组中有几个元素函数就会执行几次，每次执行时，浏览器会将遍历到的元素* 以实参的形式传递进来，我们可以来定义形参，来读取这些内容* - 浏览器会在回调函数中传递三个参数：* 第一个参数，就是当前正在遍历的元素* 第二个参数，就是当前正在遍历的元素的索引* 第三个参数，就是正在遍历的数组* */arr.forEach(function(value , index , obj){console.log(value);});</script></head><body></body>
</html>数组的方法
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><script type="text/javascript">var arr = ["孙悟空","猪八戒","沙和尚","唐僧","白骨精"];/** slice()* - 可以用来从数组提取指定元素* - 该方法不会改变元素数组，而是将截取到的元素封装到一个新数组中返回* - 参数：* 1.截取开始的位置的索引,包含开始索引* 2.截取结束的位置的索引,不包含结束索引* - 第二个参数可以省略不写,此时会截取从开始索引往后的所有元素* - 索引可以传递一个负值，如果传递一个负值，则从后往前计算* -1 倒数第一个* -2 倒数第二个*/var result = arr.slice(1,4);result = arr.slice(3);result = arr.slice(1,-2);//console.log(result);/** splice()* - 可以用于删除数组中的指定元素* - 使用splice()会影响到原数组，会将指定元素从原数组中删除* 并将被删除的元素作为返回值返回* - 参数：* 第一个，表示开始位置的索引* 第二个，表示删除的数量* 第三个及以后。。* 可以传递一些新的元素，这些元素将会自动插入到开始位置索引前边* */arr = ["孙悟空","猪八戒","沙和尚","唐僧","白骨精"];var result = arr.splice(3,0,"牛魔王","铁扇公主","红孩儿");console.log(arr);//console.log(result);</script></head><body></body>
</html>练习
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><script type="text/javascript">//创建一个数组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);</script></head><body></body>
</html>
js基础知识汇总07相关推荐
- JS基础知识学习（一）
JS基础知识 前端开发常用的浏览器 谷歌浏览器(chrome):Webkit内核(v8引擎) 火狐浏览器(firefox):Gecko内核 欧朋浏览器(opera):Presto内核 IE浏览器:Tr ...
- 脑科学与脑电基础知识汇总
点击上面"脑机接口社区"关注我们 更多技术干货第一时间送达 脑科学与脑电基础知识汇总 该部分汇总了社区分享的部分脑科学.EEG.fNIRS.BCI.人机交互等相关知识. 脑电与情绪 ...
- python基础知识资料-Python基础知识汇总
原标题:Python基础知识汇总 1.Anaconda的安装 百度Anaconda的官网,下载左边的Python3.X版本 然后是设置路径,最后给出Jupyter notebook.具体参考: 猴子: ...
- python基础知识资料-学习Python列表的基础知识汇总
千里之行,始于足下.要练成一双洞悉一切的眼睛,还是得先把基本功扎扎实实地学好.今天,本喵带大家仔细温习一下Python的列表.温故而知新,不亦说乎. 当然,温习的同时也要发散思考,因为有些看似无关紧要 ...
- （七）JS基础知识四（搞定异步）【三座大山之三，必考！！！】
JS基础知识四(异步) 提问 单线程 应用场景 callback hell和promise 提问 同步和异步的区别是什么 手写用Promise加载一张图片 前端使用的异步的场景有哪些 单线程 JS是单 ...
- （六）JS基础知识三（走进作用域和闭包）【三座大山之二，不会闭包，基本不会通过】
JS基础知识三(作用域和闭包) 提问 作用域 自由变量 闭包 this 提问 this的不同应用场景,如何取值 手写bind函数 实际开发中闭包的应用场景,举例说明 创建10个a标签,点击的时候弹出对 ...
- （五）JS基础知识二（通过图理解原型和原型链）【三座大山之一，必考！！！】
JS基础知识二(原型和原型链) 提问 class 继承 类型判断(instanceof) 原型 原型关系 基于原型的执行规则 原型链 说明 提问 如何准确判断一个变量是不是数组 class的原型本质 ...
- （四）JS基础知识一（深入分析变量类型和计算）【不会变量，别说你会JS】
JS基础知识一(变量类型和计算) 提问 变量类型 值类型 vs 引用类型 (堆栈模型) 值类型 引用类型 typeof 运算符 深拷贝 变量计算 字符串拼接 == if语句和逻辑运算 if语句 逻辑判 ...
- Js基础知识梳理系列
小序:总是感觉自己的技术一直在原地踏步,想学习一些新的技术,但学起来很吃力,而且总是没有什么实际的收获,似乎进入了所谓的"瓶颈期".问了一些前辈是否也遇到过同样的问题,他们给我的解 ...
- 了解js基础知识中的作用域和闭包以及闭包的一些应用场景，浅析函数柯里化
js基础知识中的作用域和闭包 一.作用域 1.作用域.自由变量简介 (1)作用域定义 (2)作用域实例演示 (3)自由变量定义 (4)自由变量实例演示 2.作用域链简介 (1)作用域链定义 (2)作用 ...
最新文章
- Express接口案例——完成文章评论相关的接口
- 奇妙的安全旅行之国密算法
- saltsack之数据系统（三）
- 加快FineReport报表设计的几个心得体会
- 新一代 Windows 即将发布、GPT-3 成功商业化，这届微软 Build 大会究竟带来了什么？
- java基础5 (一维)数组和二维数组
- jquery.cookie 插件使用方法
- 15 张图，了解一下 TCP/IP 必知也必会的 10 个问题
- oozie的常见错误
- 帆软mysql迁移_平台数据迁移- FineReport帮助文档|报表开发|报表使用|学习教程
- 软件研发部门的基础设施
- 子列和列_最大子列和
- 数字转换成中文大写的经典方案
- 老徐和阿珍的故事：Runnable和Callable有什么不同？
- kicad最小布线宽度默认是多少_常见停车场管理系统项目的安装布线及注意事项...
- linux内核协议栈 TCP数据发送之发送窗口
- java实现微信退款
- JavaScript 去除数组中重复的元素 得到新数组
- log4j2远程漏洞事件
- 配置邮件服务器及空邮件服务器