基础认知
认识 JavaScript
是什么?
JavaScript是一种运行在客户端(浏览器)的编程语言,能够实现人机交互效果
做什么?
网页特效(监听用户的一些行为,让网页做出对应的反馈)
表单验证(针对表单数据的合法性进行判断)
数据交互(获取后台的数据,渲染到前端)
服务端编程(node.js)
JavaScript 组成
- ECMAScrpt:规定了js基础语法核心知识(比如:变量、分支语句、循环语句、对象等)
- Web APIs
- DOM:操作文档(比如:对页面元素进行移动、添加、删除等操作)
- BOM:操作浏览器(比如:页面弹窗、检测窗口宽度、存储数据到浏览器等等)
JavaScript 位置
内部 JavaScript
<body>
<div class="box">
<p>你好,世界</p>
</div>
<!-- 内部js -->
<script>
// 在这里书写Javascript代码
alert("Hello World") // 页面弹出警示框
</script>
</body>
具体位置:直接写在html文件里,用script标签包围JavaScript代码
书写规范:script标签写在</body>的上面
外部 JavaScript
<body>
<div class="box">
<p>你好,世界</p>
</div>
<!-- 引入外部js:标签的中间不要写内容!!写了也会被忽略! -->
<script src="./js/myTest.js"></script>
</body>
代码写在以.js结尾的文件里,通过script标签,引入到html页面中
内联 JavaScript
<body>
<button onclick="alert('Hello WOrld')">
按钮
</button>
</body>
代码写在标签的内部
注意:此处作为了解即可,但是后面的vue框架会使用这种模式!
语法速查
MDN 官网:https://developer.mozilla.org/zh-CN/
注释
单行注释:
符号://
VS Code快捷键:Ctrl + /
块注释:
符号:/* */
VS Code快捷键:Shift + Alt + A (注意:此快捷键可能与系统的截图快捷键冲突,可在VS Code中修改为其他快捷键)
结束符
<script>
alert("Hello World");
</script>
JavaScript 的结束符是";"
作用:使用英文的;代表语句结束
实际情况:实际开发中,可写可不写,浏览器(JavaScript 引擎)可以自动推断语句结束的位置
现状:越来越多的人主张省略结束符
约定:为了风格统一,结束符要么每一句都写,要么每一句都不写(按照团队要求)
输入
prompt
<body>
<script>
prompt('请输入您的姓名')
</script>
</body>
作用:显示一个对话框,对话框中包含一条文字信息,用来提示用户输入文字
输出
write
<body>
<script>
// 输出内容到文档中
document.write('<div>我是div标签</div>')
document.write('<h1>我是一级标题</h1>')
</script>
</body>
语法:document.write()
作用:向body内输出内容
注意:如果输出的内容写的标签,也会被解析成网页元素。
alert
<body>
<script>
alert("警示")
</script>
</body>
作用:页面弹出警告对话框
console.log
<body>
<script>
console.log('输出内容到控制台')
</script>
</body>
作用:输出到控制台,程序员调试时使用
变量
命名规范
规则:
1.不能使用关键字
2.只能用下划线、字母、数字、$组成,且不能数字开头
3.字母严格区分大小写
规范:
1.起名要有意义
2.遵守小驼峰体命名法(例如:userName)
声明变量
<body>
<script>
// 声明变量
let temp
// 声明变量的同时,进行赋值
let age = 18
let name = 'Jack'
// 一次性声明多个变量
let a, b
let c = 10, b = 'hello world'
// 为了更好的可读性,一般声明多个变量采取"一行只声明一个变量"的形式
let data1
let data2
let data3
</script>
</body>
语法:
let 变量名
更新变量
<body>
<script>
let age = 18
age = 30
</script>
</body>
更新变量:变量赋值后,还可以更新它的值
注意:let 不允许多次声明一个变量
let 与 var
let 和 var 的区别:
-
在较旧的 JavaScript 中,使用关键字 var 来声明变量,而不是 let
-
现在的开发中一般不再使用 var ,只是我们可能在老版本的程序中看到它
-
let 解决了 var 的一些问题,更加先进!
var 声明:
- 可以先使用,再进行声明(不合理)
- var 声明过的变量可以重复声明(不合理)
- 变量提升、全局变量、没有块级作用域等
数组
基础部分
<body>
<script>
// 定义数组
let nums = []
// 赋值操作
nums[0] = 10
nums[1] = 20
// 定义并初始化
let names = ['Jack', 'Tony', 'Peter']
// 输出数组元素
console.log(nums[0])
console.log(nums[1])
console.log(names[0])
console.log(names[1])
console.log(names[2])
// 输出数组长度
console.log(names.length)
</script>
</body>
概念:一种将"一组数据存储在单个变量名下"的优雅方式
语法:
let arr = []
进阶部分
push 方法
作用:
push()方法将指定的元素添加到数组的末尾,并返回新的数组长度
<script>
const arr = ['red', 'blue', 'green']
const count = arr.push('yellow')
console.log(count);
console.log(arr);
</script>
splice 方法
作用:
splice()方法用于添加或删除数组中的元素
<script>
const arr = ['red', 'blue', 'green']
// splice(从索引?开始, 删除?个元素)
// 返回值: 以数组的形式,返回被删除的元素
const newArr = arr.splice(0, 3)
console.log(arr); // []
console.log(newArr); // ['red', 'blue', 'green']
</script>
map 方法
使用场景:
map()方法可以遍历数组处理数据,并且返回新的数组
<script>
const arr = ['red', 'blue', 'green']
const newArr = arr.map(function (ele, index) {
console.log(ele); // 数组元素
console.log(index); // 数组索引号
return ele + 'Color'
})
console.log(newArr);
</script>
forEach 方法
介绍:
forEach()方法用于调用数组的每个元素,并将元素传递给回调函数
使用场景:
遍历数组的每一个元素
<script>
const arr = ['red', 'green', 'pink']
arr.forEach(function (item, index) {
console.log(item); // red green pink
console.log(index); // 0 1 2
})
</script>
join 方法
作用:
join()方法用于把数组中的所有元素转换一个字符串
<script>
const arr = ['red', 'blue', 'green']
console.log(arr.join('---')); // red---blue---green
</script>
filter 方法
介绍:
filter() 方法创建一个新的数组,新数组中的元素是通过检查指定数组中符合条件的所有元素
使用场景:
筛选数组符合条件的元素,并返回筛选之后元素的新数组
<script>
const arr = [0, 10, 20, 30]
const newArr = arr.filter(function (item, index) {
return item >= 20
})
console.log(newArr); // [20, 30]
</script>
常量
<body>
<script>
const PI = 3.14
console.log(PI);
</script>
</body>
概念:使用 const 声明的变量称为"常量"
使用场景:当某个变量永远不会改变时,就可以用 const 来声明,而不用 let
注意:常量不允许重新赋值,这意味着声明的时候就必须进行初始化
规范:英文全部大写(可以不遵守)
数据类型
基本数据类型
类型名称 | Type Name |
---|---|
数字型 | number |
字符串型 | string |
布尔型 | boolean |
未定义型 | undefined |
空类型 | null |
引用数据类型
类型名称 | Type Name |
---|---|
对象 | object |
数字类型
算术运算符
<body>
<script>
// 求余数:
console.log(5 % 3); // 结果为 2
</script>
</body>
"数学运算符"也叫"算术运算符",主要包括以下几个部分:
加(+) 减(-) 乘(*) 除(/) 取余(%)
优先级:
1.括号
2.乘、除、取余
3.加减
NaN
NaN:not a number
NaN 代表计算错误!它是一个不正确的或者一个未定义的数学操作所得到的结果
NaN 是粘性的,任何对 NaN 的操作都会返回 NaN(例如:NaN + 6 的结果还是 NaN)
字符串类型
认识字符串
<body>
<script>
let name = 'Jack' // 使用单引号
let gender = "male" // 使用双引号
let goods = `HUAWEI` // 使用反引号
let tel = '13636975625' // 字符串
let str = '' // 空字符串
</script>
</body>
1.通过单引号、双引号、或反引号包裹的数据都是字符串
2.单引号和双引号没有本质上的区别,推荐使用单引号!
3.必要时可以使用转义符"\",输出单引号和双引号
字符串拼接
<body>
<script>
let age = 30
document.write('年龄:' + age + '岁')
</script>
</body>
运行结果:
年龄:30岁
模板字符串
<body>
<script>
let age = 30
document.write(`Jack已经${age}岁了`)
</script>
</body>
运行结果:
Jack已经30岁了
语法:
用"反引号"去包含字符串,遇到变量则使用 ${变量}
布尔类型
<body>
<script>
let isCool = true
isCool = false
console.log(isCool);
</script>
</body>
未定义类型
基本介绍:
"未定义"是比较特殊的类型,只有一个值 undefined
什么情况出现未定义类型?
只声明变量,不赋值的情况下,变量的默认值为 undefined,一般很少(直接)为某个变量赋值为 undefined
使用场景:
我们开发中经常生命一个变量,等待传送过来的数据,如果我们不知道这个数据是否传递过来,此时我们可以通过检测这个变量是不是 undefined,就判断用户是否有数据传递过来
空类型
<body>
<script>
let obj = null
console.log(obj)
</script>
</body>
null 和 undefined 的区别
- undefined 表示没有赋值
- null 表示赋值了,但是内容为空
- 计算有明显区别
- undefined + 1 的结果为 undefined
- null + 1 的结果为 1
检测数据类型
<body>
<script>
let num = 10
console.log(typeof num)
</script>
</body>
typeof 运算符可以返回被检测的数据类型,它支持两种语法格式
1.作为运算符:typeof x (常用的写法)
2.函数形式:typeof(x)
提示:有括号和没有括号,得到的结果是一样的,所以我们直接使用"运算符"的写法
类型转换
隐式转换
规则:
+ 号两边只要有一个是字符串,都会把另外一个转成字符串
除了 + 以外的算术运算符,比如 - * / 等都会把数据转成数字类型
缺点:
转换类型不明确,靠经验才能总结
显示转换
<body>
<script>
let str = '123'
console.log(Number(str)) // 123
// ---------------
console.log(parseInt('12px')) // 12
console.log(parseInt('12.78px')) // 12
console.log(parseInt('13.14Love')) // 13
// ---------------
console.log(parseFloat('12px')) // 12
console.log(parseFloat('12.678px')) // 12.678
console.log(parseFloat('13.14Love')) // 13.14
// ---------------
console.log(parseInt('abc3.14')) // NaN
console.log(parseFloat('abc3.14')) // NaN
</script>
</body>
为了避免"隐式转换"带来的问题,通常需要对数据进行显示转换
语法:
Number(数据)
// 转成数字类型
// 如果字符串内容里面有非数字,转换失败时结果为 NaN(Not a Number)
parseInt(数据)
// 只保留整数(具有去除非数字部分字符的能力)
parseFloat(数据)
// 可以保留小数(具有去除非数字部分字符的能力)