JavaScript - 自学笔记

作者: Dozing | 来源:发表于2020-08-13 12:45 被阅读0次

JavaScript学习

1. 简介

JavaScript是世界上最流行的语言之一，是一种运行在客户端的脚本语言
脚本语言：不需要编译，运行过程中由js解析器(js引擎)逐行来进行解释并运行
现在也可以基于Node.js技术进行服务器端编程

2. 浏览器执行JS简介

浏览器分成两个部分，渲染引擎和JS引擎

渲染引擎：用来解析HTML与CSS，俗称内核，比如chrome浏览器的blink,老版本的webkit
JS引擎：也称为JS解释器。用来读取网页中的JavaScript代码，对其处理后运行，比如chrome浏览器的V8

Notes: 浏览器本身并不会执行JS代码，而是通过内置JavaScript引擎(解释器)来执行JS代码。JS引擎执行代码时逐行解释每一句源码(转换成机器语言)，然后由计算机去执行，所以JavaScript语言归为脚本语言，会逐行解释执行。

3. JS的组成

graph TD
A[JavaScript]-->B[ECMAScript]
A[JavaScript]-->C[DOM]
A[JavaScript]-->D[BOM]

ECMAScript:JavaScript语法
DOM:页面文档对象模型

文档对象模型(Document Object Model),是W3C组织推荐的处理可扩展标记语言的标准编程接口。通过DOM提供的接口可以对页面的各种元素进行操作(大小，位置，颜色等)
浏览器对象模型

BOM(Browser Object Model)是指浏览器对象模型，它提供了独立于内容的，可以与浏览器窗口进行互动的对象结构，通过BOM可以操作浏览器窗口，比如弹出框，控制浏览器的跳转，获取分辨率等

4. JS位置

JS有3种书写位置，分别为行内，内嵌和外部

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 2.内嵌式的js -->
    <script>
        alert('Completed');
    </script>
    <!-- 3.外部js script双标签 -->
    <script src="test.js"></script>
</head>
<body>
    <!-- 1.行内式的js,直接写道元素的内部 -->
    <input type="button" value="Submit" onclick="alert('Submit Complete')">
</body>
</html>

4.1 行内式JS

可以将单行或少量JS代码写在HTML标签属性中(以on开头的属性)，如:onclick
注意单双引号的使用：在HTML中推荐使用双引号，JS中我们推荐使用单引号
特殊情况下使用

4.2 外部JS

适合于JS代码量比较大的情况
引用外部JS文件的script标签中间不可以写代码

<script src="test.js"></script>

5. JavaScript输入输出语句

方法	说明	归属
alert(msg)	浏览器弹出警示框	浏览器
console.log(msg)	浏览器控制台打印输出信息	浏览器
prompt(info)	浏览器弹出输入框，用户可以输入	浏览器

5.1 JavaScript显示数据

使用window.alert()弹出警告框
使用document.write()方法将内容写道HTML文档中
使用innerHTML写入到HTML元素中
使用console.log()写入到浏览器的控制台

6. 变量

6.1 本质：变量是程序在内存中申请的一块用来存放数据的空间

使用变量的时候，一定要声明变量，然后赋值。声明变量本质是去内存申请空间

6.2 声明一个变量并赋值，称之为变量的初始化

//<script>
  //1. 用户输入姓名
  var myname = prompt('请输入你的名字')
  //2. 输出这个用户名
  alert(myname)
//</script>

6.3 同时声明多个变量

同时声明多个变量时，只需要写一个var，多个变量名之间使用英文逗号隔开

var age = 10,name = 'zs',sex = 'male';

6.4 变量声明特殊情况

情况	说明	结果
var age;console.log(age);	只声明不赋值	undenfined
console.log(age)	不申明不赋值直接使用	报错
age = 10;console.log(age);	不声明只赋值	10

6.5 变量的数据类型

变量是用来存储值的所在处。它们有名字和数据类型，变量的数据类型决定了如何将代表这些值的位存储到计算机的内存中.JavaScript是一种弱类型或者说动态语言.这意味着不用提前声明变量的类型，在程序运行过程中，类型会被自动确定。

var age = 10;             //这是一个数字型
var address = "Guangzhou" //这是一个字符串

在代码运行时，变量的数据类型是由JS引擎根据=右边变量值的数据类型来判断的，运行完毕之后，变量就确定了数据类型。

JavaScript拥有动态类型，同时也意味着相同的变量可用作不同的类型:

var x = 6;      //x为数字
var x = "Bill"; //x为字符串

6.6 数据类型的分类

JS把数据类型分为两类:

简单数据类型(Number,String,Boolean,Undefined,Null)
复杂数据类型(object)

简单数据类型说明如下:

