ES6新语法

凉城未暖夜微凉

已于 2022-08-21 15:55:34 修改

阅读量601

点赞数

分类专栏：前端技术文章标签： es6 javascript 前端

于 2022-08-21 15:52:54 首次发布

本文链接：https://blog.csdn.net/qq_52648173/article/details/126451708

版权

前端技术专栏收录该内容

1 篇文章 0 订阅

订阅专栏

什么是ES6

JS语法分三块

ECMAScript : 基础语法
BOM 浏览器对象 history location window
DOM 文档对象 document

ECMAScript 6.0（以下简称ES6）是JavaScript语言的下一代标准，2015年6月正式发布。它的目标，是使得JavaScript语言可以用来编写复杂的大型应用程序，成为企业级开发语言。

参考文档：点击进入

语法新特性

变量声明: let

我们都是知道在ES6以前，var关键字声明变量。无论声明在何处，都会被视为声明在函数的最顶部(不在函数内即在全局作用域的最顶部)。这就是函数变量提升, 例如

//es5
function test(bool) {
    if(bool){
        var a='Hello world!';
    }
    // a可以被访问到
    console.log("test方法内部执行，变量的值："+a); 
}

//执行
test(true);

以上的代码实际上是:

//es5
function test(bool) {
    //成员变量声明,变量提升
     var a;
    if(bool){
        a='Hello world!';
    }
    // a可以被访问到
    console.log("test方法内部执行，变量的值："+a);
}

接下来ES6主角登场：

我们通常用let和const来声明，let表示变量、const表示常量。let和const都是块级作用域。怎么理解这个块级作用域？在一个函数内部，在一个代码块内部。看以下代码

//es6
function test2(bool) {
    //成员变量声明
    // var a;
    if(bool){
        //赋值
        // var a='Hello world!';//变量泄露
        let a='Hello world!';//变量定义在局部位置
    }
    //看不到let定义在代码块里面的变量
    console.log("test2方法内部执行，变量的值：" + a);
}

//执行
test2(true);

常量声明: const

const 用于声明常量，看以下代码

//定义常量
const username='Rose'
//会报错：常量不能更换引用
// username='Jack';

console.log(username)

js的常量类似，相当于static final效果，只生成一个对象，不能改变引用。

模板字符串

es6模板字符简直是开发者的福音啊，解决了ES5在字符串功能上的痛点。

将表达式嵌入字符串中进行拼接。用${}来界定。

//es5
let username='Rose'
//变量需要拼接
console.log('姓名是：'+username)
//es6
//使用反引号，可以直接打印变量的值，表达式类似于java的el表达式
console.log(`姓名是：${username}`)

模板字符串好处：方便拼接

注意：${} 只能书写在反引号内

函数的参数默认值

ES6为参数提供了默认值。在定义函数时便初始化了这个参数，以便在参数没有被传递进去时使用。

 function show(username='Jack'){
    console.log(username);
}
//传参后，使用传入的值
show('Rose');
//没有传参（undifined），自动使用默认值
show()

这样可以避免不传参时出现undefined

箭头函数

ES6也有类似于java中lambda表达式的函数简略写法, 也就是箭头函数。

# 箭头函数最直观的特点
1. 不需要function关键字来创建函数
2. 省略return关键字,只有一行代码

看下面代码（ES6）

 (response,message) => {
    .......
 }

相当于ES5代码

function(response,message){
    ......
}

ES5:

//es5
var add=function(a,b){
    return a+b;
}
function add(a,b){
    return a+b;
}
console.log(add(100,200))

ES6：

//es6
var add2=(a,b)=>{
    return a+b;
}
console.log(add2(100,200))

//es6更简化写法
//如果函数只有一句话，可以省略大括号和return
var add3=(a,b)=>a+b;
console.log(add3(100,200))

对象初始化简写

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

