【前端三剑客】万字总结JavaScript
一、初识JavaScript
1.1 JavaScript 的作用
- 表单动态校验(密码强度检测) ( JS 产生最初的目的 )
- 网页特效
- 服务端开发(Node.js)
- 桌面程序(Electron)
- App(Cordova)
- 控制硬件-物联网(Ruff)
- 游戏开发(cocos2d-js)
1.2 HTML/CSS/JS 的关系
1.3 浏览器执行 JS 简介
浏览器分成两部分:渲染引擎和 JS 引擎
- 渲染引擎:用来解析HTML与CSS,俗称内核,比如 chrome 浏览器的 blink ,老版本的 webkit
- JS 引擎:也称为 JS 解释器。 用来读取网页中的JavaScript代码,对其处理后运行,比如 chrome 浏览器的 V8
浏览器本身并不会执行JS代码,而是通过内置 JavaScript 引擎(解释器) 来执行 JS 代码 。JS 引擎执行代码时逐行解释每一句源码(转换为机器语言),然后由计算机去执行,所以 JavaScript 语言归为脚本语言,会逐行解释执行。
1.4 JS 的组成
1.4.1ECMAScript
ECMAScript 是由ECMA 国际( 原欧洲计算机制造商协会)进行标准化的一门编程语言,这种语言在万维网上应用广泛,它往往被称为 JavaScript 或 JScript,但实际上后两者是 ECMAScript 语言的实现和扩展。
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
可以将单行或少量 JS 代码写在HTML标签的事件属性中(以 on 开头的属性),如:onclick
注意单双引号的使用:在HTML中我们推荐使用双引号, JS 中我们推荐使用单引号
可读性差, 在html中编写JS大量代码时,不方便阅读;
引号易错,引号多层嵌套匹配时,非常容易弄混;
特殊情况下使用
1.5.2内嵌 JS
- 可以将多行JS代码写到 <script> 标签中
- 内嵌 JS 是学习时常用的方式
1.5.3外部 JS文件
- 利于HTML页面代码结构化,把大段 JS代码独立到 HTML 页面之外,既美观,也方便文件级别的复用
- 引用外部 JS文件的 script 标签中间不可以写代码
- 适合于JS 代码量比较大的情况
二、JavaScript注释+输入输出
2.1 单行注释
为了提高代码的可读性,JS与CSS一样,也提供了注释功能。JS中的注释主要有两种,分别是单行注释和多行注释。
单行注释的注释方式如下:
2.2 多行注释
多行注释的注释方式如下:
/* */ 用来注释多行文字( 默认快捷键 alt + shift + a )
快捷键修改为: ctrl + shift + /
vscode 首选项按钮 键盘快捷方式 查找 原来的快捷键 修改为新的快捷键 回车确认
2.3 JavaScript 输入输出语句
注意:alert() 主要用来显示消息给用户,console.log() 用来给程序员自己看运行时的消息。
2.3.1输入: prompt
弹出一个输入框:
<body><script>prompt("请输入您的姓名:")</script>
</body>
2.3.2输出: alert
弹出一个警示对话框, 输出结果:
2.3.3输出: console.log
在控制台打印一个日志(供程序员看):
2.3.4重要概念: 日志
日志是程序员调试程序的重要手段
2.3.5重要概念: .
console 是一个 js 中的 "对象"
. 表示取对象中的某个属性或者方法. 可以直观理解成 "的"
console.log 就可以理解成: 使用 "控制台" 对象 "的" log 方法.
三、变量概述
3.1声明变量
- var 是一个 JS关键字,用来声明变量( variable 变量的意思 )。使用该关键字声明变量后,计算机会自动为变量分配内存空间。
- age 是程序员定义的变量名,我们要通过变量名来访问内存中分配的空间。
3.2同时声明多个变量
同时声明多个变量时,只需要写一个 var, 多个变量名之间使用英文逗号隔开。
3.3声明变量特殊情况
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 拥有动态类型,同时也意味着相同的变量可用作不同的类型:
4.2数据类型的分类
- 简单数据类型 (Number,String,Boolean,Undefined,Null)
- 复杂数据类型 (object)
4.2.1简单数据类型(基本数据类型)
4.2.1.1数字型Number
4.2.1.1.1数字型三个特殊值
- Infinity ,代表无穷大,大于任何数值
- -Infinity ,代表无穷小,小于任何数值
- NaN ,Not a number,代表一个非数值
4.2.1.1.2isNaN()
用来判断一个变量是否为非数字的类型,返回 true 或者 false。
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字符串转义符
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
4.2.2数据类型转换
使用表单、prompt 获取过来的数据默认是字符串类型的,此时就不能直接简单的进行加法运算,而需要转换变量的数据类型。通俗来说,就是把一种数据类型的变量转换成另外一种数据类型。
4.2.2.1转换为字符串
- toString() 和 String() 使用方式不一样。
- 三种转换方式,我们更喜欢用第三种加号拼接字符串转换方式, 这一种方式也称之为隐式转换。
4.2.2.2转换为数字型(重点)
- 注意 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转换为布尔型
- 代表空、否定的值会被转换为 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算数运算符
浮点数的精度问题
var result = 0.1 + 0.2; // 结果不是 0.3,而是:0.30000000000000004
console.log(0.07 * 100); // 结果不是 7, 而是:7.000000000000001
所以:不要直接判断两个浮点数是否相等 !
5.2递增和递减运算符
在 JavaScript 中,递增(++)和递减( -- )既可以放在变量前面,也可以放在变量后面。放在变量前面时,我
们可以称为前置递增(递减)运算符,放在变量后面时,我们可以称为后置递增(递减)运算符。
注意:递增和递减运算符必须和变量配合使用。
5.3比较运算符
注意:等号比较
console.log(18 == '18');
console.log(18 === '18');
5.4逻辑运算符
存在短路运算(逻辑中断)
5.5赋值运算符
var age = 10;
age += 5; // 相当于 age = age + 5;
age -= 5; // 相当于 age = age - 5;
age *= 10; // 相当于 age = age * 10;
5.6运算符优先级
六、流程控制
6.1顺序流程控制
6.2分支流程控制
JS 语言提供了两种分支结构语句:if 语句、switch 语句
6.2.1 if语句
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。
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形参和实参
在声明函数时,可以在函数名称后面的小括号中添加一些参数,这些参数被称为形参,而在调用该函数时,同样也需要传递相应的参数,这些参数被称为实参。
参数的作用 : 在函数内部某些值不能固定,我们可以通过参数在调用函数时传递不同的值进去。
function getSum(num1, num2) {console.log(num1 + num2);
}
getSum(1, 3); // 4
getSum(6, 5); // 11
9.3.1函数形参和实参个数不匹配问题
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();
10.6预解析
JavaScript 代码是由浏览器中的 JavaScript 解析器来执行的。JavaScript 解析器在运行 JavaScript 代码的时候分为两步:预解析和代码执行。
- 预解析:在当前作用域下, JS 代码执行之前,浏览器会默认把带有 var 和 function 声明的变量在内存中进行提前声明或者定义。
- 代码执行: 从上到下执行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 中的成员。
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获取当前时间必须实例化
Date() 构造函数的参数:
如果括号里面有时间,就返回参数里面的时间。例如日期格式字符串为‘2019-5-1’,可以写成new Date('2019-5-1') 或者 new Date('2019/5/1')
- 如果Date()不写参数,就返回当前时间
- 如果Date()里面写参数,就返回括号里面输入的时间
12.3.2日期格式化
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添加删除数组元素的方法
12.4.3数组排序
var arr = [1, 64, 9, 6];
arr.sort(function(a, b) {return b - a; // 降a序// return a - b; // 升序
});
console.log(arr);
12.4.4数组索引方法
12.4.5数组转换为字符串
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根据字符返回位置
字符串所有的方法,都不会修改字符串本身(字符串是不可变的),操作完成会返回一个新的字符串。
12.5.4根据位置返回字符(重点)
12.5.5字符串操作方法(重点)
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、堆(操作系统):存储复杂类型(对象),一般由程序员分配释放,若程序员不释放,由垃圾回收机制回收。复杂数据类型存放到堆里面
注意:JavaScript中没有堆栈的概念,通过堆栈的方式,可以让大家更容易理解代码的一些执行方式,便于将来学习其他语言。
相关文章:
【前端三剑客】万字总结JavaScript
一、初识JavaScript 1.1 JavaScript 的作用 表单动态校验(密码强度检测) ( JS 产生最初的目的 )网页特效服务端开发(Node.js)桌面程序(Electron)App(Cordova)控制硬件-物联网(Ruff)游戏开发(cocos2d-js) 1.2 HTML/CSS/JS 的关系…...
MySQL | MySQL表的增删改查(CRUD)
目录 前言:什么是 CRUD ?一、Creat 新增1.1 语法1.2 示例1.2.1 单行数据全列插入1.2.2 单行数据指定列插入1.2.3 多行数据指定列插入 二、Retrieve 检索2.1 语法2.2 示例2.2.1 全列查询2.2.2 指定列查询2.2.3 查询字段为表达式2.2.4 结果去重查询2.2.5 where条件查…...
【愚公系列】《高效使用DeepSeek》003-DeepSeek文档处理和其他顶级 AI模型的区别
标题详情作者简介愚公搬代码头衔华为云特约编辑,华为云云享专家,华为开发者专家,华为产品云测专家,CSDN博客专家,CSDN商业化专家,阿里云专家博主,阿里云签约作者,腾讯云优秀博主,腾讯云内容共创官,掘金优秀博主,亚马逊技领云博主,51CTO博客专家等。近期荣誉2022年度…...
OSC32IN与OSC32OUT对于无源晶振而言有区别吗?
OSC32IN与OSC32OUT对于无源晶振而言有区别吗? 答:没有区别。对晶振本身而言,两个频率管脚反接也是一样的。 如下图所示: 使用示波器连接晶振的两个引脚,并观察波形可以帮助确定输入和输出端口。 当晶振工作正常时&…...
究竟什么是虚拟同步机???虚拟同步机巨简单理解
1同步发电机 1.1同步发电机工作原理 同步发电机定子铁芯的内圆均匀分布着定子槽,槽内按一定规律嵌放着对称的三相绕组U1-U2、V1-V2、W1-W2,如图1所示。 图1 同步发电机的结构原理图 工作原理: 转子铁芯上装有制成一定形状的成对磁极,磁极上绕有励磁绕组。励磁绕组上通直流…...
ZVA-Z90,罗德与施瓦茨毫米波变换器
罗德与施瓦茨 ZVA-Z90毫米波变换器 商品品牌:R&S/罗德与施瓦茨 商品型号:ZVA-Z90 商品名称:毫米波变换器 产品简介: ZVA-Z 毫米波变换器 简介 R&SZVA-Zxx 毫米波变换器支持在 V、E、W、F、D、G、J 以及 Y 频段内的毫米波测量…...
TCP/IP 协议精讲-精华总结版本
序言 本文旨在介绍一下TCP/IP涉及得所有基础知识,为大家从宏观上俯瞰TCP/IP提供一个基石,文档属于《TCP/IP图解(第五版)》的精简版本。 专业术语 缩写 全称 WAN Wide area network广域网 LAN Local area network局域网 TC…...
电脑内存不足怎么办?
常规解决方法盘点 关闭后台程序:按下【Ctrl Shift Esc】组合键打开任务管理器,在 “进程” 选项卡里,把当前不用的程序统统 “结束任务” ,像那些自动更新的软件、常驻后台的播放器,关了能释放不少内存。比如音乐软…...
PTP协议赋能高精度时间同步网络
什么是PTP? PTP(精确时间协议,Precision Time Protocol) 是一种基于IEEE 1588标准的网络时间同步协议,旨在为分布式系统中的设备提供亚微秒级(甚至纳秒级)的高精度时钟同步。其核心目标是通过消…...
【redis】string应用场景:缓存功能和计数功能
文章目录 缓存功能实现思路存在的问题伪代码实现 记数功能实现思路统计伪代码实现 缓存功能 实现思路 整体的思路: 应用服务器访问数据的时候,先查询 Redis 如果 Redis 上数据存在了,就直接从 Redis 读取数据交给应用服务器,不继…...
oracle中OS BLOCK的含义
在Oracle数据库中,OS BLOCK(操作系统数据块)是指操作系统层面上的数据块,它与Oracle数据库内部的逻辑存储单元BLOCK(数据块)有所区别但密切相关。以下是对OS BLOCK的详细解释: 定义与概念 OS BL…...
SSM企业台账管理平台
🍅点赞收藏关注 → 添加文档最下方联系方式咨询本源代码、数据库🍅 本人在Java毕业设计领域有多年的经验,陆续会更新更多优质的Java实战项目希望你能有所收获,少走一些弯路。🍅关注我不迷路🍅 项目视频 SS…...
Linux下使用pigz工具结合tar实现并行压缩提升压缩和解压速度
说明 tar命令是在 Unix 和类 Unix 系统中用于归档和压缩文件的常用工具。 基本语法 tar [选项] [归档文件名] [文件或目录列表]常用选项 创建归档文件: -c:创建一个新的归档文件。例如,tar -cvf myarchive.tar file1.txt file2.txt会创建一个名为myarchive.tar的归档文件…...
低代码与AI测试自动化:双剑合璧的未来
在数字化转型浪潮下,企业软件开发和测试的效率需求空前提高。低代码(Low-Code)平台因其直观的可视化编程方式、大幅降低开发门槛的特点,成为企业敏捷开发的首选。而AI测试自动化的兴起,则彻底改变了传统软件测试模式&a…...
JavaScript基础篇:三、 变量与数据类型
一、变量的概念与声明 在 JavaScript 中,变量是用于存储数据的容器。通过声明变量,可以为程序中的数据分配内存空间,以便后续的访问和操作。变量的声明使用`var`、`let`或`const`关键字。 (一)var关键字 `var`是 JavaScript 中传统的变量声明方式,具有函数级作用域。这…...
【2025最新版】如何将fnm与node.js安装在D盘?【保姆级安装及人性话理解教程】
目录 背景: 1.安装fnm 1.1下载fnm 1.2解压目录 1.3配置fnm的环境变量 1.4验证fnm是否安装成功 fnm大捷~ 2.相关配置为下载node.js做准备 2.1查看是否有环境配置文件 2.2获取环境配置文件 2.3新建文件 2.4写入配置 2.5重启powershell 2.5.1可能出现的错…...
【免费】2008-2020年各省城镇登记失业率数据
2008-2020年各省城镇登记失业率数据 1、时间:2008-2020年 2、来源:国家统计局、统计年鉴 3、指标:行政区划代码、地区名称、年份、城镇登记失业率 4、范围:31省 5、指标说明:城镇登记失业率是指在一定时期内&…...
C++:类和对象(从底层编译开始)详解[前篇]
目录 一.inline内联的详细介绍 (1)为什么在调用内联函数时不需要建立栈帧: (2)为什么inline声明和定义分离到两个文件会产生链接错误,链接是什么,为什么没有函数地址: 二.类&…...
Deny by project hooks setting ‘default‘: size of the file
问题描述 gitcode.com提交代码时候发现出现文件大于默认10MB后不能上传 错误显示内容如下: Total 43 (delta 1), reused 0 (delta 0), pack-reused 0 remote: Start Git Hooks Checking [FAILED] remote: Error: Deny by p…...
【Flutter】数据库实体类构造函数加密注意事项
源代码: AccountEntity( {required String account, required String password,}) : account encrypter.encrypt(account,iv: iv).base64, password encrypter.encrypt(password,iv: iv).base64,; 解密代码: static final encrypter Encrypter(AES…...
如何在PHP中实现数据加密与解密:保护敏感信息
如何在PHP中实现数据加密与解密:保护敏感信息 在现代Web开发中,数据安全是一个至关重要的议题。无论是用户的个人信息、支付数据,还是其他敏感信息,都需要在存储和传输过程中进行加密,以防止数据泄露和恶意攻击。PHP作…...
【Pyqt5】水平布局与垂直布局及其交叉展示及实战音乐播放器UI
感受一下Pyqt5的水平布局与垂直布局及其交叉展示 需求: 4个按钮水平排放4个按钮垂直排放水平排放与垂直排放并用实战:音乐播放器UI 水平排放 import sys from PyQt5.QtWidgets import QApplication, QWidget, QPushButton, QHBoxLayoutclass MyWindo…...
Java 中 getCanonicalName、getSimpleName、getName、getTypeName 的区别
1. 核心区别总结 方法作用数组类型示例非数组类型示例getName()返回 JVM 内部格式的类全名,适用于反射操作(如 Class.forName())int[] → [IString → java.lang.StringgetTypeName()返回更友好的类型名称,对数组递归处理组件类型…...
uni-app打包h5并部署到nginx,路由模式history
uni-app打包有些坑,当时运行的基础路径填写了./,导致在二级页面刷新之后,页面直接空白。就只能换一个路径了,nginx也要跟着改,下面是具体步骤。 manifest.json配置web 运行路径写/h5/,或者写你们网站的目…...
数据结构与算法(哈希表——两个数组的交集)
原题 349. 两个数组的交集 - 力扣(LeetCode) 给定两个数组 nums1 和 nums2 ,返回 它们的 交集 。输出结果中的每个元素一定是 唯一 的。我们可以 不考虑输出结果的顺序 。 示例 1: 输入:nums1 [1,2,2,1], nums2 […...
P1259 黑白棋子的移动【java】【AC代码】
有 2n 个棋子排成一行,开始为位置白子全部在左边,黑子全部在右边,如下图为 n5 的情况: 移动棋子的规则是:每次必须同时移动相邻的两个棋子,颜色不限,可以左移也可以右移到空位上去,但…...
一些docker命令
一、基础命令 查看 Docker 版本 docker --version 或 docker version:显示 Docker 客户端和服务器的版本信息。 查看 Docker 系统信息 docker info:显示 Docker 系统的详细信息,包括镜像、容器数量、存储驱动类型等。 Docker 服务管理 s…...
云服务器新手配置内网穿透服务(frp)
首先你得有一个公网服务器,有了它你就可以借助它,将自己电脑进行配置内网穿透,让自己内网电脑也可以异地轻松访问。网上教程较多,特此记录我自己的配置,避免迷路,我这里只记录我自己云服务小白,…...
linux ptrace 图文详解(二) PTRACE_TRACEME 跟踪程序
目录 一、基础介绍 二、PTRACE_TRACE 实现原理 三、代码实现 四、总结 (代码:linux 6.3.1,架构:arm64) One look is worth a thousand words. —— Tess Flanders 一、基础介绍 GDB(GNU Debugger&…...
Maven安装、idea集成Maven、Maven依赖管理、Maven生命周期
一. Maven介绍 1. Maven是一款用于管理和构建Java项目的工具,是Apache旗下的一个开源项目,它基于项目对象模型(POM)的概念,通过一小段描述信息来管理项目的构建 2. Maven作用: (1) 依赖管理:方便快捷的管理项目依赖的资…...
【xv6操作系统】系统调用与traps机制解析及实验设计
【xv6操作系统】系统调用与traps机制解析及实验设计 系统调用相关理论系统调用追溯系统调用实验设计Sysinfo🚩系统调用总结(结合trap机制) traptrap机制trap代码流程Backtrace实验alarm实验 系统调用 相关理论 隔离性(isolation)…...
S7-1200 G2移植旧版本S7-1200程序的具体方法示例
S7-1200 G2移植旧版本S7-1200程序的具体方法示例 前期概要: S7-1200 G2必须基于TIA博途V20,之前的程序可通过移植的方式在新硬件上使用。 该移植工具可自动将TIA Portal 项目从 S7-1200 移植到更新的S7-1200 G2。 注意: 该插件支持在同一TIA Portal项目实例内将软件和/或硬…...
海量数据查询加速:Presto、Trino、Apache Arrow
1. 引言 在大数据分析场景下,查询速度往往是影响业务决策效率的关键因素。随着数据量的增长,传统的行存储数据库难以满足低延迟的查询需求,因此,基于列式存储、向量化计算等技术的查询引擎应运而生。本篇文章将深入探讨 Presto、Trino、Apache Arrow 三种主流的查询优化工…...
vscode远程连接服务器并运行项目里的.ipynb文件 如何在 Jupyter Notebook 中切换/使用 conda 虚拟环境?
【最全指南】如何在 Jupyter Notebook 中切换/使用 conda 虚拟环境? 最好用的方法! 使用 nb_conda_kernels 添加所有环境 第二种方法其实也挺不错的。有个缺点是,你新建一个环境,就要重复操作一次。 而这个方法就是一键添加所有…...
二阶优化方法详解
前言 本文隶属于专栏《机器学习数学通关指南》,该专栏为笔者原创,引用请注明来源,不足和错误之处请在评论区帮忙指出,谢谢! 本专栏目录结构和参考文献请见《机器学习数学通关指南》 ima 知识库 知识库广场搜索&#…...
C++中通过虚函数实现多态的原理
C中通过虚函数实现多态的原理 我们都知道C是通过虚函数实现多态的,那么其中的原理是什么呢? 在C中,多态性是一种重要的特性,它允许通过基类指针或引用来调用派生类中的函数。多态性主要分为两种:编译时多态ÿ…...
阿里云服务器购买及环境搭建宝塔部署springboot和vue项目
云服务器ECS_云主机_服务器托管_计算-阿里云 一、前言 对于新手或者学生党来说,有时候就想租一个云服务器来玩玩或者练练手,duck不必花那么多钱去租个服务器。这些云服务厂商对学生和新手还是相当友好的。下面将教你如何快速搭建自己的阿里云服务器&…...
【学习笔记】中缀表达式转后缀表达式及计算
C实现中缀表达式转后缀表达式及后缀表达式的计算 在C中,实现中缀表达式转换为后缀表达式(逆波兰表达式)以及后缀表达式的计算是一个非常经典的问题。它不仅涉及到栈(Stack)数据结构的使用,还涉及到对运算符…...
【机器人-基础知识】标定 - 相机标定全解
https://blog.csdn.net/MengYa_Dream/article/details/120233806 1. 相机标定的定义 相机标定是确定相机成像过程中各个参数的过程,它的核心目标是建立从三维世界坐标系到二维图像坐标系的数学映射关系。这一过程包括求解: 内参:描述相机内部光学特性(如焦距、主点位置、像…...
Java 8 + Tomcat 9.0.102 的稳定环境搭建方案,适用于生产环境
一、安装 Java 8 安装 OpenJDK 8 bash sudo apt update sudo apt install openjdk-8-jdk -y 验证安装 bash java -version 应输出类似: openjdk version “1.8.0_412” OpenJDK Runtime Environment (build 1.8.0_412-8u412-ga-1~22.04-b08) OpenJDK 64-Bit Server VM (bui…...
探索 C 语言枚举类型的奇妙世界
目录 一、枚举类型的定义二、枚举类型变量的声明和初始化2.1 先定义枚举类型,再声明变量2.2 定义枚举类型的同时声明变量 三、自定义枚举常量的值四、枚举类型的特点五、注意事项 在C语言中,枚举类型( enum)是一种用户自定义的数…...
buu-ciscn_2019_ne_5-好久不见50
1. 背景分析 目标程序是一个存在漏洞的二进制文件,我们可以通过以下方式利用漏洞获取 shell: 程序中存在 system() 函数,但没有明显的 /bin/sh 字符串。 使用工具(如 ROPgadget)发现程序中有 sh 字符串,可…...
HCIA-ACL实验
前提条件:实现底层互通 转发层面 1、基本ACL ①要求PC3不能访问网段192.168.2.0的网段,PC4和客户端能正常访问服务器 ②AR2配置 acl 2000 rule deny source 192.168.1.1 0 匹配流量 int g 0/0/0 traffic-filter inbound acl 2000 接口调用…...
Java入职篇(2)——开发流程以及专业术语
Java入职篇(2)——开发流程以及专业术语 开发流程 开发术语 测试用例(用例) 测试人员写的测试方案,基本上就是编写的测试过程,以及测试的预取结果 灰度测试 现在小部分范围内使用,然后逐步…...
三相逆变器不控整流场景简要分析
0 三相逆变器拓扑 LCL三相逆变器简要拓扑如下图所示,其他类型如多电平逆变器类似。 1 原理说明 软件在进行直流母线电压Udc的给定取值时,考虑到电压利用率,通常会比电网线电压的峰值稍微高些,比如取线电压峰值的1.0x倍&#x…...
语言识别模型whisper学习笔记
语言识别模型whisper学习笔记 Whisper 是由 OpenAI 于 2022年9月 推出的开源自动语音识别(ASR)系统,旨在实现高精度、多语言的语音转文本及翻译任务。其核心目标是解决传统语音识别模型在噪声环境、口音多样性及多语言场景下的局限性。 一、…...
centos 换阿里云yum
1、备份原有的Yum源配置文件 在更换Yum源之前,先备份CentOS系统中默认的Yum源配置文件,以便在需要时恢复。默认的Yum源配置文件位于 /etc/yum.repos.d/ 目录下,通常包含 CentOS-Base.repo、CentOS-Debuginfo.repo、CentOS-Vault.repo 等文件…...
Jmeter的简单使用
前置工作 确保java8 版本以上jmeter下载路径(选择Binaries):https://jmeter.apache.org/download_jmeter.cgi直接解压,找到bin下面的文件:jmeter.bat(可选)汉化,修改 jmeter.proper…...
CSS元素层叠顺序规则
CSS元素层叠顺序规则 看图说话总结: background/borderz-index(<0)blockfloatinline/inline-blockz-index(0,auto)z-index (>0)...
用Maven创建只有POM文件的项目
使用 mvn 创建一个仅包含 pom.xml 文件的父项目,可以借助 maven-archetype-quickstart 原型,然后移除不必要的文件,或者直接通过命令生成最简的 pom.xml 文件。以下是具体操作步骤: 一、方法一:使用原型创建后清理 1…...