es6新语法

最新推荐文章于 2024-07-24 23:30:03 发布

攒了一袋星辰

最新推荐文章于 2024-07-24 23:30:03 发布

阅读量1k

点赞数 21

分类专栏：高级编程文章标签： es6 前端 ecmascript

本文链接：https://blog.csdn.net/xiugtt6141121/article/details/140134993

版权

高级编程专栏收录该内容

30 篇文章 0 订阅

订阅专栏

es6新语法

1 什么是ES6

JS语法分三块

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

编程语言JavaScript是ECMAScript的实现和扩展。ECMAScript是由ECMA（一个类似W3C的标准组织）参与进行标准化的语法规范。ECMAScript定义了：

语言语法 – 语法解析规则、关键字、语句、声明、运算符等。

类型 – 布尔型、数字、字符串、对象等。

原型和继承

内建对象和函数的标准库 – JSON、Math、数组方法、对象自省方法等。

ECMAScript标准不定义HTML或CSS的相关功能，也不定义类似DOM（文档对象模型）的Web API，这些都在独立的标准中进行定义。ECMAScript涵盖了各种环境中JS的使用场景，无论是浏览器环境还是类似node.js的非浏览器环境。

ECMAScript标准的历史版本分别是1、2、3、5。

那么为什么没有第4版？其实，在过去确实曾计划发布提出巨量新特性的第4版，但最终却因想法太过激进而惨遭废除（这一版标准中曾经有一个极其复杂的支持泛型和类型推断的内建静态类型系统）。

ES4饱受争议，当标准委员会最终停止开发ES4时，其成员同意发布一个相对谦和的ES5版本，随后继续制定一些更具实质性的新特性。这一明确的协商协议最终命名为“Harmony”，因此，ES5规范中包含这样两句话

ECMAScript是一门充满活力的语言，并在不断进化中。

未来版本的规范中将持续进行重要的技术改进

2009年发布的改进版本ES5，引入了Object.create()、Object.defineProperty()、getters和setters、严格模式以及JSON对象。

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

可以参考：

http://es6.ruanyifeng.com/

回顾之前的es6语法：

1.定义变量：let 变量名=数据;
2.定义常量：const 常量名=数据;
3.箭头函数：
	(参数,参数,...)=>{函数体}
4.模板字符串：
	let s="def";
	let s1 = `abc`; 方便拼接字符串
    let s2=`${s}${s1}`;===>`defabc`

2. 对象初始化简写

<!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
        }
    }

3.解构

<!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);

4. 延展操作符(掌握)

<!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'];

5. 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...');
//     }
// }

demo09.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/demo09.js"></script>

</html>

小结：

1.使用导入导出的好处是我们可以将上述lib.js理解为源码，然后在demo09.js文件中导入源码的内容并使用，使用起来较方便

2.对于在html文件中使用标签引入具有导入导出的js代码，要求必须书写type="module"属性，表示模块化，因为在js中导入导出只能使用在模块化中

3.引入模块化就是为了降低系统的可维护性，把成本降低，把一个复杂的项目解耦成为一个细小单一的模块，这样好维护好开发出现问题也可以快速的锁定。可以将上述不同的代码书写在不同的模块中的js文件中就是模块化思想

4.使用vscode演示导入和导出模块化报错解决方案：

说明：主要是加载js文件时使用了file协议，该协议会导致跨域，而使用http、https等协议时则没有跨域问题。

解决方案：在vscode中安装插件Live Server（这是一个具有实时重载功能的小型开发服务器。用它来热加载你的HTML / JavaScript / CSS文件），主要是有了live server之后就不在vscode中使用file协议，直接使用live server打开不会涉及到跨域问题