ES6常用语法

卷不动的程序员

于 2024-07-03 14:25:16 发布

阅读量309

点赞数 8

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

本文链接：https://blog.csdn.net/qq_49018210/article/details/140151308

版权

javascript 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

一、概念

ECMAScript：是一个国际通用性的标准化脚本语言
JavaScript：ECMAScript、DOM和BOM(Browser Object Model)组成
简单的理解为：ECMAScript是JavaScript的语言规范，JavaScript是ECMAScript的实现和扩展

二、let

es6之前定义变量，使用var关键字，变量的作用域主要和函数的定义有关，针对其他块定义是没有作用域的，比如if/for等
var存在的问题
1. 变量提升
2. 没有块级作用域，容易造成变量污染
let定义变量就不同了，它不存在变量提升问题，只有定义之后才能使用；它有{}作用域的限制，仅在定义它的大括号内生效

三、const

//const用来定义常量
//1.const定义常量时，必须初始化
const a = 10;
//2.const定义的常量，值不能改变
//a = 10;//报错
//3.const定义的常量，不存在变量提升问题
//4.如果const定义的是个对象，对象包含的值可改，也就是对象所指向的地址不能变（栈中的内容不能变），里面的成员可以改（堆中的内容可变）
const obj = {
    name: "张三",
    age: 18
}
obj.name = "李四";//对象内部的值可变
/*obj = {
    
}*/

四、模板字符串

模板字符串时增强版的字符串，可以当普通字符串使用，也可以用来定义多行字符串，或者在字符串中嵌入变量
```
let name = "张三";
console.log(name + "是个" +
    "好学生")
//相当于
console.log(`${name}是个
好学生`)
```

五、对象字面量增强写法

let id = 1;
let name = "张三";
//ES5写法
let stu = {
    id: id,
    name:name,
    show : function () {
        console.log("hello");
    },
    eat : function () {
        console.log(this.name + "很能吃");
    }
}
//ES6写法  用这个就可以
let stu2 = {
    id,//属性增强写法，内部会将变量的名作为对象属性的key，将变量值作为对象属性的value
    name,
    show () { // 函数增强写法
        console.log("hello");
    },
    eat () {
        console.log(this.name + "很能吃");
    }
}

六、箭头函数

//普通函数的定义
let sum1 = function (a,b) {
    return a + b;
}
function sum2(a, b) {
    return a + b;
}
//使用es6箭头函数语法定义函数，将原函数中的function关键字和函数名都去掉，并将参数列表和函数体通过=>连接
let sum3 = (a, b) => {
    return a + b;
}
alert(sum3(2, 3))

//当函数的参数列表只有一个参数时，参数列表的小括号可以省略
//注意：没有参数，不能省略
/*let fun1 = function (a) {
    return a + 20;
}*/

let fun1 = a => {
    return a + 20;
}
//当函数体只包含一个表达式，可以省略{} 和return
let fun1 = a => a + 20;

//如果返回一个对象，需要特别注意，如果是单表达式要返回自定义对象，要在对象外添加小括号，
//因为对象的{}和函数体的{}有冲突
let fun2 = () => {name: "张三"};
let fun2 = () => ({name: "张三"});

七、模块化编程

模块化编程的优点：
- 减少命名冲突，避免引入时的层层依赖，可以提高执行效率
import和export时es6模块中的两个命令
export命令用于规定模块的对外接口
- 在es6中一个文件可以默认为一个模块，该文件内部的所有变量外部无法获取，如果你希望外部能够读取模块内部的某个变量，就必须使用export关键字输出该变量
import命令用于输入其他模块提供的功能
- import命令接受一对{}，里面指定要从其他模块导入的变量名，大括号里面的变量名，必须与被导入模块对外接口的名称相同

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <!--添加type="module"属性，将每个文件声明为一个模块，模块是独立的，
    在一个js文件中就不能访问另一个js文件中的方法了-->
    <script src="one.js" type="module"></script>
    <script src="two.js" type="module"></script>
    <script src="main.js" type="module"></script>
</body>
</html>
one

let name = "张三";
let age = 20;
//使用export将方法暴露出去
function add(a, b) {
    return a + b;
}

export {name as uname, add}

//我们可以在导出方法时不给方法起名字，使用export default缺省导出，
//注意：一个模块中，只能存在一个export default语句，导出一个当前模块的默认对外接口
export default function(a){
    console.log("hello" + a);
}

/*
export default function(a){
    console.log("你好" + a);
}*/
two

export let name = "李四";
let age = 20;
export function multi(a, b) {
    return a * b;
}

main

//通过import引入
//import {uname,add as add1} from './one.js'
//可以同时引入export和export default导出的内容
import show, {uname, add as add1} from './one.js'
import {name as name2} from './two.js'
//引入export default导出的内容时，要给它命名，比如这里命名为show
//import show from './one.js'
let a = 100;
console.log(add1(10, 20));
console.log(uname);
console.log(name2);
show(10);

卷不动的程序员

关注

8
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
ES6常用语法

在es6中一个文件可以默认为一个模块，该文件内部的所有变量外部无法获取，如果你希望外部能够读取模块内部的某个变量，就必须使用export关键字输出该变量。简单的理解为：ECMAScript是JavaScript的语言规范，JavaScript是ECMAScript的实现和扩展。es6之前定义变量，使用var关键字，变量的作用域主要和函数的定义有关，针对其他块定义是没有作用域的，比如if/for等。模板字符串时增强版的字符串，可以当普通字符串使用，也可以用来定义多行字符串，或者在字符串中嵌入变量。
复制链接

扫一扫