本文详细介绍了JavaScript的基础语法，包括变量的声明与使用、数据类型、流程控制结构（if、if...else、if...elseif...else、三元表达式、switch）、循环（for、while、do...while）以及数组、函数和对象的概念与创建方法。此外，还涵盖了Math、Date、数组和字符串等内置对象的使用。内容实用，适合初学者巩固JavaScript基础知识。
js基础语法小汇总
提示：作者 ：会者
寓意：会者定离，一期一祈
前言
提示：下面是JS语法基础
自己梳理一下，便于集中复习
一、变量
1 什么是变量
变量就是一个装东西的盒子
变化的量，变化的内容，变化的数据
2 变量的使用
先声明 在赋值
利用关键字 var 来声明
var 变量名;
var age; // 声明一个 名称为age 的变量
变量名 = 值;
age = 10; // 给 age 这个变量赋值为 10
= 用来把右边的值赋给左边的变量空间中 ，等号此处代表赋值的意思
var 变量名 = 值;
var age = 18; // 声明变量age同时赋值为 18
被称为 变量的初始化
二、数据类型
简单数据类型（基本数据类型）
三、流程控制
1 流程控制概念
流程控制就是来控制代码按照一定结构顺序来执行
流程控制主要有三种结构，分别是顺序结构、分支结构和循环结构，代表三种代码执行的顺序
分析图：
2 分支流程控制
if 语句
语法结构
// 条件成立执行代码，否则什么也不做
if (条件表达式/值/变量) { // 如果是值和变量，if会做隐式转换，转换为boolean类型 ***
// 条件成立执行的代码语句
}
if (3 < 5) {
alert('沙漠骆驼');
}
语句：可以理解为一个行为，可以是一行代码，也可以是一段代码，循环语句和分支语句就是典型的语句。
代码案例：
//弹出 prompt 输入框，用户输入年龄， 程序把这个值取过来保存到变量中
//使用 if 语句来判断年龄，如果年龄大于18 就执行 if 大括号里面的输出语句
var age = prompt('请输入您的年龄:');
if (age >= 18) {//这里>=做了一个隐式转换，将age字符串18转换为了数字18
alert('我想带你去网吧偷耳机');
}
if else语句（双分支语句）
语法结构
// 条件成立 执行 if 里面代码，否则执行else 里面的代码
if (条件表达式) {
// [如果] 条件成立执行的代码
} else {
// [否则] 执行的代码
}
例子
var age = prompt('请输+入您的年龄:');
if (age >= 18) {
alert('我想带你去网ba');
} else {//else不用写条件，因为不满足if则满足else，else的条件省略了（这里的else条件为age<18）
alert('滚， ');
}
判断闰年代码案例
//算法：能被4整除且不能整除100的为闰年（如2004年就是闰年，1901年不是闰年）或者能够被 400 整除的就是闰年
// 弹出prompt 输入框，让用户输入年份，把这个值取过来保存到变量中
// 使用 if 语句来判断是否是闰年，如果是闰年，就执行 if 大括号里面的输出语句，否则就执行 else里面的输出语句
// 一定要注意里面的且 && 还有或者 || 的写法，同时注意判断整除的方法是取余为 0
var year = prompt('请您输入年份：');
if (year % 4 == 0 && year % 100 != 0 || year % 400 == 0) {
alert('您输入的年份是闰年');
} else {
alert('您输入的年份是平年');
}
if else if 语句(多分支语句)
语法结构
// 适合于检查多重条件。
if (条件表达式1) {
语句1；
} else if (条件表达式2) {
语句2；
} else if (条件表达式3) {
语句3；
…
} else {
// 上述条件都不成立执行此处代码
}
判断成绩案例
// 按照从大到小判断的思路
// 弹出prompt输入框，让用户输入分数（score），把这个值取过来保存到变量中
// 使用多分支 if else if 语句来分别判断输出不同的值
var score = prompt('请您输入分数:');// 这里的>= ， 如果是string与number进行比较，会做隐式转换***
if (score >= 90) {
alert('宝贝，你是我的骄傲');
} else if (score >= 80) {
alert('宝贝，你已经很出色了');
} else if (score >= 70) {
alert('你要继续加油喽');
} else if (score >= 60) {
alert('孩子，你很危险');
} else {
alert('熊孩子，我不想和你说话，我只想用鞭子和你说话');
}
3 三元表达式（简单的if else （双分支） 的简写）
语法结构
表达式1/值 ? 表达式2/值 : 表达式3/值;
如果表达式1为 true ，则返回表达式2的值，如果表达式1为 false，则返回表达式3的值
代码
var num = 10;
var result = num > 5 ? '是的' : '不是的';
console.log(result);
数字补零案例
//用户输入0~59之间的一个数字
// 如果数字小于10，则在这个数字前面补0,（加0 拼接） 否则 不做操作
// 用一个变量接受这个返回值，输出
var time = prompt('请您输入一个 0 ~ 59 之间的一个数字');
// 三元表达式 表达式 ？ 表达式1 ：表达式2
var result = time < 10 ? '0' + time : time; // 把返回值赋值给一个变量
alert(result);
4 switch分支流程控制
语法结构
switch 语句也是多分支语句，它用于基于不同的条件来执行不同的代码。
当要针对变量设置一系列的特定值的选项时，就可以使用 switch。
switch( 表达式 ){ //表达式常为一个变量 ***
case value1: //仅仅是值，不支持写表达式：>=value1 ***
// 表达式 等于 value1 时要执行的代码
break;
case value2:
// 表达式 等于 value2 时要执行的代码
break;
default:
// 表达式 不等于任何一个 value 时要执行的代码
break; //这个可以省略
}
例子
switch (8) {
case 1:
console.log('这是1');
break;
case 2:
console.log('这是2');
break;
case 3:
console.log('这是3');
break;
default:
console.log('没有匹配结果');
}
注意 ：执行case 里面的语句时，如果没有break，则继续执行下一个case里面的语句
查询水果案例
//弹出 prompt 输入框，让用户输入水果名称，把这个值取过来保存到变量中。
// 将这个变量作为 switch 括号里面的表达式。
// case 后面的值写几个不同的水果名称，注意一定要加引号 ，因为必须是全等匹配。
// 弹出不同价格即可。同样注意每个 case 之后加上 break ，以便退出 switch 语句。
// 将 default 设置为没有此水果。
var fruit = prompt('请您输入查询的水果:');
switch (fruit) {
case '苹果':
alert('苹果的价格是 3.5/斤');
break;
case '榴莲':
alert('榴莲的价格是 35/斤');
break;
default:
alert('没有此水果');
}
四、循环
1 for循环
语法结构
for(初始化变量; 条件表达式; 操作表达式 ){
//循环体
}
例子
for (var i = 1; i <= 100; i++) {
console.log('你好吗');
}//i : 迭代器 ：iterator， 迭代也称之为循环
个人理解
for (var i = 1; i <= 100; i++) {
console.log('你好吗');//循环体
// i 的理解： i称之为计数器
// for循环是要循环多次，要确定循环几次，就需要有一个计数器
// 循环一次，i就需要加1
}
/*1. 初始化：var i = 1
初始化变量，初始化只执行一次。 （如果执行多次，死循环）
2. 条件：i <= 100
i的值一旦变化，就要判断 条件表达式：i <= 100 是否成立
3. 循环体
条件表达式一旦成立，就会执行循环体。 否则，不执行。
4. 操作表达式：i++
最后执行 操作表达式：i++，因为i如果不变化，那么永远为1，就为死循环了。
操作表达式执行完，i又变化了，所以再执行第二步。
2 双重for循环
- 循环嵌套是指在一个循环语句中再定义一个循环语句的语法结构
- 例如在for循环语句中，可以再嵌套一个for 循环，这样的 for 循环语句我们称之为双重for循环。
双重 for 循环语法
for (外循环的初始; 外循环的条件; 外循环的操作表达式) {
for (内循环的初始; 内循环的条件; 内循环的操作表达式) {
需执行的代码;
} - 内层循环可以看做外层循环的语句
- 内层循环执行的顺序也要遵循 for 循环的执行顺序
- 外层循环执行一次，内层循环要执行全部次数
- 例子：
for (var i = 1; i <= 3; i++) {
console.log('这是外层循环第' + i + '次');
for (var j = 1; j <= 3; j++) {
console.log('这是里层的循环第' + j + '次');
}
}
核心逻辑：
- 内层循环控制列，外层循环控制行
- 外层循环与内层循环不能使用同一个计数器，一般外使用i，内使用j（程序员的习惯）
for 循环小结 - for 循环可以重复执行某些相同代码
- for 循环可以重复执行些许不同的代码，因为我们有计数器
- for 循环可以重复执行某些操作，比如算术运算符加法操作
- 随着需求增加，双重for循环可以做更多、更好看的效果
- 双重 for 循环，外层循环一次，内层 for 循环全部执行
- for 循环是循环条件和数字直接相关的循环
3 while循环
while 语句可以在条件表达式为真的前提下，循环执行指定的一段代码，直到表达式不为真时结束循环。
while语句的语法结构如下：
while (条件表达式) {
// 循环体代码
}
例子
var num = 1;
while (num <= 100) {
console.log('好啊有');
num++;
}
执行思路：
- 先执行条件表达式，如果结果为 true，则执行循环体代码；如果为 false，则退出循环，执行后面代码
- 执行循环体代码
- 循环体代码执行完毕后，程序会继续判断执行条件表达式，如条件仍为true，则会继续执行循环体，直到循环条件为 false 时，整个循环过程才会结束
注意： - 使用 while 循环时一定要注意，它必须要有退出条件，否则会成为死循环
- while 循环和 for 循环的不同之处在于 while 循环可以做较为复杂的条件判断，比如判断用户名和密码
4 do-while循环
- do… while 语句其实是 while 语句的一个变体。
- 该循环会先执行一次代码块，然后对条件表达式进行判断，如果条件为真，就会重复执行循环体，否则退出循环。
- do… while 语句的语法结构如下：
do {
// 循环体代码 - 条件表达式为 true 时重复执行循环体代码
} while(条件表达式);
var i = 1;
do {
console.log('how are you?');
i++;
} while (i <= 100)
注意：先再执行循环体，再判断，do…while循环语句至少会执行一次循环体代码
代码案例
// while循环案例
// 1. 打印人的一生，从1岁到100岁
var i = 1;
do {
console.log('这个人今年' + i + '岁了');
i++;
} while (i <= 100)
// 2. 计算 1 ~ 100 之间所有整数的和
var sum = 0;
var j = 1;
do {
sum += j;
j++;
} while (j <= 100)
console.log(sum);
// 3. 弹出一个提示框， 你爱我吗？ 如果输入我爱你，就提示结束，否则，一直询问。
do {
var message = prompt('你爱我吗?');
} while (message !== '我爱你')
alert('我也爱你啊');
5 循环总结
-
-
确定循环次数
- 循环条件一般是一个范围
- 不确定循环次数 或 循环条件可以比较复杂
while： 先判断，再做
do while：先做，再判断（先执行一次，才知道是否要开始循环 ，比如： 你爱我么？ ） - 大部分情况用的都是for，while应用场景是：写死循环
五、数组
1 数组的概念
- 数组可以把一组相关的数据一起存放，并提供方便的访问(获取）方式
- 数组是指一组数据的集合，其中的每个数据被称作元素（项）
- 在数组中可以存放任意类型的元素
- 在数组中可以存放任意类型的元素，但是我们一般会把一组相关的，并且数据类型相同的数据一起存放
- 数组是一种将一组数据存储在单个变量名下的优雅方式
- 数组的理解：数据组合，数据集合
2 创建数组
利用 new 创建数组
var 数组名 = new Array() ；
var arr = new Array(); // 创建一个新的空数组
注意: Array () ，A 要大写
利用数组字面量创建数组
//1. 使用数组字面量方式创建空的数组
var 数组名 = []；
//2. 使用数组字面量方式创建带初始值的数组
var 数组名 = ['小白','小黑','大黄','瑞奇'];
- 数组的字面量是方括号 [ ]
- 声明数组并赋值称为数组的初始化
- 这种字面量方式也是我们以后最多使用的方式
数组中可以存放任意类型的数据，例如字符串，数字，布尔值等。
3 获取数组中的元素
索引 (下标) ：用来访问数组元素的序号（数组下标从 0 开始）
// 定义数组
var arrStus = [1,2,3];
// 获取数组中的第2个元素
alert(arrStus[1]);
六、函数
1 函数的概念
在 JS 里面，可能会定义非常多的相同代码或者功能相似的代码，这些代码可能需要大量重复使用
函数：就是封装了一段可被重复调用执行的代码块。通过此代码块可以实现大量代码的重复使用
2 函数的使用
使用步骤：声明函数和调用函数
声明函数
语法如下：
// 声明函数
function 函数名() {
//函数体代码
}
注意：由于函数一般是为了实现某个功能才定义的， 所以通常我们将函数名命名为动词，比如 getSum
例子
function sayHi() {
console.log('hi~~');
}
调用函数
*- 语法如下：
// 调用函数
函数名();
- 注意：声明函数本身并不会执行代码，只有调用函数时才会执行函数体代码。
- 口诀：函数不调用，自己不执行
例子
function sayHi() {
console.log('hi~~');
}
sayHi();
3 函数的参数
参数的作用 : 在函数内部某些值不能固定，我们可以通过参数在调用函数时传递不同的值进去
函数参数的语法：
// 带参数的函数声明
function 函数名(形参1, 形参2 , 形参3...) { // 可以定义任意多的参数，用逗号分隔
// 函数体
}
// 带参数的函数调用
函数名(实参1, 实参2, 实参3...);
- 函数调用的时候实参值会传递给形参
- 形参简单理解为：不用声明的变量
函数的两种声明方式
1 自定义函数方式(命名函数)
// 声明定义方式
function fn() {...}
// 调用
fn();
2 函数表达式方式(匿名函数）
// 这是函数表达式写法，匿名函数后面跟分号结束
var fn = function(){...}；
// 调用的方式，函数调用必须写到函数体下面
fn();
七、对象
1 对象的相关概念
在 JavaScript 中，对象是一组无序的相关属性和方法的集合，所有的事物都是对象，例如字符串、数值、数组、函数等。
对象是由属性和方法组成的
- 属性：事物的特征，在对象中用属性来表示（常用名词）
- 方法：事物的行为，在对象中用方法来表示（常用动词）
为了让更好地存储一组数据，对象应运而生：对象中为每项数据设置了属性名称，可以访问数据更语义化，数据结构清晰，表意明显，方便开发者使用 - 对象中的变量，称之为属性
- 对象中的函数，称之为方法
2 创建对象的三种方式
1 利用字面量创建对象
语法如下
var obj = {key:value,key2:value2...};
代码如下
var star = {// star即是创建的对象。
name : 'pink',
age : 18,
sex : '男',
sayHi : function(){
alert('大家好啊~');
}
};
对象的使用
//1.点语法：对象.属性
console.log(star.name)
//2.中括号语法：对象['属性']
console.log(star['name'])//star[name],先找name变量的值：'age'，star['age']---- 18
//1.点语法：对象.方法()
star.sayHi(); // 调用方法,注意，一定不要忘记带后面的括号
//2.中括号语法：对象['方法']()
star['sayHi']();
2 利用 new Object 创建对象
创建空对象
var andy = new Object();
示例代码
andy.name = 'pink';//给andy添加name属性，并赋值
andy.age = 18;
andy.sex = '男';
andy.sayHi = function(){//给andy添加sayHi方法，并赋值
alert('大家好啊~');
}
案例：
//请用new Object 形式创建一个鸣人对象。
//具体信息如下：
//姓名：鸣人
//性别：男
//年龄：19岁
//技能（skill）：影分身术
var nld = new Object();
nld.name = '鸣人';
nld.sex = '男';
nld.age = 19;
nld.skill = function() {
alert('色诱术');
}
3 利用构造函数创建对象
为啥需要构造函数
- 因为我们一次创建一个对象，里面很多的属性和方法是大量相同的 我们只能复制
- 因此我们可以利用函数的方式，封装这些重复的代码
- 又因为这个函数不一样，里面封装的不是普通代码，而是创建对象的代码，所以叫构造函数
- 构造函数，就是把我们对象里面一些相同的属性和方法抽象出来封装到函数里面
- 构造函数： 特殊的函数，能够构造对象（创建对象）的函数
语法
定义构造函数的语法如下：
function 构造函数名(形参1,形参2,形参3) {// 构造函数的形参与对象的普通属性是一致的
this.属性名1 = 形参1;//形参就是要给属性赋值
this.属性名2 = 形参2;
this.属性名3 = 形参3;
this.方法名 = 函数体;//函数体不需要传递
}
构造函数的调用语法：通过new调用
var obj = new 构造函数名(实参1，实参2，实参3)
注意事项
- 构造函数约定首字母大写。
- 函数内的属性和方法前面需要添加 this ，表示当前对象的属性和方法。
- 构造函数中不需要 return 返回结果。
- 当我们创建对象的时候，必须用 new 来调用构造函数。
例子
//需求：定义一个人类构造函数，创建的人类对象包含属性：姓名，年龄，性别，方法：打招呼。
function Person(name, age, sex) { //*** 构造函数的参数与对象的普通属性是一致的。
// 1. 创建了对象this js内部做的第一件事情 ***
//var this = new Object();
this.name = name;// 属性的值，都是通过同名的形参来赋值的
this.age = age;
this.sex = sex;
this.sayHi = function() { //函数不需要通过形参来赋值
alert('我的名字叫：' + this.name + '，年龄：' + this.age + '，性别：' + this.sex);
}
//return this; 2. js内部做的第二件事情 ***
}
// 创建出来一个大白的人类对象，大白的名字是大白，100，男
var bigbai = new Person('大白', 100, '男'); // var bigbai = this;
// this 就是即将创建出来的大白对象// this:这个，这个对象
console.log(bigbai.name);// 大白
var smallbai = new Person('小白', 21, '男');
console.log(bigbai.name);
console.log(smallbai.name);
代码案例
//明星构造函数
function Star(name, age, sex) {
this.name = name;
this.age = age;
this.sex = sex;
this.sing = function(sang) {
console.log(sang);
}
}
var ldh = new Star('刘德华', 18, '男');
console.log(ldh.name);
console.log(ldh['sex']);
ldh.sing('冰雨');
构造函数与对象的区别
- 构造函数，如 Stars()，抽象了对象的公共部分，封装到了函数里面，它泛指某一大类（class）
创建对象，如 new Stars()，特指某一个（具体的某一个），通过 new 关键字创建对象的过程我们也称为对象实例化 - 实例：就是实际的例子（某一大类中的实际的例子）
3 内置对象
Math对象
Math 对象不是构造函数，它具有数学常数和函数的属性和方法。跟数学相关的运算（求绝对值，取整、最大值等）可以使用 Math 中的成员。
例子
console.log(Math.PI); // 一个属性 圆周率
console.log(Math.max(1, 99, 3)); // 99
console.log(Math.max(-1, -10)); // -1
console.log(Math.max(1, 99, 'pink老师')); // NaN
console.log(Math.max()); // -Infinity
例子
// 1.绝对值方法
console.log(Math.abs(1)); // 1
console.log(Math.abs(-1)); // 1
console.log(Math.abs('-1')); // 隐式转换 会把字符串型 -1 转换为数字型
console.log(Math.abs('pink')); // NaN
// 2.三个取整方法
// (1) Math.floor() 地板 向下取整 往最小了取值
console.log(Math.floor(1.1)); // 1
console.log(Math.floor(1.9)); // 1
// (2) Math.ceil() ceil 天花板 向上取整 往最大了取值
console.log(Math.ceil(1.1)); // 2
console.log(Math.ceil(1.9)); // 2
// (3) Math.round() 四舍五入 其他数字都是四舍五入，但是 .5 特殊 它往大了取
console.log(Math.round(1.1)); // 1
console.log(Math.round(1.5)); // 2
console.log(Math.round(1.9)); // 2
console.log(Math.round(-1.1)); // -1
console.log(Math.round(-1.5)); // 这个结果是 -1
日期对象
介绍：
- Date 对象和 Math 对象不一样，Date是一个构造函数
- 所以使用时需要实例化后才能使用其中具体方法和属性
- Date 实例用来处理日期和时间
获取当前时间必须实例化
var now = new Date();//当前时间对应的日期对象
获取指定时间的日期对象
var time = new Date('2021/8/18');//指定时间对应的日期对象
例子：
// Date() 日期对象 是一个构造函数 必须使用new 来调用创建我们的日期对象
var arr = new Array(); // 创建一个数组对象
var obj = new Object(); // 创建了一个对象实例
// 1. 使用Date 如果没有参数 返回当前系统的当前时间
var date = new Date();
console.log(date);
// 2. 参数常用的写法 数字型 2019, 10, 01 或者是 字符串型 '2019-10-1 8:8:8'
var date1 = new Date(2019, 10, 1);
console.log(date1); // 返回的是 11月 不是 10月
var date2 = new Date('2019-10-1 8:8:8');
console.log(date2);
日期对象的方法和属性：
代码案例：
// 倒计时效果
// 1.核心算法：输入的时间减去现在的时间就是剩余的时间，即倒计时 ，但是不能拿着时分秒相减，比如 05 分减去25分，结果会是负数的。
// 2.用时间戳来做。用户输入时间总的毫秒数减去现在时间的总的毫秒数，得到的就是剩余时间的毫秒数。
// 3.把剩余时间总的毫秒数转换为天、时、分、秒 （时间戳转换为时分秒）
// 转换公式如下：
// d = parseInt(总秒数/ 60/60 /24); // 计算天数
// h = parseInt(总秒数/ 60/60 %24) // 计算小时
// m = parseInt(总秒数 /60 %60 ); // 计算分数
// s = parseInt(总秒数%60); // 计算当前秒数
function countDown(time) {
var nowTime = +new Date(); // 返回的是当前时间总的毫秒数
var inputTime = +new Date(time); // 返回的是用户输入时间总的毫秒数
var times = (inputTime - nowTime) / 1000; // times是剩余时间总的秒数
var d = parseInt(times / 60 / 60 / 24); // 天
d = d < 10 ? '0' + d : d;
var h = parseInt(times / 60 / 60 % 24); //时
h = h < 10 ? '0' + h : h;
var m = parseInt(times / 60 % 60); // 分
m = m < 10 ? '0' + m : m;
var s = parseInt(times % 60); // 当前的秒
s = s < 10 ? '0' + s : s;
return d + '天' + h + '时' + m + '分' + s + '秒';
}
console.log(countDown('2019-5-1 18:00:00'));
var date = new Date();
console.log(date);
数组对象
字面量方式 ：
var arr = [1,"test",true];
new Array() 方式 ：
var arr = new Array();
例子：
// 创建数组的两种方式
// 1. 利用数组字面量
var arr = [1, 2, 3];
console.log(arr[0]);
// 2. 利用new Array()
// var arr1 = new Array(); // 创建了一个空的数组
// var arr1 = new Array(2); // 这个2 表示 数组的长度为 2 里面有2个空的数组元素
var arr1 = new Array(2, 3); // 等价于 [2,3] 这样写表示 里面有2个数组元素 是 2和3
console.log(arr1);
字符串对象
- 由于字符串的不可变，导致字符串所有的方法，都不会修改字符串本身，操作完成会返回一个新的字符串
- 字符串不可变，指的是字符串本身在内存中不会改变
- 字符串变量存储的值可以改变
总结
文章内容有限，主要是为了理顺思路
详细内容请结合代码和 W3C 学习
祝各位事业有成
扫一扫
7614
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
