JavaScript

JavaScript

一、JavaScript介绍

1.js是什么？

答：javaScript是一种运行在客户端（浏览器）的编程语言

JavaScript组成是什么？

答：ECMAscript(基础语法)、web APl （DOM、BOM）

2.js书写位置

2.1 内部 JavaScript

直接写在html文件里,用script标签包住

规范：scirpt标签写在上面

扩展：alert(“HelloWord”)页面弹出警告对话框

2.2 外部js

代码写在以.js结尾的文件里

语法：通过script标签，引入到html网页中

注意事项：

3.js注释

3.1单行注释

符号：//

作用：//右边这一行的代码会被忽略

快捷键：ctrl+/

3.2 块注释

符号：/ /

作用：在/ 和 * / 之间的所用内容会被忽略*

快捷键：shift + alt + A

3.3 结束符

代表语句结束

英文分号；

可写可不写(现在不写结束符的程序员越来越多)

换行符(回车) 会被识别成结束符，所以一个完整的语句，不要手动换行

因此在实际开发中有许多人主张写JavaScript代码时省略结束符

但为了风格统一，要写结束符就每句都写，要么每句都不写(按照团队要求)

4.输入和输出的语法

4.1 输出语法

document.write('要输出的内容')

向body内输出内容

如果哦输出的内容要写的是标签，也会被解析成网页元素

alert('要输出的内容') 

页面弹出警告对话框

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

控制台输出语法，程序员调式使用

4.2 输入语句

prpmpt()

二、变量

1.什么是变量？

答：变量是计算机中用来存储数据的 ’容器‘ ，他可以让计算机变得有记忆

注意： 变量不是数据本身，他们仅仅是一个用于存储数值的容器。可以理解为是一个个用来装东西的盒子

2. 变量的基本使用

2.1 语法：

let 变量名

声明变量有两个部分构成：声明关键字、变量名（标识）

let 即关键字（let：允许、许可、让、要）,所谓关键字是系统提供的专门用来声明（定义）变量的语句

let name = prompt('请你输入姓名：')
document.write(name)

// 变量交换
let num1 = prompt('请输入第一个数字：')
let num2 = prompt('请输入第二个数字：')
// 声明一个变量临时存储
let temp = num1;
num1 = num2;
num2 = temp;

2.2 变量的本质

（1）内存：计算机中存储数据的地方，相当于一个空间

（2）变量：是程序在内存中申请的一块用来存储数据的小空间

2.3 变量的命名规范

规则：必须遵守，不遵守报错

规范：建议，不遵守不会报错，但不符合行业内通识

（1）规则：

不能使用关键字

关键字：有特殊含义的字符，JavaScript内置的一些英文词汇。例如let、var、if、for

只能用下划线、字母、数字、$组成,且数字不能开头

字母严格区分大小写,如Age和age是不同的变量

（2）规范：

起名要有意义

遵守小驼峰命名法

第一个单词首字母小写，后面每个单词首字母大写。例如(userName)

2.4 let与var区别（重点）

let为了解决var的一些问题

var声明：

可以先使用在声明（不合理）

var声明过的变量可以重复声明

比如变量提升、全局变量、没有块级作用域

在以后声明变量统一使用let

三、数据类型使用

1.数组的基本使用

1.1 声明语法：

let 数组名 = [数据1，数据2，…，数据n]

let arr = ['马超','黄忠','关羽','张飞','赵云']
// 数组名[下标]
console.log(arr[0])

// 控制台输出星期日
 let arr = ['星期一','星期二','星期三','星期四','星期五','星期六','星期日']
console.log(arr[6])

2. 数字类型

2.1 数据类型：

（1）基本数据类型

number数字类型

string 字符串型

boolean 布尔型

undefined 未定义型

null 空类型

（2）引用数据类型：

object 对象

function 函数

Array 数组

2.3 数字类型

JavaScript中的正数，负数，小数等统一称为数字类型

注意事项：

JS是弱数据类型，变量到底属于那种类型，只有赋值后，我们才能确认

