前言本文是一份超详细的JavaScript入门笔记涵盖了从计算机语言基础、JS简介、代码书写位置、变量声明到各种数据类型的完整知识点。适合刚接触前端、想系统梳理JS基础的同学收藏学习。一、JavaScript基本概念1. 计算机语言基础计算机语言人与计算机交流的媒介。计算机组成硬件 软件。数据存储单位bit比特、Byte字节、KB、MB、GB等。2. JavaScript简介JavaScript是什么一种面向对象的脚本语言。创始公司创始人Netscape Communications Corporation网景公司Brendan Eich布兰登·艾奇。JavaScript能做什么网页交互表单校验、网页特效桌面程序、服务端开发Node.jsApp、物联网、游戏开发微信小程序、插件扩展、刷浏览量等浏览器如何执行JS浏览器本身不执行JS而是通过内置的JavaScript引擎解释器 逐行解释执行源码将其转为机器语言。渲染引擎解析HTML和CSS俗称内核。JS引擎读取并执行JS代码如Chrome的V8引擎。3. JavaScript三大组成部分组成部分说明ECMAScript核心语法规范变量、循环、判断、数组、数据类型等DOM文档对象模型操作HTML文档的接口即操作网页BOM浏览器对象模型操作浏览器的接口二、JavaScript代码书写位置4种方式!-- 1. 事件属性写在HTML元素中 -- button onclickalert(点击事件)按钮/button !-- 2. body内的script标签 -- body scriptconsole.log(页面脚本);/script /body !-- 3. head内的script标签 -- head scriptconsole.log(头部脚本);/script /head !-- 4. 外部JS文件引入 -- script srcfilename.js/script注意引入外部JS文件的script标签内不能再写其他代码。三、JavaScript注释类型写法快捷键用途单行注释// 注释内容Ctrl /对当前行生效多行注释/* 注释内容 */Shift Alt A常用于函数、类说明注释的作用代码说明与解释调试代码养成良好编码习惯四、输入输出语句1. 输出语句alert(123); // 弹出警告框 console.log(234); // 控制台输出 document.write(hello); // 页面输出 document.writeln(内容); // 页面输出并换行2. 输入语句prompt(请输入姓名); // 弹出输入框 confirm(确定删除吗); // 确认对话框确定返回true取消返回false3. 组合使用console.log(prompt(请输入姓名)); // 输入内容输出到控制台 alert(prompt(请输入年龄)); // 输入内容弹出显示五、JavaScript基本语法1. 语法规则严格区分大小写语句以分号结尾推荐显式添加自动忽略多余空格和换行可用于代码格式化2. 执行顺序从上到下逐行执行。六、字面量与变量1. 字面量字面量是源代码中一个固定值的表示法例如数字123、字符串hello等。字面量可以直接使用但通常不会直接使用而是存入变量中。2. 变量变量是程序在内存中申请的一块用来存放数据字面量的空间。三种声明方式// 1. varES5 var myname prompt(请输入名字); var num 123; num 234; // 可修改 // 2. letES6 let num 1; num 2; // 可修改 // 3. constES6 const num 666; // num 888; // 报错不可修改变量操作// 定义不赋值 let num2; // 定义多个变量 let num1 1, num2 2, num3 3; // 更新变量 num1 10;3. var、let、const区别面试常考特性varletconst重复声明允许不允许不允许变量修改允许允许不允许作用域函数作用域块级作用域块级作用域变量提升存在不存在不存在暂时性死区无有有必须初始化否否是开发建议优先使用let和const不变的值用const。七、标识符命名规则1. 必须遵守的规则由数字、字母、下划线_、美元符$组成不能以数字开头不能是JavaScript关键字如if、for等2. 建议遵守的规范不建议使用中文多个单词采用小驼峰myName或下划线连接my_name见名知义3. 合法示例let num1 1; let num_1 2; let num$2 666; let myName jack; let my_name jack;八、数据类型1. 为什么需要数据类型不同数据占用的存储空间不同定义数据类型可以充分利用存储空间。2. 变量的数据类型JS是弱类型或动态语言变量的数据类型根据等号右边的值自动确定同一变量可被赋予不同类型的数据。3. 数据类型分类分类包含简单数据类型基本类型Number、String、Boolean、Undefined、Null、Symbol、BigInt复杂数据类型引用类型Object、Function、Array、Date、RegExp、Math、包装类Number、String、Boolean九、数字型Number1. 数值表示let integer 123; // 整数 let floatNum 2.1; // 浮点数2. 数值范围Number.MAX_VALUE; // 1.7976931348623157e308最大值 Number.MIN_VALUE; // 5e-324大于0的最小值超过最大值返回Infinity正无穷typeof Infinity返回number。3. 特殊值NaNNaNNot a Number非数值typeof NaN返回number检测方法isNaN()例如isNaN(hello)返回true4. 数字型计算注意事项var c 1 2; console.log(c); // 3整数运算精确 var d 0.1 0.2; console.log(d); // 0.30000000000000004浮点数运算可能不精确5. 数据类型检测typeof 123; // number typeof typeof 123; // stringtypeof返回的是字符串6. 数字进制let decimal 10; // 十进制 let hex 0xA; // 十六进制0x开头 let octal 012; // 八进制0开头 let binary 0b1010; // 二进制0b开头十、字符串型String1. 字符串表示单引号 双引号 反引号 // ES6模板字符串嵌套使用Its a string或He said Hello2. 转义字符符号含义\n换行\t制表符Tab\单引号\双引号\\反斜杠3. 字符串属性lengthlet str hello; str.length; // 54. 字符串拼接字符串 任意类型; // 结果为字符串 我今年 18 岁了; // 我今年18岁了5. 字符串拼接变量let age 18; 你好 age hello; // 变量不能写在引号里用加号拼接十一、布尔型Boolean1. 布尔值let isTrue true; let isFalse false;2. 类型检测typeof true; // boolean3. 数值计算true 1; // 2true转为1 false 1; // 1false转为0总结本文从计算机语言基础出发详细讲解了JavaScript的诞生背景、三大组成部分、四种代码书写方式、变量声明的三种方式及其区别、标识符命名规则以及Number、String、Boolean三种基本数据类型的关键知识点。掌握这些基础你就迈出了前端学习的第一步。后续还会继续分享更多进阶内容欢迎关注收藏