简单数据类型	说明	默认值
Number	数字型，包含整型值和浮点值，如`21`，`0.21`	0
Boolean	布尔值类型，如`true`,`false`,等价于1和0
String	字符串类型，如"张三"，注意JS里面，字符串都带引号	""
Undefined	`var a;`声明了变量`a` 但是没有给值，此时`a = undefined`	undefined
Null	`var a = null;`声明了变量`a`为空值

6.6.1 JS中八进制在数字前面加0，十六进制在数据前面加0x

数字型的三个特殊值:

Infinity,代表无穷大，大于任何数值
-Infinity,代表无穷小，小于任何数值
NaN,Not a number,代表一个非数值

console.log(Number.MAX_VALUE * 2);  //Infinity无穷大
console.log(-Number.MAX_VALUE * 2); //Infinity无穷小
console.log('老师' - 100);          //NaN

isNan()用来判断一个变量是否为非数字的类型，返回true或者false

6.6.2 字符串类型String

字符串型可以是引号中的任意文本，其语法为单引号' '和双引号""

JS可以用单引号嵌套双引号，或者用双引号嵌套单引号(外双内单，外单内双)

多个字符串之间可以使用+进行拼接，其拼接方式为字符串+任何类型 = 拼接之后的新字符串

6.6.3 布尔型Boolean

布尔型和数字型相加的时候，true的值为1，false的值为0

console.log(true+1)  //2
console.log(false+1) //1

6.6.4 Undefied和Null

一个声明后没有被赋值的变量会有一个默认值undefined(如果经行相连或者相加时，注意结果)

undefied 和数字型相加，最后结果是NaN

6.6.5 字面量

字面量是在源代码中一个固定值的表示方法

数字字面量：8,9,10
字符串字面量:'黑马程序员',"大前端"
布尔字面量:true,false

7.数据类型转换

7.1 通常使用的类型转换

转换为字符串

方式	说明	案例
`toString()`	转成字符串	`var num=1;alert(num.toString());`
`String()`强制转换	转成字符串	`var num=1;alert(String(num));`
加号拼接字符串	和字符串拼接的结果都是字符串	`var num=1;alert(num+"I am string");`

转换为数字型

方式	说明	案例
`parselnt(string)`函数	将`string`类型转换成整数数值型	`parselnt('78')`
`parseFloat(string)`函数	将`string`类型转换成浮点数数值型	`parseFloat('78.21')`
`Number()`强制转换函数	将`string`类型转换成数值型	`Number('12')`
js隐式转换`(- * / )`减法，乘法，除法	利用算术运算隐式转换为数值型	`'12' - 0`

转换为布尔型

方式	说明	案例
`Boolean()`函数	其他类型转换成布尔值	`Boolean('true')`

A. 代表空，否定的值会被转换为false,如' ' ,0,NaN,null,undefined

B. 其余值都会被转换为true

console.log(Boolean(''));//false
console.log(Boolean(0));//false
console.log(Boolean(NaN));//false
console.log(Boolean(null));//false
console.log(Boolean(undefined));//false
console.log(Boolean('小白'));//false
console.log(Boolean(12));//false

8.运算符

运算符(operator)也被称为操作符，是用于实现赋值，比较和执行算数运算等功能的符号

算术运算符

(不能直接判断两个浮点数是否相等)

表达式:是由数字，运算符，变量等以能求得数值的有意义排列方法所得的组合
递增递减运算符

前置自增和后置自增如果单独使用效果是一样的

后置自增的区别，先返回原值后自增
比较运算符

注意的是 ==默认转换数据类型，会把字符串类型的数据转换成数字型

===和!==全等要求值和数据类型都一致

符号作用用法

= 赋值把右边给左边

== 判断判断两边值是否相等(注意此时有隐式转换)

=== 全等判断两边的值和数据类型是否完全相同
逻辑运算符

运算符描述例子

&& and (x<10 && y>1) //true

` ` or `(x==5 y==5) //false`

! not (x==y) //false

短路运算(逻辑中断)：当有多个表达式(值)时，左边的表达式值可以确定结果时，就不再继续运算右边的表达式的值

符号	作用	用法
`=`	赋值	把右边给左边
`==`	判断	判断两边值是否相等(注意此时有隐式转换)
`===`	全等	判断两边的值和数据类型是否完全相同

运算符	描述	例子
`&&`	and	`(x<10 && y>1) //true`
`		`	or	`(x==5	y==5) //false`
`!`	not	`(x==y) //false`

赋值运算符

赋值运算符	说明	案例
`=`	直接赋值	`var userName='Name';`
`+=`,`-=`	加，减一个数后再赋值	`var age = 10;age+=5; //15`
`*=`,`/=`,`%=`	乘，除，取模后再赋值	`var age = 2; age *= 5; //10`

运算符的优先级

