前端ES6新特性

最新推荐文章于 2023-03-24 11:22:32 发布
最新推荐文章于 2023-03-24 11:22:32 发布
阅读量279 收藏
点赞数
文章标签： 前端 es6 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/helloyuanye/article/details/125484628
版权

一、ES6

ECMAScript6.0（以下简称ES6，ECMAScript是一种由Ecma国际通过ECMA-262标准化的脚本），是JavaScript语言的下一代标准，2015年6月正式发布，从ES6开始的版本号采用年号，如ES2015，就是ES6。ES2016就是ES7。

ECMAScript是规范，JS的规范的具体实现。

1、声明式渲染

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>


<script>
// var 声明的变量往往会越域
// let 声明的变量有严格局部作用域
//         {
//             var a = 1;
//             let b = 2;
//         }
//         console.log(a);  // 1
//         console.log(b);  // ReferenceError: b is not defined

// var 可以声明多次
// let 只能声明一次
//         var m = 1
//         var m = 2
//         let n = 3
// //         let n = 4
//         console.log(m)  // 2
//         console.log(n)  // Identifier 'n' has already been declared

// var 会变量提升
// let 不存在变量提升
//         console.log(x);  // undefined
//         var x = 10;
//         console.log(y);   //ReferenceError: y is not defined
//         let y = 20;

// let
// 1. const声明之后不允许改变
// 2. 一但声明必须初始化，否则会报错
const a = 1;
a = 3; //Uncaught TypeError: Assignment to constant variable.

</script>

</body>
</html>
  • var在{}之外也起作用
  • let在{}之外不起作用
  • var多次声明同一变量不会报错，let多次声明会报错，只能声明一次。
  • var 会变量提升（打印和定义可以顺序反）。let 不存在变量提升（顺序不能反）
  • let的const声明之后不允许改变

2、解构表达式.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>

<script>
//数组解构
// let arr = [1,2,3];
// // let a = arr[0];
// // let b = arr[1];
// // let c = arr[2];

// let [a,b,c] = arr;
// console.log(a,b,c)

const person = {
name: "jack",
age: 21,
language: ['java', 'js', 'css']
}
//         const name = person.name;
//         const age = person.age;
//         const language = person.language;

//对象解构
const { name: abc, age, language } = person;
console.log(abc, age, language)

//4、字符串扩展
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"));//true

//字符串模板
let ss = `<div>
<span>hello world<span>
</div>`;
console.log(ss);

//  // 2、字符串插入变量和表达式。变量名写在 ${} 中，${} 中可以放入 JavaScript 表达式。

function fun() {
return "这是一个函数"
}

let info = `我是${abc}，今年${age + 10}了, 我想说： ${fun()}`;
console.log(info);

</script>
</body>
</html>
  • 支持let arr = [1,2,3]; let [a,b,c] = arr;这种语法
  • 支持对象解析：const { name: abc, age, language } = person; 冒号代表改名
  • 字符串函数
  • 支持一个字符串为多行
  • 占位符功能 ${}变量名写在 中 ， {} 中， 中，{} 中可以放入 JavaScript 表达式

3、函数优化.html

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<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(20));

//2）、不定参数
function fun(...values) {
console.log(values.length)
}
fun(1, 2)      //2
fun(1, 2, 3, 4)  //4

//3）、箭头函数
//以前声明一个方法
// var print = function (obj) {
//     console.log(obj);
// }
var print = obj => console.log(obj);
print("hello");

var sum = function (a, b) {
c = a + b;
return a + c;
}

var sum2 = (a, b) => a + b;
console.log(sum2(11, 12));

var sum3 = (a, b) => {
c = a + b;
return a + c;
}
console.log(sum3(10, 20))
const person = {
name: "jack",
age: 21,
language: ['java', 'js', 'css']
}

function hello(person) {
console.log("hello," + person.name)
}

//箭头函数+解构
var hello2 = ({ name }) => console.log("hello," + name);
hello2(person);



</script>

</body>