</body>
<script>
    //es5
    function people (username,age){//username='Rose',age=18
        return {
            username:username,
            age:age
        }
    }

    //打印
    console.log(people('Rose',18));

    //es6
    function people2 (username,age){
        return {
            //如果key的名字和变量参数名一致，则可以简化写
            username,
            age
        }
    }
    //打印
    console.log(people2('Jack',88));
</script>
</html>

创建对象格式：

function people2 (name,age){
        return {
            //如果key的名字和变量参数名一致，则可以简化写
            name,
            age
        }
    }

解构

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

</body>
<script>
    //目标：从json对象中取值
    const people = {username: 'Rose', age: 18};
    //es5
    //好处，直观；缺点：如果你要取多个值就代码多了一些
    /* let username=people.username;
     let age = people.age;
     console.log(username + ' --- ' + age);*/

    //es6
    //等号左边的大括号中的变量必须和等号右边对象中的key一致
    //例如：等号左边的username，那么等号右边people中的key必须有username
    // const {username,age}=people;
    // const {age,username}=people;
    const {age} = people;
    // console.log(username + "," + age)
    console.log(age);
    //
    //数组
    const color = ['red', 'blue'];
    //es5
    // let first = color[0];
    // console.log(first);//'red'
    // //es6
    //等号左边中括号中的变量随便定义，根据顺序依次赋值
    const [first,second]=color;
    console.log(first);
    console.log(second);
</script>
</html>

解构：就是简化获取对象和数组的数据。

1.获取对象：
  const people={username:'Rose',age:18};
  const {username,age}=people;//要求等号左边大括号中的变量必须和等号右边对象中key一致
  console.log(username + "," + age);

2.获取数组：
	 const color = ['red', 'blue'];
	 const [first,second]=color;//等号左边中括号中的变量随便定义
     console.log(first);
     console.log(second);

延展操作符(掌握)

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

</body>
<script>
    //目标：扩展对象的值
    //原来的对象
    const peopleOld={username:'Rose',age:18};
    //需要重新生成一个对象，并基于之前的对象扩展
    const peopleNew={...peopleOld,address:'上海'};
    console.log(peopleOld);//{username: "Rose", age: 18}
    console.log(peopleNew);//{username: "Rose", age: 18, address: "上海"}

    //原来的数组
    const colorOld=['red', 'yellow'];
    //需要重新生成一个数组，并基于之前的数组扩展
    const colorNew=[...colorOld,'blue','green'];
    console.log(colorOld);//["red", "yellow"]
    console.log(colorNew);// ["red", "yellow", "blue", "green"]
</script>
</html>

作用：对原来的js对象和数组进行数据的扩展。

1.扩展js对象：
	const peopleOld={username:'Rose',age:18};
	const peopleNew={...peopleOld,address:'上海'};
2.扩展数组：
	const colorOld=['red', 'yellow'];
	const colorNew=[...colorOld,'blue'];

import 和 export

模块功能主要由两个命令构成：export和import。export命令用于规定模块的对外接口，import命令用于输入其他模块提供的功能。

在ES6中每一个模块即是一个文件，在文件中定义的变量，函数，对象在外部是无法获取的。如果你希望外部可以读取模块当中的内容，就必须使用export来对其进行暴露（输出）,然后以import的形式将这个变量进行引入

import导入模块、export导出模块

lib.js

// 方式1
let add=function(){
    console.log('add...');
}
let remove=function(){
    console.log('remove...');
}
export {add,remove}


// 方式2： 还可以写成
// export default {
//     add(){
//         console.log('add...');
//     },
//     remove(){
//         console.log('remove...');
//     }
// }

demo.js

// 方式1
import {add,remove} from './lib.js';
add();
remove();

//方式2：  还可以写成
// import jsApi from './lib.js'  // 使用这种方式 ，必须要使用export default {} 导出
// jsApi.add()
// jsApi.remove()

html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

</body>

<script  type="module" src="js/demo.js"></script>

</html>