当前位置: 首页 > article >正文

【前端三剑客】万字总结JavaScript

一、初识JavaScript

1.1 JavaScript 的作用

  • 表单动态校验(密码强度检测) ( JS 产生最初的目的 )
  • 网页特效
  • 服务端开发(Node.js)
  • 桌面程序(Electron)
  • App(Cordova)
  • 控制硬件-物联网(Ruff)
  • 游戏开发(cocos2d-js)

1.2 HTML/CSS/JS 的关系

49fb2db6748c4e6b8abdffc27f51e749.png

1.3 浏览器执行 JS 简介

浏览器分成两部分:渲染引擎和 JS 引擎

  • 渲染引擎:用来解析HTML与CSS,俗称内核,比如 chrome 浏览器的 blink ,老版本的 webkit
  • JS 引擎:也称为 JS 解释器。 用来读取网页中的JavaScript代码,对其处理后运行,比如 chrome 浏览器的 V8

浏览器本身并不会执行JS代码,而是通过内置 JavaScript 引擎(解释器) 来执行 JS 代码 。JS 引擎执行代码时逐行解释每一句源码(转换为机器语言),然后由计算机去执行,所以 JavaScript 语言归为脚本语言,会逐行解释执行

db0760d842e544a3a47438ebac70d004.png

1.4 JS 的组成

6cb776bad9044accb3c9ad15416293c6.png1.4.1ECMAScript

ECMAScript 是由ECMA 国际( 原欧洲计算机制造商协会)进行标准化的一门编程语言,这种语言在万维网上应用广泛,它往往被称为 JavaScript 或 JScript,但实际上后两者是 ECMAScript 语言的实现和扩展。fa85087a5dca4fdea4547d38ebc2f6b2.png

1.4.2 DOM ——文档对象模型

 文档对象模型(Document Object Model,简称DOM),是W3C组织推荐的处理可扩展标记语言的标准编程接口。通过 DOM 提供的接口可以对页面上的各种元素进行操作(大小、位置、颜色等)。

1.4.3BOM ——浏览器对象模型

BOM (Browser Object Model,简称BOM) 是指浏览器对象模型,它提供了独立于内容的、可以与浏览器窗口进行互动的对象结构。通过BOM可以操作浏览器窗口,比如弹出框、控制浏览器跳转、获取分辨率等。

1.5 JS 初体验

1.5.1行内式 JS

db2cc796af5f4992becccfab1db9f8c4.png

可以将单行或少量 JS 代码写在HTML标签的事件属性中(以 on 开头的属性),如:onclick
注意单双引号的使用:在HTML中我们推荐使用双引号, JS 中我们推荐使用单引号
可读性差, 在html中编写JS大量代码时,不方便阅读;
引号易错,引号多层嵌套匹配时,非常容易弄混;
特殊情况下使用

1.5.2内嵌 JS

9d2f42dcca7d465597b16ee93a14a9a3.png

  • 可以将多行JS代码写到 <script> 标签中
  • 内嵌 JS 是学习时常用的方式

3985c8ba97914fbcafb5766463c49dd8.png

1.5.3外部 JS文件

2141041dad6040e1ad62f6762e14d62e.png

  • 利于HTML页面代码结构化,把大段 JS代码独立到 HTML 页面之外,既美观,也方便文件级别的复用
  • 引用外部 JS文件的 script 标签中间不可以写代码
  • 适合于JS 代码量比较大的情况

二、JavaScript注释+输入输出

2.1 单行注释

为了提高代码的可读性,JS与CSS一样,也提供了注释功能。JS中的注释主要有两种,分别是单行注释和多行注释。

单行注释的注释方式如下:

31825e91b44741bba7100e7b612f38f5.png

2.2 多行注释

多行注释的注释方式如下:cdc6de324c6240d3ac8b0bd197806c56.png

/* */ 用来注释多行文字( 默认快捷键 alt + shift + a )
快捷键修改为: ctrl + shift + /
vscode  首选项按钮  键盘快捷方式  查找 原来的快捷键  修改为新的快捷键  回车确认

2.3 JavaScript 输入输出语句


0f35a5197d9042b095fafcc06f0e3e48.png 注意:alert() 主要用来显示消息给用户,console.log() 用来给程序员自己看运行时的消息。

2.3.1输入: prompt

弹出一个输入框:

<body><script>prompt("请输入您的姓名:")</script>
</body>

2.3.2输出: alert

弹出一个警示对话框, 输出结果:

ab6a226e0d674e60a662a29b43a1bcd2.png

2.3.3输出: console.log

在控制台打印一个日志(供程序员看):

33f0c3eaba6b4debb9129d0350af96d1.png

2.3.4重要概念: 日志

日志是程序员调试程序的重要手段

2.3.5重要概念: .

console 是一个 js 中的 "对象"

. 表示取对象中的某个属性或者方法. 可以直观理解成 "的"

console.log 就可以理解成: 使用 "控制台" 对象 "的" log 方法.

三、变量概述

3.1声明变量

0a1cdb069f1045058528f6a9b783ed8b.png

  • var 是一个 JS关键字,用来声明变量( variable 变量的意思 )。使用该关键字声明变量后,计算机会自动为变量分配内存空间。
  • age 是程序员定义的变量名,我们要通过变量名来访问内存中分配的空间。

3.2同时声明多个变量

同时声明多个变量时,只需要写一个 var, 多个变量名之间使用英文逗号隔开。c849024a42704158bfe3be625f54616f.png

3.3声明变量特殊情况

31afa43d03784d159b405ab7a62d23bb.png

