1、JS声明变量
var:
var 是 ES5 中引入的声明变量的关键字。
它具有函数作用域，即变量的作用域限定在声明它的函数内部或全局作用域中。
var 声明的变量可以被重新赋值，并且可以在声明之前使用（变量提升）。
如果在同一作用域内重复使用 var 声明同一个变量名，变量会被覆盖。
let:
let 是 ES6（ECMAScript 2015）中引入的块级作用域的声明变量的关键字。
它具有块级作用域，即变量的作用域限定在声明它的块（通常是由花括号 {} 包围的代码块）中。
let 声明的变量可以被重新赋值，但不能在同一作用域内重复声明同一个变量名。
不同于 var，let 不会进行变量提升，所以在声明之前使用 let 声明的变量会导致引用错误。
const:
const 也是 ES6 中引入的块级作用域的声明变量的关键字。
它用于声明常量，即一旦赋值后就不能再更改的变量。
const 具有块级作用域，类似于 let。
const 声明的变量必须在声明时进行初始化，且不能再次赋值给其它值。
对于复杂类型的数据（例如对象和数组），const 并不冻结该数据的内容，只是保证变量本身不会被重新赋值。2、变量初始化是变量声明并赋值
var age = 22;
let name = prompt("请输入你的名字")
alert("你的名字是：" + name);
prompt()：是 JavaScript 中的一个内置函数，用于在浏览器中显示一个对话框，让用户输入文本内容。
alert：是 JavaScript 的一个内置函数，用于在浏览器中显示一个简单的对话框，用于向用户显示一条消息。3、变量的命名规范
1、由字母（A-Z a-z）、数值（0-9）、下划线_、美元符号$ 组成
2、严格区分大小写
3、不能以数字开头
4、不能是关键字、保留字
5、变量命名必须有意义
6、遵守驼峰命名法，首字母小写，后面单词的首字母需要大写
7、推荐翻译网站 ：有道、爱词霸以上总结练习：
// 练习：交换两个变量的内容(步骤和java语言中的交换变量内容一样)
var add1 = 123;
var add2 = 234;
console.log('第一个内容是' + add1 + '\n' + '第二个内容' + add2)
var temp;
temp = add1;
add1 = add2;
add2 = temp;
console.log('第一个内容是' + add1 + '\n' + '第二个内容' + add2)
/* 小结：
1、为什么需要变量？因为需要存储数据
2、变量是什么？变量是存储数据的容器
3、变量的本质是什么？变量的本质是申请空间，存储数据
4、变量是怎么使用的？使用变量时，声明变量并变量赋值（简称初始化）
5、什么是变量的初始化？声明变量的同时对变量进行赋值
6、变量命名规范有哪些？
（1、由字母（A-Z a-z）、数值（0-9）、下划线_、美元符号$ 组成
2、严格区分大小写
3、不能以数字开头
4、不能是关键字、保留字
5、变量命名必须有意义
6、遵守驼峰命名法，首字母小写，后面单词的首字母需要大写）
7、交换变量的思路？和java语言交换两个变量的内容一样*/4、JS三种与用户交互和输出信息
/* JS三种与用户交互和输出信息：
方法 说明 归属
alert(msg) 浏览器弹出警示框 浏览器
console.log(msg) 浏览器控制台打印输出信息 浏览器
prompt(msg) 浏览器弹出输入框，用户可以输入 浏览器*/
prompt("请输入你的年龄：")
alert("我是计算机指令")
console.log("我是程序员才能看的内容！")
上面三个都是浏览器提供的特定功能和API。它们用于与用户交互和输出信息，帮助开发者在开发过程中进行调试、记录日志和与用户进行简单的交互。
console函数：
console.log()：用于在控制台输出普通信息。可以接受一个或多个参数，并将它们打印到控制台中。
console.log('Hello, World!');
console.log('The answer is', 42);
console.error()：用于输出错误信息。与 console.log() 类似，但会将信息标记为错误，并以不同的样式显示。
console.error('Something went wrong!');
console.warn()：用于输出警告信息。类似于 console.log()，但会将信息标记为警告，并以不同的样式显示。
console.warn('This action is not recommended!');
console.info()：用于输出一般的信息。类似于 console.log()，但会将信息标记为信息类别，并以不同的样式显示。
console.info('This is an informational message.');
console.debug()：用于输出调试信息。与 console.log() 类似，但会将信息标记为调试信息，并以不同的样式显示。通常在调试代码时使用。
console.debug('Debugging information');5、JS声明变量的特殊情况
| 情况 | 说明 | 结果 |
| var age; console.log(age) | 只声明不赋值 | undefined或者空白内容 |
| console.log(age) | 不声明不赋值，直接使用 | 报错（JS是从上到下一行一行解析的，如果上一行报错，下面就不会执行，除非自己解决） |
| age=10; console.log(age) | 不声明只赋值 | 正常使用（这种情况是声明一个var变量，但是语法格式不提倡使用） |
代码练习：
// 1、只声明不赋值，结果显示underlined
var name;
console.log(name ? name : "name变量输出值：undefined");
// 2、不声明不赋值，直接使用，结果报错
try {
console.log("这时try部分");
console.log("age变量输出值：" + age);
} catch (error) {
console.log(error);
}
// 报错的语句如果不加修改的话，其位置后面的js语句是不会被执行的，所以这里使用try...catch...
// 3、不声明只赋值，结果正常显示
address = "广州";
console.log("address变量输出值：" + address);
6、JS常见的几种数据类型（ES6多了Symbol数据类型、ES10多了bigInt数据类型）
简单数据类型：Undefined、Null、Boolean、Number、String
复杂数据类型：Object
| 简单数据类型 | 说明 | 默认值 |
| Number | 数字型，包含整型数值和浮点型数值 | 0 |
| Boolean | 布尔值类型，如true false 可以对应等价成1和0 | false |
| String | 字符串类型，内容都需要带引号 | "" '' |
| Undefined | var a; 声明了变量a但是没有给值 | undefined |
| Null | var a=null; 声明了变量a为空值。 | null |
扩展：
null 是一个特殊的关键字，表示一个空值或者不存在的对象。当你将一个变量赋值为 null 时，它会被认为是一个空值。空值不占用内存空间，赋值为 null 的变量会释放其之前所引用的对象，从而允许垃圾回收器回收相应的内存。
undefined 是一个表示未定义值的特殊关键字。当一个变量声明但未赋值时，默认的初始值就是 undefined。未定义的变量会占用内存空间，但它的值为 undefined，表示该变量没有被赋予有效的值。
代码练习：
// 1、数字型变量
var age = 18;
console.log(age);
// 2、布尔值类型
var bool = true;
console.log(bool);
// 3、字符串类型
var add = "北京123";
console.log(add);
// 4、underfined
var age1;
console.log(age1);
// 5、null
var add1 = null;
console.log(add1);
// js中数值的最大值和最小值
console.log("最大值：" + Number.MAX_VALUE);
console.log("最小值：" + Number.MIN_VALUE);
// 计算机数字型的三种特殊值
console.log("无穷大：" + Number.MAX_VALUE * 2);
console.log("无穷小：" + Number.MAX_VALUE * -2);
// 输出NaN
console.log("你好啊" * 2);
// 判断一个数值是否为NaN，可以使用 isNaN(内容)
注意：上面乘以2不是固定写法，因为Number.MAX_VALUE已经是最大了，
总的只要乘以一个比1大的数，就可以得到无穷
Infinity 代表无穷大，大于任何数值
-Infinity 代表无穷小，小于任何数值
NaN ，Not a Number 代表一个非数值7、Boolean、Undefined、Null
boolean布尔数据类型中：
true表示正确，或表示数值中的1
false表示不正确，或数值中的0，其中的1和0 可以参与数学运算
undefined和null
null表示空值
underfined和null与字符串相连的时候可看成是字符串，并与其他的字符串进行相连
如果是进行数学运算，underfined+1结果是NaN,而null+1结果表示1，因为null为空值代码练习：
console.log(true);
console.log(false);
console.log(true + 1);
console.log(false + 1);
console.log("~~~~~~~~~~~")
console.log(undefined);
console.log(undefined + "与字符串相连转化为字符串");
console.log(undefined + 1);
console.log("~~~~~~~~~~~")
console.log(null + "与字符串相连转化为字符串");
console.log(null + 1);//此时的null表示空，结果是1
8、字符串的length属性
代码练习：
var info = "我是一名程序员";
console.log(info.length);
9、数据类型转换
什么是数据类型转换？
使用表单、prompt获取过来的数据默认是字符串类型的数据，此时就不能直接简单的进行加法运算，
而需要转换变量的数据类型，简单的就是把一种数据类型的变量转换为另外一种数据类型1）、转换为字符串
| 方式 | 说明 | 案例 |
| toString() | 转换成字符串 | var num = 1; console.log(num.toString()) |
| String() | 转换成字符串 | var num = 1; console.log(String(num)); |
| 加号拼接字符串 | 和字符串拼接的结果都是字符串,使用加号的拼接方也称为是隐式转换方法 | var num = 1; console.log("世界第"+num) |
备注：使用字符串的concat()也是可以拼接的，"".concat(目标数值) 这样也可以转换。
2）、转换为数字型（重点）
| 方式 | 说明 | 案例 |
| parseInt(string)函数 | 将string类型的数据转换成整数类型 | var num = "78"; |
| parseFloat(string)函数 | 将string类型转换成浮点数数值型 | var num = "78.12"; console.log(parseFloat(num)) |
| Number(string)强制类型转换 | 将string类型转换成数值型 | var num = "12"或者是"12.22"; console.log(Number(num)); |
| JS隐式转换 | 利用算数运算隐式转换成数值型 | var num = "12"; console.log(num-0); |
注意：parseInt和parseFloat单词的大小写，这两个是重点。隐式转换是我们进行算术运算的时候，JS自动转换数据类型的方式。
代码练习：
// 1、将其他数类型转换为字符串类型
console.log(String(12));
console.log(typeof String(12));
var age = 18;
console.log(age.toString());
console.log(typeof age.toString());
console.log("" + 12 + 12);
console.log(typeof ("" + 12 + 12));
console.log(true.toString());
console.log(typeof true.toString());
try {
console.log(undefined.toString()); //不能转换成字符串类型;
} catch (error) {
console.log(error);
}
try {
console.log(typeof undefined.toString());
} catch (error) {
console.log(error);
}
try {
console.log(null.toString()); //不能转换成字符串类型;
} catch (error) {
console.log(error);
}
try {
console.log(typeof null.toString());
} catch (error) {
console.log(error);
}
代码练习：
// 2、将字符串类型转换为数值类型（数值类型有整数类型和浮点数类型）
console.log(parseInt("123"));
console.log(parseInt("123.123"));
console.log(parseFloat("123"));
console.log(parseFloat("123.123"));
console.log(Number("12"));
console.log(Number("12.12"));
console.log(parseInt(true)); //NaN
var add = "北京123";
console.log(parseInt(add)); //NaN
代码案例：
// 案例：弹出输入框，输入年龄之后计算出我们现在几岁再返回对话框
alert(
"你今年是" +
(new Date().getFullYear() -
parseInt(prompt("请输入你出生的年份："))) +
"岁"
);
// 案例2：提示用户在第一个输入框中输入第一个值，然后再在第二个输入框中输入第二个值，最后计算出结果并从对话框中显示
alert(
"结果是：" +
(Number(prompt("请输入第一个值")) + Number(prompt("请输入第二个值")))
);3)、布尔数类型的转换
// boolean()函数，其他类型转换成布尔数据类型，boolean("123")
// 代表空、否定的值会被转换为false，如''、0、NaN、null、undefined
// 其余值都会转换为true
console.log(Boolean(""));
console.log(Boolean(0));
console.log(Boolean(NaN));
console.log(Boolean(null));
console.log(Boolean(undefined));
console.log(Boolean("小白"));
console.log(Boolean("1213"));
console.log(Boolean(123));
10、逻辑中断
短路运算（逻辑中断）
短路运算的原理：当有多个表达式（值）时，左边的表达式值可以确定结果时，就不再继续右边的表达式的值
1、逻辑与
语法：表达式1&&表达式2
如果第一个表达式的值是真，则返回表达式2的值
如果第二个表达式的值是假，则返回表达式1的值
2、逻辑或
语法：表达式1||表达式2
如果第一个表达式的值为真，则返回表达式1
如果第一个表达式的值为假，则返回表达式2代码练习：
console.log(123 && 234);//234
console.log(0 && 234);//0
console.log("-------------------");
console.log(123 || 234);//123
console.log(0 || 234);//234
console.log(0 || -1);//-111、JS程 if 结构
常见的if书写结构：
单个 if 语句：这是最简单的 if 语句结构，只包含一个条件和一个代码块。如果条件为真（true），则执行代码块中的语句。
if (condition) {
// 代码块
}
if-else 语句：if-else 语句包含一个条件和两个代码块，一个用于条件为真时执行，另一个用于条件为假时执行。
if (condition) {
// 条件为真时执行的代码块
} else {
// 条件为假时执行的代码块
}
if-else if-else 语句：if-else if-else 语句可以用于多个条件的判断。它包含一个初始的 if 语句块，后面可以跟任意数量的 else if 语句块，最后可以有一个可选的 else 语句块。条件会按顺序进行判断，只有第一个满足条件的代码块会被执行。
if (condition1) {
// 条件1为真时执行的代码块
} else if (condition2) {
// 条件2为真时执行的代码块
} else if (condition3) {
// 条件3为真时执行的代码块
} else {
// 所有条件都不满足时执行的代码块（可选）
}
嵌套 if 语句：if 语句可以嵌套在其他 if 语句内部，以根据更复杂的条件逻辑执行不同的代码块。
if (condition1) {
if (condition2) {
// 条件1和条件2都为真时执行的代码块
} else {
// 条件1为真，条件2为假时执行的代码块
}
} else {
// 条件1为假时执行的代码块
}代码练习：
if (new Date().getFullYear() - prompt("请输入你的年龄") > 18) {
alert("已满18岁，可以进入。");
} else {
alert("禁止未成年人进入");
}
判断是否闰年
var year = prompt("请输入今年的年份");
if (year % 400 == 0 || year % 4 == 0 && year % 100 != 0) {
alert("今年是闰年！")
}
else {
alert("今年不是闰年！")
} 12、三元表达式
语法结构：条件判断?表达式1：表达式2
如果条件判断是真，返回表达式1的值，否则返回表达式2的值*/
// 案例：三元表达式补0
var value = prompt("请你输入一个值");
var val = value < 10 ? "0" + value : value;
alert(val)13、switch分支语句
语法结构：
switch语句他也是多分支结构，它用于基于不同的条件来执行不同的代码，当要针对变量设置一系列的特定的选项时，就可以使用switch
语法：
switch(表达式i){
case value1:
表达式1;
break;
case value2:
表达式2;
break;
case value3:
表达式3;
break;
default:表达式;
}
表达式和case的value是要相对应的，必须是值和数据类型都是一样的才可以执行指定的表达式
break：如果当前的case中没有break，则不会退出switch，会继续执行下一个case，直到遇到breakswitch语句和if语句的区别
1、一般情况下，两个语句可以相互转换使用
2、switch...case语句通常处理case为比较确定的值的情况，而if...else语句更加灵活，常用于范围判断
3、switch语句进行条件判断后直接执行到程序的条件语句，效率比较高。而if..else语句有多种条件，就得判断多少次
4、当分支比较多的情况，使用switch语句，执行效率高
5、当分支比较少的情况，使用if..else语句，结构清晰代码练习：
var fruitname = prompt("请输入你喜欢的水果：");
switch (fruitname) {
case "苹果":
alert("喜欢的是苹果");
break;
case "李子":
alert("喜欢的是李子");
break;
case "梨子":
alert("喜欢的是梨子");
break;
default:
alert("不知道喜欢什么");
}14、For循环语句
代码练习：
// 计算从1到100的和
let sum = 0;
for (let i = 1; i <= 100; i++) {
sum += i;
}
console.log(sum); // 5050// 使用for循环显示一个菱形
function generateDiamond(rows) {
const middleRow = Math.ceil(rows / 2);
let diamond = "";
for (let i = 1; i <= rows; i++) {
const spaces = Math.abs(middleRow - i);
const stars = rows - spaces * 2;
// 添加空格
diamond += " ".repeat(spaces);
// 添加星号
diamond += "*".repeat(stars);
// 添加换行符
diamond += "\n";
}
return diamond;
}
// 生成7行5列的菱形
const diamond = generateDiamond(7);
console.log(diamond); AMT练习：
let total_money = 0;
let str = 0;
while (str < 4) {
str = prompt(
"请输入你要的操作：\n1、存钱\n2、取钱\n3、显示余额\n4、退出"
);
switch (str) {
case "1":
total_money += Number(prompt("请输入你存入的金额"));
break;
case "2":
if (!total_money) {
alert("你当前没有金额可取！");
break;
}
let get_money = prompt("请输入你要取出的金额");
if (get_money < total_money) {
total_money -= get_money;
alert("取钱成功！");
} else {
alert("你的余额不够！\n你现在的余额是" + total_money);
}
break;
case "3":
if (!total_money) {
alert("当前你的账户没有金额！");
break;
}
alert("你的余额是" + total_money);
break;
}
}和for循环有关的排序前往CSDN
15、typeof
作用：用于获取给定值的数据类型
console.log(18);
console.log(typeof 18);//number
console.log("18");
console.log(typeof "18");//string
console.log(true);
console.log(typeof true);//boolean
console.log(undefined);
console.log(typeof undefined);//undefined
console.log(null);
console.log(typeof null);//null
console.log(prompt("请输入你的年龄"));
console.log(typeof prompt("请输入你的年龄"));//string16、JS预解析
JavaScript 预解析是 JavaScript 解释器在执行代码之前的一种处理过程。它涉及到变量和函数声明的提升，即在代码执行阶段之前，JavaScript 引擎会将变量和函数声明提升到其作用域的顶部。
1、变量声明提升：将变量声明移动到作用域的顶部，但不包括变量的赋值。这意味着你可以在声明之前使用变量，而不会引发错误。在变量赋值之前，这些变量的值将是 undefined。
2、函数声明提升：将函数声明移动到作用域的顶部，使其在声明之前就可以调用。
注意：使用 var 声明的变量和使用函数声明语法声明的函数会被提升，而使用 let、const 声明的变量和使用函数表达式声明的函数不会被提升。 console.log(num1);
var num1 = 10;
fun();
function fun() {
// 注意：(b = c = 10) 这种定义方式相当于没有使用var声明b变量和c变量
// 所以b和c在函数外面可以使用，但是a在函数内部使用var声明，所以外界访问的
// a变量表示没有定义
var a = (b = c = 10);
console.log("a：" + a);
console.log("b：" + b);
console.log("c：" + c);
console.log("num1：" + num1);
}
console.log(b);
console.log(c);
try {
console.log(a);
} catch (error) {
console.log(error);
}
17、函数的声明和调用
1、函数声明
function sum(a, b) {
return a + b;
}
console.log(sum());
2、函数表达式
let sum = function(){
return a + b;
}
console.log(sum())
3、箭头函数(ES6语法)
let sum = (a, b) => a + b;
console.log(sum())
18、函数形参中arguments
arguments的使用：
当我们不确定有多少个参数传递时，可以使用arguments来获取。
在js中arguments实际上它是当函数的一个内置对象，所有函数都内置了一个arguments对象。
arguments对象中存储了传递的所有实参。
这里的arguments对象可以说成是一个伪数组，也有数组的长度属性。 let arr = [];
for (let a = 1; a <= 10; a++) {
arr.push(Math.floor(Math.random() * 100));
}
function func1() {
return arguments;
}
console.log(func1(...arr));
补充：ES6扩展运算符
[...] 扩展运算符能将【数组】转换为逗号分隔的【参数序列】
const shuzu1 = [1, 2, 3];
function fun() {
console.log(arguments);
}
fun(shuzu1);
fun(...shuzu1);
19、函数的rest参数
ES6引入rest参数，用于获取函数的实参，用来代替arduments
ES6获取实参的方式：
和arguments的对比
function date() {
console.log(arguments);
}
date(1, 2, 3, 4, 5);
// rest参数,返回的是一个数组，arguments返回的是伪数组
function date1(...args) {
console.log(args);
}
date1(1, 2, 3, 4, 5);
// rest参数和arduments参数的区别是，rest参数还可以和其他的参数一起使用
function date2(a, b, ...args) {
console.log(a);
console.log(b);
console.log(args);
}
date2(1, 2, 3, 4, 5); 
20、创建对象的三种方式
创建对象的第一种方式：对象字面量
let dog = {
name: "可可",
type: "阿拉斯加",
age: 5,
color: "棕红色",
bark() {
console.log("汪汪");
},
showFilm() {
console.log("演电影");
},
};
创建对象的第二种方式：使用Object类创建实例
let object = new Object({
name: "张三",
age: 20,
});
创建对象的第三种方式：构造函数
构造函数是一种特殊的函数主要用来初始化对象，即为对象成员变量初始值，它总与new运算符一起使用，可以把对象中一些公共的属性和方法抽取出来封装到这个函数中。
function People(name, age) {
this.name = name;
this.age = age;
this.sayhi = () => {
console.log("你好啊");
};
}
var obj = new People("张三", 20);
obj.sex = "男";
console.log(obj);
obj.sayhi();21、获取对象中的属性名称和方法名称
获取对象属性和方法
Object.keys() 返回对象的可枚举属性和方法的名称数组。
Object.getOwnPropertyNames() 返回的数组的所有属性(可枚举或不可枚举)直接找到给定对象。
for...in...获取对象的可枚举属性名称和方法 let people = {
name: "张三",
age: 20,
address: "广州",
say() {
console.log("你好");
},
deleteProp(prop) {
Reflect.deleteProperty(this, prop);
// 也可以使用delete删除对象
// delete people[prop];
},
};
let peoInfo = {
sex: "男",
info: "个人信息",
};
Object.defineProperty(people, "sex", {
// writable属性不能写在这个对象中
// enumerable属性可设置成不可枚举的
enumerable: true,
// 配置这个属性表示这个属性是可以被删除的
configurable: true,
// 获取属性调用
get() {
// return peoInfo.sex;
return Reflect.get(peoInfo, "sex");
},
// 修改属性调用
set(newValue) {
// peoInfo.sex = newValue;
Reflect.set(peoInfo, "sex", newValue);
},
});
Object.defineProperty(people, "info", {
// 表示可写，可修改
writable: true,
configurable: true,
enumerable: true,
// 初始化
value: peoInfo.info,
});
console.log(people); //获取完成属性和方法
console.log(Object.keys(people)); //keys获取的是可枚举的属性，所以这里没有sex
console.log(Object.getOwnPropertyNames(people));
//getOwnPropertyNames获取的是可枚举和不可枚举的属性，所以这里可以得到sex
let arr = [];
for (let i in people) {
//for in 获取的是可枚举的属性，所以这里没有sex
arr.push(i);
}
console.log(arr);扩展：Reflect对象，身上有一些方法挺好用的！
Reflect 对象中提供了一系列常用的函数，用于操作对象。以下是一些常用的 Reflect 函数：
Reflect.get(target, propertyKey[, receiver])：返回目标对象中指定属性的值。
Reflect.set(target, propertyKey, value[, receiver])：将目标对象中指定属性的值设置为给定的值。
Reflect.has(target, propertyKey)：检查目标对象是否具有指定的属性，并返回一个布尔值。
Reflect.deleteProperty(target, propertyKey)：从目标对象中删除指定的属性，返回一个布尔值表示删除成功与否。
Reflect.getOwnPropertyDescriptor(target, propertyKey)：返回目标对象中指定属性的属性描述符对象。
Reflect.construct(target, argumentsList[, newTarget])：使用给定的参数列表调用构造函数，并返回一个新创建的对象。
Reflect.apply(target, thisArgument, argumentsList)：调用目标函数，并传入指定的 this 值和参数列表。
Reflect.getPrototypeOf(target)：返回目标对象的原型对象。
Reflect.setPrototypeOf(target, prototype)：将目标对象的原型设置为指定的原型对象。
Reflect.isExtensible(target)：检查目标对象是否可扩展，返回一个布尔值。
Reflect.preventExtensions(target)：使目标对象变为不可扩展，返回一个布尔值表示是否成功。
Reflect.ownKeys(target)：返回目标对象自身的属性键组成的数组，包括字符串键和符号键。
这些函数提供了一种更灵活和统一的方式来执行常见的对象操作，可以替代传统的操作符和函数，使代码更加简洁和易读。后续前往CSDN
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