优先级	运算符	顺序
1	小括号	`()`
2	一元运算符	`++ -- !`
3	算术运算符	先`* / %`后`+ -`
4	关系运算符	`> >= < <=`
5	相等运算符	`== != === !==`
6	逻辑运算符	先`&&`后`	`
7	赋值运算符	`=`
8	逗号运算符	`,`

9. 流程控制

流程结构主要有三种结构，分别是顺序结构，分支结构和循环结构

JS语言提供了两种分支语句 1. if, 2.switch

9.1 if语句：

//if...else 语句
if (condition)
{
    当条件为 true 时执行的代码
}
else
{
    当条件不为 true 时执行的代码
}

//if...else if...else 语句
if (condition1)
{
    当条件 1 为 true 时执行的代码
}
else if (condition2)
{
    当条件 2 为 true 时执行的代码
}
else
{
  当条件 1 和 条件 2 都不为 true 时执行的代码
}

9.2 三元表达式：

三元表达式也能做一些简单的条件选择，有三元运算符组成的式子称为三元表达式

语法结构：

条件表达式？表达式1：表达式2

9.3 switch语句

switch(n)
{
    case 1:
        执行代码块 1
        break;
    case 2:
        执行代码块 2
        break;
    default:
        与 case 1 和 case 2 不同时执行的代码
}

Note:n的值和case里面的值相匹配的时候是全等。必须是值和数据类型一致才可以

10. 循环

10.1 for循环

for (初始化变量; 条件表达式; 操作表达式)
{
   被执行的代码块
}

10.2 while循环

while (条件)
{
   需要执行的代码
}
// do while
do
{
   需要执行的代码
}
while (条件);

11. 数组

11.1 创建数组

//1. 利用new创建数组
var 数组名 = new Array();
var arr = new Array();  //创建一个新的空数组
//2.3 利用数组字面量创建数组
var 数组名 = [];

数组的字面量是方括号[]
声明数组并赋值称为数组的初始化
数组中可以存放任意类型的数据，例如字符串，数字，布尔值等

11.2 数组长度

数组名.lenght

11.3 数组中新增的元素

可以通过修改length长度来实现数组扩容的目的.length属性是可读写的

var arr = ['red','green','blue']
console.log(arr.length);
arr.length = 5;
console.log(arr);
console.log(arr[3]);//undefined
console.log(arr[4]);//undefined

新增数组元素，修改索引号

var arr1 = ['red','green','blue']
arr1[3] = 'pink';

12. 函数

函数:封装了一段可被重复调用执行的代码块。通过此代码块可以实现大量代码的重复使用

函数声明 - 方法1：

function functionName(parameters) {
  执行的代码
}

函数声明 - 方法2：

函数表达式

//例子
var x = function (a, b) {return a * b};

以上函数实际上是一个匿名函数(函数没有名称)。函数存储在变量中，不需要函数名称，通常通过变量名来调用。

形参用来接收实参

在声明函数时，可以在函数名称后面的小括号添加参数，这些参数称为形参。而在调用该函数时，同样需要传递相应的参数，这些参数称为实参

参数	说明
形参	形式上的参数，函数定义的时候传递的参数，当前并不知道是什么
实参	实际上的参数，函数调用的时候传递的参数，实参是传递给形参的

1.如果实参的个数和形参的个数一致，则正常输出结果
2.如果实参个数多于形参的个数，会取到形参的个数
3.如果实参的个数小于形参的个数，多出的形参定义为undefined,最终结果是NaN

12.1 函数返回值

return终止函数.return语句之后的代码不被执行

JS的return只能返回一个值。如果用逗号隔开多个值，以最后一个为准

函数如果有return则返回的是return后面的值。函数没有return,则返回undefined

12.2 arguments的使用

arguments是当前函数的一个内置对象。所有函数都内置了一个arguments对象，arguments对象中存储了传递的所有实参。只有函数才有arguments

arguments展示形式是一个伪数组，因此可以进行遍历，伪数组具有以下特点:

具有length属性
按索引方式存储数据
不具有数组的push,pop等方法

13. JavaScript作用域

一段程序代码中所用到的名字并不总是有效和可用的，而限定这个名字的可用性的代码范围就是这个名字的作用域.作用域的使用提高了程序逻辑的局部性，增强了程序的可靠性，较少了名字冲突.

全局作用域
局部作用域

全局变量：在全局作用域下声明的变量(在函数外部定义的变量)

全局变量在代码的任何位置都可以使用
在全局作用域下var声明的变量是全局变量

特殊情况下，在函数内不使用var声明的变量也是全局变量(不建议使用)

//案例4
f1();
console.log(a);
console.log(b);
console.log(c);
function f1(){
    var a = b = c =9;
    console.log(a);
    console.log(b);
    console.log(c);
}