3.4变量命名规范

  • 由字母(A-Za-z)、数字(0-9)、下划线(_)、美元符号( $ )组成,如:usrAge, num01, _name
  • 严格区分大小写。var app; 和 var App; 是两个变量
  • 不能 以数字开头。 18age 是错误的
  • 不能 是关键字、保留字。例如:var、for、while
  • 变量名必须有意义。 MMD BBD nl → age
  • 遵守驼峰命名法。首字母小写,后面单词的首字母需要大写。 myFirstName
  • 推荐翻译网站: 有道 爱词霸

四、数据类型

4.1变量的数据类型

JavaScript 是一种弱类型或者说动态语言。这意味着不用提前声明变量的类型,在程序运行过程中,类型会被自动确定。

在代码运行时,变量的数据类型是由 JS引擎 根据 = 右边变量值的数据类型来判断 的,运行完毕之后, 变量就确定了数据类型。JavaScript 拥有动态类型,同时也意味着相同的变量可用作不同的类型:

b986d0513f464eaf849c776d564674c1.png

4.2数据类型的分类

  • 简单数据类型 (Number,String,Boolean,Undefined,Null)
  • 复杂数据类型 (object)

4.2.1简单数据类型(基本数据类型)

984a59318adf4299ba839c59ac33ceaa.png

4.2.1.1数字型Number

4.2.1.1.1数字型三个特殊值

bc4059dfbbc1477fada78d2780c4c434.png

  • Infinity ,代表无穷大,大于任何数值
  • -Infinity ,代表无穷小,小于任何数值
  • NaN ,Not a number,代表一个非数值

4.2.1.1.2isNaN()

用来判断一个变量是否为非数字的类型,返回 true 或者 false。

2109ac7ec8bf45e792d303551a5d4706.png

var usrAge = 21;
var isOk = isNaN(userAge);
console.log(isNum); // false ,21 不是一个非数字
var usrName = "andy";
console.log(isNaN(userName)); // true ,"andy"是一个非数字

4.2.1.2字符串型 String

var strMsg = "我爱北京天安门~"; // 使用双引号表示字符串
var strMsg2 = '我爱吃猪蹄~'; // 使用单引号表示字符串
// 常见错误
var strMsg3 = 我爱大肘子; // 报错,没使用引号,会被认为是js代码,但js没有这些语法

因为 HTML 标签里面的属性使用的是双引号,JS 这里我们更推荐使用单引号。

4.2.1.2.1字符串转义符

91099f9064144df38db8ab9b51d4bb66.png

4.2.1.2.2字符串长度

字符串是由若干字符组成的,这些字符的数量就是字符串的长度。通过字符串的 length 属性可以获取整个字符串的长度。

var strMsg = "我是帅气多金的程序猿!";
alert(strMsg.length); // 显示 11

4.2.1.2.3字符串拼接

  • 多个字符串之间可以使用 + 进行拼接,其拼接方式为 字符串 + 任何类型 = 拼接之后的新字符串
  • 拼接前会把与字符串相加的任何类型转成字符串,再拼接成一个新的字符串
//1.1 字符串 "相加"
alert('hello' + ' ' + 'world'); // hello world
//1.2 数值字符串 "相加"
alert('100' + '100'); // 100100
//1.3 数值字符串 + 数值
alert('11' + 12); // 1112

4.2.1.3布尔型 Boolean

布尔类型有两个值:true 和 false ,其中 true 表示真(对),而 false 表示假(错)。
布尔型和数字型相加的时候, true 的值为 1 ,false 的值为 0。

console.log(true + 1); // 2
console.log(false + 1); // 1

4.2.1.4Undefined 和 Null

一个声明后没有被赋值的变量会有一个默认值 undefined ( 如果进行相连或者相加时,注意结果)

var variable;
console.log(variable); // undefined
console.log('你好' + variable); // 你好undefined
console.log(11 + variable); // NaN
console.log(true + variable); // NaN

一个声明变量给 null 值,里面存的值为空(学习对象时,我们继续研究null)

var vari = null;
console.log('你好' + vari); // 你好null
console.log(11 + vari); // 11
console.log(true + vari); // 1

4.2.1.5获取检测变量的数据类型

typeof 可用来获取检测变量的数据类型:

var num = 18;
console.log(typeof num) // 结果 number

82abfa955c514de29d5dbadc43566d38.png

4.2.2数据类型转换

使用表单、prompt 获取过来的数据默认是字符串类型的,此时就不能直接简单的进行加法运算,而需要转换变量的数据类型。通俗来说,就是把一种数据类型的变量转换成另外一种数据类型。

4.2.2.1转换为字符串

ced4bb40bbd04a6dacd24499776b1fc5.png

  •  toString() 和 String() 使用方式不一样。
  • 三种转换方式,我们更喜欢用第三种加号拼接字符串转换方式, 这一种方式也称之为隐式转换。

4.2.2.2转换为数字型(重点)

8e98b63253254f4c97eb40f2091dbb7e.png

  • 注意 parseInt 和 parseFloat 单词的大小写,这2个是重点
  • 隐式转换是我们在进行算数运算的时候,JS 自动转换了数据类型
// 1. 弹出输入框,输入出生年份,并存储在变量中
var year = prompt('请输入您的出生年份:'); // 用户输入
// 2. 用今年减去刚才输入的年份
var result = 2019 - year; // 程序内部处理
// 3. 弹出提示框
alert('您的年龄是:' + result + '岁'); // 输出结果// 1. 先弹出第一个输入框,提示用户输入第一个值
var num1 = prompt('请输入第一个值:');
// 2. 再弹出第二个框,提示用户输入第二个值
var num2 = prompt('请输入第二个值:');
// 3. 将输入的值转换为数字型后,把这两个值相加,并将结果赋给新的变量
var result = parseFloat(num1) + parseFloat(num2);
// 4. 弹出结果
alert('结果是:' + result);

