Javascript笔记（持续更新中）

前端学习路线图

先附上一张前端学习路线图：

（一） Javascript的定义

Javascript是一门跨平台、面向对象的脚本语言，来控制网页的行为，它可以实现网页的交互

网页由三部分构成：

• 结构：Html
• 表现：Css
• 行为：Javascript

（二）Javascript的作用

• 网页特效（监听用户的一些行为让网页作出对应反馈）
• 表单验证（针对表单数据的合法性进行判断）
• 数据交互（获取后台的数据，渲染到前端）
• 服务端编程（node.js）类似一个可以做后端编程的样子

 （三）Javascript的组成

ECMAScript

规定了js基础语法核心知识

例如：变量，分支语句，循环语气，对象等等。

Web APIs

• DOM:操作文档   例如：对页面元素进行移动，调整大小，添加删除等操作
• BOM：操作浏览器  例如：页面弹窗，检测窗口宽度，存储数据到浏览器等等

 （四）Javascript的书写位置

javascript包括行内javascript，内部javascript，外部javascript

1.内部javascript (平时用得多)

直接写在html文件里，用script标签包着

规范：script标签写在上面

示例：

效果图：

注意：

我们将

如果内容里加标签

语法2：

alert('要输出的内容')

作用：页面弹出警示框

语法3：

console.log('控制台打印')

作用：控制台输出语法，程序员调试使用

console 控制台 log 日志

示例：

效果

页面上啥也没有。。。。

控制台上出现我们写的内容，所以这个是给程序员用来调试的东西

2.输入语法

prompt('要输入的内容')

示例：

效果：

用于用户输入信息，之后我们后台可以拿到数据，虽然但是现在还没学到如何拿到数据。

3.代码执行顺序

• 按照HTML文档流顺序执行javascript代码
• alert(）和prompt()它们会跳过页面渲染先被执行

4.字面量

在计算机中，字面量是在计算机中描述的事/物

例如：

1000 是 数字字面量

‘我在学JS’ 是 字符串字面量

{} 是 对象字面量

[] 是 数组字面量

（七）变量

1.变量的定义

变量是计算机存储数据的容器

注意：变量不是数据本身，它只是一个容器

2.变量的基本使用

（1）变量的声明

要想使用变量，首先要创建变量

语法：let 变量名

• 变量名分为两部分：声明关键字，变量名
• let是声明关键字

 例如：

let age

声明了一个age变量，age即变量的名称也称标识符

（2）变量的赋值

定义一个变量，然后初始化它，在变量名后面加上一个“=”，然后就是数值

“=”称为赋值符号

示例：如下就可以实现创建变量，变量赋值，输出

let age
age = 18
document.write(age)

赋值符号的两侧有空格写的专业！变量名 = 赋值

let age = 18
let name = '张真源'

（3）更新变量 

 变量赋值后，还可以通过简单的给它一个不同的值来更新它

示例：

let age = 18
age = 20
document.write(age)

但是，注意：let不允许多次声明一个变量

如下，错误示范错错错错错错

let age = 18
let age = 20
document.write(age)

（4）声明多个变量

多个变量之间用逗号隔开

let name = '张真源'，age = 18

不提倡这么写！为了更好的可读性，请一行只声明一个变量

3.交互两个变量

案例：

现在有两个变量，num1里面放的是10，num2里面放的是20

最后变成num1里面存的是20，num2里面存的是10

分析：

使用一个临时变量来做中间存储

步骤：

1. 声明一个临时变量temp
2. 把num1的值赋值给temp
3. 把num2的值赋值给num1
4. 再把temp的值赋值给num2

临时变量不用自动销毁 

代码如下：达到结果

4.变量的本质

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

5.变量的命名规范和规则

（1）规则：

• 不能用关键字
• 只能有下划线，字母，数字，特殊符号$,且数字不能开头
• 字母严格区分大小写

（2）规范：

• 起名要有意义（尽量用name,age,score等,不要用a1,a2这些）
• 遵守小驼峰命名法--第一个单词字母小写，后面每个单词首字母大写，例如userName

6.小案例

案例题目：

1. 弹出输入框：请输入你的姓名： 用变量保存起来
2. 弹出输入框：请输入你的年龄： 用变量保存起来
3. 弹出输入框：请输入你的性别： 用变量保存起来
4. 页面分别输出刚才的三个步骤

代码如下： 

（八）数组

数组（Array）：一种将一组数据存储在单个变量名下的方式

1.数组的基本使用

（1）声明语法

let 数组名 = [数据1，数据2，数据3...]

示例：

let arr = [‘马嘉祺’，‘丁程鑫’，‘宋亚轩’]

数组是顺序排列的，编号从0开始

在数组中，数据的编号叫做索引或者下标

数组可以存储任意类型的数据

例如我要打印出“丁程鑫”

示例：

let arr = [‘马嘉祺’，‘丁程鑫’，‘宋亚轩’]
document.write(arr[1])

（2）小案例

定义一个数组，里面存放星期一，星期二....星期日共七天，在页面上输出：星期日

代码如下：

注意，数据与数据之间，每个逗号后面有一个空格，显得专业

（3）一些术语

• 元素：数组中保存的每个数据叫做元素
• 下标：数组中数据的编号
• 长度：数组中数据的个数，通过数组的length属性获得

 示例：打印数组的长度

let arr = [‘马嘉祺’，‘丁程鑫’，‘宋亚轩’]
document.write(arr.length)

（九）常量

• 概念：使用 const 声明的变量称为常量
• 使用场景：当某个变量永远不会改变的时候，可以使用const来声明，而不是let
• 命名规范：和变量保持一致
• 常量使用：

const g = 9.8
document.write(g)

 注意：常量不允许重新赋值，声明的时候必须赋值（初始化）

（十）数据类型

1.数据类型

JS数据类型整体分为两大类：基本数据类型和引用数据类型

（1）数字型num

即我们数学中的数字，整数，小数，正数，负数。

JS是一门弱数据类型的语言，变量到底属于哪一种类型，只有赋值了之后，才能够确认

let num = -1.24

数字数据类型经常和算数运算符一起使用

算术运算符主要包括：加（+），减（—），乘（*），除（/），取余（%） 

（2)  字符串型string

