零基础JavaScript全套学习（一）：原生基础语法

一、前言JavaScript是网页交互的灵魂很多初学者直接上手写网页却对变量、数据类型、函数、对象这些底层概念一知半解写代码全靠复制粘贴遇到bug无从下手。本篇从零梳理JavaScript核心原生语法从最基础的引入方式到数据类型、流程控制、函数、集合、面向对象把JS地基打牢。只有吃透原生JS后续DOM操作、jQuery框架才能够学的通透。二、JavaScript入门与基础语法1、什么是JavaScriptJavaScript简称JS是运行在浏览器端的脚本语言负责网页的交互效果点击事件、表单校验、数据处理、页面动态修改。HTML负责页面结构CSS负责页面样式JavaScript负责行为交互。2、JS的引入方式① 内部脚本写在页面script标签内script alert(Hello JavaScript); /script② 外部JS文件新建 .js 文件通过script的src引入script srctest.js/script③ 行内写法写在标签事件属性中不推荐button onclickalert(hello)点击/button3、浏览器控制台按F12打开开发者工具切换控制台console面板-console.log(内容)打印输出调试最常用-alert(提示)浏览器弹窗-控制台可以直接写JS代码即时运行测试4、严格模式 use strictJS语法比较松散严格模式可以开启严禁校验规避很多隐式bug。写在脚本或者函数最开头// 必须写在JavaScript第一行 use strict; // 严格模式下变量必须声明不能直接 a10; // 局部变量建议都使用let定义 let a10; console.log(a);作用未声明变量禁止直接使用消除语法隐患推荐开发时开启。三、变量、数据类型详解1、变量声明 let / const / var- let普通变量值可以修改块级作用域推荐- const常量定义之后不能修改必须初始化推荐优先使用- var旧版本语法存在作用域bug尽量避免使用let num10; num20; const PI3.14; // PI3.15; // 报错常量不能修改块级作用域let / const 在 {} 大括号内部定义外面访问不到var 不受大括号限制。2、基础数据类型- number数字、整数、小数JS不区分小数和整数Number123 // 整数123 123.1 // 浮点数123.1 1.123e3 // 科学计数法 -99 // 负数 NaN // not a number Infinity // 表示无限大- string字符串单引号、双引号、反引号abc abc- boolean布尔值 true / false- null空值- undefined变量声明但是没有赋值- object对象、数组引用类型- 逻辑运算 两个都为真结果为真 || 一个为真结果为正 ! 真即假假即真- 比较运算符 等于类型不一样值一样也会判断为true 绝对等于类型一样值一样结果才为true3、字符串① 字符串长度console.log(str.length)② 字符串的可变性不可变③ 大小写转换// 注意这里是方法不是属性 str.toUpperCase() str.toLowerCase()④ 查找字符下标str.indexOf(t)⑤ 截取字符串str.substring(1) // 从第一个字符串截取到最后一个字符串 str.substring(1, 3) // [1, 3)⑥ 分割str.split( )4、数组类型Array可以包含任意的数据类型var arr [1, 2, 3, 4, 5, 6]① 数组长度arr.length② indexOf通过元素获得下标索引arr.indexOf(2)字符串的 1 和数字 1 是不同的③ slice() 截取Array的一部分返回一个新数组类似于String中的substring④ push()pop() 尾部arr.push() // 末尾添加元素 arr.pop() // 末尾删除⑤ unshift()shift() 头部arr.unshift() 头部添加元素 arr.shift() 头部删除⑥ 排序arr.sort()⑦ 元素反转arr.reverse()⑧ concat()(3) [C, B, A] arr.concat([1,2,3]) (6) [C, B, A, 1, 2, 3] arr (3) [C, B, A]注意concat()并没有修改数组只是会返回一个新的数组⑨ 连接符 join打印拼接数组使用特定的字符串连接(3) [C, B, A] arr.join(-) C-B-A5、对象类型对象使用 {key : value} 键值对存储数据描述事物多个属性间使用逗号隔开最后一个属性不加逗号var 对象名 { 属性名属性值 属性名属性值 属性名属性值 } // 定义了一个person对象它有四个属性 var person { name: xiaoming, age: 19, email: 264515365qq.com, score: 99 }JavaScript中的所有的键都是字符串值是任意对象① 对象赋值person.namexiaohong② 使用一个不存在的对象属性不会报错undefinedperson.school undefined③ 动态的删减属性通过 delete 删除对象的属性delete person.name true④ 动态的添加直接给新的属性添加值即可person.school tsinghua⑤ 判断属性值是否在这个对象中xxx in xxxage in person true // 继承 toString in person true⑥ 判断一个属性是否是这个对象自身拥有的 hasOwnProperty()person.hasOwnProperty(toString) false person.hasOwnProperty(age) true四、流程控制分支与循环1、分支 if / else、switchlet score80; if(score60){ console.log(及格); }else{ console.log(不及格); }switch适合固定值匹配let day1; switch(day){ case 1: console.log(周一); break; case 2: console.log(周二); break; }2、循环 for while// for循环 for(let i0; i5; i){ console.log(i); } // while循环 let i0; while(i5){ i; }3、iterable迭代遍历数组、Map、Set属于iterable可迭代对象使用 for of 遍历拿到元素值let arr[11, 22, 33] for(let item of arr){ console.log(item); }for in 拿到下标for of 拿到元素遍历数组优先 for of五、函数、内置对象Date、JSON1、函数定义与参数函数封装一段可重复执行代码// 普通函数 function add(a, b){ return ab; } // 匿名函数 let add function(a, b){ return ab; }参数可以不传不传的话参数为 undefined2、arguments、rest是一个JS免费赠送的关键字代表传递进来的所有的参数是一个数组let abs function(x){ console.log(x-x); for(let i0; iarguments.length; i){ console.log(arguments[i]); } if(x0){ return x; }else{ return -x; } }arguments包含所有的参数我们有时候想使用多余的参数来进行附加操作需要排除已有的参数。ES6引入的新特性获取除了已经定义的参数之外的所有参数function aaa(a, b, ...rest){ console.log(a-a); console.log(b-b); console.log(rest); }rest参数只能写在最后面必须用 ... 标识3、Date日期对象处理时间日期var now new Date(); // Sat Aug 07 2025 10:13:06 GMT0800中国标准时间 now.getFullYear(); // 年 now.getMonth(); // 月 now.getDate(); // 日 now.getDay(); // 星期几 now.getHours(); // 时 now.getMinutes(); // 分 now.getSeconds(); // 秒 now.getTime(); // 时间戳 全世界统一 1970 1.1 0:00:00 毫秒数 console.log(new Date(1578106175991)) // 时间戳转为时间4、JSON对象JSON是前后端数据交换格式本质字符串在JavaScript一切皆为对象、任何JS支持的类型都可以用JSON来表示格式·对象都用 {}·数组都用 []·所有的键值对都是用key : value⭐JSON.stringify()JS对象转JSON字符串⭐JSON.parse()JSON字符串转回JS对象let obj {name:小红}; let jsonStr JSON.stringify(obj); let back JSON.parse(jsonStr);JSON和JS对象的区别var obj {a:hello, b:hellob}; var json {a:hello, b:hellob}六、集合Map与SetMap键值对集合key可以是任意类型let map new Map(); map.set(name, zhangsan); // 存 map.get(name); // 取 map.has(name); // 判断是否存在 map.delete(name); // 删除Set无序不重复集合自动去重let set new Set([1,2,2,3]); // 结果 {123} 自动去重 set.add(4); set.has(2); set.delete(1);七、JS面向对象原型与class继承JS是基于原型的面向对象语言⭐原型继承每一个对象都有__proto__原型属性对象可以借用原型上的方法var xiaoming { name:xiaoming }; var Student { study: function(){ console.log(study...); } }; // xiaoming的原型是Student xiaoming.__proto__Student; function Person(name){ this.namename; } // 原型上添加方法 Person.prototype.sayfunction(){ console.log(this.name); } let p1 new Person(xiaowang); p1.say();⭐class继承class Person{ constructor(name){ this.namename; } say(){ console.log(this.name); } } // 继承 class Student extends Person{ constructor(name, age){ super(name); this.ageage; } } let s new Student(xiaoli, 16); s.say();八、结语本篇完成了JavaScript原生全部核心知识点学习。我们掌握了变量、各类数据类型、函数、内置对象、集合以及JS独特的面向对象机制。原生JS是一切前端交互的根基理解好这些内容接下来我们就可以进入网页实操学习DOM、BOM以及i、jQuery库真正实现网页交互效果。