4.2.2.4转换为布尔型

5dd458013db84711b9a776b31f96a0fe.png

  • 代表空、否定的值会被转换为 false ,如 ''、0、NaN、null、undefined
  • 其余值都会被转换为 true
console.log(Boolean('')); // false
console.log(Boolean(0)); // false
console.log(Boolean(NaN)); // false
console.log(Boolean(null)); // false
console.log(Boolean(undefined)); // false
console.log(Boolean('小白')); // true
console.log(Boolean(12)); // true

五、运算符(操作符)

5.1算数运算符

ee5f6fe4928641bbbb682f5742525f96.png

浮点数的精度问题

var result = 0.1 + 0.2; // 结果不是 0.3,而是:0.30000000000000004
console.log(0.07 * 100); // 结果不是 7, 而是:7.000000000000001

所以:不要直接判断两个浮点数是否相等 !

5.2递增和递减运算符

在 JavaScript 中,递增(++)和递减( -- )既可以放在变量前面,也可以放在变量后面。放在变量前面时,我
们可以称为前置递增(递减)运算符,放在变量后面时,我们可以称为后置递增(递减)运算符。
注意:递增和递减运算符必须和变量配合使用。

5.3比较运算符

ebd5305f083a469ba3b1122123a28342.png

注意:等号比较

8288d22d8ab143749cfbb927b3a0a88e.png

console.log(18 == '18');
console.log(18 === '18');

5.4逻辑运算符

a70f617bc54e4496b2be8d3335a4cf26.png

存在短路运算(逻辑中断)

5.5赋值运算符

0618d717af3f4ee483cb3c96ee0c38b9.png

var age = 10;
age += 5; // 相当于 age = age + 5;
age -= 5; // 相当于 age = age - 5;
age *= 10; // 相当于 age = age * 10;

5.6运算符优先级

01b2e4fa675044e499ccff8e82bbe150.png


六、流程控制

37d318d4003c43abb3cb67620bd4abf3.png

6.1顺序流程控制

6511362b123b4e4f8ff66ed80c3d2f2e.png

6.2分支流程控制

1fb25879196d483a88c6f4d33f7b0445.png

JS 语言提供了两种分支结构语句:if 语句、switch 语句

6.2.1 if语句

776d62b69b6540a0b0d32bf5fba13ccd.png

6.2.2三元表达式

表达式1 ? 表达式2 : 表达式3;如果表达式1为 true ,则返回表达式2的值,如果表达式1为 false,则返回表达式3的值
简单理解: 就类似于 if else (双分支) 的简写

6.3switch分支流程控制

switch( 表达式 ){
case value1:
// 表达式 等于 value1 时要执行的代码
break;
case value2:
// 表达式 等于 value2 时要执行的代码
break;
default:
// 表达式 不等于任何一个 value 时要执行的代码
}

七、循环语句

7.1while 循环

while (条件) {循环体;
}

7.2continue

跳过本次循环执行下一次循环。

var i = 1;while (i <= 5) {if (i == 3) {i++;continue;}console.log("我在吃第" + i + "个李子");i++;
}我在吃第1个李子
我在吃第2个李子
我在吃第4个李子
我在吃第5个李子

7.3break

结束整个循环.

var i = 1;while (i <= 5) {if (i == 3) {break;}console.log("我在吃第" + i + "个李子");i++;
}

7.4for 循环

for (表达式1; 表达式2; 表达式3) {循环体
}

八、数组

8.1数组的创建方式

  • 利用 new 创建数组
  • 利用数组字面量创建数组
var 数组名 = new Array() ;
var arr = new Array(); // 创建一个新的空数组
//1. 使用数组字面量方式创建空的数组
var 数组名 = [];
//2. 使用数组字面量方式创建带初始值的数组
var 数组名 = ['小白','小黑','大黄','瑞奇'];
  • 数组的字面量是方括号 [ ]
  • 声明数组并赋值称为数组的初始化
  • 这种字面量方式也是我们以后最多使用的方式

8.2数组元素的类型

数组中可以存放任意类型的数据,例如字符串,数字,布尔值等。

var arrStus = ['小白',12,true,28.9];

8.3数组的索引

数组可以通过索引来访问、设置、修改对应的数组元素,我们可以通过“数组名[索引]”的形式来获取数组中的元素。

// 定义数组
var arrStus = [1,2,3];
// 获取数组中的第2个元素
alert(arrStus[1]);

8.4遍历数组

var arr = ['red','green', 'blue'];
for(var i = 0; i < arr.length; i++){console.log(arrStus[i]);
}

8.4.1数组的长度

使用“数组名.length”可以访问数组元素的数量(数组长度)。

var arrStus = [1,2,3];
alert(arrStus.length); // 3
var arr = ['red', 'green', 'blue', 'pink'];
var str = '';
for (var i = 0; i < arr.length; i++) {
str += arr[i];
}
console.log(str);

8.5数组中新增元素

8.5.1通过修改 length 长度新增数组元素

  • 可以通过修改 length 长度来实现数组扩容的目的
  • length 属性是可读写的
var arr = ['red', 'green', 'blue', 'pink'];
arr.length = 7;
console.log(arr);
console.log(arr[4]);
console.log(arr[5]);
console.log(arr[6]);

