企业官网建设流程全解析

JavaScript 语法学习笔记

1. 基础语法

变量声明

// var - 函数作用域，存在变量提升varname="John";// let - 块级作用域，不存在变量提升letage=25;// const - 块级作用域，声明时必须初始化，不能重新赋值constPI=3.14159;

数据类型

// 基本数据类型letstr="Hello";// Stringletnum=42;// Numberletbool=true;// Booleanletundef;// Undefinedletnul=null;// Nullletsym=Symbol("id");// Symbolletbig=9007199254740991n;// BigInt// 引用数据类型letobj={name:"John"};// Objectletarr=[1,2,3];// Arrayletfunc=function(){};// Function

运算符

// 算术运算符letsum=10+5;// 15letdiff=10-5;// 5letproduct=10*5;// 50letquotient=10/5;// 2letremainder=10%3;// 1// 比较运算符console.log(10>5);// trueconsole.log(10=="10");// true (类型转换)console.log(10==="10");// false (严格相等)// 逻辑运算符console.log(true&&false);// falseconsole.log(true||false);// trueconsole.log(!true);// false

2. 控制结构

条件语句

// if-elseletscore=85;if(score>=90){console.log("优秀");}elseif(score>=80){console.log("良好");}else{console.log("需要努力");}// 三元运算符letstatus=score>=60?"及格":"不及格";// switchletday=3;switch(day){case1:console.log("星期一");break;case2:console.log("星期二");break;case3:console.log("星期三");break;default:console.log("其他");}

循环语句

// for 循环for(leti=0;i<5;i++){console.log(i);}// while 循环letcount=0;while(count<5){console.log(count);count++;}// do-while 循环letnum=0;do{console.log(num);num++;}while(num<5);// for...of (遍历可迭代对象)letfruits=["苹果","香蕉","橙子"];for(letfruitoffruits){console.log(fruit);}// for...in (遍历对象属性)letperson={name:"John",age:30};for(letkeyinperson){console.log(`${key}:${person[key]}`);}

3. 函数

函数声明

// 传统函数声明functionadd(a,b){returna+b;}// 函数表达式constmultiply=function(a,b){returna*b;};// 箭头函数constdivide=(a,b)=>a/b;// 默认参数functiongreet(name="Guest"){return`Hello,${name}!`;}// 剩余参数functionsum(...numbers){returnnumbers.reduce((acc,num)=>acc+num,0);}// 解构参数functionprintCoords({x,y}){console.log(`x:${x}, y:${y}`);}

作用域与闭包

// 全局作用域letglobalVar="I'm global";functionouter(){// 函数作用域letouterVar="I'm in outer";functioninner(){// 闭包：可以访问外层函数的变量console.log(outerVar);console.log(globalVar);}returninner;}constinnerFunc=outer();innerFunc();// 输出：I'm in outer, I'm global

4. 对象

对象创建

// 对象字面量letperson={name:"John",age:30,greet:function(){console.log(`Hello, I'm${this.name}`);}};// 构造函数functionPerson(name,age){this.name=name;this.age=age;}Person.prototype.greet=function(){console.log(`Hello, I'm${this.name}`);};letperson2=newPerson("Jane",25);// ES6 类classAnimal{constructor(name){this.name=name;}speak(){console.log(`${this.name}makes a noise.`);}}classDogextendsAnimal{speak(){console.log(`${this.name}barks.`);}}letdog=newDog("Rex");dog.speak();// Rex barks.

对象方法

letobj={a:1,b:2,c:3};// Object.keys() - 获取所有键console.log(Object.keys(obj));// ["a", "b", "c"]// Object.values() - 获取所有值console.log(Object.values(obj));// [1, 2, 3]// Object.entries() - 获取所有键值对console.log(Object.entries(obj));// [["a", 1], ["b", 2], ["c", 3]]// 扩展运算符letnewObj={...obj,d:4};// 解构赋值let{a,b}=obj;

5. 数组

数组方法

letnumbers=[1,2,3,4,5];// map - 转换数组letdoubled=numbers.map(n=>n*2);// [2, 4, 6, 8, 10]// filter - 过滤数组letevens=numbers.filter(n=>n%2===0);// [2, 4]// reduce - 归约数组letsum=numbers.reduce((acc,n)=>acc+n,0);// 15// forEach - 遍历数组numbers.forEach(n=>console.log(n));// find - 查找第一个匹配元素letfound=numbers.find(n=>n>3);// 4// some - 检查是否有元素满足条件lethasEven=numbers.some(n=>n%2===0);// true// every - 检查所有元素是否满足条件letallPositive=numbers.every(n=>n>0);// true// slice - 截取数组letsliced=numbers.slice(1,3);// [2, 3]// splice - 修改数组letarr=[1,2,3,4,5];arr.splice(2,1,10);// [1, 2, 10, 4, 5]

