ES6新特性
Posted luckyzs
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了ES6新特性相关的知识，希望对你有一定的参考价值。
ES6
ECMAScript 是浏览器脚本语言的规范，而各种我们熟知的Js语言，如javascript则是规范的具体实现。
一、ES6新特性
1、let变量
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
// let特点一
// var声明的变量往往会越域
// let声明的变量又严格局部作用域
{
var a = 1;
let b = 2;
}
console.log(‘a:‘+a); // a:1
console.log(‘b:‘+b); // ReferenceError: b is not defined
// let特点二
// var可以声明多次
// let只可以声明一次
var m = 1;
var m = 2;
let n = 3;
// 放开后，Identifier ‘n‘ has already been declared
// 注释掉，m:2 n:3
// let n = 4;
console.log(‘m:‘+m);
console.log(‘n:‘+n);
// let特点三
// var 会变量提升
// let 不存在变量提升
console.log(x); // undefined
var x = 10;
console.log(y); // y is not defined
let y = 20;
</script>
</body>
</html>
2、const
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
// const声明之后不允许改变
// const一旦声明必须初始化，否则会报错 Missing initializer in const declaration
const a = 1;
a=3; // Assignment to constant variable.
</script>
</body>
</html>
3、解构表达式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
// 1、数组解构
let arr = [1,2,3];
// 老语法
let a = arr[0];
let b = arr[1];
let c = arr[2];
console.log(a,b,c);
// 新语法
let [x,y,z] = arr;
console.log(x,y,z);
// 2、对象解构
const person = {
name: ‘zhangsan‘,
age: 28,
language: [‘java‘,‘js‘,‘css‘]
}
// 老语法
const _name = person.name;
const _age = person.age;
const _language = person.language;
console.log(_name,_age,_language);
// 新语法
// 不换变量名称
const {name,age,language} = person;
console.log(‘对象不换名：‘+name,age,language);
// 换变量名称
const {name:userName,age:userAge,language:userLanguage} = person;
console.log(‘对象换名：‘+userName,userAge,userLanguage);
</script>
</body>
</html>
4、新增字符串API
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
let str = ‘hello.vue‘;
console.log(str.startsWith(‘hello‘));// true
console.log(str.endsWith(‘.vue‘));// true
console.log(str.includes(‘e‘));// true
console.log(str.includes(‘hello‘));
</script>
</body>
</html>
5、字符串模板
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
// 1、多行字符串
let ss = `
<div>
<span>hello world</span>
</div>
`;
console.log(ss);
// 2、字符串插入变量和表达式。
// 变量名写在${}中，${}中可以放入 JavaScript表达式
let name = ‘张三‘;
let age = 18;
let info = `我是${name}，今年${age}了`;
console.log(info);
// 3、字符串中调用函数
function fun(){
return ‘这是一个函数‘;
}
let sss = `哈哈哈~，${fun()}`;
console.log(sss);
</script>
</body>
</html>
6、函数参数默认值
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
// 在ES6以前，我们无法给一个函数参数设置默认值，只能采用变通写法
function add(a,b){
// 判断b是否为空，为空就给默认值1
b = b || 1;
return a+b;
}
// 传一个参数
console.log(add(10));
// 现在可以这么写，直接给参数写上默认值，没传就会自动使用默认值
function add2(a,b=1){
return a+b;
}
// 传一个参数
console.log(add2(10));
</script>
</body>
</html>
7、不定参数
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
// 不定参数
// 用来表示不确定参数个数，形如 ...变量名
// 由...加上一个具名参数标识符组成
// 具名参数只能放在参数列表的最后，并且有且只有一个不定参数
function fun(...values){
// 注意此处打印的是 values的长度
console.log(‘长度：‘+values.length);
console.log(values);
}
fun(1,2) // 长度：2 [1, 2]
fun(1,2,3,4) // 长度：4 [1, 2, 3, 4]
</script>
</body>
</html>
8、箭头函数
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
// 以前声明一个参数的方法
var print =function(obj){
console.log(obj);
}
print(100) // 100
// 可以简写为
var print1 = obj => console.log(obj);
print1(200) // 200
// 以前声明多个参数的方法
var sun = function (a,b){
return a+b;
}
console.log(sun(1,2)); // 3
// 可以简写为
var sun1 = (a,b) => a+b;
console.log(sun1(2,2)); // 4
// 声明多个参数，方法体内多行代码
var sum = function (a,b){
c = a + b;
return a+c;
}
console.log(sum(1,1)); // 3
var sum1 = (a,b) => {
c = a + b;
return a+c;
}
console.log(sum1(2,1)); // 5
// 实战
const person = {
name: ‘zhangsan‘,
age: 28,
language: [‘java‘,‘js‘,‘css‘]
}
// 老方法
function hello(obj){
console.log(‘hello,‘+obj.name);
}
// 新方法1
var hello2 = obj => {
console.log(‘hello,‘+obj.name);
}
hello2(person); // hello,zhangsan
// 新方法2
var hello3 = ({name}) => console.log(‘hello,‘+name);
hello3(person); // hello,zhangsan
</script>
</body>
</html>
9、对象新增API
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
// 1
const person = {
name: ‘zhangsan‘,
age: 28,
language: [‘java‘,‘js‘,‘css‘]
}
// 取person对象的Key组成数组
console.log(Object.keys(person)); // ["name", "age", "language"]
// 取person对象的values组成数组
console.log(Object.values(person)); // ["zhangsan", 28, Array(3)]
// 取person对象的key和value先组成数组，然后装进一个大数组中
console.log(Object.entries(person)); // [Array(2), Array(2), Array(2)]
// 2
const target = {a:1};
const source1 = {b:2};
const source2 = {c:3};
// Object.assign方法的第一个参数是目标对象，后面的参数都是源对象
// 该方法是将源对象的key:value放入到目标对象中
Object.assign(target,source1,source2);
console.log(target); // {a: 1, b: 2, c: 3}
// 3
// 声明对象的简写方式
const name = ‘张三‘;
const age = 23;
// 传统
const person1 = {age:age,name:name};
// ES6：属性名和属性值变量名一样，可以省略
const person2 = {age,name};
console.log(person2); // {age: 23, name: "张三"}
// 4
// 对象的函数属性简写
let person3 = {
name:‘张三‘,
// 以前
eat:function(food){
console.log(this.name + ‘在吃‘ + food);
},
// 箭头函数this不能使用，要用对象.属性
eat2: food => console.log(person3.name + ‘在吃‘ + food),
eat3(food){
console.log(this.name + ‘在吃‘ + food);
}
}
person3.eat(‘香蕉‘);
person3.eat2(‘苹果‘);
person3.eat3(‘橘子‘);
// 5
// 对象拓展运算符
// 拓展用算符(...)用于取出参数对象所有可遍历属性然后拷贝到当前对象
// 拷贝对象(深拷贝)
let personA = {name:‘Amy‘,age:15};
let someone = {...personA};
console.log(someone); // {name: "Amy", age: 15}
// 合并对象
let age = {age:15};
let name = {name:‘Amy‘};
// 如果两个对象的字段名重复，后边的对象字段值会覆盖前边对象的字段值
let personB = {name:‘Jack‘}
personB = {...age,...name};
console.log(personB); // {age: 15, name: "Amy"}
</script>
</body>
</html>
10、map和reduce
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
// 数组中新增了map和reduce方法
// map()：接收一个函数，将原数组中的所有元素用这个函数处理后放入新数组返回
let arr = [‘1‘,‘20‘,‘-5‘,‘3‘];
// 方法1
// arr = arr.map((item)=>{
// return item*2;
// })
// 以上简化为
arr = arr.map(item => item*2);
console.log(arr);
// reduce()：为数组中的每一个元素依次执行回调函数，不包括数组中被删除或从未被赋值的元素
// arr.reduce(callback,[initialValue])
/**
* 1、previousValue：上一次调用回调返回的值，或者是提供的初始值(initialValue)
* 2、currentValue：数组中当前被处理的元素
* 3、index：当前元素在数组中的索引
* 4、array：调用 reduce 的数组
*/
let result = arr.reduce((a,b)=>{
console.log(‘上一次处理后：‘+a);
console.log(‘当前正在处理：：‘+b);
return a+b;
},100)// 此处100是初始值
console.log(result);
</script>
</body>
</html>
11、Promise
优化异步操作
1）准备json文件
user.json - 用户信息
{
"id":1,
"name":"zhangsan",
"password":"123456"
}
user_corse_1.json - 课程信息
{
"id": 10,
"name":"chinese"
}
corse_score_10.json - 得分信息
{
"id":100,
"score":90
}
2）优化异步
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
</head>
<body>
<script>
// 老方法
// 1、查出当前用户信息
// 2、按照当前用户的id查出他的课程
// 3、按照当前课程ID查出分数
$.ajax({
url: "json/user.json",
success(data){
console.log(‘查询用户：‘,data);
$.ajax({
url: `json/user_corse_${data.id}.json`,
success(data){
console.log(‘查询到课程：‘,data);
$.ajax({
url: `json/corse_score_${data.id}.json`,
success(data){
console.log(‘查询到分数：‘,data);
},
error(error){
console.log(‘出现异常：‘+error);
}
});
}
});
}
});
// promise可以封装异步操作
let p = new Promise((resolve,reject)=>{
// 1、异步操作
$.ajax({
url: "json/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: `json/user_corse_${obj.id}.json`,
success:function(data){
console.log(‘查询到课程：‘,data);
resolve(data);
},
error:function(err){
reject(err);
}
});
});
}).then((data)=>{
$.ajax({
url: `json/corse_score_${data.id}.json`,
success(data){
console.log(‘查询到分数：‘,data);
},
error(error){
console.log(‘出现异常：‘+error);
}
});
}).catch((err)=>{});
// 抽取方法，继续简化
function get(url,data){
return new Promise((resolve,reject)=>{
$.ajax({
data:data,
url: url,
success:function(data){
resolve(data);
},
error:function(err){
reject(err);
}
});
});
};
// 最终
get("json/user.json")
.then((data)=>{
console.log(‘查询用户~~~：‘,data);
return get(`json/user_corse_${data.id}.json`)
})
.then((data)=>{
console.log(‘查询到课程~~~：‘,data);
return get(`json/corse_score_${data.id}.json`);
})
.then((data)=>{
console.log(‘查询到分数~~~：‘,data);
})
.catch((err)=>{
console.log(‘出现异常~~~：‘+error);
});
</script>
</body>
</html>
12、模块化
1）什么是模块化
模块化就是把代码进行拆分，方便重复利用。类似java中的包；要使用一个包，必须先导包。
而 JS 中没有包的概念，换来的是 模块。
2）模块功能主要由两个命令构成：export和import
export命令用于规定模块的对外接口import命令用于导入其他模块提供的功能
3）示例
// hello.js
const util = {
sum(a,b){
return a + b;
}
}
export {util}
// export不仅可以导出对象，一切JS变量都可以导出。比如基本类型变量、函数、数组、对象。
// user.js
var name = ‘jack‘;
var age = 21;
function add(a,b){
return a+b;
}
export {name,age,add}
import util from "./hello.js" // util不能乱写
import {name,age,add} from "./user.js" // 批量导入，但不是所有的都必须导入，用哪个导入哪个
本文内容学习自谷粒商城--微服务分布式电商项目-分布式基础。
以上是关于ES6新特性的主要内容，如果未能解决你的问题，请参考以下文章