其中索引号是 4,5,6 的空间没有给值,就是声明变量未给值,默认值就是 undefined。

4fa1ab03af2443b08905d5b28778fea2.png

8.5.2通过修改数组索引新增数组元素

  • 可以通过修改数组索引的方式追加数组元素
  • 不能直接给数组名赋值,否则会覆盖掉以前的数据
var arr = ['red', 'green', 'blue', 'pink'];
arr[4] = 'hotpink';
console.log(arr);

九、函数

9.1声明函数

// 声明函数
function 函数名() {//函数体代码
}
  • function 是声明函数的关键字,必须小写
  • 由于函数一般是为了实现某个功能才定义的, 所以通常我们将函数名命名为动词,比如 getSum

9.2调用函数

// 调用函数
函数名(); // 通过调用函数名来执行函数体代码
  • 调用的时候千万不要忘记添加小括号
  • 口诀:函数不调用,自己不执行。
案例:利用函数计算1-100之间的累加和:
/*
计算1-100之间值的函数
*/
// 声明函数
function getSum(){var sumNum = 0;// 准备一个变量,保存数字和for (var i = 1; i <= 100; i++) {sumNum += i;// 把每个数值 都累加 到变量中}
alert(sumNum);
}
// 调用函数
getSum();

9.3形参和实参

在声明函数时,可以在函数名称后面的小括号中添加一些参数,这些参数被称为形参,而在调用该函数时,同样也需要传递相应的参数,这些参数被称为实参

e144e5ba9beb4fcb9b805487a73966a1.png

参数的作用 : 函数内部某些值不能固定,我们可以通过参数在调用函数时传递不同的值进去。

function getSum(num1, num2) {console.log(num1 + num2);
}
getSum(1, 3); // 4
getSum(6, 5); // 11

9.3.1函数形参和实参个数不匹配问题

677c6c6f2b354a96addee7a1f574a32c.png

function sum(num1, num2) {console.log(num1 + num2);
}
sum(100, 200); // 形参和实参个数相等,输出正确结果
sum(100, 400, 500, 700); // 实参个数多于形参,只取到形参的个数
sum(200); // 实参个数少于形参,多的形参定义为undefined,结果为NaN

9.4return 语句

// 声明函数
function 函数名(){...return 需要返回的值;
}
// 调用函数
函数名(); // 此时调用函数就可以得到函数体内return 后面的值
  • 在使用 return 语句时,函数会停止执行,并返回指定的值
  • 如果函数没有 return ,返回的值是 undefined

9.5arguments的使用

当我们不确定有多少个参数传递的时候,可以用 arguments 来获取。在 JavaScript 中,arguments 实际上它是当前函数的一个内置对象。所有函数都内置了一个 arguments 对象,arguments 对象中存储了传递的所有实参

arguments展示形式是一个伪数组,因此可以进行遍历。伪数组具有以下特点:

  • 具有 length 属性
  • 按索引方式储存数据
  • 不具有数组的 push , pop 等方法

案例:利用函数求任意个数的最大值:

function maxValue() {var max = arguments[0];for (var i = 0; i < arguments.length; i++) {if (max < arguments[i]) {max = arguments[i];}}return max;}
console.log(maxValue(2, 4, 5, 9));
console.log(maxValue(12, 4, 9));

9.6函数的两种声明方式

9.6.1自定义函数方式(命名函数)

利用函数关键字 function 自定义函数方式。

// 声明定义方式
function fn() {...}
// 调用
fn();
  • 因为有名字,所以也被称为命名函数
  • 调用函数的代码既可以放到声明函数的前面,也可以放在声明函数的后面

9.6.2函数表达式方式(匿名函数)

// 这是函数表达式写法,匿名函数后面跟分号结束
var fn = function(){...};
// 调用的方式,函数调用必须写到函数体下面
fn();
  • 因为函数没有名字,所以也被称为匿名函数
  • 这个fn 里面存储的是一个函数
  • 函数表达式方式原理跟声明变量方式是一致的
  • 函数调用的代码必须写到函数体后面

十、作用域

10.1全局作用域

作用于所有代码执行的环境(整个 script 标签内部)或者一个独立的 js 文件

10.2局部作用域

作用于函数内的代码环境,就是局部作用域。 因为跟函数有关系,所以也称为函数作用域

10.3 JS没有块级作用域(ES6之前)

if(true){int num = 123;system.out.print(num); // 123
}
system.out.print(num); // 报错

10.4变量的作用域

10.4.1全局变量

  • 全局变量在代码的任何位置都可以使用
  • 全局作用域下 var 声明的变量 是全局变量
  • 特殊情况下,在函数内不使用 var 声明的变量也是全局变量(不建议使用)

10.4.2局部变量

  • 局部变量只能在该函数内部使用
  • 在函数内部 var 声明的变量是局部变量
  • 函数的形参实际上就是局部变量

10.4.3全局变量和局部变量的区别

  • 全局变量:在任何一个地方都可以使用,只有在浏览器关闭时才会被销毁,因此比较占内存
  • 局部变量:只在函数内部使用,当其所在的代码块被执行时,会被初始化;当代码块运行结束后,就会被销毁,因此更节省内存空间

10.5作用域链

只要是代码都一个作用域中,写在函数内部的局部作用域,未写在任何函数内部即在全局作用域中;如果函数中还有函数,那么在这个作用域中就又可以诞生一个作用域;根据在**[内部函数可以访问外部函数变量]**的这种机制,用链式查找决定哪些数据能被内部函数访问,就称作作用域链

