文章目录
前端–JavaScript入门
1. JavaScript简介
- JavaScript一种
直译式脚本语言，是一种动态类型、弱类型、基于原型的语言，内置支持类型。它的解释器被称为JavaScript引擎，为浏览器的一部分，广泛用于客户端的脚本语言，最早是在HTML（标准通用标记语言下的一个应用）网页上使用，用来给HTML网页增加动态功能。在1995年时，由Netscape公司的Brendan Eich，在网景导航者浏览器上首次设计实现而成。因为Netscape与Sun合作，Netscape管理层希望它外观看起来像Java，因此取名为JavaScript。但实际上它的语法风格与Self及Scheme较为接近。- 为了取得技术优势，微软推出了JScript，CEnvi推出ScriptEase，与JavaScript同样可在浏览器上运行。为了统一规格，
因为JavaScript兼容于ECMA标准，因此也称为ECMAScript—指定了语言的规范。
2. JavaScript研发的目的
验证表达数据是否合法。如今js能做哪些事情：
- 验证表单数据是否合法。
- 网页的动态效果。
- 服务器端开发（node.js）。
- 开发游戏。
- 进行客户端和服务器端交互。
3. JavaScript是一门什么样的语言
- 是一门解释型的语言。
- 是一门面向对象的语言。
- 是一门动态的语言。
- Java与JavaScript对比：
- Java是半解释型半编译（JIT编译器）语言。
- Java也是面向对象的语言。
- Java是静态的语言。
- 相关概念补充：
动态语言（弱类型语言）是运行时才确定数据类型的语言，变量在使用之前无需申明类型，通常变量的值是被赋值的那个值的类型。比如Php、Asp、JavaScript、Python、Perl等等。静态语言（强类型语言）是编译时变量的数据类型就可以确定的语言，大多数静态语言要求在使用变量之前必须生命数据类型。比如Java、C、C++、C#等。
4. JavaScript组成
| ECMAScript(核心) | 描述了JS的语法和基本对象。 |
|---|---|
| 文档对象模型 （DOM） | 处理网页内容的方法和接口 |
| 浏览器对象模型（BOM） | 与浏览器交互的方法和接口 |
5. JavaScript入门
5.1 JS初体验
- JS也是由上到下一行一行的解释执行的。
- 每一句代码后面用分号结束
- 每一句代码使用一个换行。
alert(); 是一个函数，也叫方法。可以看作是一个工程，在浏览器中弹出一个对话框的功能。小括号里面是弹出的对话框中的文本，用引号括起来。
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>JavaScript初体验</title>
<script>
alert("Hello JavaScript");
alert("学习JS第一天很开心");
alert('开心');
alert('开心');
alert('开心');
</script>
</head>
<body>
</body>
</html>
5.2 JS三种书写位置
- JS的命名规范
- 行内式：和网页中的代码耦合度高，维护难度较高。
- 内嵌式：和网页中代码的耦合度较低，相对分离。
- 外链式：和网页中的代码绝对的分离的，耦合度最低。不用再外链式的script标签中写内嵌式的代码。
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>javaScript三种书写位置</title>
<!--外链式，和网页中的代码绝对的分离的，耦合度最低。不用再外链式的script标签中写内嵌式的代码。-->
<script src="myjavascript.js"></script>
<script>
// 内嵌式，和网页中代码的耦合度较低，相对分离。
alert("script标签中的弹框");
</script>
</head>
<body>
<!--行内式，和网页中的代码耦合度高，维护难度较高-->
<button onclick="alert('按钮弹框');">按钮</button>
</body>
</html>
myjavascript.js
alert(".js文件中弹框");
5.3 JS变量
- JavaScript变量
- JS变量名规则和规范
- 声明变量：var ，当创建一个变量时会在内存中的栈区开辟一个新的空间。
- 变量命名规则和规范：
- 规则：
由字母、数字、下划线、$符号组成，不能以数字开头。与Java一样。- 不能是关键字和保留字，例如：for,while,this,name。
区分大小写。- 规范：
- 变量名必须有意义。
- 遵守驼峰命名法。
- 建议不要用$作为变量名。
<script>
var name = "zs";
alert(name)
</script>
<script>
var num1 = 10;
var num2 = 20;
num1 = num1+ num2;//30
num2= num1 - num2 ;//10
num1= num1 - num2 ;//20
alert(num1);//20
alert(num2);//10
</script>
5.4 JS中的五大数据类型
- 使用
window.alert()写入警告框。- 使用
document.write()写入 HTML 输出。只不过浏览器在遇到标签的时候，会解析成具体的效果，文本输出的时候是原样输出。- 使用
innerHTML写入 HTML 元素。- 使用
console.log()写入浏览器控制台。
<script>
var num = 10;
var str = "zs";
var bool = true;
var obj1 = new Object();
var obj2 = null;
var num1 = undefined ;
alert(typeof num);// number
alert(typeof str);// string
alert(typeof bool);// boolean
alert(typeof obj1);// object
alert(typeof obj2);// object
alert(typeof num1);// undefined
</script>
数值类型number
在JS中不管是整数还是小数，都是使用var定义。
- JS中当数值型以0开头，则将数值按8进制格式进行处理。
- JS中当数值型以0x开头，则将数值按16进制格式进行处理。
- 超大或超小的数可通过科学计数法来写。
<script>
var num = 10;
var flnum = 9.99;
console.log(num);//10
console.log(flnum);//9.99
var num1 = 11;
console.log(num1);//11
// JS中当数值型以0开头，则将数值按8进制格式进行处理
var num2 = 012;
console.log(num2);//10
// JS中当数值型以0x开头，则将数值按16进制格式进行处理
var num3 = 0x12;
console.log(num3);//18
// 超大或超小的数可通过科学计数法来写：
var num4 = 5e3;
console.log(num4);//5000
var num5 = 5e-3;
console.log(num5);//0.005
</script>
字符串类型string
字符串类型：使用双引号或者单引号引用起来的文本就是字符串，"abc","a","justweb","小米手机",'张三'；
- 在JavaScript中使用var声明，而在Java中使用String声明。
- 字符串类型的数据可以通过
变量名.length来获取字符串的长度。无论是字母，数字，一个符号，还是一个空格，都算是一个长度。
- 长度为0的字符串也叫空字符串—空串。
- 字符串拼接：字符串类型的数据在进行减乘除的时候，会将字符串类型的数据隐式转换成数值类型，然后进行数学运算。
- 如果是加法，这时候做字符串的拼接。
NaN:not a number 不是一个数值，字符串在进行减乘除的时候，如果一个字符串不是数值类型的，就会得到一个NaN的结果。如果是加法，不收影响。
<script>
var str = "justweb";
console.log(str.length);// 7
str = "涛哥是最帅的";
console.log(str.length);// 6
str = "";
console.log(str.length);// 0
str = " ";
console.log(str.length);// 1
var num1 = "10";
var num2 = 3;
console.log(num1+num2);//103
console.log(num1-num2);//7
console.log(num1*num2);//30
console.log(num1/num2);//3.3333333333333335
console.log(num1%num2);//1
</script>
字符串拼接：
<script>
var num = 666;
var str = "ad";
var booleam = true;
var mmm;
var money = 15000;
console.log(num + str);//666ad
// true为1
console.log(num + booleam);//667
console.log(str + booleam);//adtrue
console.log(num + mmm);//NaN
console.log(str + mmm);//666undefined
console.log(str + money);//ad15000
var qi = "简维一期";
console.log(qi + "毕业学生的平均薪资" + money);
</script>
布尔类型boolean
<script>
var bool;
bool = 2;
if (bool) {
console.log(bool);// 2
}
bool = 3;
if (bool) {
console.log(bool);// 3
}
bool = 0;
if (bool) {
// 没有输出
console.log(bool);
}
bool = -1;
if (bool) {
console.log(bool);// -1
}
</script>
数据类型的转换
NaN 属性是代表非数字值的特殊值。该属性用于指示某个值不是数字。请使用 isNaN() 全局函数来判断一个值是否是 NaN 值。
parseInt() 函数可解析一个字符串，并返回一个整数。
parseFloat() 函数可解析一个字符串，并返回一个浮点数。在 JavaScript 中，数字是一种基本的数据类型。JavaScript 还支持
Number 对象，该对象是原始数值的包装对象。在必要时，JavaScript 会自动地在原始数据和对象之间转换。
Boolean 对象表示两个值："true" 或 "false"。new Boolean(value); //构造函数 Boolean(value); //转换函数
<script>
console.log("=========parseInt==============");
parseInt("19",10); //返回 19 (10+9)
parseInt("11",2); //返回 3 (2+1)
parseInt("17",8); //返回 15 (8+7)
parseInt("1f",16); //返回 31 (16+15)
console.log(parseInt("010"));//10
console.log(parseInt("abc"));//NaN
console.log(parseInt(10.99));//10
console.log(parseInt("10abc"));//10
console.log(parseInt(null));//NaN
console.log(parseInt(true));//NaN
console.log(parseInt(undefined));//NaN
console.log("=========parseFloat==============");
console.log(parseFloat("abc"));//NaN
console.log(parseFloat(10.99));//10.99
console.log(parseFloat("10abc"));//10
console.log(parseFloat(null));//NaN
console.log(parseFloat(true));//NaN
console.log(parseFloat(undefined));//NaN
console.log("=========Number==============");
console.log(Number("abc"));//NaN
console.log(Number(10.99));//10.99
console.log(Number("10abc"));//NaN
console.log(Number(null));//0
console.log(Number(true));//1
console.log(Number(undefined));//NaN
console.log("=========toString()==============");
var num1 = 10.99;
var num2 = 10;
var bool = false;
var un = undefined;
var obj = null;
console.log(num1.toString());//10.99
console.log(num2.toString());//10
console.log(bool.toString());//false
// console.log(un.toString());//报错
// console.log(obj.toString());//报错
console.log("=========Boolean==============");
console.log(Boolean("abc"));//true
console.log(Boolean(10.99));//true
console.log(Boolean("10abc"));//true
console.log(Boolean(null));//false
console.log(Boolean(true));//true
console.log(Boolean(undefined));//false
</script>
基本数据类型和引用数据类型
- 基本数据类型：
- 值类型：number string boolean
- 空类型：null undefined
- 引用数据类型:
- Object
值传递方式：因为值类型的数据存储在栈内存中，所以之间的传递都是将变量中的值，直接copy一份赋值的。引用传递的方式：由于变量存储在堆内存中，所有的引用p1,p2,p3直接指向变量存储的内存地址中，他们指向的是同一块内存空间，所以，任何一个引用对堆内存的修改，都会影响到其他引用获取到的数据的结果。- 综上得与Java类似。
<script>
//引用类型
var jay = {
name: "周杰伦", age: 37, country: "中国"
};
var jj = jay;
jj.name = "蔡依林";
console.log(jay);
console.log(jj);
// 值类型
var a = 10;
var b = a;
b = 20;
console.log(a);
console.log(b);
</script>
5.5 JS中运算符
JS算数运算符
| 运算符 | 描述 |
|---|---|
| + | 加法 |
| - | 减法 |
| * | 乘法 |
| / | 除法 |
| % | 系数 |
++ | 递加 |
-- | 递减 |
<script>
var c =11;
// 11 13 14 13 13 13
var sum=c++ + ++c - ++c - --c + c-- - ++c;
console.log(c);//13
console.log(sum);//-3
</script>
JS赋值运算符
| 运算符 | 例子 | 等同于 |
|---|---|---|
| = | x = y | x = y |
| += | x += y | x = x + y |
| -= | x -= y | x = x - y |
| *= | x *= y | x = x * y |
| /= | x /= y | x = x / y |
| %= | x %= y | x = x % y |
JS比较运算符☆
注意与Java的不太一样。
| 运算符 | 描述 |
|---|---|
== | 等于 |
=== | 等值等型 |
| != | 不相等 |
| !== | 不等值或不等型 |
| > | 大于 |
| < | 小于 |
| >= | 大于或等于 |
| <= | 小于或等于 |
| ? | 三元运算符 |
<script>
// var a=1;
// var b=2;
var san=false?1:2;
console.log(san);
// var san0=a>b?2:1;
// console.log(san0);
var result = age>18?console.log("可以领身份证了"):console.log("再等等吧，少年！");
</script>
JS逻辑运算符
| 运算符 | 描述 |
|---|---|
| && | 逻辑与 |
| || | 逻辑或 |
| ! | 逻辑非 |
JS类型运算符
| 运算符 | 描述 |
|---|---|
| typeof | 返回变量的类型。 |
| instanceof | 返回 true，如果对象是对象类型的实例。 |
JS位运算符☆
| 运算符 | 描述 | 例子 | 等同于 | 结果 | 十进制 |
|---|---|---|---|---|---|
| & | 与 | 5 & 1 | 0101 & 0001 | 0001 | 1 |
| | | 或 | 5 | 1 | 0101 | 0001 | 0101 | 5 |
| ~ | 非 | ~ 5 | ~0101 | 1010 | 10 |
| ^ | 异或 | 5 ^ 1 | 0101 ^ 0001 | 0100 | 4 |
| << | 零填充左位移 | 5 << 1 | 0101 << 1 | 1010 | 10 |
| >> | 有符号右位移 | 5 >> 1 | 0101 >> 1 | 0010 | 2 |
| >>> | 零填充右位移 | 5 >>> 1 | 0101 >>> 1 | 0010 | 2 |
5.6 JS流程控制语句
- 顺序结构
- JS代码默认是从上到下的执行顺序。
- 分支结构：
- JS根据条件的真假，来决定是否执行某段代码。
- 循环结构：
- 多次反复的执行同一段代码。
分支结构—if
使用 if 来规定要执行的代码块，如果指定条件为 true。
// prompt() 方法用于显示可提示用户进行输入的对话框。 var str = prompt("请输入密码"); console.log(typeof(str));//string使用 else 来规定要执行的代码块，如果相同的条件为 false。
使用 else if 来规定要测试的新条件，如果第一个条件为 false。
使用 switch 来规定多个被执行的备选代码块。
与Java中相同。
<script>
if(true){
// 我是你爸爸
document.write("我是你爸爸")
}
var age=17;
if(age>26){
// 没有输出
console.log("哈哈哈哈哈哈")
}
// 乖儿子
console.log("乖儿子")
var scores=10;
if(scores >= 90){
console.log("A")
}else if(scores >= 80){
console.log("B")
}else if(scores >= 70){
console.log("C")
}else if(scores >= 60){
console.log("D")
}else {
console.log("E")
}
var week=1;
switch (week) {
case 0:
document.write("星期日");
break;
case 1:
document.write("星期一");
break;
case 2:
document.write("星期二");
break;
case 3:
document.write("星期三");
break;
case 4:
document.write("星期四");
break;
case 5:
document.write("星期五");
break;
case 6:
document.write("星期六");
}
</script>
循环结构☆—for
break关键字，一旦执行会立即跳出循环。跳出离当前关键字最近的循环—与Java中的一致。break关键字之后的代码是不会执行的。continue 结束本次循环，continue后面的代码不执行，直接进入下一次循环。
<script>
// 求：求1-100里面所有的奇数的和。
var sum=0;
for(var i=0; i<=100; i++) {
if (i % 2 === 1) {
sum = sum + i;
}
}
console.log(sum);
</script>
循环结构练习—打印九九乘法表
<script>
for (var i = 1; i <= 9; i++) {
for (var j = 1; j < i + 1; j++) {
document.write(" " + j + "*" + i + "=" + j * i)
}
document.write("<br/>")
}
</script>
while循环
<script>
var i = 1;
var sum = 0;
while (i <= 100) {
sum = sum + i;
i++;
}
document.write(sum);
</script>
5.7 JS数组
- 数组：一组有序数据的集合，数组中的每个数据我们称之为
数组元素（元素）。
数组的长度：数组名.length 获取数组的长度，最大索引值为：数组名.length-1;- 在其他面向对象的语言中，数组必须是相同类型的数据（Java中，Object也可以存储不同数据类型的数据），但是JS中可以是不同数据类型的。
- 数组的长度可以人为的复制，这些新增加的元素都是undefined,有些浏览器是empty。
- 可以进行跨索引的赋值，建议不要这么做。
跨索引赋值形成的数组叫做稀疏数组。- 数组中元素在没有赋值的情况下，默认值为undefined;
<script>
// 定义一个学员数组，定义数组的第一种方式，通过字面量定义。
var justwebArr = ["one", "two", "three", 'four'];
console.log(justwebArr.length);//4
console.log(justwebArr[0]);// one
console.log(justwebArr[1]);// two
console.log(justwebArr[2]);// three
console.log(justwebArr[3]);// four
// JS中，数组元素没有类型的限制
var arr1 = [1, 2, 1, "haha", "shigexiaokeai", true, undefined, null];
console.log("------------------------------------");
console.log(typeof (arr1));// object
console.log(arr1[0]);// 1
console.log(arr1[1]);// 2
console.log(arr1[2]);// 1
console.log(arr1[3]);// haha
console.log(arr1[4]);// shigexiaokeai
console.log(arr1[5]);// true
console.log(arr1[6]);// undefined
console.log(arr1[7]);// null
console.log(typeof (arr1[6]));// undefined
// 第二种创建方式：通过new Array();创建
var arr2 = new Array(1, "sl", null, undefined, true, 55);
console.log("------------------------------------");
console.log(arr2.length);//6
console.log(arr2[0]);// 1
console.log(arr2[1]);// s1
console.log(arr2[2]);// null
console.log(arr2[3]);// undefined
console.log(arr2[4]);// true
console.log(arr2[5]);// 55
arr2[10] = 12;
console.log(arr2.length);//11
console.log(arr2);//(11) [1, "sl", null, undefined, true, 55, empty x 4, 12]
//数组的第三种创建方式
console.log("------------------------------------");
var arr3 = new Array(7);
arr3[0] = 1;
arr3[1] = 2;
arr3[2] = 3;
arr3[3] = 4;
arr3[4] = 5;
arr3[5] = 6;
console.log(arr3.length);// 7
console.log(arr3);// (7) [1, 2, 3, 4, 5, 6, empty]
</script>
数组的遍历
<script>
/**
* 在遍历数组的时候，初始值从0开始，循环次数为：数组的长度-1；
*/
var arr=["小明","小伟","小辉","校长","小刘","小可爱"];
for (var i = 0; i <arr.length; i++) {
console.log(arr[i]);
}
</script>
冒泡排序
<script>
var arr1 = [3, 8, 7, 9, 2, 34, 55, 786];
for (var j = 0; j < arr1.length - 1; j++) {
for (var i = 0; i < arr1.length - j - 1; i++) {
if (arr1[i] > arr1[i + 1]) {
var temp = 0;
temp = arr1[i + 1];
arr1[i + 1] = arr1[i];
arr1[i] = temp;
}
}
}
console.log(arr1);
</script>
5.8 引用数据类型☆
基本数据类型：Number、String、Boolean、Null、 Undefined、Symbol（ES6），这些类型可以直接操作保存在变量中的实际值。引用数据类型：Object（在JS中除了基本数据类型以外的都是对象，数据是对象，函数是对象，正则表达式是对象）。
5.9 JS函数☆
什么是函数？
- 函数： 也叫方法，也可以看成是一个功能，这个功能将一串代码封装成一个整体，在需要用的地方，进行反复的代用，避免代码的冗余。
alert();弹出一个对话框的方法。console.log();在浏览器的控制台打印内容的方法。document.write();向浏览器页面输出内容的。prompt();浏览器输入对话框。- 函数名可包含字母、数字、下划线和美元符号（规则与变量名相同）。
如何去定义一个函数？
function name(参数 1, 参数 2, 参数 3) { 要执行的代码 }调用函数：
var x = myFunction(7, 8); // 调用函数，返回值被赋值给 x offer("miaomiao",300,"justweb"); // 可以有返回值也可以没有返回值 // 带返回值的函数：当函数体遇到return的时候，后面的代码就不执行了（跳出当前函数） function myFunction(a, b) { return a * b; // 函数返回 a 和 b 的乘积 } function offer(name,salary,company){ console.log("恭喜简维一期"+name+"同学入职"+company+"月薪为"+salary); }函数列表中传输的数据叫做参数，实际参数和形式参数是一一对应的。
在 JavaScript 函数中声明的变量，会成为函数的局部变量。
局部变量只能在函数内访问。
作用域
作用域是什么：指的是变量的访问区域。
全局作用域：
- 在script标签中，所有的全局作用域下的变量和方法都是window的属性和方法。
- 一个变量在script标签的任何位置都可以访问到，那么当前的变量的作用域就是一个全局作用域。
局部作用域：在函数中定义的变量，他的作用范围只在函数中。
在JS中使用var定义的变量，会存在变量提升。
<script> console.log(username); var username = 'zhangsan'; var username; console.log(username); username = 'zhangsan'; </script>
如何定义变量可以不让变量名提升
<script> // let定义的变量不存在变量名的提升。 // console.log(a); // let a=5; //const定义的变量也不存在变量名提升。但是const修饰的变量不得被修改。 // 所以，我们可以可以人为被const修饰的变量就是常量。 const b=10; // b=20; console.log(b); </script>
JS匿名函数
命名函数（有名字的函数）
匿名函数：没有名字的函数。
函数的定义方式： function 函数名（a,b）{ 函数体 } 函数表达式的定义方式为： var 变量名 = function(a,b){ 函数体 }函数表达式方式定义的时候，等号右边就是一个匿名函数体。
() 运算符调用函数。
<script>
function add(a, b) {
console.log(a + b);
}
// 匿名函数
var fun = function(a,b){
console.log(a * b);
};
fun(7,8);
// 函数的自调用
(function xx(){
console.log("hahahhah");
})();
(yy=function(){
console.log("aaa");
})();
</script>
函数名和变量名同名的时候
<script>
// 第一题
// var a = function () {
// console.log(a);
// };
// a = 10;
// a();//报错,Uncaught TypeError: a is not a function
// 第二题
// var a = 10;
// a = function () {
// console.log(a);
// };
// a();//函数,不报错
// 第三题
// var a = 10;
// var a = function () {
// console.log(a);
// };
// a();//函数
// console.log(a);//函数
// 第四题
var a;
a = function () {
a = 10;
console.log(a);
};
a();// 这个是函数执行后的,10
console.log(a);// 10
</script>
5.10 JS面向对象
面向对象的思想
- JS和Java一样也是面向对象的语言：
- 在真实的世界中，我们所看到的所有的事物，都可以看作一个具体的对象。根据这个对象的具体的特征和行为，
用代码来模拟这些特征（属性），模拟行为（方法）。- 属性和方法抽象出了一种类型。通过这种类型实例化出具体的一个一个的对象。
- 对象也是变量。但是对象包含很多值。
- 面向对象：只重视结果。面向过程：在意每一个细节 。
- 面向对象三大特征：
- 封装
- 继承
- 多态
<script>
// 未接触面向对象思想之前
var age = 21;
var height = 187;
var weight = "55kg";
// 接触面向对象思想之后
var person = new Object();
person.age = 21;
person.height = 187;
person.weight = "55kg";
console.log(person);
// 面向过程的思想
var a = 12;
var b = 33;
var sum = a + b;
console.log(sum);
// 面向对象的思想
function sum3(a, b) {
return a + b;
}
sum3(1, 8);
console.log(sum3);
console.log(sum3(2, 2));
</script>
创建对象
- 第一种方法：
调用函数new Object()来创建对象。对象存储数据以键值对的形式来存储。
格式：key 属性名：value 属性值。
<script>
//js是一门动态的语言。
var person = new Object();
person.age = 22;
person.sex = "男";
person.weight = "72kg";
person.dance = function () {
alert("机械舞");
};
person.eat = function () {
alert("炸鸡啤酒")
};
console.log(person);
// 通过对象名.属性名 调用对象的属性，通过对象名.方法名（）来调用对象的方法
console.log(person.age);
console.log(person.dance);
console.log(person.eat());
</script>
- 第二种方式：工厂模式就是专门生产产品的，定义一个函数，这个函数的作用就是用来生产对象的。
<script>
/*** 第二种方式：工厂模式
* 工厂就是专门生产产品的，定义一个函数，这个函数的作用就是用来生产对象的。
*/
function createPerson(age, sex, height, dance, eatname) {
var person = new Object()
person.age = age;
person.sex = sex;
person.height = height;
person.dance = function () {
alert(dance);
};
person.eat = function () {
alert(eatname)
};
return person;
}
var mm = createPerson(23, "女", 167, "hahahha", "all");
console.log(mm);
</script>
第三种方式：
通过构造函数创建对象
- 构造函数：创建方式和普通的函数没有什么大的区别，注意：构造函数名称首字母大写。
- 构造函数，我们可以人为就是一个抽象的类。（类似于Java中的构造器）
- 实例（对象）化的过程就是通过类型去创建一个一个具体的对象。创建一个对象，也可以叫做实例化一个对象。
当new Person()的时候
- 在堆内存中开辟一块空间（每个对象都有一个独立的空间。）
this指向当前的空间。用this.的方式进行属性和方法的添加设置。不需要使用return返回对象。
<script>
function Person(age, height, sex) {
this.age = age;
this.height = height;
this.sex = sex;
}
var mm = new Person(17, 180, "男");
console.log(mm);
console.log(typeof mm);
function Cat(age, mingzi) {
this.age = age;
this.mingzi = mingzi;
}
var cat2 = new Cat(2, "lmm");
console.log(cat2 instanceof Cat);
console.log(cat2 instanceof Person);
console.log(cat2 instanceof Object);//继承
</script>
请避免字符串、数值或逻辑对象。他们会增加代码的复杂性并降低执行速度。
var x = new String(); // 把 x 声明为 String 对象
var y = new Number(); // 把 y 声明为 Number 对象
var z = new Boolean(); // 把 z 声明为 Boolean 对象
- 第四种方式：字面量的方式创建对象。
<script>
/**
*字面量的方式创建对象 1，10，'zs'
*/
var zs = {
name: "zs", age: 18, country: "zhongguo",
eat: function () {
console.log("zhaji");
}
}
zs.banji = "justweb";//可以添加属性
// 当然也可以添加方法
zs.dance = function () {
console.log("jixiewu");
};
console.log(zs);
console.log(zs.name);
// 通过[key] 拿到value
console.log(zs["age"]);
zs.dance();
</script>
this的指向
<script>
/**
*构造函数,构造函数的this指的是当前构造函数的 实例化对象。
*/
function Car(name) {
console.log(this);
this.name = name;
}
var qq = new Car("qq");//当前构造函数的实例化对象
console.log(Car);//函数
console.log("--------------------------");
console.log(this);
/***
* 普通函数 this指的是window对象，因为普通函数是由window对象调用的。
*/
function sum() {
console.log(this);
}
window.sum();
console.log("--------------------------");
var array = new Array(10);
array.fill(6);
// Array(10)
console.log(array);
var s = array.toString();
var strings = s.split(",");
var s1 = strings.join("|");
// 6|6|6|6|6|6|6|6|6|6
console.log(s1);
</script>
5.11 JS的垃圾回收机制
- JS内存泄漏与垃圾回收机制
- JS垃圾回收机制：自动会将没有引用指向的堆内存空间的数据清理掉。
- 现在各大浏览器通常采用的垃圾回收机制有两种方法：标记清除，引用计数(Java中使用的是可达性分析算法，而没有使用引用计数法，因为引用计数法不能处理循环引用的情况)。
<script>
// 第一种：改变引用的指向，让{name:"周杰伦"},没有任何引用指向它，js会自动回收该对象的内存。
var p1 = {name: "周杰伦"};//不需要我们去清楚内存。
p1 = {name: "蔡依林"};
// 第二种：给引用赋值为null,也可以让对象没有任何引用指向，打到清除内存的目的。
var p3 = {name: "周杰伦"};
p3 = null;
// 第三种： 函数运行在栈内存。函数运行结束的时候，自动回收改内存。也叫方法弹桟。
function sum(a, b) {
return sum1(a, b)
}
function sum1(a, b) {
return sum2(a, b)
}
function sum2(a, b) {
return sum3(a, b)
}
function sum3(a, b) {
return a + b;
}
var sum4 = sum(1, 3);
console.log(sum4);
console.log(sum(5, 69));
</script>
6. JavaScript练习
6.1 弹球问题
- 一球从100米高度自由落下，每次落地后反跳回原高度的一半；
- 再落下，求它在 第10次落地时，共经过多少米？
- 第10次反弹多高？
<script>
for (let j = 1; j <= 10; j++) {
var count = j;
var height = 100;
var sum = 0;
for (let i = 0; i < count; i++) {
sum += height * 2;
height = height / 2;
}
// 减去初始值，多算了一个初始高度。
console.log("第" + count + "次落地共经历了" + (sum - 100) + "米");
// 第10次弹起来的高度
console.log("第" + count + "次弹起的高度为" + height);
}
</script>
6.2 猴子吃桃问题
猴子吃桃问题：
- 猴子第一天摘下若干个桃子，当即吃了一半，还不瘾，又多吃了一个，
- 第二天早上又将剩下的桃子吃掉一半，又多吃了一个。
- 以后每天早上都吃了前一天剩下的一半零一个。
- 到第10天早上想再吃时，见只剩下一个桃子了。
- 求第一天共摘了多少。
<script>
/**
* 天数 剩余桃子数
* 1 1534
* 2 766
* 3 382
* 4 190
* 5 94
* 6 46
* 7 22
* 8 10
* 9 4 i=(i+1)*2
* 10 1 i
*/
var num = 1;
for (var i = 10; i >= 1; i--) {
if (i == 10) {
num = 1;
} else {
num = (num + 1) * 2;
}
console.log("第" + i + "天剩余的桃子为" + num + "个");
}
</script>
6.3 打印三角形
<script>
/**
*
* A 0 1
* *B* 1 3
* **C** 2 5
* ***D*** 3 7
*/
var row = 8;
var zimu = ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J'];
for (var i = 0; i < row; i++) {
for (let k = 0; k < row - 1 - i; k++) {
// 空格
document.write(" ");
}
for (var j = 0; j < i * 2 + 1; j++) {
if (j === i) {
document.write(zimu[j]);
} else {
document.write("*");
}
}
document.write("<br/>");
}
</script>
6.4 斐波那契数列
有一对兔子，从出生后第3个月起每个月都生一对兔子，小兔子长到第三个月后每个月又生一对兔子，假如兔子都不死，问每个月的兔子总数为多少？
<script>
/**
* 1 2 3 4 5 6 7 8 9
* 1 1 2 3 5 8 13 21 34
*/
var rabbitArr = new Array(10);
rabbitArr[0] = 1;
rabbitArr[1] = 1;
for (let i = 2; i < rabbitArr.length; i++) {
rabbitArr[i] = rabbitArr[i - 1] + rabbitArr[i - 2];
}
console.log(rabbitArr);
</script>
524
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
