零基础入门前端JavaScript 基础语法详解(可用于备赛蓝桥杯Web应用开发)

一、注释注释是代码中不被执行的部分用于说明代码功能。单行注释// 这是单行注释多行注释/* 这是多行注释 */二、变量声明JavaScript 中有三种变量声明方式区别如下关键字作用域变量提升重复声明重新赋值var函数作用域✅✅✅let块级作用域❌❌✅const块级作用域❌❌❌示例var a 1; let b 2; const c 3; // 声明时必须赋值且后续不能修改三、数据类型JavaScript 数据类型分为基本类型和引用类型。1. 基本类型类型说明示例Number数字整数、小数、NaN10,3.14,NaNString字符串单 / 双引号 / 反引号hello,world,模板字符串${a}Boolean布尔值true,falseNull空值nullUndefined未定义变量声明未赋值let x; console.log(x);Symbol唯一值ES6 新增Symbol(id)BigInt大整数ES2020 新增10n2. 引用类型类型说明示例Object对象键值对集合{name: Tom, age: 18}Array数组有序数据集合[1, 2, 3]Function函数function fn() {}3. 类型判断typeof判断基本类型null会返回object是历史遗留问题instanceof判断引用类型如[] instanceof Array返回true四、运算符1. 算术运算符运算符说明示例加1 2-减3 - 1*乘2 * 3/除6 / 2%取余5 % 2自增a/a--自减a--/--a2. 赋值运算符运算符说明示例赋值a 1加后赋值a 2→a a 2-减后赋值a - 1→a a - 13. 比较运算符运算符说明示例相等值相等1 1→true严格相等值和类型都相等1 1→false!不等1 ! 2→true!严格不等1 ! 1→true大于3 2小于1 2大于等于3 3小于等于2 34. 逻辑运算符运算符说明示例与都为 true 才返回 truetrue false→false或一个为 true 就返回 truetruefalse→true!非取反!true→false5. 三元运算符语法条件 ? 表达式1 : 表达式2示例let result 1 2 ? yes : no; // no五、流程控制1. 条件语句if-elselet age 18; if (age 18) { console.log(成年); } else { console.log(未成年); }switchlet day 1; switch (day) { case 1: console.log(周一); break; case 2: console.log(周二); break; default: console.log(其他); }2. 循环语句for循环for (let i 0; i 5; i) { console.log(i); // 0 1 2 3 4 }while循环let i 0; while (i 5) { console.log(i); i; }do-while循环至少执行一次let i 0; do { console.log(i); i; } while (i 5);六、函数函数是可重复使用的代码块。1. 函数声明function add(a, b) { return a b; } add(1, 2); // 32. 函数表达式const multiply function(a, b) { return a * b; }; multiply(2, 3); // 63. 箭头函数ES6 新增const subtract (a, b) a - b; subtract(5, 3); // 24. 参数与返回值默认参数function fn(a 1) {}剩余参数function fn(...args) {}args是数组返回值用return返回无return则返回undefined七、对象对象是键值对的集合键称为 “属性”值可以是任意类型。1. 对象字面量const person { name: Tom, age: 18, sayHi: function() { console.log(Hi); } };2. 属性访问console.log(person.name); // Tom点语法 console.log(person[age]); // 18方括号语法适用于属性名含特殊字符的情况3. 方法调用person.sayHi(); // Hi八、数组数组是有序的数据集合可存储任意类型的数据。1. 数组创建const arr1 [1, 2, 3]; // 字面量方式推荐 const arr2 new Array(1, 2, 3); // 构造函数方式2. 常用方法方法说明示例push末尾添加元素arr.push(4)→[1,2,3,4]pop末尾删除元素arr.pop()→ 返回4数组变为[1,2,3]unshift开头添加元素arr.unshift(0)→[0,1,2,3]shift开头删除元素arr.shift()→ 返回0数组变为[1,2,3]map遍历数组返回新数组arr.map(x x*2)→[2,4,6]filter过滤数组返回符合条件的新数组arr.filter(x x2)→[3]九、基础语法汇总表格分类核心知识点变量声明var函数作用域、let/const块级作用域推荐数据类型基本类型7 种 引用类型Object/Array/Function运算符算术、赋值、比较推荐、逻辑、三元流程控制if-else、switch、for、while、do-while函数声明、表达式、箭头函数、默认参数、剩余参数对象字面量创建、属性访问点 / 方括号、方法调用数组字面量创建、push/pop/map/filter等常用方法