前端学习路线
- 1. 大纲: 前端学习路线
- 2. ES6 语法
- 1. let 和 const
- 2. 箭头函数
- 3. 解构
- 3.1 数组解构
- 3.2 对象解构
- 4 剩余参数
- 4.1 和解构联用
- 4.2 合并数组
- 5. 可选链
- 6. Set
- 7.数组操作
- 8.字符串扩展方法
- 8.1 startsWith() 和 endsWith()
- 8.2 模板字符串
1. 大纲: 前端学习路线
学习前端开发工具、编译、打包和配置格式化等内容，可以按照以下步骤进行学习：
-
了解基础知识：
- 开始前端开发之前，需要对 HTML、CSS 和 JavaScript 有一定的了解。可以通过在线教程、视频课程或书籍来学习这些基础知识。
-
学习版本管理工具：
- 掌握版本管理工具如 Git 的基本使用，了解如何进行代码提交、分支管理等操作。
-
学习基本的开发工具：
- 了解并学习使用一些基本的开发工具，比如编辑器（如 Visual Studio Code、Sublime Text 等）、终端工具等。
-
掌握包管理工具：
- 学习使用包管理工具，比如 npm（Node Package Manager）或者 yarn。了解如何安装、管理和使用包，以及如何初始化项目。
-
学习构建工具：
- 掌握前端构建工具如 Webpack、Parcel、Rollup 或 Vite 等的基本使用，了解如何配置项目、处理模块、打包资源等。
-
了解代码格式化工具：
- 学习使用代码格式化工具如 Prettier 或 ESLint，了解如何配置和使用这些工具来提高代码的质量和一致性。
-
深入学习框架和库：
- 了解并学习一些流行的前端框架和库，比如 React、Vue.js、Angular 等，掌握它们的基本用法和工具链。
-
实践项目：
- 通过实际项目来应用所学知识，比如创建一个简单的网页或者应用，然后使用所学的工具进行构建、打包和格式化等操作。
-
持续学习：
- 前端开发是一个不断更新和发展的领域，因此需要持续学习新的工具、技术和最佳实践。
！
- 前端开发是一个不断更新和发展的领域，因此需要持续学习新的工具、技术和最佳实践。
2. ES6 语法
1. let 和 const
let 是 ES6 中新增加的用于声明变量的关键字，它具有如下特点
不存在变量提升，即不能先使用再声明
num = 20
let num = 30;
console.log(num);
// 报错：uncaught ReferenceError: Cannot access 'num' before initialization
// at<!DOCTYPE html>.html:11:13
只在块级作用域有效
{let num = 30;
}console.log(num);
const
只在块级作用域有效，赋值后不能修改
var、let、const的区别
- var 声明的变量作用域在所处的函数内，let 和 const 声明的变量作用域在所处的大括号内。
- var 声明的变量存在变量提升现象，let 和 const 声明的变量不存在变量提升现象。
- const 声明变量时必须要赋值，赋值之后不能再重新赋值
2. 箭头函数
- () 代表函数
- {} 代表函数体
- const ft = () => {} 代表把一个函数赋值给ft
- ft() 调用该函数
// 箭头函数：获取年龄最大值
const ft = (userArray, sex) => {let ageArray = userArray.filter(user => user.sex == sex).map(item => item.age);return Math.max(...ageArray);
}let userArray = [{ name: '张三', sex: '男', age: 18 },
{ name: '李四', sex: '女', age: 19 },
{ name: '王五', sex: '男', age: 21 }]
// 调用函数
console.log(ft(userArray, '男'));// 输出结果： 21
3. 解构
解构就是把数据结构进行分解，然后为定义的变量赋值
3.1 数组解构
const num =[0,1,2,3];
const a= num[0];
const b= num[1]
console.log(a+b);// 解构
let [a, b] = [0, 1, 2, 3];
console.log(a + b)
3.2 对象解构
// 获取对象中数据的传统方式：
let user = {name:"张三",age:19};
let name = user.name;
let age = user.age;
console.log("姓名:"+name+",年龄:"+age);
// 解构：
let { name, age } = { name: "张三", age: 19 };
console.log("姓名:" + name + ",年龄:" + age);
4 剩余参数
剩余参数允许我们将一个未知数量的参数表示为一个数组。
const print = (num, ...args) => {console.log(num);console.log(args);
}
print(0, 1, 2)4.1 和解构联用
let users = ['张三', '李四', '王五'];
let [u1, ...u2] = users;
console.log(u1);
console.log(u2);
// 输出
4.2 合并数组
let u1 = ['张三', '李四', '王五'];
let u2 = ['张无忌', '赵敏', '周芷若'];
let u3 = [...u1,...u2];
console.log(u3);
5. 可选链
可选链 ?. 是一种 访问嵌套对象属性的防错误方法 。即使中间的属性不存在，也不会出现错误。 如果可选链 ?. 前面部分是 undefined 或者 null，它会停止运算并返回 undefined。
//我们要想获取一个嵌套对象的属性，一般会这样写：
let res = {data: {data: {success: true,id: "20220425"}}}if (res && res.data && res.data.data.success) {let id = res.data.data.id;console.log(id);}// 使用可选链
let res = {data: {data: {success: true,id: "20220425"}}}// important
if (res?.data?.data?.success) {let id = res?.data?.data?.id;console.log(id);
}
6. Set
Set 是 ES6 提供的一种数据结构，它和数组很像，但是它里面的数据是不可重复的。
// 初始化const set1 = new Set([1, 2, 3, 4, 5, 5]);
const set2 = new Set(['苹果','橘子','橘子']);
console.log(set1);
console.log(set2);// 添加数据const set1 = new Set([1, 2, 3, 4, 5,5]);
set1.add(7);//删除数据
const set1 = new Set([1, 2, 3, 4, 5,5]);
set1.delete(3);// 包含数据
const set1 = new Set([1, 2, 3, 4, 5,5]);
const res = set1.has(1);
console.log(res);// 清除所有数据
let u1 = ['张三', '李四', '王五'];
let u2 = ['张无忌', '赵敏', '周芷若'];
let u3 = [...u1,...u2];
console.log(u3);
7.数组操作
// 合并数组
let u1 = ['张三', '李四', '王五'];
let u2 = ['张无忌', '赵敏', '周芷若'];
let u3 = [...u1,...u2];
console.log(u3);// includes 用来判断该数组是否包含某个值，返回值是布尔值
let users = ['张三','李四'];
let res =users.includes('张三');
console.log(res);// find 用来找到第一个符合条件的成员，没有找到返回 undefined
let users = [{ name: '张三', age: 18 }, { name: '李四', age: 20 }];
let user = users.find((item, index) =>item.age > 18
)
console.log(user);
// 输出： {name:'李四',age:20}// findIndex 用来找到第一个符合条件的成员的索引，没有的话返回 -1
let users = [{ name: '张三', age: 18 }, { name: '李四', age: 20 }];
let index = users.findIndex((item, index) =>item.age > 18
)
console.log(index)//filter 用来返回一个满足条件的新数组，不满足条件返回空数组
let users = [{ name: '张三', age: 18 }, { name: '李四', age: 20 }];
let array = users.filter((item, index) =>item.age > 21
)
console.log(array);//map 用来返回一个对成员进行加工之后的新数组
let users = [{ name: '张三', age: 18 }, { name: '李四', age: 20 }];
let array = users.map((item, index) => {item.name += "666";item.age += 10;return item;
})
console.log(array);
8.字符串扩展方法
8.1 startsWith() 和 endsWith()
let message = "helloworld";
let res = message.startsWith("hello");
console.log(res);let message = "helloworld";
let res = message.endsWith("ww");
console.log(res);
8.2 模板字符串
// 定义: 反引号`
let country = `中国`;// 解析变量
let country = `中国`;
let message = `我爱你${country}`;
console.log(message);// 调用函数
const print = message=>message+"，2022-04-25";
let message = `${print('我爱你中国')}`;
console.log(message);
驱动的结构介绍)