function f1() {var num = 123;function f2() {console.log( num );}f2();
}
var num = 456;
f1();

1b11ca06104d477db9eda8535a88f9c2.png

10.6预解析

JavaScript 代码是由浏览器中的 JavaScript 解析器来执行的。JavaScript 解析器在运行 JavaScript 代码的时候分为两步:预解析和代码执行。

  1. 预解析:在当前作用域下, JS 代码执行之前,浏览器会默认把带有 var 和 function 声明的变量在内存中进行提前声明或者定义。
  2. 代码执行: 从上到下执行JS语句。

预解析会把变量和函数的声明在代码执行之前执行完成。

10.6.1变量预解析

console.log(num); // 结果是多少?
var num = 10; // ?结果:undefined
注意:**变量提升只提升声明,不提升赋值**

10.6.2函数预解析

函数提升: 函数的声明会被提升到当前作用域的最上面,但是不会调用函数。fn();
function fn() {console.log('打印');
}结果:控制台打印字符串 --- ”打印“
注意:函数声明代表函数整体,所以函数提升后,函数名代表整个函数,但是函数并没有被调用!
函数表达式创建函数,会执行变量提升,此时接收函数的变量名无法正确的调用:fn();
var fn = function() {
console.log('想不到吧');
}结果:报错提示 ”fn is not a function"
解释:该段代码执行之前,会做变量声明提升,fn在提升之后的值是undefined;而fn调用是在fn被赋值为函数体之
前,此时fn的值是undefined,所以无法正确调用

十一、对象

11.1对象的相关概念

在 JavaScript 中,对象是一组无序的相关属性和方法的集合,所有的事物都是对象,例如字符串、数值、数组、函数等。 对象是由属性和方法组成的。

对象中为每项数据设置了属性名称,可以访问数据更语义化,数据结构清晰,表意明显,方便开发者使用。使用对象记录上组数据为:

var obj = {"name":"张三疯","sex":"男","age":128,"height":154
}

11.2创建对象的三种方式

11.2.1利用字面量创建对象

var star = {name : 'pink',age : 18,sex : '男',sayHi : function(){alert('大家好啊~');}
};

11.2.1.1对象的使用

访问对象的属性:

console.log(star.name) // 调用名字属性
console.log(star['name']) // 调用名字属性

调用对象的方法:

star.sayHi(); // 调用 sayHi 方法,注意,一定不要忘记带后面的括号

11.2.2利用 new Object 创建对象

创建空对象:

var andy = new Obect();

给空对象添加属性和方法:

andy.name = 'pink';
andy.age = 18;
andy.sex = '男';
andy.sayHi = function(){
alert('大家好啊~');
}

11.2.3利用构造函数创建对象

构造函数:是一种特殊的函数,主要用来初始化对象,即为对象成员变量赋初始值,它总与 new
运算符一起使用。我们可以把对象中一些公共的属性和方法抽取出来,然后封装到这个函数里面。

function 构造函数名(形参1,形参2,形参3) {this.属性名1 = 参数1;this.属性名2 = 参数2;this.属性名3 = 参数3;this.方法名 = 函数体;
}var obj = new 构造函数名(实参1,实参2,实参3)

11.3遍历对象

for (var k in obj) {console.log(k); // 这里的 k 是属性名console.log(obj[k]); // 这里的 obj[k] 是属性值
}

十二、内置对象

  • JavaScript 中的对象分为3种:自定义对象 、内置对象、 浏览器对象
  • 前面两种对象是JS 基础 内容,属于 ECMAScript; 第三个浏览器对象属于我们JS 独有的, 我们JS API 讲解
  • 内置对象就是指 JS 语言自带的一些对象,这些对象供开发者使用,并提供了一些常用的或是最基本而必要的功能(属性和方法)内置对象最大的优点就是帮助我们快速开发
  • JavaScript 提供了多个内置对象:Math、 Date 、Array、String等

12.1MDN

查询文档:MDN: https://developer.mozilla.org/zh-CN/

12.2Math 对象

Math 对象不是构造函数,它具有数学常数和函数的属性和方法。跟数学相关的运算(求绝对值,取整、最大值等)可以使用 Math 中的成员。

17d630aa76174dc4b3b9c7cd18fec941.png

12.2.1随机数方法 random()

random() 方法可以随机返回一个小数,其取值范围是 [0,1),左闭右开 0 <= x < 1:

function getRandom(min, max) {return Math.floor(Math.random() * (max - min + 1)) + min;
}

12.3日期对象

12.3.1获取当前时间必须实例化

3e44c3531b1240f69adf5cace723feb2.png

Date() 构造函数的参数:

如果括号里面有时间,就返回参数里面的时间。例如日期格式字符串为‘2019-5-1’,可以写成new Date('2019-5-1') 或者 new Date('2019/5/1')

  • 如果Date()不写参数,就返回当前时间
  • 如果Date()里面写参数,就返回括号里面输入的时间

12.3.2日期格式化

aa2d5bb9a1a740a686a91893547c67e2.png

12.3.3获取日期的总的毫秒形式

// 实例化Date对象
var now = new Date();
// 1. 用于获取对象的原始值
console.log(date.valueOf())
console.log(date.getTime())
// 2. 简单写可以这么做
var now = + new Date();
// 3. HTML5中提供的方法,有兼容性问题
var now = Date.now();

12.3.4案例:倒计时效果

