第三章:JavaScript基础

JavaScript引入方式

直接在script标签内些js代码

<script>
  let name = 'liu';
</script>

外部引入js文件

<script src="myscript.js"></script>

js基础语法

变量声明

在js中,首次定义一个变量名的时候需要用关键字声明

  1. 关键字var
    var name='jason'
  2. es6推出的新语法 let
    let name='jason'
    如果你的编辑器支持的版本是5.1那么无法使用let
    如果是6.0则向下兼容var let
  3. let与var的区别
    var在局部定义也会影响到全局
    let在局部定义只会在局部生效

变量名的命名规则

  1. 变量名只能是 数字、字母、下划线、$
  2. 变量名命名规范(不遵循也可以)
  • js中推荐驼峰式命名
    userName
    dataOfDb
  • Python推荐下划线的方式
    user_name
    data_of_db
  1. 不能用关键字作为变量名

常量

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对象方法

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()

js排序详解

  • 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
imageimage

对象(Object)

js对象详情

对象的定义

在 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;
posted @   7七柒  阅读(37)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 阿里最新开源QwQ-32B,效果媲美deepseek-r1满血版,部署成本又又又降低了!
· AI编程工具终极对决:字节Trae VS Cursor,谁才是开发者新宠?
· 开源Multi-agent AI智能体框架aevatar.ai,欢迎大家贡献代码
· Manus重磅发布:全球首款通用AI代理技术深度解析与实战指南
· 被坑几百块钱后,我竟然真的恢复了删除的微信聊天记录!
点击右上角即可分享
微信分享提示