✔️JS基础
文章目录
初识JS
JS是什么？
是一种运行在客户端（浏览器）的编程语言，可以用来创建动态更新的内容，控制多媒体、制作图像动画等交互效果
JS怎么写？
JavaScript程序不能独立运行，它需要被嵌入HTML中，然后浏览器才能执行JavaScript代码。通过 script 标签将JavaScript代码引入到HTML中
-
内部引入
通过
script标签包裹JavaScript代码<html> <body> <!-- 内部引入，在标签中书写js代码 --> <script> alert('Hello World') </script> </body> </html>-
外部引入
//one.js document.write('Hello World')<html> <body> <!-- 外部引入，通过script的src属性引入独立的js文件 --> <script src="one.js" > // 此时标签中的代码会被忽略 alert('Gaoxv') </script> </body> </html>注: 如果
script标签使用 src 属性引入了某js文件，那么标签中的代码会被忽略。
-
注释和结束符
通过注释可以添加备注信息
单行注释
使用 // 注释单行代码
// 不要出错不要出错
// 新来的老哥，代码给我绕晕了，跑路了我
多行注释
使用 /* */ 注释多行代码
/* Hello World */
/*
这哪个写的代码，
我都没法动，
卷铺盖走人
*/
结束符
在JavaScript代码中， ; 代表一段代码的结束，多数情况下可省略，使用回车 enter 替代
console.log(1);
console.log(2)
console.log(3)
重点输入输出语句
输入和输出可理解为人和计算机的交互，用户通过键盘、鼠标等向计算机输入信息，计算机处理后再展示结果给用户，这便是一次输入和输出的过程。
| 语句 | 效果 |
|---|---|
| alert(‘页面弹出警示框’) | 输出语句，页面弹出警示框 |
| document.write(’ 页面打印输出 ') | 输出语句，页面文档打印输出 |
| console.log(’ 控制台打印输出 ') | 输出语句，控制台输出 |
| prompt(’ 请输入姓名: ') | 输入语句，输入对话框 |
注：向 prompt() 输入任意内容会以弹窗形式出现在浏览器中，一般提示用户输入一些内容。
变量
变量是计算机中用来存储数据的 " 容器 " ，变量不是数据本身，它们仅仅是一个用于存储数值的容器。可以理解为是一个个用来装东西的纸箱子。
声明
声明（定义）变量有两部分构成：声明关键字、变量名（标识）
- 关键字是 JavaScript 中内置的一些单词或缩写，它们代表某些特定的含义
声明变量
let num = 10声明常量
const pi = 3.141
// let 变量名
// 声明(定义)变量有两部分构成：声明关键字、变量名（标识）
// let 即关键字，所谓关键字是系统提供的专门用来声明（定义）变量的词语
// age 即变量的名称，也叫标识符
let age
let 的含义是声明变量的，看到 let 后就可想到这行代码的意思是在声明变量，如 let age;
let 和 var 都是 JavaScript 中的声明变量的关键字，推荐使用 let 声明变量！！！
赋值
声明（定义）变量相当于创造了一个空的容器，通过赋值向这个容器中添加数据
let age
//赋值，将 18 这个数据存入了 age 这个容器中，这样age的值就成了 18
age = 18
//也可以声明和赋值同时进行
let author = 'Gaoxv'
变量更新
变量赋值后，还可以给它一个不同的值来更新它
let age = 38
age = 18
//var age = 21
注：不要多次声明同一个变量
声明多个变量
语法：多个变量中间用逗号隔开
说明：看上去代码长度更短，但并不推荐这样。为了更好的可读性，一般情况下我们一行只声明一个变量。
// let name = 'Gaoxv' , sex = '男'
let name = 'Gaoxv'
let sex = '男'
let和var
在较旧的JavaScript，使用关键字 var 来声明变量 ，而不是 let
var 现在开发中一般不再使用它，只是我们可能在古董程序中看到它。
let 为了解决 var 的一些问题。
var 声明一些不合理的地方：
- 可以先使用 在声明 (不合理)
- var 声明过的变量可以重复声明(不合理)
- 比如变量提升、全局变量、没有块级作用域等等
结论：
var 就是个bug，别迷恋它了，以后声明变量我们统一使用 let
变量的本质
内存：计算机中存储数据的地方，相当于一个空间
变量本质：是程序在内存中申请的一块用来存放数据的小空间
变量名命名规则
关于变量的名称（标识符）需要遵守：
规则：
- 只能是字母、数字、下划线、$，且不能能数字开头
- 字母区分大小写，如 Age 和 age 是不同的变量
- JavaScript 内部已占用于单词（关键字或保留字）不允许使用
- 尽量保证变量具有一定的语义，见字知义
规范：
- 起名要有意义
- 遵守小驼峰命名法
- 第一个单词首字母小写，后面每个单词首字母大写。例：userName
// 1. 规则(法律)
// 1.1 变量名不能是关键字
// let let = 10
// 1.2 变量名的组成: 英文字母 数字 _ $ ，不能以数字开头
// let 1num = 10 错误
// let num! = 10 错误
// 1.3 js严格区分大小写
// let age = 18
// console.log(Age)
// 2. 规范(道德)
// 2.1 起名要有意义
// let age = 18
// let nl = 19
// 2.2 我们命名建议采取小驼峰命名法
let myName = 'pink老师'
let myFirstName = 'p'
常量
是什么：也是一个容器，用于保存数据的
和变量的区别： 常量里面保存的值是不允许改变的
使用场景：当某个值永远不会改变的时候，我们可以使用常量来保存，目的为了程序的安全
// 常量： 也是一个容器用来保存的数据
const pi = 3.14
console.log(pi)
// 注意事项：
// 1. 常量里面的值是不允许修改的
pi = 3.141592653
console.log(pi)
// 2. 常量必须要初始化(声明常量的时候必须要赋值)
// const url
注意： 常量不允许重新赋值,声明的时候必须赋值（初始化）
数据类型
计算机世界中的万事成物都是数据。
生活中会把物品进行归类，不同的物品不能混淆在一起。
计算机程序可以处理大量的数据，方便程序员的使用数据。
数字型
即我们数学中学习到的数字，可以是整数、小数、正数、负数
通过typeof关键字检测数据类型
// 数字型： 用于计算的， js数字类型包含： 整数、小数
// let num1 = 18
// let num1 = -18
let num1 = 18.88
// let num1 = -18.88
console.log(typeof num1) // number typeof 关键字检测数据类型
字符串
被引号包裹的一段文字信息
JS中的字符串:
通过单引号（ ‘’） 、双引号（ “”）或反引号( `` ) 包裹的数据都属于字符串
单引号和双引号没有本质上的区别，推荐使用单引号。
注意事项：
- 单引号/双引号可以互相嵌套，但是不以自已嵌套自已（口诀：外双内单，或者外单内双）
- 一定注意变量名不要加引号，否则认为是字符串
// 字符串类型: 被引号包裹的一段文字信息 单引号 双引号 反引号
let goods = '笔记本电脑'
let address = "黑马程序员"
console.log(typeof goods) // string
console.log(typeof address) // string
let color = `粉红色`
let tel = '13612342234'
// 变量是不能加引号的,变量加了引号就不是盒子了，是一个字符串
console.log('goods')
// 字符串嵌套的问题. 不能嵌套自己, 外单内双 或者 外双内单
console.log('今日特价"跳楼大甩卖"速速抢购')
console.log("今日特价'跳楼大甩卖'速速抢购")
模板字符串
使用场景:
拼接字符串和变量
语法
// 1. 字符串拼接
let age = 91
// console.log('pink老师今年' + age + '岁')
console.log('pink老师今年' + age + '岁')
// 2. 模板字符串
console.log(`pink老师今年${age}岁`)
// 3. 模板字符串里面的字符串可以换行
注意：反引号中间的字符串可以换行的
布尔类型
表示肯定或否定时在计算机中对应的是布尔类型数据，它有两个固定的值 true 和 false，表示肯定的数据用 true，表示否定的数据用 false。
let isCool = true
isCool = false
document.write(typeof isCool) // 结果为 boolean
undefined
未定义是比较特殊的类型，只有一个值 undefined，只声明变量，不赋值的情况下，变量的默认值为 undefined，一般很少【直接】为某个变量赋值为 undefined。
// 只声明了变量，并末赋值
let tmp;
document.write(typeof tmp) // 结果为 undefined
注：JavaScript 中变量的值决定了变量的数据类型。（类型推断）
运算符
算术运算符
算术运算符：也叫数学运算符，主要包括加、减、乘、除、取余（求模）等
| 运算符 | 作用 |
|---|---|
| + | 求和 |
| - | 求差 |
| * | 求积 |
| / | 求商 |
| % | 取模（取余数），开发中经常用于作为某个数字是否被整除 |
注意：在计算失败时，显示的结果是 NaN （not a number）
// 算术运算符
console.log(1 + 2 * 3 / 2) // 4
let num = 10
console.log(num + 10) // 20
console.log(num + num) // 20
// 1. 取模(取余数) 使用场景： 用来判断某个数是否能够被整除
console.log(4 % 2) // 0
console.log(6 % 3) // 0
console.log(5 % 3) // 2
console.log(3 % 5) // 3
// 2. 注意事项 : 如果我们计算失败，则返回的结果是 NaN (not a number)
console.log('gaoxv' - 2)
console.log('gaoxv' * 2)
console.log('gaoxv' + 2) 成立，+ 作字符串拼接。输出“gaoxv2”
赋值运算符
赋值运算符：对变量进行赋值的运算符
= 将等号右边的值赋予给左边, 要求左边必须是一个容器
| 运算符 | 作用 |
|---|---|
| += | 加法赋值 |
| -+ | 减法赋值 |
| *= | 乘法赋值 |
| /= | 除法赋值 |
| %= | 取余赋值 |
// 赋值运算符
let num = 1
// 1. 需求 我们想要num变量里面的值 + 1， 加完之后再把计算结果存到num里面
// num = num + 1
// console.log(num)
// 2. += 赋值运算符
num += 1 // 当前情况下是等价于 num = num + 1
console.log(num)
自增/自减运算符
| 符号 | 作用 | 说明 |
|---|---|---|
| ++ | 自增 | 变量自身的值加1，例如: x++ |
| – | 自减 | 变量自身的值减1，例如: x– |
- ++在前和++在后在单独使用时二者并没有差别，而且一般开发中我们都是独立使用
- ++在后（后缀式）我们会使用更多
注意：
- 只有变量能够使用自增和自减运算符
- ++、-- 可以在变量前面也可以在变量后面，比如: x++ 或者 ++x
// 1. 自增运算符： 可以让变量里面的值加1
// let x = 3
// // x++ // x = x + 1 或者 x += 1
// ++x
// console.log(x)
// 2. ++在前和++在后的区别。 如果单独使用，没有区别，如果参与了运算就有区别
// 2.1 ++在前 前缀式 ： 先对变量值+1， 然后拿着变量值做运算
// let x = 3
// let y = ++x
// console.log(y) // 4
// console.log(x) // 4
// 2.2 ++在后 后缀式 ： 先拿着变量值运算，再对变量值+1
let x = 3
let y = x++
console.log(y) // 3
console.log(x) // 4
比较运算符
使用场景：比较两个数据大小、是否相等，根据比较结果返回一个布尔值（true / false）
| 运算符 | 作用 |
|---|---|
| > | 左边是否大于右边 |
| < | 左边是否小于右边 |
| >= | 左边是否大于或等于右边 |
| <= | 左边是否小于或等于右边 |
| === | 左右两边是否类型和值都相等（重点） |
| == | 左右两边值是否相等 |
| != | 左右值不相等 |
| !== | 左右两边是否不全等 |
// 比较运算符： 根据比较结果返回 布尔值 true / false
console.log(3 > 5) // false
console.log(3 < 5) // true
console.log(3 >= 5) // false
console.log(3 >= 3) // true
console.log(3 <= 5) // true
// console.log(3 = 3) // 错误
// 1. 判断是否相等我们使用 === 要求 值 和 数据类型都相等返回的结果才是true,提倡使用三等 全等
console.log(3 === 3) // true
console.log(3 === '3') // false
console.log(3 !== 3) // false
console.log(3 !== '3') // true
// 2. == 判断是否相等，使用较少, 判断值是否相等，并不判断数据类型是否相等
console.log(3 == 3) // true
console.log(3 == '3') // true
console.log(3 != 3) // false
逻辑运算符
使用场景：可以把多个布尔值放到一起运算，最终返回一个布尔值
| 符号 | 名称 | 日常读法 | 特点 | 口诀 |
|---|---|---|---|---|
| && | 逻辑与 | 并且 | 符号两边有一个假的结果为假 | 一假则假 |
| || | 逻辑或 | 或者 | 符号两边有一个真的结果为真 | 一真则真 |
| ! | 逻辑非 | 取反 | true变false false变true | 真变假，假变真 |
| A | B | A && B | A || B | !A |
|---|---|---|---|---|
| false | false | false | false | true |
| false | true | false | true | true |
| true | false | false | true | false |
| true | true | true | true | false |
// 逻辑运算符: 逻辑与 && 逻辑或 || 逻辑非 !
// 1.逻辑与 && 一假则假
console.log(false && false) // false
console.log(false && true) // false
console.log(true && false) // false
console.log(true && true) // true
console.log(3 > 5 && 2 < 4) // false
// 判断某个数字是否在 8096到36999 之间： 数字大于等于 8096 并且小于等于36999
let num = 1000
console.log(num >= 8096 && num <= 36999) // false
console.log('------')
// 2. 逻辑或 || 一真则真
console.log(true || false) // true
console.log(false || true) // true
console.log(true || true) // true
console.log(false || false) // false
console.log('------')
// 3. 逻辑非 取反
console.log(!false) // true
console.log(!true) // false
优先级
逻辑运算符优先级： ！> && > ||
vx🎇VueMaker
862
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
