JavaScript基础学习——第五天（原型、垃圾回收、数组简介）

目录
1. 原型
2. 垃圾回收
3. 数组简介

知识一：原型

深入 JavaScript 之原型和原型链

<!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>

知识二：垃圾回收

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

知识三：数组简介

第一点：数组简介

<!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],[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>

第四点：数组的遍历

     <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>

第五点：forEach

     <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>

第六点：数组的方法（补充）


<!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 = ["孙悟空","猪八戒","沙和尚"];var arr2 = ["白骨精","玉兔精","蜘蛛精"];var arr3 = ["二郎神","太上老君","玉皇大帝"];/** concat()可以连接两个或多个数组，并将新的数组返回*     - 该方法不会对原数组产生影响*/var result = arr.concat(arr2,arr3,"牛魔王","铁扇公主");/** join()*   - 该方法可以将数组转换为一个字符串*     - 该方法不会对原数组产生影响，而是将转换后的字符串作为结果返回*    - 在join()中可以指定一个字符串作为参数，这个字符串将会成为数组中元素的连接符*      如果不指定连接符，则默认使用,作为连接符*/arr = ["孙悟空","猪八戒","沙和尚","唐僧"];result = arr.join("@-@");/** reverse()*   - 该方法用来反转数组（前边的去后边，后边的去前边）*    - 该方法会直接修改原数组*/arr.reverse();//console.log(arr);arr = ["b","d","e","a","c"];/** sort()*  - 可以用来对数组中的元素进行排序*  - 也会影响原数组，默认会按照Unicode编码进行排序*/arr.sort();//arr.reverse();/** 即使对于纯数字的数组，使用sort()排序时，也会按照Unicode编码来排序，而不是数字本身的大小值*   所以对数字进排序时，可能会得到错误的结果。* * 我们可以自己来指定排序的规则*     我们可以在sort()添加一个回调函数，来指定排序规则，*         回调函数中需要定义两个形参,*         浏览器将会分别使用数组中的元素作为实参去调用回调函数*         使用哪个元素调用不确定，但是肯定的是在数组中a一定在b前边*   - 浏览器会根据回调函数的返回值来决定元素的顺序，*       如果返回一个大于0的值，则元素会交换位置*        如果返回一个小于0的值，则元素位置不变*         如果返回一个0，则认为两个元素相等，也不交换位置* *   - 如果需要升序排列，则返回 a-b*      如果需要降序排列，则返回b-a*/arr = [5,4,2,1,3,6,8,7];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);</script></head><body></body>
</html>

点击回到顶部

JavaScript基础学习——第五天（原型、垃圾回收、数组简介）相关推荐

javaScript基础学习 - 14 - JavaScript内置对象 -案例代码
javaScript基础学习 - 14 - JavaScript内置对象 -案例代码 1. Math对象最大值 2. 封装自己的数学对象 3. Math绝对值和三个取整方法 4. Math对象随机数方 ...
JavaScript基础学习模拟京东查询快递单号
JavaScript基础学习模拟京东查询快递单号 <!DOCTYPE html> <html lang="en"><head><meta ...
JavaScript基础学习动态生成表格
JavaScript基础学习动态生成表格根据我们拥有的数据来动态创建表格的行和列,以及实现删除行的操作 <!DOCTYPE html> <html lang="en&q ...
JVM实用参数（五）新生代垃圾回收
原文链接作者: PATRICK PESCHLOW :译者:严亮本部分,我们将关注堆(heap) 中一个主要区域,新生代(young generation).首先我们会讨论为什么调整新生代的参数会 ...
JVM基础系列第10讲：垃圾回收的几种类型
我们经常会听到许多垃圾回收的术语,例如:Minor GC.Major GC.Young GC.Old GC.Full GC.Stop-The-World 等.但这些 GC 术语到底指的是什么,它们之间 ...
【JavaScript基础】你真正了解如今的Js数组吗，看这篇就（Go）够了
[JavaScript基础]你真正了解如今的Js数组吗,看这篇就(Go)够了
JS学习笔记（JavaScript基础学习必备）
讲解JavaScript 基础语法.关键特性.JSON.WebAPI 等知识点.涉及网页窗口交互的方法以及通过 DOM 进行网页元素的相关操作. 文章目录一.JavaScript 基础 1.什么是 ...
JavaScript基础学习、复习笔记
文章目录前言一.js基础知识 (变量.数据类型.运算符) 1.变量 1.1 声明变量及初始化 1.2 变量更新 1.3 变量语法拓展 1.4 变量命名 1.5 交换两个变量的值 2. 数据类型(重 ...
JavaScript 基础学习笔记
JavaScript 基础一.初始 JavaScript 1.JS 注释 2.JS 输入输出语句二.变量 1.变量概述 1)什么是变量 2)变量在内存中的存储 2.变量的使用 3.变量的初始化 4 ...

JavaScript基础学习——第五天（原型、垃圾回收、数组简介）

JavaScript基础学习——第五天（原型、垃圾回收、数组简介）相关推荐

最新文章

热门文章