本文介绍了JavaScript的基础知识，包括内部和外部引入方式，变量的声明与赋值，数据类型如字符串、布尔和undefined，以及类型转换。还讲解了运算符的使用，如算术、比较和逻辑运算符，以及语句结构如if、switch和循环。此外，文章涵盖了数组、函数、作用域和对象的概念及操作。
文章目录
什么是javascript
JavaScript（简称“JS”）是一种具有函数优先的轻量级，解释型或即时编译型的编程语言。
引入方式
JavaScript 程序不能独立运行，它需要被嵌入 HTML 中，然后浏览器才能执行 JavaScript 代码。通过 script 标签将 JavaScript 代码引入到 HTML 中，有两种方式：
内部方式
通过 script 标签包裹 JavaScript 代码
<body>
<!-- 内联形式：通过 script 标签包裹 JavaScript 代码 -->
<script>
alert('嗨，欢迎来传智播学习前端技术！')
</script>
</body>
外部形式
一般将 JavaScript 代码写在独立的以 .js 结尾的文件中，然后通过 script 标签的 src 属性引入
// demo.js
document.write('嗨，欢迎来传智播学习前端技术！')
<body>
<!-- 外部形式：通过 script 的 src 属性引入独立的 .js 文件 -->
<script src="demo.js"></script>
</body>
如果 script 标签使用 src 属性引入了某 .js 文件，那么 标签的代码会被忽略，如下代码所示：
<body>
<!-- 外部形式：通过 script 的 src 属性引入独立的 .js 文件 -->
<script src="demo.js">
alert(666); // 此处的代码会被忽略掉！！！！
</script>
</body>
输入和输出
** 输出**
JavaScript 可以接收用户的输入，然后再将输入的结果输出：
alert()、document.wirte()
以数字为例，向 alert() 或 document.write()输入任意数字，他都会以弹窗形式展示（输出）给用户。
** 输入**
向 prompt() 输入任意内容会以弹窗形式出现在浏览器中，一般提示用户输入一些内容。
<script>
// 1. 输入的任意数字，都会以弹窗形式展示
document.write('要输出的内容')
alert('要输出的内容');
// 2. 以弹窗形式提示用户输入姓名，注意这里的文字使用英文的引号
prompt('请输入您的姓名:')
</script>
变量
理解变量是计算机存储数据的“容器”，掌握变量的声明方式
** 声明**
声明(定义)变量有两部分构成：声明关键字、变量名（标识）
<body>
<script>
let age
</script>
</body>
let 和 var 都是 JavaScript 中的声明变量的关键字，推荐使用 let 声明变量
** 赋值**
声明（定义）变量相当于创造了一个空的“容器”，通过赋值向这个容器中添加数据。
<body>
<script>
// let 即关键字，所谓关键字是系统提供的专门用来声明（定义）变量的词语
// age 即变量的名称，也叫标识符
let ag
age = 18
document.write(age)
let str = 'hello world!'
alert(str);
</script>
</body>
关键字
使用 let 时的注意事项：
- 允许声明和赋值同时进行
- 不允许重复声明
- 允许同时声明多个变量并赋值
- JavaScript 中内置的一些关键字不能被当做变量名
使用 var 时的注意事项：
- 允许声明和赋值同时进行
- 允许重复声明
- 允许同时声明多个变量并赋值
大部分情况使用 let 和 var 区别不大，但是 let 相较 var 更严谨
常量
概念：使用 const 声明的变量称为“常量”。
使用场景：当某个变量永远不会改变的时候，就可以使用 const 来声明，而不是let。
const PI = 3.14
注意： 常量不允许重新赋值,声明的时候必须赋值（初始化）
数据类型
可以通过 typeof 关键字检测数据类型
<body>
<script>
// 检测 1 是什么类型数据，结果为 number
document.write(typeof 1)//输出为number
</script>
</body>
字符串类型
通过单引号（
''） 、双引号（""）或反引号包裹的数据都叫字符串，单引号和双引号没有本质上的区别，推荐使用单引号。
注意事项：
- 单引号/双引号可以互相嵌套，但是不以自已嵌套自已
- 必要时可以使用转义符
\，输出单引号或双引号
布尔类型
表示肯定或否定时在计算机中对应的是布尔类型数据，它有两个固定的值 true 和 false，表示肯定的数据用 true，表示否定的数据用 false。
undefined
未定义是比较特殊的类型，只有一个值 undefined，只声明变量，不赋值的情况下，变量的默认值为 undefined，一般很少【直接】为某个变量赋值为 undefined。
<body>
<script>
// 只声明了变量，并末赋值
let tmp;
document.write(typeof tmp) // 结果为 undefined
</script>
</body>
注：JavaScript 中变量的值决定了变量的数据类型。
类型转换
隐式转换
某些运算符被执行时，系统内部自动将数据类型进行转换，这种转换称为隐式转换。
<body>
<script>
let num = 13 // 数值
let num2 = '2' // 字符串
console.log(num + num2)// 结果为 132 ,+ 将两个字符串拼接到了一起
console.log(num - num2)// 结果为 11,-将字符串转换成了数字
</script>
</body>
注：数据类型的隐式转换是 JavaScript 的特征
显式转换
** Number**
通过 Number 显示转换成数值类型，当转换失败时结果为 NaN即不是一个数字。
<body>
<script>
let t = '12'
let f = 8
// 显式将字符串 12 转换成数值 12
t = Number(t)
console.log(t + f) // 结果为 20
let str = 'hello'
console.log(Number(str))
// 将 hello 转成数值是不现实的，当无法转换成
// 数值时，得到的结果为 NaN （Not a Number）
</script>
</body>
注意，prompt传回来的默认是一个字符串
<body>
<script>
let t=prompt("请输入一个数字")//这里prompt传回来的默认是一个字符串
</script>
</body>
运算符
算数运算符
| 运算符 | 作用 |
|---|---|
| + | 求和 |
| - | 求差 |
| * | 求积 |
| / | 求商 |
| % | 取模（取余数），开发中经常用于作为某个数字是否被整除 |
赋值运算符
| 运算符 | 作用 |
|---|---|
| += | 加法赋值 |
| -+ | 减法赋值 |
| *= | 乘法赋值 |
| /= | 除法赋值 |
| %= | 取余赋值 |
自增自减运算符
| 符号 | 作用 | 说明 |
|---|---|---|
| ++ | 自增 | 变量自身的值加1，例如: x++ |
| – | 自减 | 变量自身的值减1，例如: x– |
比较运算符
| 运算符 | 作用 |
|---|---|
| > | 左边是否大于右边 |
| < | 左边是否小于右边 |
| >= | 左边是否大于或等于右边 |
| <= | 左边是否小于或等于右边 |
| === | 左右两边是否类型和值都相等（重点） |
| == | 左右两边值是否相等 |
| != | 左右值不相等 |
| !== | 左右两边是否不全等 |
注意：==并不要求类型一定相等，所以推荐使用===
逻辑运算符
| 符号 | 名称 | 日常读法 | 特点 | 口诀 |
|---|---|---|---|---|
| && | 逻辑与 | 并且 | 符号两边有一个假的结果为假 | 一假则假 |
| || | 逻辑或 | 或者 | 符号两边有一个真的结果为真 | 一真则真 |
| ! | 逻辑非 | 取反 | 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 |
运算符优先级
语句
表达式和语句
if语句
省略
三元运算符
一些简单的双分支，可以使用比
if else双分支更简便的三元运算符
条件 ? 表达式1: 表达式2
switch语句
适合于有多个条件的时候，也属于分支语句，大部分情况下和 if多分支语句 功能相同
注意：
- switch case语句一般用于等值判断, if适合于区间判断
- switch case一般需要配合
break关键字使用 没有break会造成case穿透 - switch 一定要注意 必须是
===全等，一定注意 数据类型，同时注意break否则会有穿透效果
<script>
switch (2) {
case 1:
console.log('您选择的是1')
break // 退出switch
case 2:
console.log('您选择的是2')
break // 退出switch
case 3:
console.log('您选择的是3')
break // 退出switch
default:
console.log('没有符合条件的')
}
</script>
if和switch的区别
- 当分支比较少时，if…else语句执行效率高。
- 当分支比较多时，switch语句执行效率高，而且结构更清晰。
循环语句
while循环
while (条件表达式) {
// 循环体
}
中止循环
break 中止整个循环，一般用于结果已经得到, 后续的循环不需要的时候可以使用（提高效率）
continue 中止本次循环，一般用于排除或者跳过某一个选项的时候
<script>
let i = 1
while (i <= 5) {
if (i === 3) {
i++
continue
}
console.log(i)
i++
}
</script>
无限循环
1.while(true) 来构造“无限”循环，需要使用break退出循环。（常用）
2.for(;;) 也可以来构造“无限”循环，同样需要使用break退出循环。
for循环
<script>
for(let i = 1; i <= 6; i++) {
document.write(`<h${i}>循环控制，即重复执行<h${i}>`)
}
</script>
数组
<script>
let classes1 = [];
let classes2 = ['小明', '小刚', '小红', '小丽', '小米']
</script>
数组做为数据的集合，它的单元值可以是任意数据类型
例如：
<script>
//混合多种类型
let mixin = [true, 1, false, 'hello']
</script>
数组在 JavaScript 中并不是新的数据类型，它属于对象类型
数组长度
<script>
// 定义一个数组
let arr = ['html', 'css', 'javascript']
// 数组对应着一个 length 属性，它的含义是获取数组的长度
console.log(arr.length) // 3
</script>
操作数组
push动态向数组的尾部添加一个单元unshit动态向数组头部添加一个单元pop删除最后一个单元shift删除第一个单元splice动态删除任意单元
使用以上4个方法时，都是直接在原数组上进行操作，即成功调任何一个方法，原数组都跟着发生相应的改变。并且在添加或删除单元时
length并不会发生错乱。
<script>
let arr = ['html', 'css', 'javascript']
// push 动态向数组的尾部添加一个单元
arr.push('Nodejs')
console.log(arr)
// unshit 动态向数组头部添加一个单元
arr.unshift('VS Code')
console.log(arr)
// splice 动态删除任意单元
arr.splice(2, 1) // 从索引值为2的位置开始删除1个单元
console.log(arr)
// pop 删除最后一个单元
arr.pop()
console.log(arr)
// 5. shift 删除第一个单元
arr.shift()
console.log(arr)
</script>
函数
声明和调用
声明
调用
```html
<body>
<script>
// 声明（定义）了最简单的函数，既没有形式参数，也没有返回值
function sayHi() {
console.log('嗨~')
}
sayHi()
// 可以重复被调用，多少次都可以
sayHi()
</script>
</body>
注：函数名的命名规则与变量是一致的，并且尽量保证函数名的语义。
形参和实参
形参：声明函数时写在函数名右边小括号里的叫形参（形式上的参数）
实参：调用函数时写在函数名右边小括号里的叫实参（实际上的参数）
作用域
全局作用域
作用于所有代码执行的环境(整个 script 标签内部)或者一个独立的 js 文件
处于全局作用域内的变量，称为全局变量
局部作用域
作用于函数内的代码环境，就是局部作用域。 因为跟函数有关系，所以也称为函数作用域。
处于局部作用域内的变量称为局部变量
如果函数内部，变量没有声明，直接赋值，也当全局变量看，但是强烈不推荐
但是有一种情况，函数内部的形参可以看做是局部变量。
匿名函数
匿名函数：没有名字的函数,无法直接使用
函数表达式
// 声明
let fn = function() {
console.log('函数表达式')
}
// 调用
fn()
立即执行函数
(function(){ xxx })();
(function(){xxxx}());
无需调用，立即执行，其实本质已经调用了
多个立即执行函数之间用分号隔开
对象
<script>
let person = {
name: '小甘',
age: 18,
stature: 165,
gender: '女',
}
</script>
声明对象，并添加了若干属性后，可以使用 . 或 [] 获得对象中属性对应的值
<script>
let person = {
name: '小甘',
age: 19,
stature: 165,
gender: '女',
};
// 访问人的名字
console.log(person.name) // 结果为 小明
// 访问人性别
console.log(person.gender) // 结果为 男
// 访问人的身高
console.log(person['stature']) // 结果为 185
// 或者
console.log(person.stature) // 结果同为 185
</script>
也可以动态为对象添加属性
<script>
// 声明一个空的对象（没有任何属性）
let user = {}
// 动态追加属性
user.name = '小甘'
user['age'] = 19
// 动态添加与直接定义是一样的，只是语法上更灵活
</script>
方法和调用
- 方法是由方法名和函数两部分构成，它们之间使用 : 分隔
- 多个属性之间使用英文
,分隔 - 方法是依附在对象中的函数
- 方法名可以使用
""或''，一般情况下省略，除非名称遇到特殊符号如空格、中横线等
<script>
let person = {
name: '小甘',
age: 19,
singing: function () {
console.log('甘雨晗')
},
run: function () {
console.log('甘雨晗家住重庆')
}
}
</script>
方法调用：使用
.或[]调用对象中函数
<script>
// 方法是依附在对象上的函数
let person = {
name: '小甘',
age: 18,
singing: function () {
console.log('甘雨晗家住重庆')
},
run: function () {
console.log('甘雨晗喜欢游泳')
}
}
// 调用对象中 singing 方法
person.singing()
// 调用对象中的 run 方法
person.run()
</script>
也可以动态为对象添加方法
<script>
// 声明一个空的对象没有任何属性，也没有任何方法
let user = {}
// 动态追加属性
user.name = '小甘'
user.['age'] = 19
// 动态添加方法
user.move = function () {//move为方法名
console.log('甘雨晗喜欢吃炸鸡')
}
</script>
null
null 通常只用它来表示不存在的对象。使用 typeof 检测类型它的类型时，结果为 object。
遍历对象
let obj = {
uname: 'pink'
}
for(let k in obj) {
// k 属性名 字符串 带引号 obj.'uname' k === 'uname'
// obj[k] 属性值 obj['uname'] obj[k]
}
for in 不提倡遍历数组 因为 k 是 字符串
内置对象
- Math.PI，获取圆周率
// 圆周率
console.log(Math.PI);
- Math.random，生成 0 到 1 间的随机数
// 0 ~ 1 之间的随机数, 包含 0 不包含 1
Math.random()
- Math.ceil，数字向上取整
// 舍弃小数部分，整数部分加1
Math.ceil(3.4)
- Math.floor，数字向下取整
// 舍弃小数部分，整数部分不变
Math.floor(4.68)
- Math.round，四舍五入取整
// 取整，四舍五入原则
Math.round(5.46539)
Math.round(4.849)
- Math.max，在一组数中找出最大的
// 找出最大值
Math.max(10, 21, 7, 24, 13)
- Math.min，在一组数中找出最小的
// 找出最小值
Math.min(24, 18, 6, 19, 21)
- Math.pow，幂方法
// 求某个数的多少次方
Math.pow(4, 2) // 求 4 的 2 次方
Math.pow(2, 3) // 求 2 的 3 次方
- Math.sqrt，平方根
// 求某数的平方根
Math.sqrt(16)
扫一扫
4212
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