</html>
  • 原来想要函数默认值得这么写b = b || 1; 现在可以直接写了function add2(a, b = 1) {
  • 函数不定参数function fun(...values) {
  • 支持箭头函数（lambda表达式），还支持使用{}结构传入对象的成员

4、对象优化.html

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>

<body>

<script>

const person = {
name: "jack",
age: 21,
language: ['java', 'js', 'css']
}

console.log(Object.keys(person));//["name", "age", "language"]
console.log(Object.values(person));//["jack", 21, Array(3)]
console.log(Object.entries(person));//[Array(2), Array(2), Array(2)]

const target = { a: 1 };
const source1 = { b: 2 };
const source2 = { c: 3 };

//{a:1,b:2,c:3}
Object.assign(target, source1, source2);

console.log(target);//{a:1,b:2,c:3}

//2）、声明对象简写
const age = 23
const name = "张三"
const person1 = { age: age, name: name }

const person2 = { age, name }//声明对象简写
console.log(person2);

//3）、对象的函数属性简写
let person3 = {
name: "jack",
// 以前：
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("橘子");

//4）、对象拓展运算符

// 1、拷贝对象（深拷贝）
let p1 = { name: "Amy", age: 15 }
let someone = { ...p1 }
console.log(someone)  //{name: "Amy", age: 15}

// 2、合并对象
let age1 = { age: 15 }
let name1 = { name: "Amy" }
let p2 = {name:"zhangsan"}
p2 = { ...age1, ...name1 } 
console.log(p2)
</script>

</body>
</html>
  • 可以获取map的键值对等Object.keys()、values、entries
  • Object.assgn(target,source1,source2) 合并
  • const person2 = { age, name }//声明对象简写
  • …代表取出该对象所有属性拷贝到当前对象。let someone = { …p1 }

5、map和reduce.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<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'];

//item表示数组里面的当前元素，每个元素*2返回
//   arr = arr.map((item)=>{
//      return item*2
//   });
//跟上面效果是一样的，直接*2返回
arr = arr.map(item=> item*2);

console.log(arr);
//reduce() 为数组中的每一个元素依次执行回调函数，不包括数组中被删除或从未被赋值的元素，
//[2, 40, -10, 6]
//arr.reduce(callback,[initialValue])
/**
1、previousValue （上一次调用回调返回的值，或者是提供的初始值（initialValue））
2、currentValue （数组中当前被处理的元素）
3、index （当前元素在数组中的索引）
4、array （调用 reduce 的数组）*/
//[2, 40, -10, 6]
let result = arr.reduce((a,b)=>{
console.log("上一次处理后："+a);
console.log("当前正在处理："+b);
return a + b;
//给了个初始值100
},100);
console.log(result)
//打印结果：
/*
(4) [2, 40, -10, 6]
上一次处理后：100
当前正在处理：2
上一次处理后：102
当前正在处理：40
上一次处理后：142
当前正在处理：-10
上一次处理后：132
当前正在处理：6
138
*/


</script>

</body>
</html>

6、promise.html

首先在html页面中的head标签中引入jquery：

模拟一个场景：

user.json封装了一个用户信息：用户ID，名字，密码

在这里插入图片描述

user_cores_1.json封装了课程信息：课程ID，课程名称：

在这里插入图片描述

user_score_10.json封装了得分信息：ID，得分

在这里插入图片描述

1、查出用户信息，假设成功了，就打印查询到的用户

在这里插入图片描述

2、再发一个请求，查询当前用户的课程信息， 基于第一步查询出来的用户数据data拿到他的data.id，然后去请求user_corse_1.json方法

在这里插入图片描述

如果成功了，就相当于查到了用户的课程，打印出来：

在这里插入图片描述

查到了课程之后，拿到查出来的课程id，再去请求corse_score.json查询成绩：

在这里插入图片描述

img

这种方法是一种非常复杂的嵌套程序，让人感觉非常乱，希望有一种操作能把他们重新编排一下，让我们感受到这些操作的顺序性、逻辑性

答案是：有。

ES6就为我们提供了promise异步编排：

这里判断异步操作如果成功，而且这个异步操作可能会返回一个数据，我们下一步还要用，我们就可以调用resolve方法把异步操作给我们返回的data往下传，如果这个异步操作失败了，就可以调用reject方法，告诉他拒绝了，并且能把异步的error往下传。

在这里插入图片描述

封装一下是这样子的：

给mock/user.json发请求，如果成功了，拿到成功的回调函数success，如果成功会有返回数据data，以前成功了是要继续发请求，现在只需要resolce(data)把数据返回给p(Promise)，让p可以进行后续操作，如果失败了,也可以把失败信息reject(err)传递下去。

在这里插入图片描述

简单来说就是发一个异步请求，成功了这么做，失败了那样做，关键是异步请求完了以后，要继续调用方法：

p.then then方法就是上一步方法成功以后，会调用resolve，把data传下来，想要在成功以后干某件事就可以再写一个回调

这里使用obj把data接受来，这样就能得到上一步成功的用户

然后还想要用户的课程

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-hqiaG6yw-1656314059481)(http://www.helloyuanye.xyz/wp-content/uploads/2022/06/4c6991874e17e41736b087.png)]

此时就能查到用户的课程：

img

然后查询用户的得分，先把这个异步再包装成一个promise将数据往下传：
在这里插入图片描述

就可以继续.then了：

在这里插入图片描述

上一步的data就已经拿到了，基于这个结果去查询分数:

在这里插入图片描述

现在这种方式虽然没有比第一种方式简化多少，但是是一个人类思考的合理化流程方式，一个干完了接着.then干一个，每一个data都是上一步得来的，使用resolve继续往下传。

这个看起来还是很复杂，可以来抽取一下：

声明一个方法get，抽取了一个ajax操作，他是用promise封装的异步。

在这里插入图片描述

有了这个操作，以后就可以：

在这里插入图片描述

结果（打印信息加了~~便于区分）：

在这里插入图片描述
也就是说，用promise来封装异步操作，然后用resolve将成功的data往下传，用reject将失败操作往下传，用链式调用的方式来编排异步操作。

测试代码：

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<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: "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);
}
});
//1、Promise可以封装异步操作
// let p = new Promise((resolve, reject) => { //resolve传入成功解析，reject失败拒绝
//     //1、异步操作
//     $.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) {
//         }
//     });
// })

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("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) => { //失败的话catch
console.log("出现异常", err)
});