java是强数据类型，例如int num = 3必须是整数

3.字符串类型（string）

通过单引号（’ '）、双引号（" "）或反引号( ` )包裹的数据都叫字符串，单引号和双引号没有本质上的区别,推荐使用单引号

注意事项：

(1)无论单引号或是双引号必须成对使用

(2)单引号/双引号可以互相嵌套，但是不可以嵌套自己(口诀：外双内单，或者外单内双)

(3) 必要时可以使用转义字符 \，输出单引号或双引号

4.字符串拼接

// 字符串拼接
// 1. 用户输入年龄
// 2. 页面输出我今年 xx 岁了
let age = prompt('请输入你的年龄：')
document.write('我今年' + age + '岁了')

5.模板字符串

1. 作用：

拼接字符串和变量

**在没有他之前，要拼接变量比较麻烦 **

2. 符号

``

在英文输入模式下按键盘的tab键上方那个键(1左边那个键)

内容拼接变量时，用${}包住变量

// 模板字符串
 let name = prompt('请输入你的姓名：')
 let age = prompt('请输入你的年龄：')
 document.write(`我叫${name},今年${age}岁了`)

6.boolean和undefined和null

6.1 boolean

表示肯定或否定在计算机中对应的布尔类型数据

他有两个固定的值true和false，表示肯定的数据用true（真）,表示否定的数据用false（假）

6.2 undefined

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

什么情况出现未定义类型？

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

工作中的使用场景：

我们开发中经常声明一个变量，等待传送过来的数据。

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

6.3 null

null表示值为空

null和undefined区别：

(1)undefined 表示没有赋值

(2) null 表示赋值了，但是内容为空

**null开发中的使用场景： **

官方解释：把null作为尚未创建的对象

大白话：将来有个变量里面存放的是一个对象，但是对象还没创建好，可以先给了null

7.声明变量的注意点

8. 检测数据类型

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

let age = 18
let name = '刘德华'
let flag = ture
let buy
console.log(typeof age) // number
console.log(typeof name) // string
console.log(typeof flag) // boolean
console.log(typeof buy) // undefind

9.数据类型转换

JavaScript是弱数类型：JavaScript也不知道变量到底属于按中数据类型，值有赋值了清楚

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

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

9.1 隐式转化

（1）规则：

+号两边只要有一个是字符串，都会把另外一个转成字符串

除了+以外的算术运算符比如- * / 都会把数据转成数据类型

（2）缺点：

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

小技巧：

+号作为正号解析可以转换成Number

let num = '10'
console.log(num + '10')  // 1010
console.log(num +  +'10') // 20

10. 显示转换

转换为数字型

Number（数据）

转成数字类型

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

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

parseint（数据）

只保留整数

parseFloat（数据）

可以保留小数

let num = '10'
console.log(Number(num)) // 10
console.log(parseint(num)) // 10
console.log(parseint(10.23)) // 10
// 转换为数字型，会保留小数
console.log(parseFloat(19.23)) // 19.23
console.log(Number(18ab)) // NaN
console.log(parseint(18ab)) // 18

转换为字符串

let num = 10
console.log(String(10)) // '10'
console.log(num.toString()) // '10'

四、常见错误

1.提示age变量没有定义过

2.很可能age变量没有声明和赋值

3.或者我们输出变量名和声明变量不一致引起的

1. 提示 “age” 已经声明

2. 很大概率是因为使用let重复声明了一个变量

3.注意let变量不允许多次声明同一个变量

1. 提示 参数少了 ）

2.很大概率是小括号不匹配，掉了一半

1.出现字符相加的问题

2.prompt如果出现相加 记得要转为数字型

五、JavaScript操作符

1. 算术运算符

%：取模（取余数）

开发中经常作为摸个数字是否被整除

JavaScript中优先级越高越先被执行，优先级相同时以书从左向右执行

乘、除、取余优先级相同

加、减优先级相同

乘、除、取余优先级大于加、减

使用（）可以提升优先级

总结：先乘除后加减，有括号先算括号里面的

