JavaScript基础
JS的基本语法
一、元素
浏览器不支持脚本
<body>
<noscript>
<p>您的浏览器不支持或者关闭运行JavaScript</p>
</noscript>
</body>
二、JS编写的注意事项
1. 加载顺序
作为HTML文档内容的一部分, JS默认遵循HTML文档的加载顺序, 自上而下加载
推荐将JS代码编写在body子元素的最后一行
2. JS代码严格区分大小写
HTML元素和CSS元素不区分大小写, 但是JS严格区分大小写
JS变量和数据类型
一、变量的命名规范
变量命名规则: 必须遵守
1. 第一个字符必须是一个字母、下划线或一个$符号
2. 其他字符可以是字母、下划线、美元符号或数字
3. 不能使用关键字和保留子命名
变量命名规范: 建议遵守
1. 多个单词使用驼峰标识
2. 赋值 = 两边都加上一个空格
二、变量的使用注意
1. 如果一个变量未声明就直接使用, 那么会报错
2. 如果一个变量有声明, 但没有赋值, 那么默认是undefined
3. 如果没有使用var声明变量也可以, 但是不推荐(事实上会被添加到window对象上)
三、JS的数据类型
1. Number
2. String
3. Boolean
4. Undefined
5. Null
6. Object
7. BigInt
8. Symbol
四、typeof
对一个值使用 typeof 操作符会返回下列字符之一
1. "undefined"表示值未定义;
2. "boolean"表示值为布尔值;
3. "string"表示值为字符串;
4. "number"表示值为数值;
5. "object"表示值为对象(而不是函数)或 null;
6. "function"表示值为函数;
7. “symbol”表示值为符号;
typeof()的用法
你可能会遇到另一种语法: typeof(x), 它与 typeof x 相同
typeof 是一个操作符, 并非一个函数, ()只是将后续的内容当做一个整体而已
五、Number类型
number类型表示整数和浮点数
数字number可以有很多操作, 比如+-*/
除了常规的数字, 还包括所谓的特殊数值
1. Infinity: 无穷大
2. NaN: 代表一个计算错误
数字类型有其他进制的表示方法
1. 十六进制: 0x111
2. 八进制: 0o111
3. 二进制: 0b111
isNaN
用于判断是否不是一个数字, 返回true/false
六、String类型
字符串可以用双引号、单引号、反引号包括
字符串的属性和方法
1. 字符串拼接, 通过+运算符
2. 获取字符串的长度: string.length
七、Boolean类型
仅包含true、false两个值
八、Undefined类型
最好在定义变量的时候进行初始化, 而不只是声明一个变量, 否则undefined
不要显示的将一个变量赋值为undefined
九、Object类型
Object 类型是一个特殊的类型，我们通常把它称为引用类型或者复杂类型
1. 其他的数据类型我们通常称之为 “原始类型”，因为它们的值质保函一个单独的内容(字符串、数字或者其他);
2. Object往往可以表示一组数据，是其他数据的一个集合;
3. 在JavaScript中我们可以使用 花括号{} 的方式来表示一个对象;
十、Null类型
Null 类型同样只有一个值，即特殊值null
null类型通常用来表示一个对象为空，所以通常我们在给一个对象进行初始化时，会赋值为null
null和undefined的关系
1. undefined通常只有在一个变量声明但是未初始化时，它的默认值是undefined才会用到;
2. 并且我们不推荐直接给一个变量赋值为undefined，所以很少主动来使用;
3. null值非常常用，当一个变量准备保存一个对象，但是这个对象不确定时，我们可以先赋值为null;
十一、数据类型的转换
字符串String的转换
1. +""
2. 调用String()函数
3. 调用toString()方法
数字类型Number的转换
1. * 1
2. 使用Number()函数
布尔类型Boolean的转换
1. 0、空字符串、null、undefined、NaN将变为false
2. 其他值为true
3. "0" 是true
JS基础运算符
一、取余 % 和 求幂
取余运算符: % (a % b , a整除b的余数)
求幂运算符: ** (a ** b , a的b次幂)
二、赋值运算符
x = value , 将值value写入x然后返回x
链式赋值
a = b = c = 2 + 2
从右到左运算, 对最右表达式2+2求值, 赋值给左边的变量: c、b、a, 最后所有变量共享一个值
三、原地修改
+= 加后赋值
四、自增自减
++
--
如果我们想要对变量进行自增操作，并且 需要立刻使用自增后的值，那么我们需要使用前置形式
前置形式返回一个新的值，但后置返回原来的值
五、比较运算符
== 相等
!= 不等于
>
六、=== 和 == 的区别
普通的相等性检查 == 存在一个问题, 它不能区分出 0 和 false, 或者空字符串和 false 这类运算
严格相等运算符 === 在进行比较时不会做任何类型转换
不相等 != 和 严格不相等 !== 类似
JS分支语句
一、if分支语句
单分支语句
if
多分支语句
if..else..
多分支结构
if.. else if.. else..
二、三元运算符
var result = condition ? value1 : value2
三、逻辑运算符
&& 与
|| 或
! 非
四、switch语句
switch(变量) {
case 常量1:
break
case 常量2:
break
default:
}
JS循环语句
一、while循环
while(循环条件) {
}
二、do..while循环
do {
} while(循环条件)
三、for循环
for (let i = 0; i < 3; i++) {
alert(i)
}
四、循环控制
break: 直接跳出循环, 循环结束
continue: 跳过本次循环次, 执行下一次循环体
JS函数
一、声明和调用函数
function foo() {
}
foo()
二、函数的参数
形参: 定义函数时, 用来接受参数, 在函数体内作为变量使用
实参: 调用函数时, 把数据传递给函数内部
三、函数的返回值
使用 return 关键词返回结果
一旦在函数中执行 return, 那么函数会终止
如果函数中没有使用 return 语句, 那么函数默认返回: undefined
如果函数使用 return 语句, 但是 return 后面没有任何值, 返回: undefined
四、递归
函数调用自己叫做递归
递归必须有结束条件, 否则无限调用, 造成报错
五、函数表达式
var foo = function() {
}
六、函数声明 VS 函数表达式
语法不同
1. 函数声明: 在主代码流中声明为单独的语句的函数
2. 函数表达式: 在一个表达式中或另一个语法结构中创建的函数
JS创建函数的时机不同
1. 函数表达式是在代码执行到达时被创建, 并且仅从那一刻起可用
2. 在函数声明被定义之前, 它就可以被调用
七、回调函数
函数可以作为一个值相互赋值
function foo(fn) {
fn()
}
function bar() {
console.log("我是bar函数被调用")
}
foo(bar)
八、立即执行函数
(function foo() {
})()
JS面向对象
一、创建对象
对象字面量: {}
new Object+动态添加属性
new 其他类
二、操作对象
访问对象的属性
修改对象的属性
添加对象的属性
删除对象的属性
delete info.age
三、对象的遍历
普通for循环
var infokeys = Object.keys(info)
for (var i = 0; i < infokeys.length; i++) {
var key = infokeys[i]
var value = info[key]
console.log(`key: ${key}, value: ${value}`)
}
for in遍历
for (var key in info) {
var value = info[key]
console.log(`key: ${key}, value: ${value}`)
}
四、创建对象的方案-工厂函数
function createPerson(name, age, height, address) {
var p = new Object
p.name = name
p.age = age
p.height = height
p.address = address
p.eating = function() {
console.log(this.name + "在吃东西")
}
p.running = function() {
console.log(this.name + "在跑步")
}
return p
}
var p1 = createPerson("张三", 18, 188, "北京市")
五、创建对象的方案-构造函数(类)
function Person(name, age, height, address) {
this.name = name
this.age = age
this.height = height
this.eating = function() {
console.log(this.name + "在吃东西")
}
this.running = function() {
console.log(this.name + "在跑步")
}
}
JS常见内置类
一、Number类的补充
Number实例方法补充
1. toString(base) , 将数字转成字符串, 并且按照base进制进行转化
base 的范围可以从 2 到 36 , 默认情况下是 10
注意: 如果是直接对一个数字操作, 需要使用..运算符
2. toFixed(digits) , 格式化一个数字, 保留digits位小数
digits的范围是 0 到 20(包含) 之间
Number类方法补充
1. Number.parseInt(string[,radix]) , 将字符串解析成整数, 也有对应的全局方法parseInt
2. Number.parseFloat(string) , 将字符串解析成浮点数, 也有对应的全局方法parseFloat
二、Math对象
Math常见的属性
1. Math.PI: 圆周率
Math常见的方法
1. Math.floor: 向下舍入取整
2. Math.ceil: 向上舍入取整
3. Math.round: 四舍五入取整
4. Math.random: 生成0~1的随机数(包含0不包含1)
5. Math.pow(x, y): 返回x的y次幂
三、String类的补充-基本使用
String常见的属性
1. length
访问字符串的字符
1. 通过字符串的索引 str[0]
2. 通过 str.charAt(pos) 方法
3. 它们的区别是索引的方式没有找到会返回undefined, 而charAt没有找到会返回空字符串
四、String类的补充-修改字符串
字符串的不可变性
字符串在定义后是不可修改的
我们在改变字符串的操作中, 都是生成一个新的字符串
1. toLowerCase(): 将所有的字符转成小写
2. toUpperCase(): 将所有的字符转成大写
五、String类的补充-查找字符串
查找字符串位置
str.indexOf(search, fromIndex)
str.indexOf("name", 18)
1. 从fromIndex开始, 查找searchValue的索引
2. 如果没有找到, 那么返回-1
3. 有一个相似的方法, lastIndexOf, 从最后开始查找
是否包含字符串
str.includes(searchString, position)
str.includes("abc")
1. 从position位置开始查找searchString, 根据情况返回true/false
六、String类的补充-开头和结尾
以xxx开头
str.startsWith(searchString, position)
str.startsWith("Hello")
1. 从position位置开始, 判断字符串是否以searchString开头
以xxx结尾
str.endsWith(searchString, length)
str.endsWith("Hello")
1. 在length长度内, 判断字符串是否以searchString结尾
替换字符串
str.replace(regexp|substr, newSubStr|function)
str.replace("abc", "cba")
1. 查找对应的字符串, 并且使用新的字符串进行替代
2. 也可以传入一个正则表达式来查找, 也可以传入一个函数来替换
七、String类的补充-获取子字符串
slice(start, end) 从start到end, 允许参数为负
substring(start, end) 从start到end, 负值代表0
substrate(start, length) 从tart开始获取长为length的字符串, 允许start为负
八、String类的补充-其他方法
拼接字符串
str.concat(str2)
删除首位空格
str.trim()
字符串分割
str.split(separator, limit)
1. separator: 以什么字符串进行分割, 也可以是一个正则表达式
2. limit: 限制返回片段的数量
数组
一、创建数组
1. var arr1 = [a, b, c]
2. var arr2 = new Array(a, b, c)
二、数组的添加、删除方法(一)
在数组的尾端添加或删除元素
1. arr.push() 在末端添加元素
2. arr.pop() 在末端取出一个元素
在数组的首端添加或删除元素
1. arr.shif() 取出首端的一个元素, 整个数组元素向前移动
2. arr.unshift("abc") 在首端添加元素, 整个数组元素向后移动
push/pop方法运行比shift/unshift方法快
三、数组的添加、删除方法(二)
arr.splice 方法可以说是处理数组的利器, 它可以做所有事情: 添加、删除和替换元素
arr.splice(start, deleteCount, "item1", "item2", ...)
1. 从start开始, 处理数组中的元素
2. deleteCount: 要删除元素的个数, 如果为0或者负数表示不删除
3. item1、item2...: 需要添加的元素
这个方法会修改原数组
四、数组的遍历
普通for遍历
for (var i = 0; i < arr.length; i++) {
console.log(arr[i])
}
for..in 遍历,获取到索引值
for (var index in arr) {
console.log(arr[index])
}
for..of 遍历, 获取到每一个元素
for (var item of arr) {
console.log(item)
}
五、数组方法-slice、cancat、join
1. arr.slice(begin, end) 用于对数组进行截取, 包含bigin不包含end
2. var newArr = arr.concat(["abc", "cba"], "aaa") 创建一个新数组, 其中包含来自于其他数组和其他项的值
3. arr.join("separator") 将所有元素用separator连接成一个字符串并返回
六、数组方法-查找元素
1. arr.indexOf() 查找某个元素的索引
2. arr.includes() 判断数组是否包含某个元素
3. find和findIndex 直接查找元素或者元素的索引
七、数组的排序-sort、reverse
1. var newArr = arr.sort(function(a, b){})
如果function(a, b)小于0, 那么a排在b前面
如果function(a, b)大于0, 那么b排在a前面
2. reverse() 将数组中的元素位置颠倒, 返回该数组
八、数组的其他高阶方法
1. arr.forEach() 遍历数组
2. arr.map() 创建新数组, 这个新数组由原数组中的每一个元素都调用一次提供的函数后返回值组成
3. arr.filter() 创建新数组, 新数组中只包含每个元素调用函数返回为true的元素
4. arr.reduce() 计算数组中元素的总和
Date对象
一、创建Date对象
var date1 = new Date()
var date2 = new Date(1000)
二、Date获取信息的方法
1. getFullYear():获取年份(4 位数); getMonth():获取月份，从 0 到 11;
2. getDate():获取当月的具体日期，从 1 到 31(方法名字有点迷);
3. getHours():获取小时;
4. getMinutes():获取分钟;
5. getSeconds():获取秒钟;
6. getMilliseconds():获取毫秒
三、Date设置信息的方法
1. setFullYear(year, [month], [date])
2. setMonth(month, [date])
3. setDate(date)
4. setHours(hour, [min], [sec], [ms])
5. setMinutes(min, [sec], [ms])
6. setSeconds(sec, [ms])
7. setMilliseconds(ms)
8. setTime(milliseconds)
