前端文章汇总
前言：
ES6其实就是一个规范，实现它的规范整数JavaScript (如同 JPA 和 Hibernate )
演示用的是 微软旗下的开发工具 VSCode（Visual Studio Code）
cscode 快捷键：
ctrl+shift+ + 放大 ctrl+shift+ - 缩小
格式化快捷键：【Shift】+【Alt】+F
个人安装的插件：
image.png
1、关于变量声明，let ， var ， const
let 特点（与var 比较）：
var：
(1)声明的变量往往会越域
(2)可以声明多次
(3)变量会提升
let：
(1)声明的变量有严格局部作用域
(2)只能声明一次
(3)不存在变量提升
const：常量（只读变量）
// 特点一：
{
var a = 1;
let b = 2;
}
console.log(a);
console.log(b);// b is not defined
// 特点二：
var m = 1;
var m = 2;
let n = 1;
let n = 2;// 'n' has already been declared
// 特点三：
console.log(x);// undefined
var x = 10;
console.log(y);// Cannot access 'y' before initialization
let y = 10;
// const
const a = 1;
a = 3;// Assignment to constant variable
2、解构表达式
(1)数组解构：
// 1、数组解构案例
let arr = [1, 2, 3];
// 传统赋值
// let a = arr[0];
// let b = arr[1];
// let c = arr[2];
// 数组解构写法
let [a, b, c] = arr
console.log(arr);
(2)对象解构：
// 2、对象解构案例
const person = {
name:'jack',
age:'23',
language:['java','php','js']
};
// 传统赋值
// const name = person.name;
// const age = person.age;
// const language = person.language;
// 对象解构写法
const {name:myName,age,language} = person;
console.log(myName,age,language);
3、字符串扩展：
(1)字符串 API
(2)字符串模板：里面的空格依然保留，也省了拼接
(3)字符串插入变量和表达式：省了字符串拼接
// 3、字符串扩展 注意符号 ``
// api
let str = "hello.vue";
console.log(str.startsWith("hello"));// 是否包含hello 开头 ,返回 true
console.log(str.endsWith("vue")); // 是否包含vue 结尾 ,返回 true
console.log(str.includes("v")); // 是否包含 v ,返回 true
console.log(str.includes("vu")); // 是否包含 vu ,返回 true
// 字符串模板 注意符号 ``
let ss = ` <div>
<span> giao giao giao !!</span>
</div>`;
console.log(ss);
// 插入表达式 注意符号 ``
// 声明变量
const nameA = 'jack';
let age = 18;
function fun(){
return '这是一个函数';
};
// 输出：我的网名是jack，我今年28岁，我说：这是一个函数
console.log(`我的网名是${nameA}，我今年${age+10}岁，我说：${fun()}`);
4、函数优化：
(1)默认参数传参
(2)不定参数（类似java的可变形参）
(3)箭头函数
// ES6前，是无法在参数上面直接赋值
function add(a, b) {
// 做非空判断，默认值为1
b = b || 1;
return a + b;
}
// 传一个参数，a
console.log(add(10)); // 11
// 如上改进一
function add2(a, b = 1) {
return a + b
}
console.log(add2(11)); // 12
//------------------------美丽的分割线----------------------------------
// 不定参
function fun(...values) {
return values.length
}
console.log(fun(1, 2)); // 2
console.log(fun(1, 2, 'x', 'y')); // 4
//------------------------美丽的分割线----------------------------------
// 核心：箭头函数
//以前声明一个方法
// var print = function (obj){
// console.log(ogj);
// }
var print = obj => console.log(`你好啊：${obj}`);
print('大根');
// 箭头函数案例 2
//原始
var sum = function (a, b) {
c = a + b;
return a + c;
}
// 进化 1 , 方法内 只有一句 语句
var sum2 = (a, b) => a + b;
console.log(sum2(11, 22)); // 33
// 进化 2 , 方法内 只有两句 语句,超过了一句就得加 {}
var sum3 = (a, b) => {
c = a + b;
return a + c;
}
console.log(sum3(22, 33)); //77
// 箭头函数案例 3
const person = {
name: 'jack',
age: '23',
language: ['java', 'php', 'js']
};
function hello(person) {
console.log('hello:' + person.name);
}
// 函数箭头+对象解构
var hello2 = ({ name }) => console.log('hello:' + name);
hello2(person);
5、对象优化：
1、新增 API
Object.keys方法：获取所有key 形成数组
Object.values方法：获取所有value 形成数组
Object.entries方法：获取所有key,value 形成二位数组
Object.assign(a1,a2,a3...)：参数二及后的参数对象合并到参数一对象中（个人使用理解）
const person = {
name: 'jack',
age: '23',
language: ['java', 'php', 'js']
};
// 1、Object.keys方法：获取所有key 形成数组
console.log(Object.keys(person));// ["name", "age", "language"]
// 2、Object.values方法：获取所有value 形成数组
console.log(Object.values(person));// ["jack", "23", Array(3)]
// 3、Object.entries方法：获取所有key,value 形成二位数组
console.log(Object.entries(person));// [Array(2), Array(2), Array(2)]
// 4、Object.assign(a1,a2,a3...)：参数二及后的参数对象合并到参数一对象中
//声明三个对象并且赋值
var target = {a:1};
var source1 = {b:2};
var source2 = {c:3};
var source3 = {d:4};
var source4 = {e:5};
//{a:1,b:2,c:3}
Object.assign(target,source1,source2,source3);
console.log(target); //
2、声明对象简写：如果属性和要复制的属性名一样，可省略
const name = '小白';
const age = 16;
// 原始
const person1 = {name:name,age:age};
// 进化
const person2 = {name,age};
console.log(person2);
3、对象的函数属性简写
let person3 = {
name:'jack',
// 原始
eat:function(food){
console.log(this.name+'在吃：'+food);
},
// 箭头函数 this.属性 不能使用，需要 对象.属性
//eat2:food => console.log(person3.name+'在吃'+food),
eat2:food => console.log(`${person3.name}在吃：${food}`),
// 简写版：
eat3(food){
console.log(this.name+'在吃：'+food);
}
}
console.log(person3.eat('锤子'));
console.log(person3.eat2('铁锤'));
console.log(person3.eat3('石锤'));
4、对象扩展运算符(...)：用于取出参数对象所有可遍历属性然后拷贝到当前对象
// 1、拷贝对象(深拷贝)
let p1 = {name:'kakaxi',age:32}
let someone = {...p1}// someone 某人
console.log(someone) // {name:'kakaxi',age:32}
// 2、合并对象
let age1 = {age:26}
let name1 = {name1:'粗根'}
let p2 = {name1:'amy'}
p2 = {...age1,...name1}
console.log(p2);// {age: 26, name1: "粗根"}
6、map 和 reduce：数组中新增。。
map()：接收一个函数，将原始数组中所有元素用这个函数处理后放入新数组返回
reduce(callBack,[initialValue])：为数组中每一个元素依次执行回调函数，不包括数组中被删除或者未赋值的元素
（1）previousValue(上一次调用回调返回的值，或者是提供的初始值（initialvalue）)
（2）currentValue（数组中当前被处理的元素)
（3）index(当前元素在数组中的索引---0开始)
（4）array（调用reduce的数组）
// map()：接收一个函数，将原始数组中所有元素用这个函数处理后放入新数组返回
let arr = ['1', '-22', ' 5', ' 6', '-33']// 快捷键： 选中加 ''
// 原始
// arr = arr.map((item) => {
// return item * 2
// });
// 进化
arr = arr.map(item => item*2)
console.log(arr);
//------------------------美丽的分割线----------------------------------
// reduce()：为数组中每一个元素依次执行回调函数，不包括数组中被删除或者未赋值的元素
let result = arr.reduce((a,b,c,d) => {
console.log('上一次处理后的：'+a);
console.log('当前正在处理的：'+b);
//console.log('当前在元素中的索引：'+c);// 0开始
//console.log('调用reduce的数组：'+d);
// 处理
return a+b
},100) // 初始化 为 100 ， 在 第一个索引1之前 加入 100
console.log(result);
7、Promise(异步编排)：优化异步操作，读：普ruang(第四音)米丝
1、ajax 嵌套案例：可以看出，是非常不舒服的
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
<script>
//1、查出当前用户信息
//2、按照当前用户的id查出他的课程
//3、按照当前课程id查出分数
$.ajax({
url: "mock/user.json",
success(data) {
console.log("查询用户：", data);
$.ajax({
url: `mock/user_corse_${data.id}.json`,
success(data) {
console.log("查询到课程：", data);
$.ajax({
url: `mock/corse_score_${data.id}.json`,
success(data) {
console.log("查询到分数：", data);
},
error(error) {
console.log("出现异常了：" + error);
}
});
},
error(error) {
console.log("出现异常了：" + error);
}
});
},
error(error) {
console.log("出现异常了：" + error);
}
});
</script>
模拟接口数据
image.png
2、使用promise 异步请求
// promise 请求 封装 异步操作（原生）
let p = new Promise((resolve, reject) => {
// 异步操作
$.ajax({
url: "mock/user.json",
success: function (data) {
console.log("查询用户成功:", data)
resolve(data);
},
error: function (err) {
reject(err);
}
});
});
// 如果成功调用
p.then((obj) => {
return new Promise((resolve, reject) => {
$.ajax({
url: `mock/user_corse_${obj.id}.json`,
success: function (data) {
console.log("查询用户课程成功:", data)
resolve(data);
},
error: function (err) {
reject(err)
}
});
});
}).then((data) => {
console.log('上一步的结果：' + data);
$.ajax({
url: `mock/corse_score_${data.id}.json`,
success: function (data) {
console.log("查询课程得分成功:", data)
},
error: function (err) {
}
});
})
// 如果失败调用
.catch((err) => {
console.log('失败'+err);
})
3、对上面进行简单的封装
// 封装 promise
function get(url, data) {
// resolve决定，reject拒绝
return new Promise((resolve, reject) => {
$.ajax({
url: url,
data: data,
success: function (data) {
// 成功的回调
resolve(data);
},
error: function (data) {
// 失败的回调
reject(data);
}
})
})
}
// 测试
get('/mock/user.json')
.then((data) => {
// 逗号，没用加号
console.log("用户查询成功······",data);
return get(`mock/user_corse_${data.id}.json`);
})
.then((data) =>{
console.log("课程查询成功······",data)
return get(`mock/corse_score_${data.id}.json`);
})
.then((data)=>{
console.log("课程成绩查询成功······",data)
})
.catch((err)=>{
console.log('出现了异常',err);
});
关于 jquery中的ajax 和 vue 中的 axios 的一些不错的博客
心得：虽然axios 有不少优点，但是替代太过绝对。（axios是ajax，ajax不止axios）
什么是promise
细谈ajax和axions区别
https://www.cnblogs.com/hermit-gyqy/p/13259605.html
https://www.cnblogs.com/yjf713/p/13341376.html
8、浅谈模块化：
为了是代码复用性更好，有了此操作(不过需要Babel 转换后 浏览器才能兼容)
导出：export不仅可以导出对象，一切JS变量都可以导出。比如：基本类型变量、函数、数组、对象。
导入：inportxx from'路径'
导出属性和函数：
image.png
导出一个函数(一种导出可随意定义，一种不可)：
image.png
导入进来使用：
image.png