2. 赋值运算符

let  num = 18
num +=  1
console.log(num)   // 19

3. 一元运算符

（1）自增

符号： ++

作用：让变量的值+1

（2）自减

符号：–

作用：让变量的值-1

使用场景：

经常用于计数来使用。比如进行10次操作，用它来计算进行了多少次

// 前置自增：先自加再使用（记忆口诀：++在前先加）
let  i = 1
console.log(++i  + 2) // 结果为4

// 后置自增：先使用后加（记忆口诀：++在后先使用）
let i = 1
console.log(i++ + 2) // 结果为3
console.log(i) // 结果为2

4. 比较运算符

特殊情况：

字符串比较，是比较的字符对应的ASCll

1.从左往右依次比较

2.如果第一位用于在比较第二位，依次类推

3.比较的少，了解即可

5. 逻辑运算符

符号	名称	日常读法	特点	口诀
&&	逻辑与	并且	符号两边都为true结果才为true	一假则假
||	逻辑或	或者	符号两边有一个为true就为true	一真则真
!	逻辑非	取反	true变false false变true	真变假，假变真

5.1 逻辑运算符里的短路

短路：只存在&& 和 || 中，当满足一定条件会让右边代码不执行

符号	短路条件
&&	左边为false就短路
||	左边为true就短路

六、流程控制

1. 表达式：

表达式是一组代码的集合，JavaScript解释器会将其计算出一个结果

2. 语句：

JS整句或命令，js语句是以分号结束（可以省略）

比如：if语句 for 循环语句

区别：

表达式计算出一个值，但语句用来自行以是某件事发生（做什么事）

表达式 3 + 4

语句 alert() 弹出对话框

3. 分支语句

3.1 if语句

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

// 单分支使用语法：
if (条件) {
    满足条件要执行的代码
}

括号内的条件为true时，进入大括号李执行代码

小括号内的结果若不是布尔类型时，会发生隐式转换为布尔类型

// 双分支语法：
if (条件) {
    满足条件要执行的代码
} else {
    不满足条件执行的代码
}

4. 三元运算符

符号： ? 与 : 配合使用

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

5. switch语句

找到跟小括号里数据全等的case值，并执行里面读音的代码

若蚂蚁全等===的则执行default里面的代码