//分析
//变量提升 函数提升 代码如下
function f1(){
    var a = b = c =9;
    //相当于 var a = 9;b = 9;c = 9; b和c 是直接赋值 没有var声明,当作全局变量
    //集体声明的写法 var a = 9,b = 9,c = 9;
    console.log(a);
    console.log(b);
    console.log(c);
}
f1();
console.log(c);
console.log(b);
console.log(a);

//输出结果
9
9
9
9
9
undefined

局部变量：在局部作用域下声明的变量，
- 局部变量只能在该函数内部使用
- 在函数内部var声明的变量是局部变量
- 函数的形参实际上就是局部变量

作用域链：内部函数访问外部函数的变量，采取的是链式查找的方式来决定取那个值，这种结构我们称为作用域链.

14. 预解析

JS解析器运行JS分为两步:(1)预解析(2)代码执行

预解析 JS引擎会把JS里面所有var还有function提升到当前作用域的最前面
代码执行按照代码书写的顺序从上往下执行

预解析分为变量预解析(变量提升)和函数预解析(函数提升)

变量提升就是把所有的变量声明提升到当前的作用域最前面,不提升赋值操作
函数提升就是把所有的函数声明提升到当前作用域的最前面不调用函数

15. 对象

在JavaScript中，对象是一组无序的相关属性和方法的集合，所有的事物都是对象。例如字符串，数值，数组，函数等.

属性:事物的特征，在对象中用属性来表示
方法:事物的行为，在对象中用方法来表示

15.1 创建对象

创建对象的三种方式:

利用字面量创建对象
利用new Object创建对象
利用构造函数创建对象

15.1.1 字面量创建对象

对象字面量:就是{}里面包含了表达这个具体事物(对象)的属性和方法

var obj = {};//创建了一个空对象

//
var obj = {
    uname:'William',
    age:18,
    sex:'Male',
    sayHi:function(){
        console.log('hi~');
}shux
//1.里面的属性或者方法采取键值对的形式.键(属性名):值(属性值)
//2.多个属性或者方法中间用逗号隔开的
//3.方法冒号后面跟的是一个匿名函数

15.1.2 利用new Object创建对象

var obj = new Object();//创建一个空的对象

obj.uname = 'William';
obj.age = 18
obj.sayHi = function(){
    console.log('hi~');
}
//1.利用等号 = 赋值的方法 添加对象的属性和方法
//2.每个属性和方法之间爱用分号结束

15.1.3 构造函数

构造函数:是一个特殊的函数，主要用来初始化对象，即为对象成员变量赋初始值，它总与new运算符一起使用。可以把对象中的一些公共的属性和方法抽取出来，然后封装到这个函数里面.

构造函数里面不是普通代码，而是对象

//构造函数的语法格式
function 构造函数名(){
    this.属性 = 值；
    this.方法 = function(){
        
    }
}
//例子
function Star(uname,age,sex){
    this.name =  uname;
    this.age = age;
    this.sex = sex;
    this.sing = function(sang){
        console.log(sang)
    }
}
var ldh = new Star('William',18,'Male');
//1.构造函数名字首字母要大写
//2.构造函数不需要return,就可以返回结果
//3.调用构造函数 必须使用new
//4.只要new Star()调用函数就创建一个对象ldh()
//5.属性和方法前面必须添加this

利用构造函数创建对象的过程称为对象的实例化.

15.1.4 new关键字执行过程

在内存中创建一个新的空对象
让this指向这个新的对象
执行构造函数里面的代码，给这个新对象添加属性和方法
返回这个新对象(所以构造函数里面不需要return)

15.2 对象的调用：

（1）.调用对象的属性，采取 对象名.属性名

（2）.调用对象的另一种方法，对象名['属性名']

（3）.调用对象的方法 对象名.方法名()

console.log(star.name)
console.log(star['name'])
star.sayHi();

变量、属性、函数、方法总结

变量：单独声明赋值，单独存在
属性：对象里面的变量称为属性，不需要声明，用来描述该对象的特征
函数：单独存在的，通过函数名()的方式就可以调用
方法：对象里面的函数称为方法，方法不需要声明，使用对象.方法名()的方式就可以调用，方法用来描述该对象的行为和功能

15.3 遍历对象属性

for....in...语句对于数组或者对象的属性进行循环操作

var obj = {
    name:'William',
    age:18,
    sex:'Male'
    fn:function(){}
}

for (var k in obj){
    console.log(k);       // k 变量 输出 得到的是 属性名
    console.log(obj[k]); //  obj[k] 得到是 属性值
}

15.4 内置对象

JavaScript中的对象分为3种：自定义对象，内置对象，浏览器对象

内置对象就是指JS语言自带的一些对象，这些对象供开发者使用，并提供了一些常用的或是最基本而必要的功能(属性和方法)

MDN文档：https://developer.mozilla.org/zh-CN/