ES6新特性
程序员文章站
2024-03-18 10:55:40
...
一、ES6
全称 ECMAScript6 是浏览器脚本语言的规范,而JavaScript则是规范的具体实现。
1.新特性
1.1 let
1.1.1 作用域严格
<script>
//var 声明的变量往往会越域
//let 声明的变量有严格的局部作用域
{
var a = 1;
let b = 2;
}
console.log(a); //1
console.log(b); //Uncaught ReferenceError: b is not defined
</script>
1.1.2 只能声明一次
<script>
var m = 1;
var m = 2;
let n = 3;
let n = 4; // 重复声明会报错
console.log(m); //2
console.log(n); //Uncaught SyntaxError: Identifier 'n' has already been declared
</script>
1.1.3 不存在变量提升
<script>
console.log(x); //undefined
var x = 10;
console.log(y); //Uncaught ReferenceError: Cannot access 'y' before initialization
let y = 20; //let变量的声明操作不会提前执行
</script>
1.2 const
1.2.1 声明后只读
<script>
const a = 1;
a = 3; //Uncaught TypeError: Assignment to constant variable.
</script>
1.3 解构表达式
1.3.1 数组解构
<script>
let arr = [1,2,3];
let [a,b,c] = arr;
console.log(a,b,c); //1 2 3
</script>
1.3.2 对象解构
<script>
//定义一个对象
const person = {
name: "jeck",
age: 21,
language:['java','js','css']
}
//解析person的值
const {name,age,language} = person;
console.log(name,age,language);
//解析并赋值
const {name:aaa,age:bbb,language:ccc} = person;
console.log(aaa,bbb,ccc);
</script>
1.4 字符串扩展
1.4.1 新增API方法
<script>
let str = "hello.vue";
//开头匹配
console.log(str.startsWith("hello"));//true
//结尾匹配
console.log(str.endsWith(".vue"));//true
//是否存在目标字符串
console.log(str.includes("o"));//true
console.log(str.includes("hello"));//true
</script>
1.4.2 字符串模板
//代替了以前的换行拼接字符串,直接用 ``
<script>
let ss = `
<div>
<tr>
<td></td>
</tr>
</div>
`;
console.log(ss);
</script>
1.4.3 ${} 字符串中插入变量/表达式/调用方法
<script>
let abc = "张三";
let age = 33;
function say(){
return "w shi yige fangfa !";
}
//注意字符串嵌入时用 `` 而不是 ''
let info = `我是${abc},今年${age - 10} 岁了,I want say ${say()}`;
console.log(info);
</script>
1.5 函数优化
1.5.1 函数参数默认值
<script>
//函数参数默认值
function add(a = 8,b = 7){
return a + b;
}
console.log(add());//15
console.log(add(5));//12
console.log(add(9,9));//18
</script>
1.5.2 不定参数
<script>
//不定参数
function fun(...data){
console.log(data.length);
console.log(data);
}
fun(1,2,3,4); //4、[1,2,3,4]
fun(7,7,7,7,7); //5、[7,7,7,7,7]
</script>
1.5.3 箭头函数 =>
新的函数声明方法
<script>
//箭头函数
//一个参数 一行执行语句
var fun1 = obj1 => obj1;
console.log(fun1(9999)); //9999
//多个参数 一行执行语句
var fun2 = (obj1,obj2) => obj1 + obj2;
console.log(fun2(5,5)); //10
//多个参数 多行执行语句
var fun3 = (obj1,obj2) => {
let obj3 = obj1 + obj2;
return obj3 + obj1;
}
console.log(fun3(5,5)); //15
const person = {
name:"Jerry"
}
//参数为对象
var fun4 = (obj1) => obj1.name;
console.log(fun4(person)); //Jerry
//箭头函数+解构
var fun5 = ({name}) => name;
console.log(fun5(person)); //Jerry
</script>
1.6 对象优化
1.6.1 新增API方法
<script>
const person = {
name: "jeck",
age: 21,
language:['java','js','css']
}
//获取对象中所有的key
console.log(Object.keys(person)); //["name", "age", "language"]
//获取对象中所有的value
console.log(Object.values(person)); //["jeck", 21, Array(3)]
//获取整个对象并转换为数组
console.log(Object.entries(person));//[Array(2), Array(2), Array(2)]
//assign合并对象,第一个参数是合并的目标对象,其余的都是要被合并的对象
const target = {a:1};
const source1 = {b:1};
const source2 = {c:1};
Object.assign(target,source1,source2);
console.log(target); //{a: 1, b: 1, c: 1}
</script>
1.6.2 对象简写
<script>
//对象中属性的简写
const age = 10;
const name = "Jerry";
const person = {age,name}
console.log(person); //{age: 10, name: "Jerry"}
//对象中函数的简写
const person1 = {
name:"Jerry",
eat: function(food){
console.log(this.name + "在吃" + food);
},
//箭头函数中不能使用this关键字
eat2: food => console.log(person1.name + "在吃" + food),
eat3(food){
console.log(this.name + "在吃" + food);
}
}
person1.eat("橘子1");//Jerry在吃橘子1
person1.eat("橘子2");//Jerry在吃橘子2
person1.eat("橘子3");//Jerry在吃橘子3
</script>
1.6.3 对象的扩展运算符 …
对象扩展运算符 …
作用:解构对象中的属性,可以用来对象赋值或合并对象。
合并对象如果原对象和被合并对象具有相同的属性,那么该属性会被后面的赋值更新
<script>
//对象扩展运算符 ...
//1.拷贝对象(深拷贝)
let source1 = {name: "Jerry" , age: 25}
let p1 = {...source1}
console.log(p1); //{name: "Jerry", age: 25}
//2.合并对象
let source2 = {age:15}
let source3 = {name:"JerryR"}
let p2 = {name:"djl"}
p2 = {...source2,...source3}
console.log(p2); //{age: 15, name: "JerryR"}
</script>
1.7 数组优化
1.7.1 Map()
接收一个函数,将原数组中的所有元素用这个函数处理后返回
<script>
//map()方法
let arr = ['1','2','5','8'];
arr = arr.map(item=>item*2);
console.log(arr);
</script>
1.7.2 Reduce()
arr.reduce(callback,[initialValue])
为数组中每一个元素依次执行回调函数(不包括数组中被删除或从未被赋值的元素),initialValue
为处理的初始值,可选。
其中,callback有四个参数:
-
previousValue
上次调用回调返回的值(第一次执行时为提供的初始值initialValue
) -
currentValue
数组中当前被处理的元素的值 -
index
当前元素在数组中的索引 -
array
调用Reduce() 的数组
<script>
//map()方法
let arr = ['1','2','5','8'];
//reduce()方法
let result = arr.reduce((a,b)=>{
console.log("上次处理后"+a);
console.log("当前正在处理"+b);
return a + b;
},100);
console.log(result);
// 上次处理后100
// 当前正在处理2
// 上次处理后102
// 当前正在处理4
// 上次处理后106
// 当前正在处理10
// 上次处理后116
// 当前正在处理16
// 132
</script>
1.8 Promise (重要)
Promise()
用于封装异步操作new Promise(function())
:
-
function()
方法提供两个参数resolve
和reject
- 如果方法执行成功就调用
resolve(data)
方法把返回值传给下一步流程 - 如果方法执行失败就调用
reject(err)
方法把返回值传给异常处理 -
实例对象.then(function(data))
这里的function
就是实例对象的(异步)操作执行成功后,下一步流程的方法体定义,参数data
就是resolve(data)
传出的值 -
实例对象.catch(funtion(err))
这里的function
是实例对象的(异步)操作执行失败后,异常处理的方法体定义,参数err
就是reject(err)
传出的异常信息
1.8.1 封装异步操作实例
<script>
//封装一个公共的异步调用方法,参数为ajax请求的url和传的参数
function get(url,data){
return new Promise((resolve,reject)=>{
$.ajax({
url:url,
data:data,
success:function(data){
resolve(data);
},
error:function(err){
reject(err);
}
});
})
}
//链式编程,调用get方法
get("mock/user.json")
.then((data)=>{
console.log("用户查询成功!");
return get(`mock/user_corse_${data.id}.json`);
})
.then((data)=>{
console.log("课程查询成功!");
return get(`mock/corse_score_${data.id}.json`);
})
.then((data)=>{
console.log("课程成绩查询成功!",data);
})
.catch((err)=>{
console.log("出现异常"+err);
});
</script>
1.9 模块化
类似Java的导包
主要由两个命令组成:
-
export
规定模块的对外接口export
不仅可以导出对象,一切JS变量都可以导出。比如:基本类型变量、对象、函数、数组。 -
import
导入其他模块提供的功能
hello.js
//声明并导出
export const util = {
sum(a,b) {
return a + b;
}
}
main.js
import {util} from "./hello.js"
console.log(util.sum(1,2)); //3
也可以使用不指定名字的导出:
hello.js
export default {
sum(a,b){
return a + b;
}
}
main.js
import abc from "./hello.js"
console.log(abc .sum(1,2)); //3
VSCode
<!--导入JQuery-->
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
快捷键
Shift + ! + Enter -- 快速生成基本的HTML代码
Alt + Shift + F -- 自动修正格式