ES6新语法解析

最新推荐文章于 2024-05-13 20:03:59 发布

老蛙@

最新推荐文章于 2024-05-13 20:03:59 发布

阅读量1.6k

点赞数 1

分类专栏：笔记文章标签： javascript es6

本文链接：https://blog.csdn.net/m0_48468380/article/details/119033092

版权

笔记专栏收录该内容

84 篇文章 3 订阅

订阅专栏

变量声明

ES6提供了两个新的变量声明关键子：let和const

let

局部变量声明，ES6之前的var具有声明提升，即全局声明变量，令变量声明（仅仅是声明而非赋值）默认在它第一次被使用之前

示例

console.log(a);
let a=1;

将报错：
在这里插入图片描述

console.log(a);
var a=1;

不会报错，但输出结果是undefined

const

局部常量声明，声明的常量无法修改

示例

const a=1;
a=2;

将报错：
在这里插入图片描述

模板字面量

``可以在其中编写多行文本，字符串换行需要使用换行符，而这个新语法可以直接将换行匹配到文本中

示例

let a=`a
b
c`

输出结果：
在这里插入图片描述

对象字面量

对象的属性名和已经声明的值的变量名相同可以简写，对于同名的变量，对象中的字段通过this关键字与外部变量区分开

示例

let username="tom";
let user={
    username,
    age:12
}
console.log(user)

输出结果：
在这里插入图片描述

for-of

for-of遍历数组中的值，而之前的for-in遍历的是数组的下标
for-of不能遍历对象，而for-in能够遍历对象的属性名

示例

let username="tom";
let user={
    username:this.username,
    age:12
}
for (const i of user) {
    console.log(i)
}

将报错：
在这里插入图片描述

let username="tom";
let user={
    username:this.username,
    age:12
}
for (const i in user) {
    console.log(i)
}

不会报错，输出结果：
在这里插入图片描述

解构

根据数据的结构，可以通过位置对应的方式来赋值

示例

let a=1;
let b=2;
[a,b]=[b,a];

函数参数

ES6提供了类似Java的可变长度参数，参数以数组形式传入，语法为…

function func0(...num) {
    console.log(num);
}
func0(1,2,3,4);

输出结果：
在这里插入图片描述

箭头函数

语法类似于java的lambda表达式，箭头函数通常作为参数使用，箭头函数没有自己的作用域，this指向的是调用它的对象或函数执行的环境

示例

function func0(func1,a,b){
    return func1(a,b);
}
console.log(func0((a,b)=>{
    console.log(this);
    return a+b},1,2));

这里输出的this是window，即func0处于的环境

let user={
    username:"tom",
    getName1:function(){
        console.log(this);
        return this.username;
    },
    getName2:()=>{
        console.log(this);
        return this.username;
    }
}
console.log(user.getName1());
console.log(user.getName2());

输出结果为：
在这里插入图片描述
使用匿名函数时，this指向的是调用这个函数的对象，而使用箭头函数时，this指向的是调用该函数的对象所处的环境，这里是windows(如果对象上层还嵌套有对象，那么this指向外一层嵌套的对象)

内置对象

Array

from：将一个可迭代的类数组转化成一个数组
of：将一组元素转化成数组
entries：取得数组的键值对组成的集合

示例

console.log(Array.from("123456"));
console.log(Array.of(1,2,3));
let nums=[1,2,3];
for (const num of nums.entries()) {
    console.log(num);
}

输出结果：
在这里插入图片描述

String

startWith：传入子字符串，判断字符串是否以该子字符串字符串开始
endsWith：传入子字符串，判断字符串是否以该子字符串结束
includes：传入子字符串，判断字符串是否包含该子字符串
repeat：传入一个数字n，返回该字符串重复n遍的新字符串

示例

let str="hello";
console.log(str.startsWith("he"));
console.log(str.endsWith("llo"));
console.log(str.includes("ell"));
console.log(str.repeat(3));
console.log(str);

输出结果：
在这里插入图片描述

Set和Map

ES6提供了集合框架Set和Map，用法和Java中的集合框架相同，Set可以用于去重

类

ES6支持js创建一个类，这个类和java中的类用法类似

示例

class User{
    name;
    constructor(name){
        this.name=name;
    }
    getName(){
        return this.name;
    }
    setName(name){
        this.name=name;
    }
}
let user1 = new User();
user1.setName("tom");
console.log(user1.getName());
let user2 = new User("jack");
console.log(user2.getName())

输出结果：
在这里插入图片描述

模块(module)

一个独立的js就是一个模块，在一个模块导出某些数据然后再另一模块(js标签需要指定type属性为module)中导入即可共享不同模块中的数据
默认导出：export default 单个数据
导入：import 命名 from 模块名字符串

示例

导出模块

let user={
    name:"tom",
    age:12
}
export default{
    user
}

导入模块

<!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 type="module">
        import user from "./demo.js";
        console.log(user)
    </script>
</body>
</html>

输出结果：
在这里插入图片描述

Promise

当发送ajax请求的时候，如果再回调的时候又需要发送请求，如此循环会形成回调地狱，利用Promise发送请求，就形成链式的调用，而非内外层嵌套

示例

new Promise(function(){
    ajax
}).then(function(response){
    ajax
}).then(function(){
    
})

老蛙@

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
ES6新语法解析

变量声明ES6提供了两个新的变量声明关键子：let和constlet局部变量声明，ES6之前的var具有声明提升，即全局声明变量，令变量声明（仅仅是声明而非赋值）默认在它第一次被使用之前示例console.log(a);let a=1;将报错：console.log(a);var a=1;不会报错，但输出结果是undefinedconst局部常量声明，声明的常量无法修改示例const a=1;a=2;将报错：模板字面量``可以在其中编写多行文本，字符串换行需要使
复制链接

扫一扫