案例分析
①核心算法:输入的时间减去现在的时间就是剩余的时间,即倒计时 ,但是不能拿着时分秒相减,比如 05 分减去25分,结果会是负数的。
②用时间戳来做。用户输入时间总的毫秒数减去现在时间的总的毫秒数,得到的就是剩余时间的毫秒数。
③把剩余时间总的毫秒数转换为天、时、分、秒 (时间戳转换为时分秒)
转换公式如下:
 d = parseInt(总秒数/ 60/60 /24); // 计算天数
 h = parseInt(总秒数/ 60/60 %24) // 计算小时
 m = parseInt(总秒数 /60 %60 ); // 计算分数
 s = parseInt(总秒数%60); // 计算当前秒数

12.4数组对象

12.4.1检测是否为数组

  • instanceof 运算符,可以判断一个对象是否属于某种类型
  • Array.isArray()用于判断一个对象是否为数组,isArray() 是 HTML5 中提供的方法
var arr = [1, 23];
var obj = {};
console.log(arr instanceof Array); // true
console.log(obj instanceof Array); // false
console.log(Array.isArray(arr)); // true
console.log(Array.isArray(obj)); // false

12.4.2添加删除数组元素的方法

0a24d826377b4548aeaf8cc51e5824f3.png

12.4.3数组排序

79188264394c4f43a180449dbdbd6486.png

var arr = [1, 64, 9, 6];
arr.sort(function(a, b) {return b - a; // 降a序// return a - b; // 升序
});
console.log(arr);

12.4.4数组索引方法

b0c96d6a86454bdabb2023d979368659.png

12.4.5数组转换为字符串

632e3f63ced84dbcb3f38c749d080e6d.png

12.5字符串对象

12.5.1基本包装类型

为了方便操作基本数据类型,JavaScript 还提供了三个特殊的引用类型:String、Number和 Boolean。基本包装类型就是把简单数据类型包装成为复杂数据类型,这样基本数据类型就有了属性和方法。

// 下面代码有什么问题?
var str = 'andy';
console.log(str.length);

按道理基本数据类型是没有属性和方法的,而对象才有属性和方法,但上面代码却可以执行,这是因为 js 会把基本数据类型包装为复杂数据类型,其执行过程如下 :

// 1. 生成临时变量,把简单类型包装为复杂数据类型
var temp = new String('andy');
// 2. 赋值给我们声明的字符变量
str = temp;
// 3. 销毁临时变量
temp = null;

12.5.2字符串的不可变

指的是里面的值不可变,虽然看上去可以改变内容,但其实是地址变了,内存中新开辟了一个内存空间。

12.5.3根据字符返回位置

字符串所有的方法,都不会修改字符串本身(字符串是不可变的),操作完成会返回一个新的字符串。

5f26a7c24e3d4e248e1d649c2e596b50.png

12.5.4根据位置返回字符(重点)

de773fae49f74f5597e732ca27b7bf39.png

1ac8bb59d8144bcb97c9338eb3e349aa.png

12.5.5字符串操作方法(重点)

e89d26f6baf24579bc43a9dc0f2664b5.png

12.5.6replace()方法

replace() 方法用于在字符串中用一些字符替换另一些字符。

replace(被替换的字符串, 要替换为的字符串);

12.5.7split()方法

split()方法用于切分字符串,它可以将字符串切分为数组。在切分完毕之后,返回的是一个新数组。

var str = 'a,b,c,d';
console.log(str.split(',')); // 返回的是一个数组 [a, b, c, d]

十三、简单类型与复杂类型

13.1简单类型与复杂类型

简单类型又叫做基本数据类型或者值类型,复杂类型又叫做引用类型。

  • 值类型:简单数据类型/基本数据类型,在存储时变量中存储的是值本身,因此叫做值类型

        string ,number,boolean,undefined,null

  • 引用类型:复杂数据类型,在存储时变量中存储的仅仅是地址(引用),因此叫做引用数据类型

        通过 new 关键字创建的对象(系统对象、自定义对象),如 Object、Array、Date等

13.2堆和栈

堆栈空间分配区别:
1、栈(操作系统):由操作系统自动分配释放存放函数的参数值、局部变量的值等。其操作方式类似于数据结构中的栈;简单数据类型存放到栈里面
2、堆(操作系统):存储复杂类型(对象),一般由程序员分配释放,若程序员不释放,由垃圾回收机制回收。复杂数据类型存放到堆里面

e728e0fb4e984410a3928f074dbeeb3c.png

注意:JavaScript中没有堆栈的概念,通过堆栈的方式,可以让大家更容易理解代码的一些执行方式,便于将来学习其他语言。

相关文章:

【前端三剑客】万字总结JavaScript

一、初识JavaScript 1.1 JavaScript 的作用 表单动态校验&#xff08;密码强度检测&#xff09; &#xff08; JS 产生最初的目的 &#xff09;网页特效服务端开发(Node.js)桌面程序(Electron)App(Cordova)控制硬件-物联网(Ruff)游戏开发(cocos2d-js) 1.2 HTML/CSS/JS 的关系…...

【哈希表与字符串的算法之路:思路与实现】—— LeetCode

文章目录 两数之和面试题01.02.判定是否为字符重排存在重复元素存在重复元素||字母异位词分组最长公共前缀和最长回文子串二进制求和字符串相乘 两数之和 这题的思路很简单&#xff0c;在读完题目之后&#xff0c;便可以想到暴力枚举&#xff0c;直接遍历整个数组两遍即可&…...

基于Android的记事本APP设计与实现:从需求分析到功能实现(超级简单记事本,附源码+文档报告)