只要使用单引号，双引号或者反引号包裹的数据都叫字符串，单引号双引号没有本质的区别

推荐使用单引号 ('a')

let str = '张真源'

注意事项：

•  无论单引号或是双引号必须成对使用
• 单引号或双引号可以互相嵌套，但是不宜自己嵌套自己（建议：外双内单，外单内双）
• 必要时可以使用转义字符 \ ，输出单引号或者双引号

(i)字符串的拼接  

+运算符 可以实现字符串的拼接

可以实现数字相加，代码示例如下：

let num1 = 10
let num2 = 20
document.write(num1 + num2)
// 输出结果为 3

可以实现字符相连，代码示例如下：

    let str1 = 'hello大家好'
    let str2 = '我是TNT时代少年团张真源'
    document.write(str1 + str2) 
// 输出结果是  hello大家好我是TNT时代少年团张真源

(ii)模板字符串

语法：

• 必须用  ``（反引号）
• 内容拼接变量时，用 ${} 来包住变量

如下是字符串拼接法与模板字符串法的代码比较：

// 输出“我叫张真源我今年20岁了”

字符串拼接法如下：

    let name = '张真源'
    let age = 20
    document.write('我叫' + name + '我今年' + age + '岁了')

模板字符串法如下：

    let name = '张真源'
    let age = 20
    document.write(`我叫${name}我今年${age}岁了`)

 相对于字符串的拼接，模板字符串更简单

（3）布尔型boolean

表示肯定或者否定时在计算机中对应的是布尔类型数据，它有两个固定的值 true 和 false

true和false也是字面量

代码示例如下：

    let num1 = 1
    let num2 = 2
    document.write(num12)
    // 输出结果为 false

（4）未定义型undefined

未定义是比较特殊的类型，只有一个值undefined

(i)什么情况出现未定义类型

只声明变量，不赋值的情况下，变量的默认值为undefined，一般很少直接为某个变量赋值为undefined

代码示例如下：

    let age // 声明但未赋值
    document.write(age)
    // 输出为 undefined

 (ii)工作中使用的场景

我们开发中经常使用一个变量，等待传递过来的数据

如果我们不知道这个数据是否传递过来，此时我们可以通过检测这个变量是不是undefined，就判断用户是否有数据传递过来

（5）空类型null

js中的null仅仅是代表“无”“空”“值未知”

代码示例如下：

    let age = null
    document.write(age)
    // 输出为 null

（i）null和undefined的区别

• undefined表示声明变量但未赋值
• null表示赋值了，只是内容为空

（ii）null 开发中的使用场景

把null作为尚未创建的对象

