『毕业设计』JavaScript

依旧是尚硅谷的课程JavaScript,不过是16年的课程了

Vue听完简介说前置知识JavaScript,毕设果然是天坑(bushi

发现上一遍写的没保存(救命

2021-07-25 101601_49_.jpg

00 JavaScript


一、JS编写位置

  1. 编写在script标签中

    1
    2
    3
    <script type="text/javascript">
    //编写js代码
    </script>
  2. 编写在标签的指定属性中

    1
    2
    <button onclick="alert('hate');">这是按钮</button>
    <a href="javascript:alert('qwq');">这是超链接</a>

    结构与行为耦合,不方便维护不推荐。

  3. 编写在外部js文件中,然后通过script标签引入

    1
    <script type="text/javascript" src="./Untitled-1.js"></script>

    写到外部文件中可以在不同的页面中同时引用,也可以利用到浏览器的缓存机制,推荐使用。

    当前script标签一旦用于引入外部文件了,就不能在其中编写代码了,即时写了浏览器也会忽略。如若需要,则可以再创建一个新的script标签编写内部代码。

二、输出语句

  1. 在浏览器窗口中弹出警告框

    1
    alert("hello world");
  2. 向body中输出内容,并在页面中显示

    1
    document.write("Hello World");

    一个页面就是一个文档,即document

  3. 向控制台输出内容

    1
    console.log("guess");

三、基本语法

(一)注释

  1. 多行注释

    1
    2
    /*
    */
  2. 单行注释

    1
    //

    VScode中:单行注释快捷键:“Ctrl+/“;块注释快捷键”Alt+Shift+A“。<!--balabala-->

(二)基本语法

  1. JS中严格区分大小写
  2. JS中每一条语句以分号(;)结尾
    • 如果不写分号,浏览器会自动添加,但是会消耗一些系统资源,且可能加错分号
  3. JS中会忽略多个空格和换行

四、字面量和变量

(一)字面量

不可改变的值,例:1 2 3 4 5 ‘hello’ 。可以直接使用,但一般不直接使用字面量。

(二)变量

用来保存字面量,且可任意改变,方便使用。

  1. 声明变量

    1
    var a;

    使用var关键字声明变量

  2. 赋值

    1
    a = 123;
  3. 声明和赋值同时进行

    1
    var a = 123;

五、标识符

在JS中所有的可以自主命名的内容,都可以认为是一个标识符,例:变量名、函数名、属性名。

JS底层保存标识符时实际上采用的是Unicode编码(所以中文也可以赋值,但是别用hhhh)

(一)规则

  1. 标识符中可以含有字母、数字、_、$
  2. 标识符不能以数字开头
  3. 标识符不能是JS中的关键字和保留字
  4. 标识符一般采用驼峰命名法—xxxYyyZzz

01 数据类型


  • JS中的六种数据类型

    • String 字符串
    • Number 数值
    • Boolean 布尔值
    • Null 空值
    • Undefined 未定义
    • Object 对象
  • 使用typeof来检查变量类型,返回string、number、……

    1
    console.log(typeof a);//number

    一、基本数据类型

(一)String字符串

JS中字符串需要使用单引号或双引号引起来

”\“作为转义字符

1
2
3
4
5
\" 表示 "
\' 表示'
\\ 表示 \
\n 表示 换行
\t 表示 制表符

(二)Number数值

JS中所有的整数和浮点数都是Number类型。

Number.MAX_VALUE = 1.7976931348623157e+308

Number.MIN_VALUE = 5e-324 (最小正值)

使用Number表示的数字超过最大值,则会返回一个Infinity;小于最小值,则返回-Infinity。可以直接赋值,输出 Infinity。

1
var a = Infinity;

NaN是一个特殊的数字,表示Not A Number。同样可以直接赋值。

其他进制的数字的表示:

  • 0b 开头表示二进制(但是不是所有的浏览器都支持)
  • 0 开头表示八进制
  • 0x 开头表示十六进制

(三)Boolean布尔值

逻辑判断

真 true

假 false

(四)Null空值

null专门用来表示为空的对象,Null类型的值只有一个
使用typeof检查一个Null类型的值时会返回”object

(五)Undefined未定义

如果声明一个变量但是没有为变量赋值此时变量的值就是undefined

二、引用数据类型

Objectde

三、强制类型转换

(一)转换为String

  1. (强制类型转换)调用被转换数据的 toString() 方法

    1
    2
    var a = 123;
    a = a.toString();

    由于null和undefined类型的数据中没有方法,所以调用toString()时会报错

  2. (强制类型转换)调用 String() 函数

    1
    2
    var a = 123;  
    a = String(a);

    对于Number、Boolean、String直接调用toString()方法来将其转换为字符串。

    对于null值,直接转换为字符串”null”。

    对于undefined直接转换为字符串”undefined”。

  3. (隐式类型转换)为任意的数据类型 +””

    1
    2
    var a = true;  
    a = a + "";

    原理同String()函数

(二)转换为Number

  1. (强制类型转换)调用 Number() 函数

    1
    2
    var s = "123";  
    s = Number(s);//123

    转换的情况:

    • 字符串 –> 数字

      • 如果字符串是一个合法的数字,则直接转换为对应的数字
      • 如果字符串是一个非法的数字,则转换为NaN
      • 如果是一个空串或纯空格的字符串,则转换为0
    • 布尔值 –> 数字

      • true转换为1
      • false转换为0
    • 空值 –> 数字:null转换为0

    • 未定义 –> 数字:undefined 转换为NaN

  2. (强制类型转换)调用 parseInt()parseFloat()

    专门用来将一个字符串转换为数字

    1
    2
    3
    var a = "123.45px";
    a = parseInt(a);//123
    var b = parseFloat(a);//123.45

    即从左往右取到第一个不为数字的位置或有效小数为止,先将其转换为String,然后转换为Number

  3. (隐式类型转换)

    1
    2
    var a = "123";  
    a = +a;

    原理同Number()函数

(三)转换为Boolean

  1. (强制类型转换)调用 Boolean() 函数

    1
    2
    var s = "false";  
    s = Boolean(s); //true

    转换的情况:

    • 字符串 –> 布尔:除了空串其余全是true

    • 数值 –> 布尔:除了0和NaN其余的全是true

    • null、undefined –> 布尔:false

    • 对象 –> 布尔:true

  2. (隐式类型转换)为任意的数据类型做两次非运算

    1
    2
    var a = "hello";  
    a = !!a; //true

02 基础语法


一、运算符

(一)typeof运算符

用来检查一个变量的数据类型
语法:typeof 变量
返回一个用于描述类型的字符串作为结果

(二)算术运算符

  • +
    • 如果是两个字符串进行相加,则会做拼串操作,将两个字符连接为一个字符串。
    • 任何值和字符串做加法,都会先转换为字符串,然后再拼串。
  • -
  • *
  • /
  • %

除了加法以外,对非Number类型的值进行运算时,都会先转换为Number,然后再做运算。

(三)一元运算符

一元运算符只需要一个操作数

  • 一元的+

    就是正号,不会对值产生任何影响,但是可以将一个非数字转换为数字

  • 一元的-

    就是负号,可以对一个数字进行符号位取反

  • 自增&自减

    同以往知识体系

(四)逻辑运算符

  • :取反
  • && :对符号两侧的值进行与运算
  • || :对符号两侧的值进行或运算

(五)赋值运算符

同以往知识体系

(六)关系运算符

>,>=,<,<=

如果比较的两个值是非数值,会将其转换为Number然后再比较。

如果比较的两个值都是字符串,此时会比较字符串的Unicode编码,而不会转换为Number。

(七)相等字符串

  • == :对不同的类型进行比较,会将其转换为相同的类型然后再比较。
  • != :也会做自动的类型转换。
  • === :不会进行自动的类型转换。
  • !== :不会进行自动的类型转换。

特殊的值:

  • null和undefined
    由于undefined衍生自null,所以null == undefined会返回true。
    但是null === undefined 会返回false。

  • NaN
    NaN不与任何值相等,包括它自身 NaN == NaN //false

    判断一个值是否是NaN,使用**isNaN()**函数

(八)三元运算符

  • **? : ** :条件表达式?语句1:语句2
  • 优先级

二、流程控制语句

(一)条件分支语句

  1. if语句

    1
    2
    3
    4
    5
    6
    7
    if(条件表达式){  
    语句...
    }else if(条件表达式){
    语句...
    }else{
    语句...
    }
  2. switch语句

    全等比较,即不会进行自动的类型转换。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    switch(条件表达式){  
    case 表达式:
    语句...
    break;
    case 表达式:
    语句...
    break;
    default:
    语句...
    break;
    }

    (二)循环语句

  3. while循环

    1
    2
    3
    while(条件表达式){  
    语句...
    }
  4. do while循环

    1
    2
    3
    do{  
    语句...
    }while(条件表达式)
  5. for循环

    1
    2
    3
    for(初始化表达式;条件表达式;更新表达式){  
    语句...
    }

03 Obeject对象


对象是JS中的引用数据类型
对象是一种复合数据类型,在对象中可以保存多个不同数据类型的属性
使用typeof检查一个对象时,会返回object

一、对象的分类

  1. 内建对象:
    • 由ES标准中定义的对象,在任何的ES的实现中都可以使用
    • 比如:Math,String,Number,Boolean,Function,Object….
  2. 宿主对象:
    • 由JS的运行环境提供的对象,目前来讲主要指由浏览器提供的对象
    • 比如:BOM(浏览器对象模型):console,document,…;DOM(文档对象模型)
  3. 自定义对象
    • 由开发人员自己创建的对象

二、自定义对象

(一)创建对象

1
2
3
4
5
6
var obj = new Object();//方法一
var obj = {};//方法二
var obj = {
属性名:属性值, //使用特殊属性名时必须加引号,例如"@$#@!":
属性名:{}
}//使用对象字面量,在创建对象时直接向对象中添加属性

对象中的值称为属性

(二)添加属性

1
2
3
4
5
对象.属性名 = 属性值;
对象[“属性名”] = 属性值; //这种方式能够使用特殊的属性名,例如数字

obj.name = "Lily";//{name: 'Lily'}
obj["gender"] = "女";//{name: 'Lily', gender: '女'}

对象的属性名不强制遵守标识符的规范,但是在开发中,尽量按照标识符的要求去写。

属性值也可以任意的数据类型,也可以是一个对象。

(三)读取属性

1
2
3
4
5
6
对象.属性名
对象[“属性名”] //“属性名”可以使字符串常量,也可以是字符串变量

obj["123"] = 789;
var n = "123";
console.log(obj[n]);//789

如果读取一个对象中没有的属性,它不会报错,而是返回一个undefined.

(四)删除属性

1
2
delete 对象.属性名  
delete 对象["属性名"]

(五)in运算符

使用in检查对象中是否含有指定属性

1
2
3
”属性名” in 对象

console.log("test" in obj);//false

循环遍历对象自身的和继承的可枚举属性(不含Symbol属性)。

1
2
3
4
var obj = {'0':'a','1':'b','2':'c'};  
for(var i in obj) {
console.log(i,":",obj[i]);
}

三、基本数据类型和引用数据类型

  • 基本数据类型:String、Number、Boolean、Null、Undefined
    • 基本数据类型的数据,变量是直接保存的它的值。
    • 如果多个变量指向的是同一个对象,此时修改一个变量的属性,会影响其他的变量。
  • 引用数据类型:Object
    • 引用数据类型的数据,变量是保存的对象的引用(内存地址)
    • 如果多个变量指向的是同一个对象,此时修改一个变量的属性,会影响其他的变量。

比较两个变量时,对于基本数据类型,比较的就是值;对于引用数据类型比较的是地址,地址相同才相同。

1
2
3
4
var obj2 = obj;
obj2 = null;
console.log(obj2);//null
console.log(obj);//{123: 789, name: 'Lily', gender: '女'}

04 Fuction函数


函数也是一个对象,也具有普通对象的功能(能有属性)

使用typeof检查一个函数时会返回function

一、自定义函数

(一)创建函数

  1. 函数声明

    1
    2
    3
    function 函数名([形参1,形参2...形参N]){  
    语句...
    }
  2. 函数表达式

    1
    2
    3
    var 函数名 = function([形参1,形参2...形参N]){//匿名函数
    语句...
    };
  3. 构造函数(倒也不必

    1
    var fun = new Function("console.log('Hello');");

(二)调用函数

1
函数对象([实参1,实参2…实参N]);

二、函数的参数

(一)形参:形式参数

定义函数时,可以在()中定义一个或多个形参,形参之间使用,隔开。
定义形参就相当于在函数内声明了对应的变量但是并不赋值,形参会在调用时才赋值。

(二)实参:实际参数

调用函数时,可以在()传递实参,传递的实参会赋值给对应的形参,调用函数时JS解析器不会检查实参的类型和个数,可以传递任意数据类型的值。

如果实参的数量大于形参,多余实参将不会赋值;如果实参的数量小于形参,则没有对应实参的形参将会赋值undefined。

(三)返回值,就是函数执行的结果。

使用return 来设置函数的返回值,可以通过一个变量来接收返回值。

1
return 值;

return后可以跟任意类型的值,可以是基本数据类型,也可以是一个对象。
如果return后不跟值,或者是不写return则函数默认返回undefined。

  • break、continue和return
    • break:退出循环
    • continue:跳过当次循环
    • return:退出函数
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
function fun1(a, b) {
console.log(a + b);
}
function fun2(a) {
console.log("a = " + a);
a(2, 3);
}
fun2(fun1);
fun2(fun1());
/*
a = function fun1(a, b) {
console.log(a + b);
}
5
NaN
a = undefined
*/

三、立即执行函数

函数定义完,立即被调用,这种函数叫做立即执行函数
立即执行函数往往只会执行一次

1
2
3
4
5
6
7
8
(function (a, b) {
console.log("a = " + a);
console.log("b = " + b);
})(123, 456);
/*
a = 123
b = 456
*/

四、Method方法

可以将一个函数设置为一个对象的属性。

当一个对象的属性是一个函数时,我们称这个函数是该对象的方法。

1
2
3
4
5
var obj = { name: "Lily", age: 18 };
obj.sayName = function () {
console.log("My name is " + obj.name + ".");
};
obj.sayName();//My name is Lily.

函数与方法本质无区别。

五、枚举属性

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
var obj = {
name: "Lily",
age: 18,
gender: "女",
address: "Here"
};
for (var x in obj) {
console.log(x + ": " + obj[x]);
}
/*
name: Lily
age: 18
gender: 女
address: Here
*/

六、作用域

同以往知识体系

(一)全局作用域

直接在script标签中编写的代码都运行在全局作用域中。

全局作用域在打开页面时创建,在页面关闭时销毁。
全局作用域中有一个全局对象window,window对象由浏览器提供,可以在页面中直接使用,它代表的是整个的浏览器的窗口。
在全局作用域中创建的变量都会作为window对象的属性保存。
在全局作用域中创建的函数都会作为window对象的方法保存。
在全局作用域中创建的变量和函数可以在页面的任意位置访问,在函数作用域中也可以访问到全局作用域的变量。尽量不要在全局中创建变量。

  • 变量声明提前

    在全局作用域中,使用var关键字声明的变量会在所有的代码执行之前被声明,但是不会赋值。undefined

    如果没有使用var关键字声明变量,则变量会变成全局变量,且不会被声明提前。

  • 函数声明提前

    在全局作用域中,使用函数声明创建的函数(function fun(){}),会在所有的代码执行之前被创建

    但是使用函数表达式(var fun = function(){})创建的函数没有该特性。

(二)函数作用域

函数作用域是函数执行时创建的作用域,每次调用函数都会创建一个新的函数作用域。
函数作用域在函数执行时创建,在函数执行结束时销毁。
在函数作用域中创建的变量,不能在全局中访问。
当在函数作用域中使用一个变量时,它会先在自身作用域中寻找,如果找到了则直接使用,如果没有找到则到上一级作用域中寻找,如果找到了则使用,找不到则继续向上找,找不到就ReferenceError

就近原则

  • 变量声明提前

    在函数作用域中,使用var关键字声明的变量,会在所有的函数中的代码执行之前就被声明。

  • 函数声明提前

    在函数作用域中,使用函数声明创建的函数,会在所有的函数中的代码执行之前就被创建。

七、this

每次调用函数时,解析器都会将一个上下文对象作为隐含的参数传递进函数。

使用this来指向函数执行的上下文对象,根据函数的调用形式不同,this会指向不同的对象。

this的不同的情况:

  1. 以函数的形式调用时,this是window
  2. 以方法的形式调用时,this就是调用方法的对象
  3. 以构造函数的形式调用时,this就是新创建的对象

  • Copyright: Copyright is owned by the author. For commercial reprints, please contact the author for authorization. For non-commercial reprints, please indicate the source.
  • Copyrights © 2021 Gghost
  • Visitors: | Views:

请我喝杯咖啡吧~

支付宝
微信