第三章:JavaScript基础
JavaScript引入方式
直接在script标签内些js代码
<script>
let name = 'liu';
</script>
外部引入js文件
<script src="myscript.js"></script>
js基础语法
变量声明
在js中,首次定义一个变量名的时候需要用关键字声明
- 关键字var
var name='jason' - es6推出的新语法 let
let name='jason'
如果你的编辑器支持的版本是5.1那么无法使用let
如果是6.0则向下兼容var let - let与var的区别
var在局部定义也会影响到全局
let在局部定义只会在局部生效
变量名的命名规则
- 变量名只能是 数字、字母、下划线、$
- 变量名命名规范(不遵循也可以)
- js中推荐驼峰式命名
userName
dataOfDb- Python推荐下划线的方式
user_name
data_of_db
- 不能用关键字作为变量名
常量
ES6新增const用来声明常量。一旦声明,其值就不能改变。
const PI = 3.14;
数据类型
js是一门动态类型语言
js也是一门面向对象的语言,即一切皆对象
js/python是一门拥有动态类型的语言
let name = 'liu';
let name = 123;
let name
数值类型(Number)
js不区分int和float,统一叫Number
let a = 12.34;
let b = 20;
let c = 123e5; // 12300000
let d = 123e-5; // 0.00123
还有一种NaN,表示不是一个数字(Not a Number)
parseInt("123") // 返回123
parseInt("ABC") // 返回NaN,NaN属性是代表非数字值的特殊值。该属性用于指示某个值不是数字。
parseFloat("123.456") // 返回123.456
数值属性
属性 | 描述 |
---|---|
MAX_VALUE | 返回 JavaScript 中可能的最大数。 |
MIN_VALUE | 返回 JavaScript 中可能的最小数。 |
NEGATIVE_INFINITY | 表示负的无穷大(溢出返回)。 |
NaN | 表示非数字值("Not-a-Number")。 |
POSITIVE_INFINITY | 表示无穷大(溢出返回)。 |
数值类型可用的基本方法
方法 | 描述 |
---|---|
toString() | 把数字转换为字符串,使用指定的基数。 |
toLocaleString() | 把数字转换为字符串,使用本地数字格式顺序。 |
toFixed() | 把数字转换为字符串,括号内指定小数的位数。 |
toExponential() | 把对象的值转换为指数计数法。 |
toPrecision() | 把数字格式化为指定的长度。 |
valueOf() | 返回一个 Number 对象的基本数字值(以数值返回数值) |
Number() | 返回数字,由其参数转换而来 |
parseFloat() | 解析其参数并返回浮点数 |
parseInt() | 解析其参数并返回整数 |
下面只写出常用的方法
toString()方法
toString() 以字符串返回数值。
所有数字方法可用于任意类型的数字(字面量、变量或表达式):
var x = 123;
x.toString(); // 从变量 x 返回 字符串123
(123).toString(); // 从文本 数值123 返回 字符串123
(100 + 23).toString(); // 从表达式 100 + 23 返回 字符串123
toFixed() 方法
toFixed() 返回字符串值,括号内指定小数的位数:
var x = 9.656;
x.toFixed(0); // 返回 10
x.toFixed(2); // 返回 9.66
x.toFixed(4); // 返回 9.6560
x.toFixed(6); // 返回 9.656000
toExponential() 方法
toExponential() 返回字符串值,它包含已被四舍五入并使用指数计数法的数字。
参数定义小数点后的字符数:
var x = 9.656;
x.toExponential(2); // 返回 9.66e+0
x.toExponential(4); // 返回 9.6560e+0
x.toExponential(6); // 返回 9.656000e+0
该参数是可选的。如果您没有设置它,JavaScript 不会对数字进行舍入。
toPrecision() 方法
toPrecision() 返回字符串值,它包含了指定长度的数字:
var x = 9.656;
x.toPrecision(); // 返回 9.656
x.toPrecision(2); // 返回 9.7
x.toPrecision(4); // 返回 9.656
x.toPrecision(6); // 返回 9.65600
valueOf() 方法
valueOf() 以数值返回数值:
var x = 123;
x.valueOf(); // 从变量 x 返回 123
(123).valueOf(); // 从文本 123 返回 123
(100 + 23).valueOf(); // 从表达式 100 + 23 返回 123
以下是JavaScript全局可用方法(所有的数据类型都可以使用)
Number()方法
Number()方法返回数字,由其参数转换而来。
x = true;
Number(x); // 返回 1
x = false;
Number(x); // 返回 0
x = new Date();
Number(x); // 返回 1404568027739
x = "10"
Number(x); // 返回 10
x = "10 20"
Number(x); // 返回 NaN
Number() 还可以把日期转换为数字:
// 返回 1970 年 1 月 1 日至今的毫秒数。
Number(new Date("2019-04-15")); // 返回 1506729600000
parseInt() 方法
parseInt()返回整型数值int:
parseInt("10"); // 返回 10
parseInt("10.33"); // 返回 10
parseInt("10 20 30"); // 返回 10
parseInt("10 years"); // 返回 10
parseInt("years 10"); // 返回 NaN
如果无法转换为数值,则返回 NaN (Not a Number)。
parseFloat() 方法
parseFloat()返回浮点型数值float
parseFloat("10"); // 返回 10
parseFloat("10.33"); // 返回 10.33
parseFloat("10 20 30"); // 返回 10
parseFloat("10 years"); // 返回 10
parseFloat("years 10"); // 返回 NaN
如果无法转换为数值,则返回 NaN (Not a Number)。
字符串类型(String)
用单引号或者双引号包起来的内容
let name = 'liu'
let name = "liu"
特殊字符
代码 | 结果 | 描述 |
---|---|---|
' | ' | 单引号 |
" | " | 双引号 |
\ | \ | 反斜杠 |
String对象属性
属性 | 描述 |
---|---|
constructor | 对创建该对象的函数的引用 |
length | 字符串的长度 |
prototype | 允许您向对象添加属性和方法 |
String对象方法
方法 | 描述 |
---|---|
anchor() | 创建 HTML 锚 |
big() | 用大号字体显示字符串 |
blink() | 显示闪动字符串 |
bold() | 使用粗体显示字符串 |
charAt() | 返回在指定位置的字符 |
charCodeAt() | 返回在指定的位置的字符的 Unicode 编码 |
concat() | 连接字符串 |
fixed() | 以打字机文本显示字符串 |
fontcolor() | 使用指定的颜色来显示字符串 |
fontsize() | 使用指定的尺寸来显示字符串 |
fromCharCode() | 从字符编码创建一个字符串 |
indexOf() | 检索字符串 |
italics() | 使用斜体显示字符串 |
lastIndexOf() | 从后向前搜索字符串 |
link() | 将字符串显示为链接 |
localeCompare() | 用本地特定的顺序来比较两个字符串 |
match() | 找到一个或多个正则表达式的匹配 |
replace() | 替换与正则表达式匹配的子串 |
search() | 检索与正则表达式相匹配的值 |
slice() | 提取字符串的片断,并在新的字符串中返回被提取的部分 |
small() | 使用小字号来显示字符串 |
split() | 把字符串分割为字符串数组 |
strike() | 使用删除线来显示字符串 |
sub() | 把字符串显示为下标 |
substr() | 从起始索引号提取字符串中指定数目的字符 |
substring() | 提取字符串中两个指定的索引号之间的字符 |
sup() | 把字符串显示为上标 |
toLocaleLowerCase() | 把字符串转换为小写 |
toLocaleUpperCase() | 把字符串转换为大写 |
toLowerCase() | 把字符串转换为小写 |
toUpperCase() | 把字符串转换为大写 |
toSource() | 代表对象的源代码 |
toString() | 返回字符串 |
valueOf() | 返回某个字符串对象的原始值 |
字符串类型常用方法
方法 | 描述 |
---|---|
.length | 返回长度 |
.trim() | 移除空白 |
.trimLeft() | 移除左边的空白 |
.trimRight() | 移除右边的空白 |
.charAt(n) | 返回第n个字符 |
.concat(value, ...) | 拼接 |
.indexOf(searchvalue,fromindex) | 子序列位置 |
.substring(from, to) | 根据索引获取子序列(功能与下面这个相似,不推荐使用这个方法) |
.slice(start, end) | 切片 |
.toLowerCase() | 小写 |
.toUpperCase() | 大写 |
.split(delimiter, limit) | 分割 |
length方法
获取字符串的长度
let name = 'liuhousheng'
name.length // 10
trim()、trimLeft()、trimRight()方法
移除空白、移除左边的空白、移除右边的空白
只能移除空白,不能像Python一样移除指定的字符
let a = ' liu ';
a.trim(); // 'liu'
a.trimLeft(); // 'liu '
a.trimRight(); // ' liu'
charAt(n)方法
返回字符串的第n个字符
let a = 'liujie'
a.charAt(2) // 'u'
concat(value,...,...)
拼接字符串,不过一般不使用该方法,用“+”更方便简洁
let a = 'liu'
let b = 'jie'
a.concat(b) // 'liujie'
a + b // 'liujie'
indexOf(searchvalue,fromindex)方法
查找一个小字符串在大字符串中的位置
说明
该方法将从头到尾地检索字符串 stringObject,看它是否含有子串 searchvalue。开始检索的位置在字符串的 fromindex 处或字符串的开头(没有指定 fromindex 时)。如果找到一个 searchvalue,则返回 searchvalue 的第一次出现的位置。stringObject 中的字符位置是从 0 开始的。
- searchvalue:必需。规定需检索的字符串值。
- fromindex:可选的整数参数。规定在字符串中开始检索的位置。它的合法取值是 0 到 stringObject.length - 1。如省略该参数,则将从字符串的首字符开始检索。
let a = 'liu jie dsb'
a.indexOf('i',2) // 5
slice(start, end)方法
切片,顾头不顾尾
一个新的字符串。包括字符串 stringObject 从 start 开始(包括 start)到 end 结束(不包括 end)为止的所有字符。
- start 要抽取的片断的起始下标。如果是负数,则该参数规定的是从字符串的尾部开始算起的位置。也就是说,-1 指字符串的最后一个字符,-2 指倒数第二个字符,以此类推。
- end 紧接着要抽取的片段的结尾的下标。若未指定此参数,则要提取的子串包括 start 到原字符串结尾的字符串。如果该参数是负数,那么它规定的是从字符串的尾部开始算起的位置。
let name = 'liujie';
name.slice(0,-1); // 'liuji'
toLowerCase()、toUpperCase()方法
把字符串转为小写、大写
var name = 'egonDSB123';
name.toLowerCase(); // 'egondsb123'
name.toUpperCase(); // 'EGONDSB123'
split(delimiter, limit)方法
把字符串用某种分割符分割成字符串数组
- delimiter:必需。字符串或正则表达式,从该参数指定的地方分割 stringObject。
- limit:可选。该参数可指定返回的数组的最大长度。如果设置了该参数,返回的子串不会多于这个参数指定的数组。如果没有设置该参数,整个字符串都会被分割,不考虑它的长度。
var name = 'tank|aaa|19';
name.split('|');
(3) ['tank', 'aaa', '19']
name.split('|',2); // 第二个参数不是限制切割字符的个数,而是获取切割之后的元素个数,与Python不一样
(2) ['tank', 'aaa']
注意:
-
如果把空字符串 ("") 用作 separator,那么 stringObject 中的每个字符之间都会被分割。
-
String.split() 执行的操作与 Array.join 执行的操作是相反的。
模板字符串
要定义多行文本时,可以使用模板字符串
let text = `
我是刘杰的爸爸,
'可以使用单引号'
"可以使用双引号"
`
格式化字符串
使用${}就可以实现变量格式化操作
变量:
let name = 'liujie'
let age = 18
let text = `my name is ${name},age is ${age}` // my name is liujie,age is 18
表达式:
let price = 10;
let VAT = 0.25;
let total = `Total: ${(price * (1 + VAT)).toFixed(2)}`;
数组类型(Array)
与Python中的列表相似(list)
他可以存放多个值,用中括号括起来
- 在数组中可以几乎放任何数据,如字符串、数字、数组、函数等
function func1(){console.log('一个函数')}
let list = ['value',123,[1,2,3],func1]
- 空格和折行并不重要。可横跨多行:
function func1(){console.log('一个函数')}
let list = [
'value',
123,
[1,2,3],
func1
]
- 数组的索引是从0开始的
访问数组中的值
let list = ['value',123,[1,2,3]]
list[0] // 'value'
list[1] // 123
list[2] // [1,2,3]
数组也是一种特殊的对象
使用typeof方法,返回的值是object
数组所有可用的属性
属性 | 描述 |
---|---|
constructor | 返回创建 Array 对象原型的函数。 |
length | 设置或返回数组中元素的数量 |
prototype | 允许您向数组添加属性和方法 |
数组所有可用的方法
方法 | 描述 |
---|---|
concat() | 连接两个或多个数组,并返回已连接数组的副本。 |
copyWithin() | 将数组中的数组元素复制到指定位置或从指定位置复制。 |
entries() | 返回键/值对数组迭代对象。 |
every() | 检查数组中的每个元素是否通过测试。 |
fill() | 用静态值填充数组中的元素。 |
filter() | 使用数组中通过测试的每个元素创建新数组。 |
find() | 返回数组中第一个通过测试的元素的值。 |
findIndex() | 返回数组中通过测试的第一个元素的索引。 |
forEach() | 为每个数组元素调用函数。 |
from() | 从对象创建数组。 |
includes() | 检查数组是否包含指定的元素。 |
indexOf() | 在数组中搜索元素并返回其位置。 |
isArray() | 检查对象是否为数组。 |
join() | 将数组的所有元素连接成一个字符串。 |
keys() | 返回 Array Iteration 对象,包含原始数组的键. |
lastIndexOf() | 在数组中搜索元素,从末尾开始,并返回其位置 |
map() | 使用为每个数组元素调用函数的结果创建新数组。 |
pop() | 删除数组的最后一个元素,并返回该元素。 |
push() | 将新元素添加到数组的末尾,并返回新的长度。 |
reduce() | 将数组的值减为单个值(从左到右)。 |
reduceRight() | 将数组的值减为单个值(从右到左)。 |
reverse() | 反转数组中元素的顺序。 |
shift() | 删除数组的第一个元素,并返回该元素。 |
slice() | 选择数组的一部分,并返回新数组。 |
some() | 检查数组中的任何元素是否通过测试。 |
sort() | 对数组的元素进行排序。 |
splice() | 从数组中添加/删除元素。 |
toString() | 将数组转换为字符串,并返回结果。 |
unshift() | 将新元素添加到数组的开头,并返回新的长度。 |
valueOf() | 返回数组的原始值。 |
Process finished with exit code 0
数组常用的的方法
方法 | 描述 |
---|---|
.length | 数组的大小 |
.push(value) | 尾部追加元素 |
.pop() | 删除尾部的元素并返回 |
.unshift(value) | 头部插入元素 |
.shift() | 头部移除元素 |
.slice(start, end) | 切片 |
.reverse() | 反转 |
.join(separator) | 将数组元素连接成字符串 |
.concat(val, ...) | 连接数组 |
.sort() | 排序 |
.forEach() | 将数组的每个元素传递给回调函数 |
.splice() | 删除元素,并向数组添加新元素。 |
.map() | 返回一个数组元素调用函数处理后的值的新数组 |
length
var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.length; // fruits 的长度是 4
push(value)
尾部追加元素
var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.push("Lemon"); // 向 fruits 添加一个新元素 (Lemon)
pop()
删除尾部元素
var a = [1,2,3];
a.pop // 3
a // [1,2]
unshift(value)
头部添加元素
var a = [1,2,3];
a.unshift(0)
a // [0,1,2,3]
shift
移除头部元素
var a = [1,2,3];
a.shift()
a // [,2,3]
slice(start, end)
切片,顾头不顾尾
slice() 可接受两个参数,比如 (1, 3)。
该方法会从开始参数选取元素,直到结束参数(不包括)为止。
var a = [1,2,3];
a.slice(0,2) // [1,2]
如果结束参数被省略,则 slice() 会切出数组的剩余部分。
var a = [1,2,3];
a.slice(1) // [2,3]
reverse()
反转数组,颠倒数组的排列顺序
var a = [1,2,3];
a.reverse() // [3,2,1]
join(separator)
拼接数组成为一个字符串
var a = [1,2,3];
a.join('|') // ['1|2|3']
separator:可选。要使用的分隔符。如果省略,元素用逗号分隔
var a = [1,2,3];
a.join() // ['1,2,3']
concat(value,...)
连接数组,推荐使用“+”
sort()
- sort() 方法对数组的项目进行排序。
- 排序顺序可以是按字母或数字,也可以是升序(向上)或降序(向下)。
- 默认情况下,sort() 方法将按字母和升序将值作为字符串进行排序。
- 这适用于字符串("Apple" 出现在 "Banana" 之前)。但是,如果数字按字符串排序,则 "25" 大于 "100" ,因为 "2" 大于 "1"。
- 正因为如此,sort() 方法在对数字进行排序时会产生不正确的结果。
- 您可以通过提供“比较函数”来解决此问题(请参阅下面的“参数值”)。
array.sort(compareFunction)
compareFunction:可选。定义替代排序顺序的函数。该函数应返回负值、零值或正值,具体取决于参数,例如:
function(a, b){return a-b}
sort() 方法比较两个值时,将值发送给比较函数,根据返回的(负、零、正)值对值进行排序。
举例:
比较 40 和 100 时,sort() 方法调用比较函数(40,100)。
该函数计算 40-100,并返回 -60(负值)。
sort 函数会将 40 排序为小于 100 的值。
forEach()
将数组的每个元素传递给回调函数
语法:
- array.forEach(function(currentValue, index, arr), thisValue)
参数 | 描述 |
---|---|
function(currentValue, index, arr) | 必需。为数组中的每个元素运行的函数 |
thisValue | 可选。要传递给函数以用作其 "this" 值的值。如果此参数为空,则值 "undefined" 将作为其 "this" 值传递。 |
函数参数 | 描述 |
---|---|
currentValue | 必需。当前元素的值。 |
index | 可选。当前元素的数组索引。 |
arr | 可选。当前元素所属的数组对象 |
var list = [111,222,333,444,555];
list.forEach(function(value){console.log(value)},list);
VM1041:1 111 // 一个参数就是数组里面每一个元素对象
VM1041:1 222
VM1041:1 333
VM1041:1 444
VM1041:1 555
list.forEach(function(value,index){console.log(value,index)},list);
VM1102:1 111 0 // 两个参数就是元素+元素索引
VM1102:1 222 1
VM1102:1 333 2
VM1102:1 444 3
VM1102:1 555 4
list.forEach(function(value,index,arr){console.log(value,index,arr)},list);
VM1144:1 111 0 (5) [111, 222, 333, 444, 555] // 三个参数就是元素+元素索引+元素的数据来源
VM1144:1 222 1 (5) [111, 222, 333, 444, 555]
VM1144:1 333 2 (5) [111, 222, 333, 444, 555]
VM1144:1 444 3 (5) [111, 222, 333, 444, 555]
VM1144:1 555 4 (5) [111, 222, 333, 444, 555]
list.forEach(function(value,index,arr,xxx){console.log(value,index,arr,xxx)},list);
VM1184:1 111 0 (5) [111, 222, 333, 444, 555] undefined // 最多三个参数,四个就undefined
VM1184:1 222 1 (5) [111, 222, 333, 444, 555] undefined
VM1184:1 333 2 (5) [111, 222, 333, 444, 555] undefined
VM1184:1 444 3 (5) [111, 222, 333, 444, 555] undefined
VM1184:1 555 4 (5) [111, 222, 333, 444, 555] undefined
splice()
splice() 方法向/从数组添加/删除项目,并返回删除的项目。
- 语法:array.splice(index, howmany, item1, ....., itemX)
参数 | 描述 |
---|---|
index | 必需。整数,指定在什么位置添加/删除项目,使用负值指定从数组末尾开始的位置。 |
howmany | 可选。要删除的项目数。如果设置为 0,则不会删除任何项目。 |
item1, ..., itemX | 可选。要添加到数组中的新项目。 |
实例
在位置 2,添加新项目,并删除 1 个项目:
let list = [1,2,3,4,5]
list.splice(2,1,999) // [1, 2, 999, 4, 5]
map()
map() 方法使用为每个数组元素调用函数的结果创建新数组。
map() 方法按顺序为数组中的每个元素调用一次提供的函数。
注释:map() 对没有值的数组元素不执行函数。
注释:map() 不会改变原始数组。
- 语法:array.map(function(currentValue, index, arr), thisValue)
参数 | 描述 |
---|---|
function(currentValue, index, arr) | 必需。为数组中的每个元素运行的函数 |
thisValue | 可选。要传递给函数以用作其 "this" 值的值。如果此参数为空,则值 "undefined" 将作为其 "this" 值传递。 |
函数参数 | 描述 |
---|---|
currentValue | 必需。当前元素的值。 |
index | 可选。当前元素的数组索引。 |
arr | 可选。当前元素所属的数组对象 |
var l = [111,222,333,444,555,666,777];
undefined
l.map(function(value){console.log(value)},l);
VM1745:1 111
VM1745:1 222
VM1745:1 333
VM1745:1 444
VM1745:1 555
VM1745:1 666
VM1745:1 777
(7) [undefined, undefined, undefined, undefined, undefined, undefined, undefined]
l.map(function(value,index){return value*2},l);
(7) [222, 444, 666, 888, 1110, 1332, 1554]
l.map(function(value,index,arr){return value*2},l);
(7) [222, 444, 666, 888, 1110, 1332, 1554]
布尔值(Boolean)
(空字符串)、0、null、undefined、NaN都是false。
var a = true;
var b = false;
unll和undefined的区别
- null表示值是空,一般在需要指定或清空一个变量时才会使用,如 name=null;
- undefined表示当声明一个变量但未初始化时,该变量的默认值是undefined。还有就是函数无明确的返回值时,返回的也是undefined。
null表示变量的值是空(null可以手动清空一个变量的值,使得该变量变为object类型,值为null),undefined则表示只声明了变量,但还没有赋值。
还不明白,上图吧!
null和undefined
对象(Object)
对象的定义
在 JavaScript 中,对象是王。如果您理解了对象,就理解了 JavaScript。
在 JavaScript 中,几乎“所有事物”都是对象。
- 布尔是对象(如果用 new 关键词定义)
- 数字是对象(如果用 new 关键词定义)
- 字符串是对象(如果用 new 关键词定义)
- 日期永远都是对象
- 算术永远都是对象
- 正则表达式永远都是对象
- 数组永远都是对象
- 函数永远都是对象
- 对象永远都是对象
所有 JavaScript 值,除了原始值,都是对象。
JavaScript 原始值
原始值指的是没有属性或方法的值。
原始数据类型指的是拥有原始值的数据。
JavaScript 定义了 5 种原始数据类型:
- string
- number
- boolean
- null
- undefined
原始值是一成不变的(它们是硬编码的,因此不能改变)。
假设 x = 3.14,您能够改变 x 的值。但是您无法改变 3.14 的值。
自定义对象
(个人还没有学这么深,有这些暂时够用,详情见上面网址)
类似于Python中的字典
- 第一种定义对象的方法:
// 一个个k:v键值对,每一个key在该对象中必须是独一无二的
let dic = {"name":"liu","age":18}
// 查看key对应的值的两种方法
dic["name"] // 'liu'
dic.name // 'liu'
- 第二种定义对象的方法,用到关键字new
let dic = new.Object()
dic.name = 'liu'
dic.age = 18
console.log(dic) // {name:"liu",age:18}
for循环对象循环的是key,不是value
for (variable in object) {
要执行的代码
}
var person = {fname:"Bill", lname:"Gates", age:62};
for (x in person) {
txt += person[x];
}
Date():日期对象
// 创建日期对象
let d = new Date()
let d = new Date();
Thu Jun 16 2022 07:59:35 GMT+0800 (中国标准时间)
// toLocaleString()方法
d.toLocaleString(); // 转换为人类可以看懂的时间
'2022/6/16 07:59:35'
// 可以自己手动输入时间
let d1 = new Date('2002/07/07 11:11:11');
d1.toLocaleString();
// new Date(year, month, day, hours, minutes, seconds, milliseconds)
let d2 = new Date(2002,07,07,11,11,11);
Wed Aug 07 2002 11:11:11 GMT+0800 (中国标准时间)
d2.toLocaleString(); // 如果用这种方式输入时间,要注意月份是从0开始的,0~11月
'2002/8/7 11:11:11'
时间对象的具体方法
let d3 = new Date()
- d3.getDate() # 获取日
- d3.getDay() # 获取星期
- d3.getMonth() # 获取月份(0~11)
- d3.getFullYear() # 获取完整的年份
- d3.getHours() # 获取小时
- d3.getMinutes() # 获取分钟
- d3.getSeconds() # 获取秒
- d3.getMilliseconds() # 获取毫秒
- d3.getTime() # 获取时间戳
JSON对象(序列化反序列化)
- JSON.stringify():序列化
- JSON.parse():反序列化
let j = {'name':'liuhousheng','age':18};
let res = JSON.stringify(j); // 序列化 '{"name":"liuhousheng","age":18}'
JSON.parse(res); // 反序列化 {name: 'liuhousheng', age: 18}
RegExp():正则对象
定义正则的两种方法
- 第一种定义正则的方法 有点麻烦
let reg1 = new RegExp('^[a-zA-Z][a-zA-Z0-9]{5,11}')
- 第二种
let reg2 = /^[a-zA-Z][a-zA-Z0-9]{5,11}/
RegExp 对象方法
方法 | 描述 |
---|---|
compile | 编译正则表达式。 |
exec | 检索字符串中指定的值。返回找到的值,并确定其位置。 |
test | 检索字符串中指定的值。返回 true 或 false。 |
test方法 |
// 定义正则对象
let reg2 = /^[a-zA-Z][a-zA-Z0-9]{5,11}/
// 匹配字符串的内容是否符合正则,符合放回true,不符合则放回false
reg2.test('egondsb') // true
支持正则表达式的 String 对象的方法
方法 | 描述 |
---|---|
search | 检索与正则表达式相匹配的值 |
match | 找到一个或多个正则表达式的匹配 |
replace | 替换与正则表达式匹配的子串 |
split | 把字符串分割为字符串数组 |
match方法 |
let sss = 'egondsb dsb dsb'
sss.match(/s/) # 只拿到一个就停止了
sss.match(/s/g) # 全局匹配 加一个g就表示全局匹配
let sss = 'egondsb dsb dsb'
sss.match(/s/);
['s', index: 5, input: 'egondsb dsb dsb', groups: undefined]
sss.match(/s/g);
(3) ['s', 's', 's']
正则需要注意的问题
- 问题一、全局问题
let reg3 = /^[a-zA-Z][a-zA-Z0-9]{5,11}/g
reg3.test('egondsb')
let reg3 = /^[a-zA-Z][a-zA-Z0-9]{5,11}/g
reg3.test('egondsb') // 全局模式有一个lastIndex属性
true
reg3.test('egondsb')
false
reg3.test('egondsb')
true
reg3.test('egondsb')
false
//当全局匹配结果为true后lastIndex属性停在了传入的字符串的最后面,在进行一次全局匹配的时候,就会从字符串的最后面开始匹配,结果就会为false,结果为false后,lastIndex属性就重新回到初始位置,在匹配就为true了
// lastIndex属性验证
reg3.lastIndex
0
reg3.test('egondsb');
true
reg3.lastIndex
7
reg3.test('egondsb');
false
- 问题二、匹配正则的时候传空值
let reg4 = /^[a-zA-Z][a-zA-Z0-9]{5,11}/
reg4.test()
reg4.test() # 什么也不传的时候默认传的是undefined
true
reg4.test()
true
// 验证
let reg5 = /undefined/
undefined
reg5.test();
true
reg5.test('jason');
false
Math对象
abs(x):返回数的绝对值
exp(s):返回e的指数
floor(x):对数进行下舍入
log(x):返回数的自然对数(底为e)
max(x,y):返回x和y中的最高值
min(x,y):返回x和y中的最低值
pow(x,y):返回x的y次幂
random():返回0-1之间的随机数
round(x):四舍五入最近的整数
sin(x):返回数的正弦
sqrt(x):返回数的平方根
tan(x):返回数的正切
运算符
算数运算符
+、-、*、/
i++; // 先赋值,在运算
++i; // 先运算,再赋值
var x = 10;
var res1 = x++;
var res2 = ++x;
res1;
10
res2;
12
比较运算符
弱等于,强等于,大于,小于,不等于
、=、>、<、!=
1 == '1' // 弱等于 内部自动转换成相同的数据类型
true
1 === '1' // 强等于 内部不做类型转换
false
1 != '1'
false
1 !== '1'
true
逻辑运算符
&&、||、!:与、或、非
&&:假前真后
只要&&前面是false,无论&&后面是true还是false,都返回&&前面的值
只要&&前面是true,无论&&后面是true还是false,都返回&&后面的值
true && true;
true
true && false;
false
false && true;
false
false && false;
false
||:真前假后
只要||前面是false,无论||后面是true还是false,都返回||后面的值
只要||前面是true,无论||后面是true还是false,都返回||前面的值
true || true;
true
true || false;
true
false || true;
true
false || false;
false
!:取反
赋值运算符
=、+=、-=、*=、/=...
流程控制
if判断
语法:
if(条件){
条件成立之后的运行的代码块
}else if(条件){
条件成立后运行的代码块
}esle{
代码块
}
let age = 18;
if(age<18){
console.log('年龄太小了,不合适')
}else if(age<24){
console.log('刚刚好')
}else{
console.log('年龄太大了')
}
switch语法
let num = 3
switch(num){
// case后面跟字符串也是可以的
case 0:
console.log('打牌')
// 如果不加break,匹配到后会一直执行下去,直到遇到break或者流程结束
break
case 1:
console.log('喝酒')
break
case 2:
console.log('上天')
break
case 3:
console.log('入地')
break
case 4:
console.log('打架')
break
// 没有匹配的条件时运行default下面的代码
default:
console.log('条件都没有匹配上,默认走执行的代码')
}
for循环
for(起始条件;循环条件;要进行的操作){
执行的代码
}
- for循环1-10
for(let i = 1;i<=10;i++){
console.log(i)
}
- for循环遍历数组
let list = ['liujie','琪琪','荷包',111]
for(let i = 0;i<list.length;i++){
console.log(list[i])
}
- for循环遍历对象
let dic = {'name':'liujie','age':18,'password':123456}
for(i in dic){
console.log(i,dic[i])
}
while循环
var i = 0;
while(i<100){
console.log(i);
i++;
};
三元运算符
语法格式:条件 ?条件成立取的值:不成立取的值
// 条件成立取问号后面的值,不成立取冒号后面的值
let res = 1>2 ?1:3
三元表达式不要写的过于复杂
函数
格式
function 函数名(形参1,形参2,形参3...)
无参函数
function func1(){
console.log('hello word')
}
func1() // 调用:加括号就可以调用
有参函数
function func2(a,b){
console.log(`传进来了${a}和${b}`)
}
func2(2,3) // 传进来了2和3
func2(1,2,3,4,5,6,7) // 参数传多了也没有关系,只会取需要的
func2(1) // 参数传少了也没关系,会用undefined顶替(传进来了2和undefined)
关键字arguments
function func2(a,b){
console.log(arguments) // 可以获取函数接收到的所有的参数
console.log(a,b)
}
function func2(a,b){
if(arguments.length<2){
console.log("传少了")
}else if(arguments.length>2){
consloe.log("传多了")
}else{
consloe.log('正常执行')
consloe.log(a,b)
}
}
函数的返回值
return
function func(){
return 666
}
- 多个返回值用逗号隔开只能拿到最后一个
function func(){
return 111,222,333
}
res = func();
res // 333
- 要拿到多个返回值要用数组或元组之类的返回
function func(){
return [111,222,333]
}
箭头函数
主要用来处理简单的业务逻辑
箭头左边是形参,箭头右边是返回值
hello = function() { return "Hello World!"; }
等价于
hello = () => { return "Hello World!"; }
如果函数只有一个语句,并且该语句返回一个值,则可以去掉括号和 return 关键字:
hello = () => "Hello World!";
等价于
var function hello(){ return "Hello World!" }
如果您有参数,则将它们传递到括号内:
hello = (val) => "Hello " + val;
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 阿里最新开源QwQ-32B,效果媲美deepseek-r1满血版,部署成本又又又降低了!
· AI编程工具终极对决:字节Trae VS Cursor,谁才是开发者新宠?
· 开源Multi-agent AI智能体框架aevatar.ai,欢迎大家贡献代码
· Manus重磅发布:全球首款通用AI代理技术深度解析与实战指南
· 被坑几百块钱后,我竟然真的恢复了删除的微信聊天记录!