意思就是：将来会有个变量里面存放的是一个对象，但是对象还没创建好，可以先给个null

2.检测数据类型

通过 typeof 关键字检测数据类型

语法：

• 作为运算符：typeof x（常用的写法）
• 函数形式： typeof(x)

有括号没括号得到的结果都一样，所以我们直接使用运算符语法

代码示例如下：

    let age = 3
    document.write(typeof age)
    // 输出为 number
    let name = '张真源'
    document.write(typeof name)
    // 输出为 string

 3.数据类型转换

（1）定义

把一种数据类型的变量转换为我们需要的数据类型的变量

（2）为什么需要类型转换

js是弱数据类型：js也不知道变量到底数据哪种数据类型，只有赋值了才清楚

坑：使用表单，prompt获取过来的数据默认是字符串类型的，此时就不能直接简单的进行加法计算

（3）分类

分为显式转换和隐式转换

（i）隐式转换

某些运算符被执行时，系统内部自动将数据类型进行转换，这种转换被称为隐式转换

规则：

• + 两边只要有一个是字符串，都会把另外一个转成字符串
• 除了 + 以外的算术运算符，比如*，/等都会把数据转成数字类型

 代码示例如下 ：

    let num = +'123'
    console.log(num)
    // 输出结果： 123 数字类型
    let name = '张真源'
    console.log(name)
    // 输出结果： 张真源 字符串类型
    let name2 = +'张真源'
    console.log(name2)
    // 输出结果：NaN 意思是 not a number
    let score = 98
    console.log('张真源' + score) 
    // 输出结果： 张真源98 字符串类型 

缺点：

转换类型不明确，靠经验才能总结

小技巧：

• + 号作为正号解析可以转换成数字型
• 任何数据和字符串相加结果都是字符串

 （ii）显式转换

编写程序时过度依靠系统内部的隐式转换是不严谨的，因为隐式转换规律并不清晰，大多是靠经验总结的规律。为了避免因隐式转换带来的问题，通常需要对数据进行显式转换

自己写代码告诉系统该转成什么类型

转换成数字型

• Number（数据）

转成数字类型

如果字符串内容里有非文字，转换失败时结果为NaN即不是一个数字

NaN也是number类型的数据，代表非数字

• parseInt（数据）  只保留整数
• parseFloat（数据）可以保留小数

4.小案例 

输入两个数，计算两者之和，打印到页面中

    let num1 = prompt('请输入你的第一个数：')
    let num2 = prompt('请输入你的第二个数：')
    num3 = Number(num1) + Number(num2)
    alert(`您的计算结果是${num3}`)

（十一）运算符

运算符包括赋值运算符，一元运算符，比较运算符，逻辑运算符

1.赋值运算符

定义：对变量进行赋值的运算符

已经学过的赋值运算符：将等号右边的值赋予给左边，要求左边必须是一个容器

其他赋值运算符：+= ，-= ,  *= , /= ,%=

以+=为例，示例代码如下：上下两者等效

    let num = 1
    num  += 1
    console.log(num)
    // 输出结果： 2
    
    let num1 = 1
    num1 = num1 + 1
    console.log(num1)
    // 输出结果： 2

2.一元运算符

js的运算符可以根据所需的表达式的个数

一元运算符：正负号

自增一元运算符

• 符号：++
• 作用：让变量的值加上自身

自减一元运算符

• 符号：--
• 作用：让变量的值减上自身

（1）自增的分类

自增分为前置自增和后置自增

自增运算符的使用场景 ：经常用于计数来使用，用来计算多少次

（i）前置自增

    let num = 1
    ++num
    console.log(num)
    // 输出结果： 2

（ii）后置自增

    let num = 1
    num++
    console.log(num)
    // 输出结果： 2

 （2）前置自增和后置自增的区别

单独来看并没有区别，但是还是有区别的，区别如下

前置自增代码如下：

    let num = 1
    console.log(++num + 1)
    // 输出结果： 3

后置自增代码如下：

    let num = 1
    console.log(num++ + 1)
    // 输出结果： 2

++在前是先加，++在后是后加

注意：

•  前置自增和后置自增独立使用时，二者并没有差别
• 一般开发中我们都是独立使用的
• 后面 i++后置自增会使用的相对较多，并且都是单独使用

3.比较运算符

使用场景：比较两个数据的大小，判断是否相等

比较运算符：