</script>
</body>

</html>

7、模块化

模块化是编写大项目的基础，类似于java里面的导包，要使用一个包，必须先导包，而JS中没有包的概念，而是“模块”。

模块功能主要有两个命令构成 export 和import

export用于规定模块的对外接口

import用于导入其他模块提供的功能

比如定义一个hello.json，里面有一个对象util，我们想要别人能用这个对象，就可以用export导出，{}代表批量导出

export不仅能导出对象，一切js变量都可以导出，比如：基本类型变量，函数，数组，对象。

img

user.js

在这里插入图片描述

现在main.js想要用hello和user里面的内容，就可以在main.js使用import导入：

只有导出来的才能导入。

img

还可以同时在声明的时候导出：

在这里插入图片描述

如果声明跟导出的时候没有命名，导入的时候就可以自定义取名：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-YkMUCArD-1656314059488)(http://www.helloyuanye.xyz/wp-content/uploads/2022/06/439c3620c8812db539be95.png)]

helloyuanye
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
ES6新特性的部分示例代码
04-25
ES6新特性的部分示例代码+适合前端学习ES6新特性人群+供自己学习测试使用。 注意：此实例非常简单哦！！！
JavaScript（红宝书）（三）
qq_53555672的博客
12-01 136
js学习笔记
for循环追加html js_javascript for循环怎么写？
weixin_39926588的博客
02-23 167
javascript for循环怎么写？下面本篇文章给大家介绍一下Javascript中for循环语句的几种写法。有一定的参考价值，有需要的朋友可以参考一下，希望对大家有所帮助。for循环的语句格式1、循环语句的组成(1)初始化语句：一条或者多条语句，这些语句完成一些初始化操作(2)判断条件语句：这是一个boolean 表达式，这个表达式能决定是否执行循环体(3)循环体语句：这个部分是循环体语句，...
ES6---标签模板
千里之行，始于足下！
01-21 1278
1、含义：模板字符串紧跟在函数名之后，该函数则被调用来处理这个模板字符串 alert`hello` // 相当于： alert(['hello']) 2、标签模板并不是模板，而是函数调用的一种方式，其中‘标签’就是函数，紧跟函数名后面的‘模板字符串’就是函数的参数 3、标签模板中模板字符串可以含有变量 let a = 222, b = 333 function fun (stringArr, value1, value2){ //把位于变量左右两边的字符提取出来组成数组，如果变量左右两
JackeyLove(14) - ES5 .ES6及新增内容(详细)
weixin_46106512的博客
04-01 292
提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档 文章目录一、ES51. JavaScript 的版本2.ES5的严格模式：3. Javascript 为什么要设立严格模式：4. ES5-bind二、ES5的新增内容1.ES5-Array新增2.ES5-Array新增2.1 map():2.2.reduce()用法2.3 filter()：3.reduce()用法：3.1 forEach、map以及reduce的相同点：3.2 forEach、map以及reduce的不同点：三、ES6.
es6新增的html标签,ES6新增特性——Promise
weixin_36170766的博客
06-03 782
一：为什么会出现？1、场景一：在很多业务需求中，你需要通过ajax进行多次请求，而且每次请求返回的数据需要作为参数进行下一次的请求，于是会出现ajax层层嵌套问题。多个请求操作层层依赖，加上每一层还会有复杂的业务逻辑需要处理，使得代码可读性很差，不直观，难以维护和调试。注：这种回调函数层层嵌套又称为回调地狱//请求A$.ajax({success:function(res1) {//请求B$.aj...
前端 ES6 知识总结思维导图
最新发布
01-15
它引入了许多新的语言特性和功能，以改进 JavaScript 的表达能力和开发效率。 ES6 引入了许多新的语法和功能，如箭头函数、模板字符串、解构赋值、默认参数、对象字面量扩展、类和模块等。其中一些功能是为了改善 ...
es6新特性 学习word版2018最新
07-23
新特性 let、const let 定义的变量不会被变量提升，const 定义的常量不能被修改，let 和 const 都是块级作用域 ES6前，js 是没有块级作用域 {} 的概念的。（有函数作用域、全局作用域、eval作用域） ES6后，...
es6新特性:一篇就够了
02-21
es6新特性:一篇就够了
前端开发不得不知的10个最佳ES6特性
12-11
下面是10个ES6最佳特性，排名不分先后： 函数参数默认值 模板字符串 多行字符串 解构赋值 对象属性简写 箭头函数 Promise Let与Const 类 模块化 函数参数默认值 不使用ES6 为函数的参数设置默认值： ...
动态添加标签.（ES6）
03-08
学了点ES6，做个小练习（d动态添加标签）
【Web前端】ES6新特性详解
将冲破艾迪i的博客
02-19 2311
本文共计两万字，详细的介绍了es6以及es6之后的常见新特性。
最全的—— ES6有哪些新特性？
热门推荐
admin_zlj的博客
04-14 5万+
目录ES6新特性一、let和const二、symbol三、解构表达式3.1 数组解构5.对象方面6.函数方面proxy5.字符串迭代器class6.promise async7.模块化模块化优点 ES6新特性 一、let和const 前面讲过：https://blog.csdn.net/ZLJ_999/article/details/123960186 二、symbol Symbol是ES6中引入的一种新的基本数据类型，用于表示一个独一无二的值，不能与其他数据类型进行运算。它是JavaScript中的第
前端必会------ES6新特性
weixin_47672177的博客
09-25 381
ES6(ECMAScript6)新语法和新特性
ES6新特性全总结
weixin_69218190的博客
03-14 309
当我们声明引用数据类型时，会先在栈内存中开辟一块内存用于存储变量名和堆内存中的地址值，随后在堆内存中开辟一块空间用于存储其具体的值，并且将栈内存中的地址指向堆内存中具体的值的地址。总结：对于非对象类型的变量，比如数值型、布尔类型、字符串类型，我们不可以改变const声明的变量的值，但是当我们遇到对象时，只读的const允许我们修改或重新赋值对象的属性，但变量本身的引用（指向堆内存中的引用地址）不可以修改，也就是不能对这个变量进行重新赋值。当我们使用const 声明基础数据类型时，通常将变量名大写。
ES6-标签页组件定制
席木木的博客
04-08 174
ES6-封装标签页组件HTML页面代码CSS样式代码JS脚本控制代码     了解JavaScript的ES类封装和事件交互机制。 HTML页面代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge">
es6的8条新特性总结
杜永康的博客
03-24 4790
1.块级作用域变量（let和const）2.箭头函数3.模板字符串4.解构赋值5.默认参数6. 扩展运算符7. 类和继承8.Promise let和const关键字可以用来声明块级作用域变量，使得变量只在当前作用域内有效。箭头函数是一种新的函数声明方式，可以更简洁地定义函数。
【前端JS】ES6的几种新特性
liuwanqing233333的博客
11-22 1196
ES6的几种新特性极其代码示例
前端开发的ES6新特性（学生党必看）
qq_51269815的博客
04-15 4041
一：ES6新特性-let&const 1.常量const const常量（声明之后不允许改变，一旦声明必须初始化， 否则报错） 2.let变量 let声明的变量有严格的作用域 var声明的变量往往会越域 var可以声明多次,let只可以声明一次 { var a =1; let b =2; } console.log(a); console.log(b); t
es6阮一峰 第三版pdf
01-05
通过阅读"阮一峰ES6第三版"，开发者可以深入了解ES6的各种特性，并能够运用于实际项目中。这本书籍适合那些想要提升JavaScript编程能力的开发者，不仅可以帮助巩固基础知识，还可以探索更高级的概念和技术。 总的来...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值