目录一、JavaScript 基础认知是什么由什么构成1.1、什么是 JavaScript1.2、JavaScript 的三大组成部分二、JavaScript 基础语法入门必备核心2.1、书写方式2.2、输入与输出2.3、变量与命名规范变量声明与赋值命名规范2.4、数据类型简单数据类型数据类型检测数据类型转换2.5、运算符2.6、流程控制分支结构循环结构2.7、数组创建数组访问数组元素遍历数组新增数组元素2.8、函数函数的声明与调用arguments的使用函数的两种声明方式作用域2.9、var、let、const 的区别区别开发建议注意JavaScript 作为前端开发的核心语言是实现页面动态交互、提升用户体验的关键更是前端工程师必须掌握的基础技能。它不仅能让静态的 HTMLCSS 页面 “动起来”还能结合 Node.js 实现服务端开发应用场景十分广泛。一、JavaScript 基础认知是什么由什么构成1.1、什么是 JavaScriptJavaScript 是一门运行在客户端的脚本语言无需编译由浏览器的 JS 引擎逐行解释执行最初设计目的是实现表单动态校验如今已发展为全栈语言 —— 基于 Node.js 可实现服务端开发还能开发桌面程序、App、游戏等。它与 HTML、CSS 共同构成前端开发的三大核心三者分工明确HTML定义页面结构和内容是 “骨架”CSS美化页面样式是 “外观”JavaScript实现页面交互和业务逻辑是 “行为”。1.2、JavaScript 的三大组成部分JavaScript 的核心由ECMAScript、DOM、BOM三部分组成三者各司其职共同支撑起 JS 的功能体系ECMAScriptJS 的语法标准规定了变量、数据类型、运算符、函数等基础语法是所有浏览器厂商共同遵守的工业标准。目前最常用的版本是 ES62015 年发布后续版本以年份命名如 ES2016、ES2017ES6 对 JS 进行了大幅增强新增了箭头函数、类、模块等功能。DOM文档对象模型处理页面元素的标准接口将 HTML 文档映射为树形结构DOM 树通过提供的 API 可以对页面中的元素进行获取、修改、新增、删除等操作是实现页面内容交互的核心。BOM浏览器对象模型与浏览器窗口交互的接口核心对象是window通过 BOM 可以实现浏览器窗口跳转、弹出框、定时器、获取浏览器分辨率等操作BOM 包含 DOM是比 DOM 更宽泛的概念。简单来说ECMAScript 是基础语法DOM 操作页面内容BOM 操作浏览器窗口。二、JavaScript 基础语法入门必备核心2.1、书写方式JavaScript 的代码可以通过三种方式嵌入到 HTML 中不同方式适用于不同场景行内式将 JS 代码写在 HTML 标签的事件属性中以on开头如onclick适合单行或少量代码。注意HTML 推荐用双引号JS 推荐用单引号可读性较差仅适用于特殊场景。示例input typebutton value点我 onclickalert(Hello World)/内嵌式将 JS 代码写在script标签中可放在 HTML 的head或body中是学习和开发中最常用的方式。示例script var a 10; console.log(a); /script外部式将 JS 代码写在独立的.js文件中通过script src文件名.js/script引入适合代码量较大的场景利于代码复用和页面结构化。注意引入外部 JS 的script标签中间不能写代码。2.2、输入与输出JS 提供了常用的输入输出方法方便调试和与用户交互方法说明示例alert(msg)浏览器弹出警示框alert(欢迎进入页面)console.log(msg)浏览器控制台打印信息开发调试常用console.log(这是调试信息)prompt(info)浏览器弹出输入框获取用户输入var name prompt(请输入你的名字)2.3、变量与命名规范变量是存放数据的容器JS 是弱类型、动态的语言无需提前声明变量类型程序运行时会自动确定。变量声明与赋值// 声明变量 var age; // 赋值 age 18; // 声明并赋值 var name 张三;命名规范由字母、数字、下划线_、美元符$组成不能以数字开头严格区分大小写如app和App是两个变量不能使用 JS 关键字 / 保留字如var、for、if遵循驼峰命名法首字母小写后续单词首字母大写如userName变量名要有意义避免无意义的命名如a1、b2。2.4、数据类型JS 的数据类型分为简单数据类型基本数据类型和复杂数据类型Object。简单数据类型包含 5 种各类型的说明和默认值如下类型说明默认值Number数字型包含整数和浮点数0String字符串型需用单 / 双引号包裹Boolean布尔型只有true真等价于 1和false假等价于 0falseUndefined声明变量未赋值时的类型undefinedNull声明变量并赋值为null表示空值null数据类型检测使用typeof关键字检测变量的数据类型示例var num 10; var str 10; console.log(typeof num); // 输出 number console.log(typeof str); // 输出 string注意typeof null的结果是object这是 JS 的历史 bug需特殊记忆。数据类型转换开发中经常需要转换数据类型核心分为转字符串、转数字型、转布尔型三种其中转数字型是重点。转字符串方法 1变量.toString( )方法 2String(变量)方法 3加号拼接最常用变量 。转数字型parseInt(字符串)转整数会忽略非数字部分parseFloat(字符串)转浮点数Number(字符串)强制转数字非数字则返回NaN隐式转换通过算术运算-、*、/实现如123 - 0。转布尔型使用Boolean(变量)空、否定的值会转为 false如、0、NaN、null、und efined其余值均为true。2.5、运算符JS 的运算符包括算数运算符、比较运算符、逻辑运算符、赋值运算符等是实现逻辑计算的基础核心重点如下算数运算符、-、*、/、%取余注意既可以做加法也可以做字符串拼接有字符串参与则为拼接。递增 / 递减运算符自增、--自减分前置和后置前置先自增 / 减后返回值如num后置先返回原值后自增 / 减如num。比较运算符返回布尔值true/false重点注意和的区别判等会进行隐式类型转换如18 18返回true全等要求值和数据类型都一致如18 18返回false。逻辑运算符用于多条件判断返回布尔值与两边都为true才返回true否则false||或有一边为true就返回true否则false!非取反!true返回false。赋值运算符、、-、*、/、%如num 5等价于num num 5。2.6、流程控制流程控制用于控制代码的执行顺序分为顺序结构、分支结构、循环结构其中分支和循环是重点。分支结构根据不同条件执行不同代码包括if语句和switch语句if 语句适用于所有分支场景包括单分支、双分支、多分支// 多分支 var score 85; if (score 90) { console.log(优秀); } else if (score 80) { console.log(良好); } else if (score 60) { console.log(及格); } else { console.log(不及格); }三元表达式双分支if的简写语法条件表达式 ? 表达式1 : 表达式2条件为true执行表达式 1否则执行表达式 2。示例var res 18 18 ? 成年 : 未成年; console.log(res);switch 语句适用于变量为固定值的多分支场景通过case匹配值break终止执行default处理未匹配的情况var num 2; switch (num) { case 1: console.log(星期一); break; case 2: console.log(星期二); break; default: console.log(未知); }循环结构重复执行某段代码包括for、while、do-while其中for循环最常用。for 循环适用于已知循环次数的场景语法// 循环10次 for (var i 0; i 10; i) { console.log(i); }while 循环适用于未知循环次数的场景先判断条件再执行循环体var i 0; while (i 10) { console.log(i); i; }do-while 循环先执行一次循环体再判断条件至少执行一次var i 0; do { console.log(i); i; } while (i 10);循环控制break立即跳出整个循环continue立即跳出本次循环继续下一次循环。2.7、数组数组是将一组相关数据存储在单个变量名下的集合可存放任意类型的数据是开发中存储数据的常用方式。创建数组推荐使用数组字面量[ ]创建简单高效// 空数组 var arr1 []; // 带初始值的数组 var arr2 [10, 张三, true, 28.9];访问数组元素通过索引下标访问索引从0 开始语法数组名[索引]若索引不存在返回undefinedvar arr [张三, 李四, 王五]; console.log(arr[0]); // 输出 张三 console.log(arr[3]); // 输出 undefined遍历数组通过循环遍历数组的所有元素核心依靠数组.length获取数组长度var arr [1, 2, 3, 4, 5]; for (var i 0; i arr.length; i) { console.log(arr[i]); // 依次输出数组的每个元素 }新增数组元素最常用的方式数组[数组.length] 新值在数组末尾新增元素var arr [1, 2, 3]; arr[arr.length] 4; console.log(arr); // 输出 [1,2,3,4]也可使用push()方法arr.push(新值)效果相同。2.8、函数函数是封装的一段可重复调用的代码块核心作用是代码复用避免重复编写相同逻辑是 JS 的核心知识点之一。函数的声明与调用声明函数使用function关键字分为命名函数和匿名函数// 命名函数 function 函数名(形参1, 形参2) { // 函数体代码 return 返回值; // 可选无return则返回undefined } // 匿名函数函数表达式 var fn function() { // 函数体代码 };形参函数定义时的参数相当于未赋值的变量返回值通过return将函数的执行结果返回return后代码不再执行。调用函数函数不调用不执行语法函数名(实参1, 实参2)实参函数调用时传入的真实数据会传递给形参若实参个数与形参不一致多余的实参被忽略缺少的形参为undefined。arguments的使用当不确定函数的实参个数时可使用函数内置的arguments对象它是一个伪数组存储了所有传入的实参可通过遍历获取实参function sum() { var res 0; for (var i 0; i arguments.length; i) { res arguments[i]; } return res; } console.log(sum(1,2,3)); // 输出 6 console.log(sum(1,2,3,4)); // 输出 10函数的两种声明方式命名函数function fn( ) { }可在声明前或声明后调用函数提升匿名函数var fn function( ) { }只能在声明后调用因为变量提升只提升声明不提升赋值。作用域作用域限定了变量的可用范围ES6 前 JS 只有全局作用域和局部作用域函数作用域全局作用域整个script标签或独立的 JS 文件全局变量在任意位置可使用浏览器关闭时才销毁局部作用域函数内部局部变量只能在函数内部使用函数执行完毕后销毁注意ES6 前 JS没有块级作用域{ }包裹的区域如if、for块内声明的变量在块外仍可使用。ES6 新增了let和const关键字解决了var的作用域问题后续会详细说明。2.9、var、let、const 的区别ES6 新增的let和const弥补了var的诸多缺陷是现在开发中的首选。区别特性varletconst作用域函数作用域块级作用域块级作用域变量提升支持不支持不支持重复声明允许不允许不允许赋值修改允许允许不允许常量声明时必须赋值全局变量挂载到 window不挂载到 window不挂载到 window开发建议声明普通变量用let声明常量如配置项、固定值用const彻底放弃使用var。注意var 的变量提升机制确实存在但它只提升声明不提升赋值。因此在声明前访问变量时得到的是undefined而不是赋值后的值。let没有变量提升会直接报错。console.log(a); // undefined var a 10; console.log(a); // 10console.log(a); let a 10; console.log(a);