• > : 左边是否大于右边
• < ：左边是否小于右边
• >= ： 左边是否大于等于右边
• <= ： 左边是否大于等于右边
• == ：左右两边值是否相等
• === ： 左右两边是否类型和值都相等
• !== ： 左右两边是否不全等

注意：

• = 是赋值
• == 是判断
• === 是全等
• 开发中判断是否相等，强烈推荐使用 ===

代码示例如下：

    console.log(2 == 2)
    // 结果为；true 
    console.log(2 == '2')
    // 结果为；true
    console.log(2 === '2')
    // 结果为；false
    console.log(2 === 2)
    // 结果为；true
    console.log(undefined === null)
    // 结果为；false
    console.log(null === null)
    // 结果为；true
    console.log(NaN === NaN)  
    // 结果为； false    NaN不等于任何人，也不等于它自己

4.逻辑运算符

5.运算符优先级

运算符优先级判断运算符执行的顺序

• 一元运算符里面的逻辑非优先级很高
• 逻辑与比逻辑或优先级高

（十二）语句

1.表达式和语句

表达式定义：表达式是可以被求值的代码，js引擎会将其计算出一个结果

语句定义：语句是一段可以执行的代码

（1）表达式和语句的区别

表达式：因为表达式可以被求值，所以它可以写在赋值语句的右侧

例如： num = 3 +4

语句：而语句不一定有值，所以比如alert() for 和 break 等语句就不能被用于赋值

例如 ：alert() console.log()

某些情况下，也可以把表达式理解为表达式语句，因为它是在计算结果，但不是必须的成分（例如continue语句）

2.分支语句

分支语句可以让我们有选择性的执行我们的代码

分支语句包含：

• if分支语句
• 三元运算符
• switch语句

（1） if 语句

if 语句有三种使用：单分支，双分支，多分支

（i）单分支

语法：

if (条件) {
    满足条件要执行的代码
}

• 括号内的条件为true时，进入大括号里执行代码
• 小括号内的结果若不是布尔类型时，会发生隐式转换转成布尔类型
• 如果大括号只有一个语句，大括号可以省略，但不提倡！

代码示例如下：

    if (2) {
      console.log('执行语句')
    }
    // 结果为 ：执行语句
    if (0) {
      console.log('执行语句')
    }
    //没结果
    if ('张真源很帅') {
      console.log('执行语句')
    }
    // 结果为 ：执行语句
    if ('') {
      console.log('执行语句')
    }
    //没结果
    if (2 == 2) {
      console.log('执行语句')
    }
    // 结果为 ：执行语句    
    if (2 == '2') {
      console.log('执行语句')
    }
    // 结果为 ：执行语句 
    if (2 === '2') {
      console.log('执行语句')
    }
    // 无结果

结论：

•  除了 0 以外所有数字都为真
• 除了' '(空字符串)以外，所有字符串都为真

（ii）双分支

语法：

if （条件） {
    满足条件要执行的代码1
} else {
    不满足条件要执行的代码2
}

案例：判断闰年

闰年：能被4整除但不能被100整除，或者被400整除的年份是闰年，否则都是平年

代码如下：

    let year = +prompt('请输入')
    if (year % 4 === 0 && year % 100 !== 0 || year % 400 === 0) {
      alert(`${year}是闰年`)
    }
    else {
      alert(`${year}不是闰年`)
    }

（iii）多分支

语法：

if （条件1） {
    代码1
} else if （条件2）{
     代码2
} else if （条件3）{
    代码3 
} else {
     代码n
}

（2）三元运算符

• 使用场景：   其实是比if双分支更简单的写法，可以使用三元运算符
• 符号 ：   ？和 ：搭配使用
• 语法：

条件 ？ 满足条件执行的代码 ： 不满足条件执行的代码

代码示例如下：

    console.log(3 < 5 ? 3 :5)   //结果： 3
    // 3<5吗 如果true 输出3，如果false ,输出5

 适用于条件比较简单的分支

（3）switch语句

 语法：

switch （数据） {
    case 值1：
        代码1
        break
     case 值2：
        代码2
        break
     case 值3：
        代码3
        break
      default:
        代码n
        break

}

3.循环语句

(1)while 循环

循环：重复执行一些操作

whille循环就是在满足条件期间，重复执行某些代码

语法：

while （循环条件） {
        循环体
}

循环三要素：变量起始值，终止条件，变量变化量

代码示例如下：

    let i = 1
    while (i <= 3) {
      document.write(`执行第${i}次`)
      i++
    }

(2)循环退出

break:退出循环

continue: 结束本次循环