基于Android的记事本APP设计与实现&#xff1a;从需求分析到功能实现 &#xff08;以前大学课堂作业&#xff0c;抄在这里当个回忆吧&#xff09; 引言 随着社会的不断进步&#xff0c;信息化建设不断发展&#xff0c;电子文字输入在生活、学习、工作中占有越来越重要的作用…...

eNSP中路由器的CON/AUX接口、GE Combo接口、Mini USB接口、USB接口、WAN侧uplink接口、FE接口、GE接口介绍

路由器常见接口的详细介绍及其应用示例&#xff1a; 1. CON/AUX 接口 全称&#xff1a;Console/Auxiliary&#xff08;控制台/辅助接口&#xff09;作用&#xff1a; CON&#xff08;Console&#xff09;&#xff1a;通过命令行界面&#xff08;CLI&#xff09;直接配置路由器…...

Hello Mr. My Yesterday日文歌词附假名注音,祭奠逝去的青春

hello mr. my yesterday Hundred Percent Free Hello Mr. my yesterday云っておくれよ “夢叶うその瞬間にまた逢える”と 前方の幾多前途多難の未知 後方の道後悔も知った 経験と価値 夢なかば 一本の道結果だが ひとつだけ知りたいよ 神様がいるのなら “幸せの定義っ…...

ubuntu ollama+dify实践

安装ollama 官网的指令太慢了&#xff0c;使用以下指令加速&#xff1a; export OLLAMA_MIRROR"https://ghproxy.cn/https://github.com/ollama/ollama/releases/latest/download" curl -fsSL https://ollama.com/install.sh | sed "s|https://ollama.com/dow…...

S7-1200 G2移植旧版本S7-1200程序的具体方法示例

S7-1200 G2移植旧版本S7-1200程序的具体方法示例 前期概要: S7-1200 G2必须基于TIA博途V20,之前的程序可通过移植的方式在新硬件上使用。 该移植工具可自动将TIA Portal 项目从 S7-1200 移植到更新的S7-1200 G2。 注意: 该插件支持在同一TIA Portal项目实例内将软件和/或硬…...

新办公室哪款空气净化器除甲醛效果好?高效除甲醛,提升效率

现代办公环境中&#xff0c;空气质量对员工的健康与工作效率产生着不可忽视的影响。尤其是新装修的办公室&#xff0c;往往因为空气中的甲醛浓度超标而导致一系列健康问题。因此&#xff0c;选择一款性能优越的除甲醛空气净化器就显得尤为重要。合适的空气净化器不仅可以有效过…...

塑造企业数字化形象:企业信息化UI界面设计的关键要素

引言 在数字化转型的大潮中&#xff0c;企业信息化系统的UI&#xff08;用户界面&#xff09;界面设计不仅是技术实现的最后一环&#xff0c;更是塑造企业数字化形象、提升用户体验、增强业务效率的重要手段。优秀的UI设计能够直观展现企业价值观&#xff0c;提升用户粘性&…...

大视频背景暗黑风格的wordpress企业主题免费下载

整体风格是黑色的&#xff0c;首页首屏大视频背景&#xff0c;动态效果非常好。向下滚动时&#xff0c;滚动的特效也不错。 原文 https://www.bixugao.com/wp/26.html...

CUDA编程之内存零拷贝技术

一、实现原理 零拷贝内存通过将‌主机锁页内存‌直接映射到设备地址空间&#xff0c;实现CPU与GPU共享内存&#xff0c;避免显式数据拷贝‌。锁页内存通过cudaHostAlloc或cudaHostRegister分配&#xff0c;确保物理地址固定且不被操作系统换页&#xff0c;从而支持DMA&#xff…...

C语言基础知识04

指针 指针概念 指针保存地址&#xff0c;地址是字节的编号 指针类型和保存的地址类型要一直 使用时注意&#xff0c;把地址转换为&变量的格式来看 int a[3]; a转为&a[0] 指针的大小 64bit 固定8字节&#xff0c; 32bit 固定4字节 指针…...

在 Java 中,== 和 equals 的区别

1. 运算符 作用&#xff1a;比较两个对象的 内存地址&#xff08;引用类型&#xff09;或 值&#xff08;基本数据类型&#xff09;。 适用场景&#xff1a; 基本数据类型&#xff08;int, char, boolean 等&#xff09;&#xff1a;直接比较值是否相等。 引用类型&#xff…...

Qt开发:QtWebEngine中操作选择文本

查找选择 在QtWebEngine中&#xff0c;可以使用QWebEnginePage的findText方法来查找文本&#xff0c;查找成功以后&#xff0c;将自动选择当前文本。 QWebEnginePage可以通过QWebEngineView的page()来取得。 比如&#xff0c;如下代码可以在页面中查找hello,world并选择。 …...

VUE的脚手架搭建引入类库