let num_1 = +prompt('请输入第一个数：')
   let num_2 = +prompt('请输入第二个数：')
   let operator = prompt('请输入操作符:')
   switch (operator) {
    case '+' :
        alert(`计算结果为：${num_1 + num_2}`)
        break;
    case '-' :
        alert(`计算结果为：${num_1 - num_2}`)
        break;
     case '*' :
        alert(`计算结果为：${num_1 * num_2}`)
        break;
    case '/' :
        alert(`计算结果为：${num_1 / num_2}`)
        break;
    default :
    alert('请输入正确的操作符')
    break;

switch case 语句一般用于等值判断，不适合于区间判断

switch case一般需要配合break关键字使用 没有break会造成case穿透

6. while循环

while (循环条件) {
	要重复执行的代码(循环体)
}
 let i = 1
        while (i <= 10) {
            document.write(`HeloWorld <br>`)
            i++
        }

跟if语句很像，都要满足小括号里面的条件为true才会进入执行代码

while大括号里代码执行完毕后不会跳出，而是进行回到小括号理论判断条件是否满足，若满足又执行大括号里的代码，然后再回到小括号判断条件，直到括号内条件不满足，即跳出

while 循环注意事项：

循环的本质就是以某个变量为起始值，然后不断产生变化值，慢慢靠近终止条件的过程。

循环需要三要素：

1. 变量起始值
2. 终止条件（没有终止条件，循环会一直执行，造成死循环）
3. 变量变化量（用自增或者自减）

   // 初始值
        let money = 0
     while (true) {
        let str = prompt(`请你输入选择操作：
        1. 存钱
        2. 取钱
        3. 查看余额
        4. 退出
        `)
        if (str === '4') {
            break
        }
        switch (str) {
            case '1':
                let cun = +prompt('请输入存钱的数额：')
                money += cun
                alert('存款成功！')
                break
            case '2':
                let qu = +prompt('请输入取款金额：')
                money -= qu
                alert('取款成功')
                break
            case '3':
                alert(`当前余额为：${money}`)
                break
        }
     }

七、循环

1. for循环语法

也是重复执行代码

好处：把声明起始值、循环条件、变化值写到一起，让人一目了然

for (声明记录循环次数的变量；循环条件；变化值) {
循环体
}

 <style>
        div {
            display: inline-block;
            height: 25px;
            line-height: 25px;
            margin: 5px;
            background-color: pink;
            padding: 0 10px;
            border: 1px solid hotpink;
            color: deeppink;
        }
    </style>
</head>
<body>
    <script>
        for (let i = 1; i <= 9; i++){           
            for (let j = 1; j <= i; j++) {
                document.write(`
                <div>${j} × ${i} ＝ ${i * j}</div>
                `)
            }
            document.write(`<br>`)
        }
    </script>
</body>

八、数组

1. 数组增加新的数据

数组.push() 方法将一个或多个元素添加到数组的末尾，并返回该数组的新长度（重点）

语法：

arr.push(元素1，元素2，…，元素n)

let arr = ['red','pink']
        arr.push('blue')
        console.log(arr);

2. 从前面添加

arr.unshift(新增内容) 方法将一个或多个元素添加到数组的开头，并返回数组的新长度

语法：

arr.unshift(元素1，元素2，…，元素n)

let arr = ['red','pink']
        arr.unshift('blue')
        console.log(arr);

let arr = [2,4,26,1,,43,23]
       let newArr = []
       for (let i = 0; i < arr.length; i++) {
            if (arr[i] > 10) {
                newArr.push(arr[i])
            }
       }
       for (let i = 0; i < newArr.length; i++) {
            document.write(`${newArr[i]} <br>`)
       }

3. 数组删除元素

（1）数组.pop（）方法从数组中删除最后一个元素，并返回该元素的值

语法：

arr.pop()

（2）数组. shift() 方法从数组中删除第一个元素，并返回该元素的值

语法：

arr.shift()

（3）数组.splice（）方法删除指定元素 （重点）

语法：

arr.splice(start,deleteCount)

arr.splice(起始位置，删除几个元素)

let arr = ['red','green','blue']
arr.splice(1,2)

九、函数及应用

什么是函数？

function,是被设计为执行特定任务的代码块

1. 函数的使用

/// 函数的声明语法：
function 函数名 () {
    函数体
}

function getSum() {
            let sum = 0
            for (let i = 1; i <= 100; i++) {
                sum += i
            }
            console.log(sum);
        }
        getSum()

2. 函数传参

形参：声明函数时写在函数名右边小括号里的叫形参（形式上的参数）

实参：调用函数时写在函数名右边小括号里的叫实参（实际上的参数）

形参可以理解为是在这个函数内声明的变量（比如 num = 10）实参可以理解为是给这个变量赋值

开发中尽量保持形参和实参个数一致

3. 逻辑中断

// 形参如果不被赋值，就是undefined
function getSum(x,y) {
    x = x || 0
    y = y || 0
    console.log(1,2)
}
getSum(1,2)

// 数组求和
function getScore(arr) {
            let sum = 0
            for (let i = 0; i < arr.length; i++){
                sum += arr[i]
            }
            console.log(sum);
        }
        let arr = [1,2,3,4,5]
        getScore(arr)

4. 返回值

语法：return 数据

// 求和
function getSum(num1,num2) {
        return num1 + num2
       }
       let sum = getSum(1,2)
       document.write(sum)

细节：

在函数体中使用return关键字能将内部的执行结果交给函数外部使用

函数内部只能出现1次return，并且return后面代码不会在被执行，所以return 后面的数据不要换行写

return会立即结束当前函数

函数可以没有return，这种情况函数默认返回值为undefined

5. return返回多个值

// return 返回多个值
function fn(x,y) {
        let jia = x + y
        let jian = x - y
        return [jia,jian]
    }
        let re = fn(2,3)
        document.write(`相加的结果为：${re[0]},相减的结果为：${re[1]}`)
// 求最大最小值
    function getArrMaxMin(arr) {
        // 1. 声明一个最大值和最小值变量
        let max = min = arr[0]
        // 2. 遍历数据得到最小最大
        for (let i = 1; i < arr.length; i++) {
            if(max < arr[i]) {
                max = arr[i]
            }
            if(min > arr[i]) {
                min = arr[i]
            }
        }
        return [max,min]
    }
    let ArrMaxMin = getArrMaxMin([5,2,43,13,53])
        console.log(`数组中的最大值为${ArrMaxMin[0]},最下值为${ArrMaxMin[1]}`);

6.作用域

1. 作用域概述

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

1.1 全局作用域：全局有效

作用域所有代码执行的环境（整个script标签内部）或者一个独立js文件

1.2 局部作用域：局部有效

作用域函数内的代码环境，就是局部作用域。因为跟函数有关系，所以称为函数作用域

1.3 块级作用域：{ }内有效

块作用域由{ }包括，if语句和for语句里面的{}等

2. 作用域链

只要是代码，就至少有一个作用域

写在函数内部的局部作用域

如果函数中还有函数，那么在这个作用域中就又可以诞生一个作用域

根据在内部函数可以访问外部函数变量的这种机制，用链式查找决定那些数据能被内部函数访问，就称作作用域链

作用域链：采取就近原则的方式来查找变量最终的值

7. 函数表达式

7.1 匿名函数

将匿名函数赋值给一个变量，并且通过变量名称进行调用我们将这个 称为函数表达式

语法：

let fn = function () {

函数体

}

// 参数赋值小技巧
// 调用的时候会有个内部判断是否有参数传递过来
function fn (x = 0,y = 0) {
    console.log(x + y)
}
fn() // 0
fn (3,5) // 8

十、对象

1. 对象 （object）: JavaScript里的一种数据类型

一种无序的数据集合

可以详细描述某个事物

// 1. 对象声明语法：
let  对象名 = { }
// 声明了一个person的对象
let person = { }

对象由属性和方法组成

属性： 信息或叫特征 (名词) 。比如 手机的尺寸、颜色、重量等…

方法：功能或叫行为（动词）。比如手机打电话、发短信、玩游戏等…

2. 属性

数据描述信息称为属性，如人的姓名，身高，年龄，性别等

属性都是成对出现的，包括属性名和值，他们之间使用英文：分隔

多个属性之间使用英文，分隔

属性就是依附在对象上的变量（外面是变量，对象内是属性）

属性名可以是用" "或 ’ '，一般情况下省略，除非名称遇到特殊符号如空格、中横线

3. 对象访问方式

 let goods = {
          name : '小米',
          num : '100012816024',
          weight: '0.55kg',
          address: '中国大陆'
        }
        // 1.访问属性 得到值  对象.属性名
        console.log(goods.name);
        console.log(goods.num);
        console.log(goods.weight);
        // 2.访问属性 得到值  对象['属性名']
        console.log(goods['num']);
        console.log(goods['name']);

4. 对象中的方法

数据行为性的信息称为方法，如跑步]、唱歌等，一般是动词性的，其本质是函数

