一丶JS的组成部分
JavaScript是由ECMAScript、文档对象模型（Document Object Model:DOM）、浏览器对象模型 （Brower Object Model:BOM）三部分构成。
- ECMAScript：JavaScript的核心，描述了语言的基本语法
- 文档对象模型（DOM）
- 浏览器对象模型（BOM）
二丶JavaScript变量和数据类型
2.1 标识符
所谓标识符，就是指变量、函数、属性的名字，或者函数的参数（凡是可以自己起名字的地方，都叫标识符）。
标识符命名规范(包括函数名，变量等)：
- 由字母、数字、下划线、$符号组成;
- 不能以数字开头
- 命名不能是系统的关键字或保留字：比如new ，if，class…；关键字:赋予特殊含义的单词
- 区分大小写
- 命名最好用有意义的名称(见名之意)。比如说name，people…
- 驼峰原则: 首字母小写，多个单词组成，从第二个单词的首字母开始都大写; 比如: getNameById();
- 常量命名: 全部大写，多个单词组成，每个单词之间由下划线分割;APPLICATION_NAME
2.2 变量
2.2.1 变量命名规则
- 数字、字母、下划线、$符号，数字不能作开头。
- 变量名区分大小写。
- 尽量使用有意义的变量名，以提高代码的可读性。
2.2.2 变量的定义和声明
-
在JavaScript中，可以使用
var、let或const关键字来声明变量。 -
使用
var关键字声明的变量是函数作用域的，而使用let或const声明的变量是块级作用域的。-
函数作用域：
-
使用var关键字声明的变量具有函数作用域。
-
函数作用域指的是变量在函数内部声明后，在整个函数内部都可访问。
-
函数作用域中声明的变量在函数外部是不可访问的。
-
函数作用域的变量在函数执行完毕后会被销毁。
-
示例：
function example() { var x = 10; // 在函数作用域内声明的变量 console.log(x); // 输出 10 } console.log(x); // 报错，x 在函数作用域外部不可访问
-
-
块级作用域：
-
使用
let或const关键字声明的变量具有块级作用域。 -
块级作用域指的是变量在包含它们的代码块（如if语句、for循环、函数等）内部可访问。
-
块级作用域的变量在代码块执行完毕后会被销毁。
-
示例：
if (true) { let y = 20; // 在块级作用域内声明的变量 console.log(y); // 输出 20 } console.log(y); // 报错，y 在块级作用域外部不可访问
-
-
-
var和let关键字声明的变量可以被重新赋值，而const关键字声明的变量是常量，不可被重新赋值。
定义一个变量：
//定义的同时赋值
var name="zhangsan";
console.log(name);
//输出zhangsan
//定义时不赋值
var age;
console.log(age);
//输出undefined
//未赋值的变量，输出undefined
//定义了定义过的变量并且不赋值
var age=10;
var age;
console.log(age);
//输出10
//定义了定义过的变量并且不赋值
var age=10;
var age=20;
console.log(age);
//输出20
2.2.3 变量在内存中的存储方式
var num = 666; // 栈内存
var str = "This is string."; // 栈内存
var n = null; // 栈内存
var obj = { x: 1, y: 2 }; // 变量 obj 存储在栈内存中，{ x: 1, y: 2 } 作为对象存储在堆内存中
var arr = [1, 2, 3]; // 变量 arr 存储在栈内存中，[1, 2, 3] 作为对象存储在堆内存中
当访问栈内存中的基本数据类型时：
- 直接从栈中获取我们需要的数据
当访问堆内存中的引用数据类型时：
- 从栈中获取该对象的内存地址（对象的引用）
- 再从堆内存中获取我们需要的数据
2.3 关键字、保留字
关键字
| break | do | instanceof | typeof |
|---|---|---|---|
| case | else | new | var |
| catch | finally | return | void |
| continue | for | switch | while |
| debugger | function | this | with |
| default | if | throw | delete |
| in | try |
保留字
不再一一列举，例如：abstract、enum、int、float、short等等
2.4 数据类型
- 基本数据类型：
- 字符串（String）：表示文本数据，用单引号或双引号括起来。
- 数字（Number）：表示数值数据，包括整数和浮点数。
- 布尔值（Boolean）：表示逻辑值，只有两个值：
true和false。 - 空值（Null）：表示空值或者不存在的值。
- 未定义（Undefined）：表示声明了但未初始化的变量，或者不存在的属性。
- 引用数据类型（复杂数据类型）：
- 对象（Object）：表示复杂的数据集合，可以包含多个键值对的属性。
- 数组（Array）：表示有序的数据集合，可以存储多个值。
- 函数（Function）：表示可执行的代码块，可以被调用执行。
- 日期（Date）：表示日期和时间的数据类型。
- 正则表达式（RegExp）：表示文本模式的对象，用于字符串的模式匹配。
- 类型判断：
- 使用
typeof运算符可以判断一个变量的数据类型。 typeof返回的结果是一个字符串，表示变量的数据类型。
示例：
- 使用
var str = "Hello";
var num = 10;
var bool = true;
var n = null;
var undef;
console.log(typeof str); // 输出 "string"
console.log(typeof num); // 输出 "number"
console.log(typeof bool); // 输出 "boolean"
console.log(typeof n); // 输出 "object"
console.log(typeof undef); // 输出 "undefined"
2.4.1 字符串（String）
字符串是存储字符（比如 “Bill Gates”）的变量。
当然可以！下面是关于JavaScript字符串的一份简单笔记：
-
字符串的定义：
- 字符串是用单引号（'）或双引号（"）括起来的一组字符。
- 可以使用单引号或双引号，两者效果相同。
- 如果字符串中包含引号，可以使用转义字符（\）来表示。
-
字符串拼接
-
可以使用"+"进行字符串的连接。
-
console.log(11 + 11);//22 console.log('hello' + ' world');//Hello world console.log('100' + '100');//100100 console.log('11' + 11);//1111 console.log('male:' + true);//male:true
-
-
字符串长度
-
length属性用来获取字符串的长度。
-
var str = 'Hello World'; console.log(str.length); //输出11 var str = 'Hello男'; console.log(str.length); //输出6
-
-
转义字符
-
console.log("\\和\*") //输出\和*
-
2.4.2 数值（Number）
JavaScript 只有一种数值类型。数值可以带小数点，也可以不带。极大或极小的数字可以通过科学（指 数）计数法来书写：3e4。
数值可以通过运算符进行计算。
浮点数值的最高精度是16位小数，但是在进行算术计算时其精度远远不如整数。
例如：0.1加0.2的结果 不是0.3， 而是0.30000000000000004。这个舍入误差会导致无法测试特定的浮点数值。
数字可以写成十进制、八进制、十六进制。
-
八进制在js中表示是第一位一定要是0，后面就是八进制字数序列（0~7）
-
十六进制字面量前两位必须是0x，后面跟十六进制数字（09及AF）。字母A~F不区分大小写。
-
数值字面量：数值的固定值的表示法。
110102460.5 -
进制
-
// 十进制 var num = 9; 进行算数计算时，八进制和十六进制表示的数值最终都将被转换成十进制数值。 // 十六进制 var num = 0xA; 数字序列范围：0~9以及A~F // 八进制 var num1 = 07; // 对应十进制的7 var num2 = 017; // 对应十进制的15 var num3 = 08; // 对应十进制的8 //数字序列范围：0~7 //如果字面值中的数值超出了范围，那么前导零将被忽略，后面的数值将被当作十进制数值解析
-
-
浮点数
-
浮点数的精度问题
-
// 浮点数 var a = 10.2; var b = 20.3333; var n = 5e-324; // 科学计数法 5乘以10的-324次方 // 浮点数值的最高精度是 17 位小数，但在进行算术计算时其精确度远远不如整数 var result = 0.1 + 0.2; // 结果不是 0.3，而是：0.30000000000000004 console.log(0.07 * 100);//7.000000000000001
-
-
数值范围
-
//最小值：Number.MIN_VALUE，这个值为： 5e-324 //最大值：Number.MAX_VALUE，这个值为： 1.7976931348623157e+308 //无穷大(正无穷)：Infinity //无穷小（负无穷）：-Infinity
-
-
数值判断（NaN和isNaN()）
-
NaN代表非数值
-
isNaN()判断一个变量是一个不是数字的值吗
-
console.log(isNaN(''))//false console.log(isNaN('10'))//false console.log(isNaN(' '))//false console.log(isNaN('12px'))//true console.log(isNaN(1/0))//false console.log(isNaN(NaN))//false console.log(isNaN(true))//false console.log(isNaN(null)//false console.log(isNaN(undefined))//true console.log(NaN==NaN)//false console.log(NaN===NaN)//false因为NaN与任何值都不相等包括自身
-
2.4.3 布尔（Boolean）
Boolean（布尔）类型用于表示真假:
- 比如是否毕业. 是否有身份证. 是否购买车票. 是否成年人；
- 比如开发中，我们会判断一个账号是否登录、是否是管理员、是否具备某个权限、是否拥有某个英雄、皮肤等；
Boolean 类型仅包含两个值：true 和 false:
- 就两个值，一个是true，一个false，true表示真 false表示假
- 前面，讲的string或number数据类型，对应的值有无数个
- 使用关系运算符运算的结果，就是布尔数据类型
计算机内部存储：true为1，false为0。
2.4.4 数组（Array）
2.4.4.1、为什么需要数组?
之前学习的数据类型，只能存储一个值(比如：Number/String。我们想存储班级中所有学生的姓名，此 时该如何存储？
2.4.4.2、数组的概念
所谓数组，就是将多个元素（通常是同一类型）按一定顺序排列放到一个集合中，那么这个集合我们就 称之为数组。
2.4.4.3、数组的定义及使用
数组是一个有序的列表，可以在数组中存放任意的数据，并且数组的长度可以动态的调整。 使用关键字new创建或[]
创建数组的方式：
- var 数组名=[数组值…值N];
- var 数组名= new Array(值1…值N);
- var 数组名= new Array();
可以通过数组的下标来访问数组的元素：
- 数组元素的顺序从0开始
- 数组名[0]=值;
/**
JavaScript数组的创建方式:
1. 构造函数创建
var 数组名 = new Array(); -- 得到一个空数组
var 数组名 = new Array(数组); -- 创建指定长度的数组
var 数组名 = new Array(值1，值2，值3...) 创建数组并赋予值
2. 快捷创建
var 数组名 = [];
var 数组名 = [值1，值2，值3....];
JavaScript数组的属性:
length属性 用来获取数组的长度
JavaScript数组的特点:
JS数组可以存储任意数据类型
JS数组自动扩容，不是固定长度
注意事项:
当JS变量只有声明没有赋值的时候，去调用，那么undefined
当JS根本没有这个变量的时候，去调用，那么报错 arr is not defined
*/
var arr1 = new Array();
document.write("数组1的长度为:" + arr1.length + "<br>");
var arr2 = new Array(5);
document.write("数组2的长度为:" + arr2.length + "<br>");
//给数组存储数据: 通过下标来存储数据
//语法: 数组名[下标] = 值;
arr2[0] = 10;
arr2[1] = 20;
arr2[2] = 30;
arr2[3] = 40;
arr2[4] = 50;
//这种写法是正确的，与其他语言不同，js会在数组没有这个下标的时候，自动去添加一个。
arr2[10] = 100;
//调用数组里面的值
//语法: 数组名[下标]
document.write("下标1的值是:" + arr2[1] + "<br>");
document.write("下标20的值是:" + arr2[20] + "<br>");
document.write("数组2的长度为:" + arr2.length + "<br>");
var arr3 = new Array(5,"Hello",true,44.22);
document.write("数组3的长度为:" + arr3.length + "<br>");
var arr4 = []; //创建一个空数组 类似于 new Array();
var arr5 = [1,3,5,7]; //创建数组并赋值
var arr6 = [7];
document.write("数组6的长度为:" + arr6.length + "<br>");
// 补充 :数组 的长度 可以动态改变
var scores = []; // 空数组
console.log(scores.length);
// 清空数组
scores.length = 0;
console.log(scores);
2.4.4.4、遍历数组
数组遍历的基本语法：
for(var i = 0; i < arr.length; i++) {
// 数组遍历的固定结构
}
// 获取数组中的每一项，并打印（遍历数组）
var names = ['zs', 'ls', 'ww', 'zl'];
for (var i = 0; i < names.length; i++) {
console.log(names[i]);
}
//遍历数组 先打印最后一项 长度 - 1 长度 - 2
var names = ['zs', 'ls', 'ww', 'zl'];
for (var i = names.length - 1; i >= 0; i--) {
console.log(names[i]);
}
for(var index in arr){
console.log(arr[index])
}
2.4.4.5、数组中新增元素
数组的赋值：
// 格式：数组名[下标/索引] = 值;
// 如果下标有对应的值，会把原来的值覆盖，如果下标不存在，会给数组新增一个元素。
var arr = ["red", "green", "blue"];
// 把red替换成了yellow
arr[0] = "yellow";
// 给数组新增加了一个pink的值
arr[3] = "pink";
2.4.5 对象类型（Object）
Object 类型是一个特殊的类型，我们通常把它称为引用类型或者复杂类型:
例如：
var person = {
name: "张三",
age: 18,
height: 180,
sex: "男",
eat: function () {
console.log("吃饭喽....");
},
sleep: function () {
console.log("睡觉喽....");
},
}
- 在Javascript中，所有的对象都继承自Object对象。
- 对象没有赋值的属性，该属性的值为undefined。
- 对象的方法是函数，后面会详解;
对象属性有两种访问方式：
var person = {
name: "张三",
age: 18,
height: 180,
sex: "男",
eat: function () {
console.log("吃饭喽....");
},
sleep: function () {
console.log("睡觉喽....");
},
}
console.log(person.age);
console.log(person.sex);
person.eat()
person.sleep()
console.log(person["age"]);
2.4.6 空（Null）
Null也是一个只有一个值的数据类型，它的值就是null，任何变量只要给其赋值为null的话这个变量的数 据类型就是Null类型。
可以通过将变量的值设置为 null 来清空变量。
2.4.7、未定义（Undefined）
未定义或者定义了未赋值
null和undefined的区别
- Null 已定义，并初始化为null。
- Undefined:未定义，或者未初始化 。
2.5 typeof运算符
typeof运算符可以查询数据类型：
- 其返回可能值有:undefined，boolean，number，string、object以及function.
- 可以使用typeof(变量名)查询数据类型
var age = 100;
function fn1(){
}
console.log(typeof NaN);//number
console.log(typeof undefined)//undefined
console.log(typeof null);//object
console.log(typeof age);//number
console.log(typeof fn1)//function
//typeof两种写法
//typeof age或者typeof(age)
2.6 数据类型转换
2.6.1 转换为字符串类型（String）
有三种方式：
- toString()方法
- String()函数
- +拼接字符串
2.6.1.1 toString()
无法对null和undefined进行类型转换
var num1 = 18
var arr = [1,2,3,4]
var n = null
var und;
var bl = true
var obj = {name:"zhangsan",age:18}
//18 string
console.log(num1.toString(),typeof(num1.toString()));
//1,2,3,4 string
console.log(arr.toString(),typeof(arr.toString()));
//true string
console.log(bl.toString()),typeof(bl.toString());
//[object Object] string
console.log(obj.toString(),typeof(obj.toString()));
// console.log(n.toString());
// console.log(und.toString());
//上述代码，null和undefined无法正常进行类型转换，因为null和undefined中没有toString()方法，不能通过toString()进行类型转换
2.6.1.2 String()
可以对null和undefined进行类型转换
var num1 = 18
var arr = [1,2,3,4]
var n = null
var und;
var bl = true
var obj = {name:"zhangsan",age:18}
//18 string
console.log(String(num1),typeof(String(num1)));
//1,2,3,4 string
console.log(String(arr),typeof(String(arr)));
//true string
console.log(String(bl),typeof(String(bl)));
//[object Object] string
console.log(String(obj),typeof(String(obj)));
//null string
console.log(String(n),typeof(String(n)));
//undefined string
console.log(String(und),typeof(String(und)));
2.6.1.3 String()和toString()的区别
-
String()方法：String()是一个全局函数，可以将任何数据类型转换为字符串。- 如果参数是原始类型（如数字、布尔值、null、undefined），
String()将其转换为对应的字符串。 - 如果参数是对象类型，则会调用对象的
toString()方法（如果存在）来进行转换。
-
toString()方法：toString()是 JavaScript 中所有对象的方法，用于将对象转换为字符串。- 对于原始类型的值，可以通过将其包装在对应的包装对象中，然后调用
toString()方法来进行转换。 - 对于大多数内置对象（如数组、日期对象等），它们都有自己的
toString()方法，用于返回特定的字符串表示形式。
需要注意的是，toString() 方法是对象的方法，如果尝试将 null 或 undefined 调用 toString()，将会抛出 TypeError 错误。
总结：String() 是一个全局函数，可以将任何数据类型转换为字符串，而 toString() 是对象的方法，用于将对象转换为字符串。对于大多数情况下，它们可以实现相同的功能，但在某些特定情况下，它们的行为可能会有所不同。
2.6.1.4 拼接字符串
var num1 = 18
var arr = [1,2,3,4]
var n = null
var und;
var bl = true
var obj = {name:"zhangsan",age:18}
//18 string
console.log(num1+'',typeof(num1+''));
//1,2,3,4 string
console.log(arr+'',typeof(arr+''));
//true string
console.log(bl+'',typeof(bl+''));
//[object Object] string
console.log(obj+'',typeof(obj+''));
//null string
console.log(n+'',typeof(n+''));
//undefined string
console.log(und+'',typeof(und+''));
2.6.2 转换为数值类型（Number）
有4中方法
- Number()
- parseInt()
- parseFloat()
- +,-,0等运算
2.6.2.1 Number()
Number()可以将布尔转换成数字类型，可以将null转换为0，对于非纯数字字符串返回NaN
var num1 = '18'
var num2 = 'age=18'
var num3 = '18age'
var arr = [1,2,3,4]
var n = null
var und;
var bl = true
var obj = {name:"zhangsan",age:18}
//18 number
console.log(Number(num1),typeof(Number(num1)));
//NaN number
console.log(Number(num2),typeof(Number(num2)));
//NaN number
console.log(Number(num3),typeof(Number(num3)));
//NaN number
console.log(Number(arr),typeof(Number(arr)));
//0 number
console.log(Number(n),typeof(Number(n)));
//NaN number
console.log(Number(und),typeof(Number(und)));
//1 number
console.log(Number(bl),typeof(Number(bl)));
//NaN number
console.log(Number(obj),typeof(Number(obj)));
2.6.2.2 parseInt()
parseInt()不可以将布尔转化为数字类型，也无法转换null，两者的结果都为NaN，对于非纯数字字符串，从第一位逐个向后直到遇到非数字的字符停止。如果字符串全是非数字则返回NaN
var num1 = '18'
var num2 = 'age=18'
var num3 = '18age'
var num4 = '3.14'
var arr = [1,2,3,4]
var n = null
var und;
var bl = true
var obj = {name:"zhangsan",age:18}
//18 number
console.log(parseInt(num1),typeof(parseInt(num1)));
//NaN number
console.log(parseInt(num2),typeof(parseInt(num2)));
//18 number
console.log(parseInt(num3),typeof(parseInt(num3)));
//3 number
console.log(parseInt(num4),typeof(parseInt(num4)));
//1 number
console.log(parseInt(arr),typeof(parseInt(arr)));
//NaN number
console.log(parseInt(n),typeof(parseInt(n)));
//NaN number
console.log(parseInt(und),typeof(parseInt(und)));
//NaN number
console.log(parseInt(bl),typeof(parseInt(bl)));
//NaN number
console.log(parseInt(obj),typeof(parseInt(obj)));
2.6.2.3 parseFloat()
与parseInt()唯一不同之处就是可以识别小数点
var num1 = "3.14"
//3.14 number
console.log(parseFloat(num4),typeof(parseFloat(num4)));
2.6.2.4 +,-,0等运算符
var num1 = "3.14"
var num2 = "18"
var num3 = "age12"
var num4 = "12age"
var num5 = null
var num6;
var bl = true;
var arr = [1,2,3,4]
var obj = {name:"zhangsan",age:18}
//3.14 3.14 3.14 -3.14
console.log(num1-'',num1-0,+num1,-num1);
//18 18 18 -18
console.log(num2-'',num2-0,+num2,-num2);
//NaN NaN NaN NaN
console.log(num3-'',num3-0,+num3,-num3);
//NaN NaN NaN NaN
console.log(num4-'',num4-0,+num4,-num4);
//0 0 0 -0
console.log(num5-'',num5-0,+num5,-num5);
//NaN NaN NaN NaN
console.log(num6-'',num6-0,+num6,-num6);
//1 1 1 -1
console.log(bl-'',bl-0,+bl,-bl);
//NaN NaN NaN NaN
console.log(arr-'',arr-0,+arr,-arr);
//NaN NaN NaN NaN
console.log(obj-'',obj-0,+obj,-obj);
2.6.3 转换为布尔类型（Boolean）
var str1 = "Hello World";
var str2 = "";
var num = 120.2;
var n = null;
var un;
var arr = [];
var obj = {};
function fn1(){}
// 任何非空字符串都转换为true,空字符串转换为false
console.log(Boolean(str1)); // true
console.log(Boolean(str2)); // false
// 任何非0数值都转换为true,0和NaN转换为false
console.log(Boolean(num)); // true
console.log(Boolean(0)); // false
console.log(Boolean(NaN)); // false
// 对象和数组以及函数都转换为true
console.log(Boolean(arr));//true
console.log(Boolean(obj));//true
console.log(Boolean(fn1));//true
// Null和Undefined都转换为false
console.log(Boolean(n));//false
console.log(Boolean(un));//false
未完待续…
扫一扫
6248
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