VUE的小白脚手架搭建 真的好久好久自己没有发布自己博客了,对于一直在做后端开发的我 ,由于社会卷啊卷只好学习下怎么搭建前端,一起学习成长吧~哈哈哈(最终目的,能够懂并简易开发) 文章目录 VUE的小白脚手架搭建1.下载node.js2.安装vue脚手架3.创建一个项目4.代码规范约束配置(…...

分布式系统日志排查综合场景

排查背景 在一个大型分布式电商系统中&#xff0c;用户反馈在进行商品结算时出现了报错。系统由多个子系统构成&#xff0c;包括商品管理系统、订单系统、支付系统等&#xff0c;各子系统分布在不同服务器上&#xff0c;且日志文件分散存储。 排查过程 确定当前位置并切换到可…...

android lmkd.rc 介绍

service service lmkd /system/bin/lmkdclass coreuser lmkdgroup lmkd system readproccapabilities DAC_OVERRIDE KILL IPC_LOCK SYS_NICE SYS_RESOURCEcriticalsocket lmkd seqpacketpasscred 0660 system systemtask_profiles ServiceCapacityLow属于核心服务组&#xff0…...

Android Studio执行Run操作报Couldn‘t terminate previous instance of app错误

步骤1、在项目根目录下build.gradle文件最后添加如下内容 //自定义任务名&#xff1a;assembleAndInstall tasks.register(assembleAndInstall, Exec.class, new Action<Exec>() {Overridevoid execute(Exec exec) {//设置自定义任务组名exec.setGroup(custom task)//当…...

Matlab 双线性插值(二维)

文章目录 一、简介二、实现代码三、实现效果参考资料一、简介 双线性插值是一种 二维插值方法,用于计算 栅格(Grid) 或 像素点 之间的插值值。它主要用于 图像缩放、旋转、变换 等操作,以在新像素位置估算灰度值或颜色值。 如上图所示,假设存在一个二维离散函数(如图像)…...

1700. 无法吃午餐的学生数量

无法吃午餐的学生数量 题目描述尝试做法推荐做法 题目描述 学校的自助午餐提供圆形和方形的三明治&#xff0c;分别用数字 0 和 1 表示。所有学生站在一个队列里&#xff0c;每个学生要么喜欢圆形的要么喜欢方形的。 餐厅里三明治的数量与学生的数量相同。所有三明治都放在一个…...

uv命令介绍(高性能Python包管理工具,旨在替代pip、pip-tools和virtualenv等传统工具)

文章目录 **主要功能**1. **快速安装和管理 Python 包**2. **生成和管理锁文件 (requirements.lock)**3. **创建虚拟环境**4. **与 poetry 兼容** **核心优势**1. **极快的速度**&#xff1a;基于 Rust 实现&#xff0c;利用多线程和缓存大幅加速依赖解析。2. **轻量且独立**&a…...

杨辉三角形(信息学奥赛一本通-2043)

【题目描述】 例5.11 打印杨辉三角形的前n(2≤n≤20)行。杨辉三角形如下图&#xff1a; 当n5时 1 1 1 1 2 1 1 3 3 1 1 4 6 4 1 输出&#xff1a; 1 1 1 1 2 1 1 3 3 1 1 4 6 4 1 【输入】 输入行数n。 【输出】 输出如题述三角形。n行&#…...

使用easyexcel实现单元格样式设置和下拉框设置

1.单元格样式设置 1.1实体类 public class DemoData {ExcelProperty("PK")private String name;ExcelProperty("年龄")private int age;// 必须提供无参构造方法public DemoData() {}public DemoData(String name, int age) {this.name name;this.age …...

TCP 三次握手四次挥手过程详解

注&#xff1a;本文为 “TCP 的三次握手与四次挥手” 相关文章合辑。 英文引文&#xff0c;机翻未校。 中文引文&#xff0c;未整理去重。 英文引文第二篇&#xff0c;实为国内《稀土掘金技术社区》文章&#xff0c;没检索到原文&#xff0c;此处 “出口转内销” 。 如有内…...

射频相关概念

射频&#xff08;Radio Frequency, RF) 是电磁波谱中频率范围在 3 kHz 到 300GHz的电磁波&#xff0c;广泛应用于通信、雷达、广播、医疗等领域。其基本原理涉及电磁波的产生、传播、调制与解调&#xff0c;以及射频系统的设计。以下是射频技术的核心要点&#xff1a; 1. 电磁…...

几款可用于绘制工艺原理图的开源框架

一、LogicFlow 由滴滴团队开发的开源流程图框架&#xff0c;支持高度定制的工艺原理图绘制。 • 核心特性&#xff1a; • 提供拖拽式界面和丰富的节点类型&#xff08;矩形、圆形、多边形等&#xff09;&#xff0c;支持自定义节点形状、样式和交互逻辑。 • 支持插件扩展&am…...

27.卷2的答案

CSP-J离我们不远了&#xff0c;加加油啦&#xff01; 1.堆排序最坏时间复杂度是&#xff1f; 解析&#xff1a;平时多多练习可知&#xff0c;最坏时间复杂度是O(n log n)。 2.哪条能将s中的数值保留一位&#xff0c;并将第二位四舍五入&#xff1f; 解析&#xff1a;经过试…...

程序编译生成的文件

目录 .i 文件 .s 文件 .o文件 总结 在 C 编程中&#xff0c;.i、.s和 .o 文件是编译过程中生成的不同阶段的文件&#xff0c;它们代表不同的含义&#xff1a; .i 文件 全称 &#xff1a;预处理后的文件&#xff08;Intermediate File&#xff09;。 含义&#xff1a;.i文件…...

C++类的基础题(4)

练习1&#xff1a;&#xff08;简单&#xff09; 基于如下程序&#xff0c;按要求修改和完善。 #include <iostream> using namespace std; class Student {public: Student(int n,float s):num(n),score(s){} void change(int n,float s) {numn;scores;} void displ…...

浏览器中输入某个地址后发生了什么

首先浏览器会进行DNS解析&#xff0c;将网址中的域名&#xff08;比如&#xff1a;jcm.com&#xff09;解析为IP地址。理解&#xff1a;DNS为电话本&#xff0c;域名为名字&#xff0c;IP地址为电话号码&#xff1b;其次浏览器需要和网站服务器建立连接&#xff0c;也就是通过三…...