说句实在话我决定写“从0学JS 学习笔记”这个系列Day01开篇是给自己一个交代。学编程这件事最不缺的就是收藏夹里落灰的教程最缺的是“今天真的敲了代码、踩了坑、记了笔记”的日子。所以我计划每天花固定时间把JS这门语言从头啃一遍把学习过程和理解心得如实记录下来。这篇Day01笔记面向的是完全零基础、或者曾经看过视频但还没真正动手写过代码的朋友。第一天我不会贪多核心就是变量与数据类型、字符串处理、运算符、函数初步。这几个内容看着基础但后面所有框架、项目、面试题追根溯源都在它们身上。1. 第一天先搞清楚JS到底是什么能拿来干嘛1.1 用一句话理解JavaScriptJavaScript很多人也叫它JS是一门最开始为了给网页加交互而诞生的编程语言。你点按钮弹出对话框、滚动页面导航栏吸顶、提交表单时提示“密码太短”背后都是JS在干活。后来它借助Node.js跑到了服务器端变成了一门前后端通吃的语言甚至还能开发桌面应用、写自动化脚本、做爬虫采集。所以现在学JS不只是给网页“美化”更是在学一套通用于整个互联网开发领域的基础技能。第一天学习我建议你打开电脑浏览器按F12打开开发者工具找到Console控制台面板直接在里面敲代码。浏览器是JS最好的练习场你不需要安装任何开发环境输入一行代码回车就能看到结果。很多人卡在学习的起点不是能力不够是被“配置环境”劝退的。在控制台里打开就能用写错了立刻报错反馈非常直接。还有一个老生常谈但必须澄清的点JavaScript和Java是两回事。名字相似完全是历史原因语法、运行环境、生态几乎都不沾边。你在学JS的过程中如果看到Java相关内容可以直接跳过。JS现在的官方标准叫ECMAScript简称ES。你现在经常听到的ES6就是2015年发布的新版本带来了大量现代语法。我在后面的笔记里凡是ES6的新特性都会单独标注。1.2 第一天的学习路线怎么定我给自己定的Day01路线很简单四块内容变量声明、数据类型、字符串处理、函数初步。一整天能把这几块真正练熟就算超额完成任务。不建议一天看十几集视频那种“眼睛会了手不会”的体验最容易消磨热情。为什么先学变量因为程序说白了就是“数据进来、处理、再出去”的过程变量是存放数据的容器。不理解容器就没法理解后面所有逻辑。为什么紧接着数据类型因为不同的数据有不一样的脾气数字能加减乘除字符串能拼接截取布尔值能用来做判断。你存的数据是哪种类型决定了你能拿它做什么。至于字符串处理和函数是我个人的排序字符串操作是写实际功能时最常碰见的场景比如搜索匹配、表单校验函数是组织代码的基本单位不管以后写前端组件还是后端接口全都在跟函数打交道。这条路线唯一需要注意的是别在第一天碰框架。我见过太多人一上来就学Vue、React连变量作用域和数组方法都没搞明白结果写着写着就卡住了然后得出结论“前端太难了”。不是前端难是地基没打就开始盖楼。万丈高楼平地起这句话放在编程入门里是最实在的劝告。2. 变量声明与数据类型练好基本功2.1 var、let、const到底选哪个JS声明变量有三种关键词var、let、const。很多刚入门的朋友只看教程一掠而过没有深究它们的区别导致后面写代码时经常遇到“我明明赋值了为什么不对”“这个变量怎么到处都能访问”的怪异现象。Day01就把这个彻底搞明白。var是旧时代的关键词最大的问题是没有块级作用域。块级作用域的意思就是一对花括号{}里面的变量出了这个范围就应该失效。但var不是这样// var 的问题if 里面声明的变量外面也能访问 if (true) { var a 10; } console.log(a); // 10var 没有块级作用域如果你在循环里用var声明了一个计数器变量循环结束了这个变量居然还在外面活着这在复杂代码里会非常危险。let就好在这个点上它拥有块级作用域if (true) { let b 20; } // console.log(b); // 报错b is not defined这个报错其实是好事它及时告诉你变量不该在作用域外存在。我第一天就养成了习惯凡是以后要重新赋值的变量一律用let声明。const是常量的意思声明的时候必须赋值而且之后不能再整体重新赋值。这里有个特别容易踩坑的区别不能重新赋值不等于不能修改内容。比如const声明的数组你可以往里面push新元素这算修改内容是允许的但你不能把整个变量重新指向一个新数组那叫重新赋值会报错。第一天记住一句口诀let是“我要变”const是“我不变”var是“我不用”。2.2 七种数据类型逐个过JS的数据类型一共七种分别是number数字、string字符串、boolean布尔值、undefined未定义、null空值、symbol符号、object对象。前六种是基本类型最后一种object是引用类型数组、函数、日期这些复杂结构都算object。我第一天最需要分清的是undefined和null。用一句话记住undefined是“声明了但还没赋值”null是“手动赋值了一个空值”。比如你写let c然后打印c结果是undefined反过来你写let d null打印结果是null。实际开发里如果你在接口返回数据时拿不到内容通常会把它处理成null表示“这个位置应该是对象的但现在是空的”这样判断起来更安全。有一个基础知识点的经典坑很多面试题爱问typeof null 的结果是object。这是JS从诞生开始就存在的bug理论上应该返回null但修复它会导致大量历史代码行为变化所以官方选择保留至今。你第一天就把它记下来以后不会吃亏。数据类型还牵扯到判断方式。typeof运算符可以获取一个变量的类型但它有局限console.log(typeof 123); // number console.log(typeof abc); // string console.log(typeof []); // object数组也被判断成 object console.log(typeof null); // object这就是经典 bug所以当你需要精确判断数据是不是一个真正的数组时typeof就不好使了。更可靠的写法是Array.isArray()这个函数专门用来判断数组。第一天不需要把所有判断方法都背下来但可以先把“typeof有局限”这件事刻在脑子里后面学对象时会讲到更完整的方案。3. 字符串与运算符写第一段实用代码3.1 字符串拼接与模板字符串字符串就是一串文本代码里用引号包起来。JS里单引号、双引号、反引号都可以代表字符串。双引号和单引号本质一样反引号则是一个宝藏工具——模板字符串。以前拼接字符串用加号。你可能会写出一大长串const name 张三; const age 18; console.log(我叫 name 今年 age 岁。);这种写法能实现效果但字符串一长就特别容易拼错少了加号、漏了引号都是常事。ES6的模板字符串解决得很优雅console.log(我叫${name}今年${age}岁。);注意这里的字符串是用反引号而不是单引号包裹的变量用${}包起来。一来不用再手动拼接加号二来字符串换行也方便三来可读性高了很多。我第一天刚接触模板字符串时犯了个低级错误中文输入法没关打出来的反引号是中文的导致浏览器一直报错。后来编辑器的语法高亮帮了大忙红色波浪线出现的地方基本就是符号问题。这里建议新手把编辑器设置成“引号自动配对”代码内只允许英文符号。字符串的常用属性和方法也值得过一遍。a.length能拿到字符串长度str[0]能取到第一个字符str.toUpperCase()转大写str.toLowerCase()转小写。日常开发里经常要处理忽略大小写的情况比如验证码校验、关键词匹配。“js 忽略大小写”这个话题一直被搜其实核心就一句话const input Hello; const target hello; if (input.toLowerCase() target.toLowerCase()) { console.log(匹配成功已忽略大小写); }两边都统一转成小写再去做相等比较就实现了“忽略大小写”的效果。这种思路简单、直白也够用。3.2 判断字符串是否包含某段内容三种办法一次讲透字符串包含判断是开发者的高频需求。热搜词里“js判断字符串是否包含”一直有人搜说明这也是新手绕不开的点。我在Day01把三种方法一次性说清楚你在实际写代码时按场景选即可。第一种includes()。返回布尔值最直观ES6语法const str 从0学JS 学习笔记 Day01; console.log(str.includes(JS)); // true console.log(str.includes(Vue)); // false第二种indexOf()。它返回子字符串在原字符串中出现的下标找不到时返回-1const str 从0学JS 学习笔记 Day01; if (str.indexOf(笔记) ! -1) { console.log(包含笔记); }这种写法在旧项目中特别常见你以后维护老代码时会经常看到。它和includes效果差不多只是判断习惯不同。我从维护者的角度说一句新代码里用includes更清晰老代码里看到indexOf就明白作者是想做包含判断。第三种match()配合正则表达式。它能做模糊匹配比如忽略大小写匹配“JS”const str 从0学JS 学习笔记 Day01; if (str.match(/js/i)) { console.log(匹配到了忽略大小写); }这里的i是正则里的flag表示ignore case。第一天不用深入正则知道有这种思路就行。以后做URL校验、邮箱校验、敏感词屏蔽都会用到正则。再补充一个特别实用的小技巧如果你想验证一个字符串是不是合法URL可以试试用URL构造函数function checkUrl(url) { try { new URL(url); return true; } catch(e) { return false; } }这个写法包装在try/catch里能创建URL对象就是合法链接不能就说明格式不对。这是我写爬虫、调接口时的常用手段虽然Day01还不需要掌握try/catch但可以先收藏。3.3 运算符容易算错的那几个运算符是程序的基本“动词”我第一天把它们分成了四类来记。算术运算符负责计算加、减、乘、除、取余。比较运算符负责比较大于、小于、大于等于、小于等于、相等。逻辑运算符负责组合条件且、或||、非!。赋值运算符负责给变量存值、、-。其中最容易出错的是相等判断。JS有两个相等运算符和。区别在于console.log(3 3); // true 会做类型转换 console.log(3 3); // false 要求类型也相同在比较时会把两边先转成相同类型再比听上去挺方便但实际上它还有很多反直觉的行为比如0 false的结果也是true一整个字符串 和0比较也可能相等。这些隐蔽的转换坑会让人调试到怀疑人生。我给自己定了一条红线不管什么场景能用就绝不用。以后你写公司项目、做开源代码也会发现规范里基本都要求用严格相等。逻辑运算符里||有一个非常实用的场景给变量设置默认值。Day01可以提前见识一下const count 0 || 10; console.log(count); // 10因为0会被当成 falsy 值这里涉及到falsy值概念。在JS的布尔判断里下面这些值会被当作false0、空字符串、false、undefined、null、NaN。这些值都叫falsy值。我第一天就强迫自己把这张falsy清单背下来因为后面写任何判断条件、默认值时都在跟它们打交道。4. 函数初步JS里的“功能模块”4.1 三种声明方式一次看清函数就是一段被命名的、可以反复调用的代码块。你可以把它想象成一个榨汁机把水果放进去传参启动调用就能得到果汁返回值。JS里有三种常见的函数写法第一天的目标是三种都认识、都能写、知道区别。第一种函数声明。最传统的方式function greet(name) { return 你好 name; } console.log(greet(王五));第二种函数表达式。把匿名函数赋值给变量const greet function(name) { return 你好 name; };第三种箭头函数。ES6带来的简洁写法const greet (name) 你好 name;三种写法执行效果基本一样但箭头函数有一点和前面不同它没有自己的this。这个问题在嵌套回调时会带来很大影响Day01先不展开讲原理但你先记住这个结论以后学到this指向时就会更轻松。就我个人的使用习惯来说现在写新代码几乎都用箭头函数因为它短、直观避免了很多this绑定的麻烦。但要小心箭头函数没有arguments对象你没法在里面用arguments获取全部参数如果需要用到就得用普通函数写法。4.2 参数、默认值与返回值函数参数是入口是外界传给函数的“原料”。第一天需要掌握两个要点它们都是非常容易出错的细节。第一函数调用时参数个数不严格匹配。你声明了三个参数调用时只传一个不会报错只是没传的参数会变成undefined。有些新手以为不传参会报错结果发现JS居然如此宽容。这个特点在一些场景下很坑因为参数少了程序还在跑只是结果不正常找起错来很不直观。第二现代ES6支持默认参数能避免上面这个坑function registerUser(name, age 18) { console.log(注册用户${name}年龄${age}); } registerUser(李四); // 不传 age自动用默认值 18返回值用return。这里有一个重要细节如果函数里没有写return调用它得到的结果是undefined。以前我面试别人时喜欢出这道题看候选人知不知道“没有return就返回undefined”。很多人能说出函数是什么但没在意过这个细节一深问就露馅了。学习第一天就把这个结论印在脑子里“每个函数都有返回值没写return就是undefined”。再延伸到热搜里的“js settimeout 返回值的范围 有0存在么”。setTimeout是JS的定时器函数你传一个函数和一个时间毫秒它等到时间后执行函数返回值是一个正整数ID用来之后清除定时器。注意这个ID虽然是数字但它不是0、1、2那种小范围数字而且即便你设的时间是0它也不会立刻执行因为JS是单线程有事件循环机制定时器回调得等当前代码执行完、调用栈空出来后才可能被推进。Day01只需要知道“定时器是延迟执行不是立即执行”这个结论就好事件循环以后我会专门写一篇深入聊。4.3 数组遍历与循环的初步接触数组是JS中特别重要的对象类型用来存放一组数据。Day01不准备把数组的几十个方法都塞给你只先认识两个forEach和for...of。forEach是数组自带的方法它会自动遍历数组的每一项依次交给回调函数处理const arr [苹果, 香蕉, 橙子]; arr.forEach((item, index) { console.log(${index}${item}); });热搜词里“js foreach 打断”这个话题被问得多答案很明确forEach里写break没有用会直接报语法错误。因为break本来就不是给函数用的forEach内部是一个函数它没有循环的“可跳出”控制结构。我见过不少新手写这段代码一脸懵地问我为什么break不生效。解决办法很简单如果你需要在循环中提前退出就用for...ofconst arr [1, 2, 3, 4, 5]; for (const item of arr) { if (item 3) { break; // 完全没问题 } console.log(item); }这个例子同时引入了for...of循环的基础写法。循环会依次把数组里的value赋给itembreak可以正常退出整体循环。第一天先形成肌肉记忆要遍历所有元素、且中途不会退出用forEach需要break跳出时优先用for...of。至于哪些场景用哪种最好后面学数组进阶方法时再系统对比。5. 常见问题与避坑技巧实录5.1 Day01最容易踩的五个坑这一节完全可以当作“新手第一天急救包”来用。我结合自己当年入门和后来带新人的经验把第一天的高频bug统一整理出来。你踩到任何一个翻回来看一眼基本能自己解决。第一个坑改了代码但忘记保存。浏览器控制台加载的是文件里的最后保存版本如果你在编辑器里改完没按保存快捷键比如ControlS或CommandS页面刷新后还是旧代码排查半天也找不到原因。我的建议是养成“每次改完代码立刻保存、再切到浏览器刷新”的习惯。现如今的开发工具都有热更新但最基础的手动保存习惯不能丢。第二个坑中文符号混进代码。中文输入法没切换过来导致括号、引号、分号变成全角符号浏览器报各种奇奇怪怪的语法错误。排查方法很实用看编辑器里波浪线或者颜色高亮的地方中文标点的显示和英文标点通常有明显区别。另外报错信息里通常也会指向具体行列比如Uncaught SyntaxError: Invalid or unexpected token看到这种报错第一反应就去查是不是符号字体不对。第三个坑变量名拼写不一致。JS对大小写极其敏感userName和username是两个完全不同的变量。新手经常在声明时写userName使用时写username控制台直接报“username is not defined”。我自己的习惯是变量名统一用“小驼峰”第一个字母小写后面的单词首字母大写比如userAge、orderList。这样命名规则统一后拼错概率会降低很多。第四个坑不一致的加分号习惯。JS分号可以不写靠自动分号插入机制但这对新手不友好。有些语句换行后行首是(或者[解析器会从前一行末尾开始合并解释结果和你预期的执行逻辑完全不同。我的建议是新手期老老实实每一行都加上分号等以后熟悉了语法边界再决定要不要走无分号风格。第五个坑不打印日志或者乱打印。console.log是最朴实无华的调试工具但很多人不爱用爱用调试器一步步走又在第一步就被绕晕。新手阶段我建议多打印关键节点的变量值比如console.log(循环中的i, i)变量名旁边带上说明文字一眼能看清是哪行代码输出的。少写废话日志多把程序状态真正打出来这是成本最低的排错手段。5.2 第一天就该建立的两个学习习惯第一看完一节课合上教程自己从零写一遍。看视频的正确率和独立写代码的差距往往大到让人怀疑人生。以前带过几个实习生跟着教程写感觉全会一让独立做一个简单需求就开始抓耳挠腮。所以Day01我给自己定下的规矩是每个知识点学完后关掉教程凭记忆自己敲一段例子哪怕把变量名起成a、b都行关键是流程要完整跑通。写不出来回头再看再合上再写直到不看参考也能写出来为止。第二遇到报错先自己查别急着问人。把报错信息的英文原文复制到搜索引擎里就原样搜不要先翻译成中文再搜因为好的解决方案标题和讨论大多保留英文原文。查不到就先静下来读一遍自己的代码看看是中文符号还是变量名毛病。搜索引擎是这个行业最基础的“老师”学会自己查比任何报培训班的方式都成长得快。顺便提醒一句网上检索技术方案时凡是涉及违反合规的代理、破解、翻越限制类的东西一律不要碰也别转载做一个规范的学习者和从业者。写在最后Day01的学习笔记到这里就收尾了。我个人最大的体会是JavaScript入门真的不难难的是从第一天就养成正确的开发习惯变量用let和const比较用严格相等调试多打console.log写完代码随手格式化。这些习惯看起来琐碎却是后续学习效率的胜负手。我强烈建议你把这篇笔记里的所有示例代码都动手敲一遍然后自己做一个小挑战写一个函数传入用户名如果用户名为空则显示“游客”否则显示“你好某某”。这个小练习能把你今天的四个知识点全部串起来。等你能独立完成它Day01就算真正过关了。明天咱们进入流程控制与循环把if、switch、for、while这些条件判断和循环语句彻底吃透。理论说再多不如动手敲一行代码实在那就练起来吧。