6. 异步编程

Promise

// 创建 Promiseletpromise=newPromise((resolve,reject)=>{setTimeout(()=>{letsuccess=true;if(success){resolve("操作成功!");}else{reject("操作失败!");}},1000);});// 使用 Promisepromise.then(result=>console.log(result)).catch(error=>console.error(error)).finally(()=>console.log("操作完成"));// Promise 链fetch('/api/data').then(response=>response.json()).then(data=>console.log(data)).catch(error=>console.error(error));// Promise.all - 并行执行多个 PromisePromise.all([promise1,promise2,promise3]).then(results=>console.log(results)).catch(error=>console.error(error));

async/await

// async 函数asyncfunctionfetchData(){try{letresponse=awaitfetch('/api/data');letdata=awaitresponse.json();console.log(data);returndata;}catch(error){console.error(error);}}// 并行执行多个异步操作asyncfunctionfetchMultiple(){let[data1,data2]=awaitPromise.all([fetch('/api/data1').then(r=>r.json()),fetch('/api/data2').then(r=>r.json())]);return{data1,data2};}

7. ES6+ 新特性

模板字符串

letname="John";letage=30;letgreeting=`Hello, my name is${name}and I'm${age}years old.`;letmultiLine=`This is a multi-line string.`;

解构赋值

// 数组解构let[a,b,...rest]=[1,2,3,4,5];console.log(a,b,rest);// 1, 2, [3, 4, 5]// 对象解构let{name,age}={name:"John",age:30,city:"NYC"};console.log(name,age);// John, 30// 重命名let{name:userName,age:userAge}={name:"John",age:30};console.log(userName,userAge);// John, 30

模块化

// 导出模块 (module.js)exportconstPI=3.14159;exportfunctioncalculateCircleArea(radius){returnPI*radius*radius;}exportdefaultclassCircle{constructor(radius){this.radius=radius;}}// 导入模块 (main.js)importCircle,{PI,calculateCircleArea}from'./module.js';import*asMathUtilsfrom'./module.js';

可选链操作符

letuser={name:"John",address:{city:"NYC"}};// 安全访问嵌套属性letcity=user?.address?.city;letzip=user?.address?.zipCode;// undefined，不会报错

空值合并运算符

letvalue=null;letresult=value??"默认值";// "默认值"letcount=0;letdisplayCount=count??10;// 0 (因为 0 不是 null 或 undefined)

8. 错误处理

// try-catch-finallytry{letresult=riskyOperation();console.log(result);}catch(error){console.error("发生错误:",error.message);}finally{console.log("无论是否发生错误都会执行");}// 自定义错误classCustomErrorextendsError{constructor(message){super(message);this.name="CustomError";}}functionvalidateAge(age){if(age<0){thrownewCustomError("年龄不能为负数");}returntrue;}

9. 常用内置对象

// Dateletnow=newDate();console.log(now.getFullYear());console.log(now.getMonth()+1);// 月份从 0 开始console.log(now.getDate());// Mathconsole.log(Math.PI);console.log(Math.random());console.log(Math.floor(4.7));console.log(Math.ceil(4.2));console.log(Math.round(4.5));// JSONletobj={name:"John",age:30};letjsonStr=JSON.stringify(obj);letparsedObj=JSON.parse(jsonStr);// RegExpletpattern=/\d+/;console.log(pattern.test("abc123"));// trueconsole.log("abc123".match(pattern));// ["123"]

10. 最佳实践

// 1. 使用 const 和 let，避免使用 varconstMAX_USERS=100;letcurrentUser=null;// 2. 使用严格模式"use strict";// 3. 使用箭头函数处理 thisclassCounter{constructor(){this.count=0;setInterval(()=>{this.count++;// 箭头函数保留 this},1000);}}// 4. 使用解构赋值简化代码functionprocessUser({name,age,email}){// 直接使用解构后的变量}// 5. 使用模板字符串constmessage=`Hello,${name}! You are${age}years old.`;// 6. 使用扩展运算符constnewArray=[...oldArray,newItem];constnewObj={...oldObj,newProp:value};// 7. 使用可选链和空值合并constcity=user?.address?.city??"Unknown";

这份笔记涵盖了 JavaScript 的核心语法和常用特性，适合初学者快速掌握 JavaScript 编程。建议结合实际项目练习，加深理解。