方法是由方法名和函数两部分构成，他们之间使用 ： 分隔

多个属性之间使用英文 ，分隔

方法是依附在对象中的函数

方法名可以使用" " 或 ’ '，一般情况下省略，除非名称遇到特殊符号如空格、中横线等

5. 对象操作

 let obj = {
            name: '小明',
            age : 18
        }
        // 修改  对象.属性 = 新值
        obj.name = '小红'
        console.log(obj.name);
        // 新增
	// 在添加的过程中，会去对象理解找是否有sex这个属性，如果有则更新修改，如果没有则新增
        obj.sex = '男'
        obj.sing = function (s) {
            console.log(s);
        }
        obj.sing('起风了')
        // 删除
        delete obj.name

6. 遍历对象

let obj = {
            name: '小米',
            age : 18,
            sex: '男'
        }
        for(let k in obj) {
            // 属性名
            console.log(k);
            // 属性值
            console.log(obj[k]);
        }

 //  学生列表
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        table {
            width: 600px;
            text-align: center;
            margin: 0 auto;
        }

        table,
        th,
        td {
            border: 1px solid #ccc;
            border-collapse: collapse;
        }

        caption {
            font-size: 18px;
            margin-bottom: 10px;
            font-weight: 700;
        }

        tr {
            height: 40px;
            cursor: pointer;
        }

        table tr:nth-child(1) {
            background-color: #ddd;
        }

        table tr:not(:first-child):hover {
            background-color: #eee;
        }
        </style>
</head>
<body>
    <script>
        let student = [
            {name:'小明',age: 18, gender: '男', address: '湖南'},
            {name:'小红',age: 19, gender: '女', address: '河南'},
            {name:'小刚',age: 29, gender: '男', address: '广东'},
            {name:'小亮',age: 17, gender: '女', address: '山西'}
        ]
        // 1.打印表格的头部和尾部
        document.write(`
        <table>
            <caption>学生列表</caption>
            <tr>
                <th>序列</th>
                <th>姓名</th>
                <th>年龄</th>
                <th>性别</th>
                <th>家乡</th>
            </tr>
        `)
            // 遍历行数
            for (let i = 0; i < student.length; i++) {
                document.write(`
        <tr>
            <td>${i + 1}</td>
            <td>${student[i].name}</td>
            <td>${student[i].age}</td>
            <td>${student[i].gender}</td>
            <td>${student[i].address}</td>
        </tr>
                `)
            }
        document.write(`
        </table>
        `)
    </script>
</body>
</html>

十一、内置对象

1. 内置对象Math

Math对象是JavaScript提供的一个"数学高手"对象

提供了一些列做数学运算的方法

方法有：

random：生成0-1之间的随机数（包含0不包括1）

ceil：向上取整

floor：向下取整

max：找最大叔

min：找最小数

pow：幂运算

abs：绝对值

// 封装随机数
// min 到 max 之间的随机数
        function getRandom (min,max) {
            return Math.floor(Math.random() * (max - min + 1)) + min
        }

// 随机点名
let arr = ['黄总','张飞','赵云','马超','关羽']
let random = getRandom(0,arr.length - 1)
document.write(arr[random])

// 随机数
 let randoms = getRandom(1,10)
        while (true) {
            let num = +prompt('请你输入一个数字:')
            if (num > randoms) {
                alert('大了')
            } else if (num < randoms) {
                alert('小了')
            } else if (num === randoms) {
                alert('对了')
                break
            }
        }

 <td>${student[i].name}</td>
        <td>${student[i].age}</td>
        <td>${student[i].gender}</td>
        <td>${student[i].address}</td>
    </tr>
            `)
        }
    document.write(`
    </table>
    `)
</script>

~~~

十一、内置对象

1. 内置对象Math

Math对象是JavaScript提供的一个"数学高手"对象

提供了一些列做数学运算的方法

方法有：

random：生成0-1之间的随机数（包含0不包括1）

ceil：向上取整

floor：向下取整

max：找最大叔

min：找最小数

pow：幂运算

abs：绝对值

// 封装随机数
// min 到 max 之间的随机数
        function getRandom (min,max) {
            return Math.floor(Math.random() * (max - min + 1)) + min
        }

// 随机点名
let arr = ['黄总','张飞','赵云','马超','关羽']
let random = getRandom(0,arr.length - 1)
document.write(arr[random])

// 随机数
 let randoms = getRandom(1,10)
        while (true) {
            let num = +prompt('请你输入一个数字:')
            if (num > randoms) {
                alert('大了')
            } else if (num < randoms) {
                alert('小了')
            } else if (num === randoms) {
                alert('对了')
                break
            }
        }