ES6语法

最新推荐文章于 2025-05-05 23:14:46 发布
最新推荐文章于 2025-05-05 23:14:46 发布
阅读量691 收藏 25
点赞数 17
分类专栏： vue 文章标签： es6 javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/2201_76081438/article/details/145329141
版权

一、Let、const、var变量定义

1.let 声明的变量有严格局部作用域

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width='device-width', initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <button id="myButton" onclick="test1()">点击我</button>
    <script>
        function test1(){
            //var声明的变量往往会越域
            //let 声明的变量有严格局部作用域
            {
                var a=1;
                let b=2;
            }
            console.log(a);//1
            console.log(b);//Uncaught ReferenceError: b is not defined
        }
    </script>
</body>
</html>

可以查看控制台的输出：

在这里插入图片描述

2.let只能声明一次

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width='device-width', initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <button id="myButton" onclick="test1()">点击我</button>
    <script>
        function test1(){
            //var可以声明多次
            //let只能声明一次
            var m=1
            var m=2
            let n=3
            //let n=4
            console.log(m);//2
            console.log(n);//3
        }
    </script>
</body>
</html>

3.let 不存在变量提升

什么是变量提升

变量提升（Hoisting） 是指 JS在运行代码前，会将变量和函数的声明提升到当前作用域的顶部。这一特性源于 JS 的编译机制，在编译阶段就会为变量和函数分配内存。
具体为：

var 的提升：变量声明被提升到作用域顶部，并初始化为 undefined。
函数声明的提升：函数声明被完整提升到作用域顶部，可以在声明前调用。
let 和 const 的提升：声明会被提升，但不会初始化，在初始化之前的访问会触发临时死区（TDZ）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width='device-width', initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <button id="myButton" onclick="test1()">点击我</button>
    <script>
        function test1(){
            //var会变量提升
            //let不存在变量提升
            console.log(x);//undefined
            var x=10;
            console.log(y);//Uncaught ReferenceError: Cannot access 'y' before initialization
            let y=20;
        }
    </script>
</body>
</html>

查看控制台的输出：

在这里插入图片描述

4.const声明之后不允许改变

​

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width='device-width', initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <button id="myButton" onclick="test1()">点击我</button>
    <script>
        function test1(){
            var b=2;
            b=4;
            console.log(b);//4
            let c=5;
            c=7;
            console.log(c);//7
            //const声明之后不允许改变
            const a=1;
            a=3;
            console.log(a);//Uncaught TypeError: Assignment to constant variable.
            
        }
    </script>
</body>
</html>

查看控制台：
在这里插入图片描述

二、结构表达式

1.数组解构

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width='device-width', initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <button id="myButton" onclick="test1()">点击我</button>
    <script>
        function test1(){
            //数组解构
            let arr=[1,2,3];
            let a=arr[0];
            let b=arr[1];
            let c=arr[2];
            console.log(a,b,c);//1 2 3

            let[m,n,q]=arr;
            console.log(m,n,q);//1 2 3
        }
    </script>
</body>
</html>

查看控制台

在这里插入图片描述

2.对象解构

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width='device-width', initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <button id="myButton" onclick="test1()">点击我</button>
    <script>
        function test1(){
            //对象解构
            const person={
                name:"zhangsan",
                age:21,
                language:['java','html','css']
            }

            const name=person.name;
            const age=person.age;
            const language=person.language;
            console.log(name,age,language);//zhangsan 21 ['java','html','css']

            const person1={
                name1:"lisi",
                age1:21,
                language1:['java','C','python']
            }
            const {name1:abc,age1,language1}=person1;
            console.log(abc,age1,language1)//lisi 21 ['java','C','python']
            console.log(name1,age1,language1)//Uncaught ReferenceError: name1 is not defined
        }
    </script>
</body>
</html>

查看控制台：
在这里插入图片描述

3.字符串扩展

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width='device-width', initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <button id="myButton" onclick="test1()">点击我</button>
    <script>
        function test1(){
            //字符串扩展
            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
        }
    </script>
</body>
</html>

查看控制台：

在这里插入图片描述

4.字符串模板

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width='device-width', initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <button id="myButton" onclick="test1()">点击我</button>
    <script>
        function test1(){
            //字符串模板
            let ss = `<div>
                        <span>hello world<span>
                    </div>`;
            console.log(ss);

        }
    </script>
</body>
</html>

控制台：

在这里插入图片描述

5.字符串插入变量和表达式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width='device-width', initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <button id="myButton" onclick="test1()">点击我</button>
    <script>
        function test1(){
            const person = {
                name: "jack",
                age: 21,
                language: ['java', 'js', 'css']
            }
            //对象解构
            const { name: abc, age, language } = person;
            //  // 2、字符串插入变量和表达式。变量名写在 ${} 中，${} 中可以放入 JavaScript 表达式。
            let info = `我是${abc}，今年${age + 10}了, 我想说： ${fun()}`;
            console.log(info);

        }
        function fun() {
                return "这是一个函数"
        }
    </script>
</body>
</html>

控制台：

在这里插入图片描述

三、函数优化

1.直接给参数写上默认值，没传就会自动使用默认值

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width='device-width', initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <button id="myButton" onclick="test1()">点击我</button>
    
    <script>
        // 现在可以这么写：直接给参数写上默认值，没传就会自动使用默认值
        function test1(a ,b=1){
            return a+b;
        }
         // 调用函数
        console.log(test1(5, 3));    // 输出 8
        console.log(test1(5));       // 输出 6
        console.log(test1(a=10, b=5)); // 输出 15
        console.log(test1(b=5, a=10)); // 输出 15
    </script>
</body>
</html>

控制台：

在这里插入图片描述

2.可变参数

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width='device-width', initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <button id="myButton">点击我</button>
    
    <script>
        // 可变参数
        function test1(...values){
            console.log(values.length)
        }
        test1(1,2);//2
        test1(1,2,3,4);//4
    </script>
</body>
</html>

控制台：

在这里插入图片描述

3.箭头函数

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width='device-width', initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
    <script>
        // 箭头函数
        var print=function(obj){
            console.log(obj);//hello
        }
        print("hello");

        var print=obj => console.log(obj);
        print("hei");//hei

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

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

        var sum2 = (a, b) => a + b;
        console.log(sum2(11, 3));//14

        var sum3 = (a, b) => {
            c = a + b;
            return a + c;
        }
        console.log(sum3(10, 20));//40

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

        function hello(person) {
            console.log("hello," + person.name)
        }
    </script>
</body>
</html>

在这里插入图片描述

4.箭头函数+解构

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <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']
        }

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

在这里插入图片描述

四、对象优化

1.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <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}
        console.log(source1);//{b: 2}
        
    </script>
</body>
</html>

在这里插入图片描述

2.声明对象简写

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width='device-width', initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
    <script>
        //声明对象简写
        const age=23
        const name="张三"
        const person1={age: age, name: name}
        console.log(person1)//{age: 23, name: '张三'}

        const person2={age, name}
        console.log(person2)//{age: 23, name: '张三'}
        
    </script>
</body>
</html>

在这里插入图片描述

3.对象的函数属性简介

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width='device-width', initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
    <script>
        //对象的函数属性简介
        let person1={
            name: "zhangsan",
            //以前
            eat: function (food){
                console.log(this.name+"在吃"+food);//zhangsan在吃香蕉
            },

            //箭头函数this不能使用，对象.属性
            eat2: food => console.log(person1.name+"吃"+food),//zhangsan吃苹果

            eat3(food){
                console.log(this.name+"在"+food);//zhangsan在橘子
            }
        }
        person1.eat("香蕉");
        person1.eat2("苹果");
        person1.eat3("橘子");
        
        
    </script>
</body>
</html>

在这里插入图片描述

4.拷贝对象（深拷贝）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width='device-width', initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
    <script>
        //拷贝对象（深拷贝）
        let p1 = { name: "Amy", age: 15 }
        let someone = { ...p1 }
        console.log(someone)//{name: "Amy", age: 15}
        
    </script>
</body>
</html>

在这里插入图片描述

5.合并对象

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width='device-width', initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
    <script>
        //合并对象
        let age1 = { age: 15 }
        let name1 = { name: "Amy" }
        let p2 = {name:"zhangsan"}
        p2 = { ...age1, ...name1 }
        console.log(p2)//{age: 15, name: 'Amy'}
        
    </script>
</body>
</html>

在这里插入图片描述

五、Map和Reduce

数组中新增了map和reduce方法。

1.map()

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <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'];

        arr = arr.map((item)=>{
            return item*2
        });
        console.log(arr);//[2, 40, -10, 6]

        arr = arr.map(item=> item*2);//[4, 80, -20, 12]
        console.log(arr);
        
    </script>
</body>
</html>

在这里插入图片描述

2.reduce()

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width='device-width', initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
    <script>
        //数组中新增了map和reduce方法。
        /**
            1、previousValue （上一次调用回调返回的值，或者是提供的初始值（initialValue））
            2、currentValue （数组中当前被处理的元素）
            3、index （当前元素在数组中的索引）
            4、array （调用 reduce 的数组）*/
        let arr = ['1', '20', '-5', '3'];

        let result = arr.reduce((a,b)=>{
            console.log("上一次处理后："+a);
            console.log("当前正在处理："+b);
            return a + b;
        },100);
        console.log(result);//100120-53
        
    </script>
</body>
</html>

在这里插入图片描述

六、promise

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width='device-width', initial-scale=1.0">
    <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
    <title>Document</title>
</head>
<body>
    
            <script>
                //定义两个参数一个是ajax返回成功数据传递resolve, 一个是失败reject
                let p = new Promise((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)=>{
                        console.log("出现异常",err)
                    });
        
            </script>
</body>
</html>

在这里插入图片描述

七、模块化

hello.js

export default {
    sum(a, b) {
        return a + b;
    }
}

user.js

var name = "jack"
var age = 21
function add(a,b){
    return a + b;
}

export {name,age,add}

main.js

import abc from "./hello.js"
import {name,add} from "./user.js"

abc.sum(1,2);
console.log(name);
add(1,3);

index22.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width='device-width', initial-scale=1.0">
    <script type="module" src="js/main.js"></script>
    <title>Document</title>
</head>
<body>

</body>
</html>

在这里插入图片描述

HTML入门02
weixin_41468241的博客
01-19 2645
a>2、双标签：h1-h6、div、文本颜色、p段落、a、ul li。5、锚点？如：div、ol、ul、li、dl、dt、dd、h1-h6。4、
html笔记
热门推荐
jsjbdjhd的博客
11-30 1万+
你喜欢的食物：<input type="checkbox" name="sex" id="" value="鱼">鱼。<input type="text" value="username" id="" name="元素的名称"><input type="radio" name="sex" id="" value="女">女 <br>性别：<input type="radio" name="sex" id="" value="男">男。同一个页面，可以存在多个class值相同的标签-->
html
weixin_49308607的博客
11-25 2078
HTML 第一个html程序 <!-- DOCTYPE:告诉浏览器我们要使用什么规范 --> <!DOCTYPE html> <html lang="en"> <!-- head标签代表网页头部 --> <head> <!-- meta描述性标签，它用来描述我们网站的一些信息 --> <!-- meta一般用来做SEO --> <meta charset="UTF-8"> &
HTML网页
最新发布
SY_mo的博客
05-05 297
【代码】HTML网页。
HTML 注册案例 学习 制作
CodeDoraemon的博客
01-25 386
案例目标 2. 示例代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body>
前端基础-01-HTML
gemoumou的python学习实记
05-19 1114
一个完整的网页是由 >html:完成页面各组成部分的搭建;css：进行页面修饰；js：让html页面具有很多的功能 HTML <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>我是标题</title>.
webstorm和.vue中es6语法报错的解决方法
08-27
WebStorm 和 Vue 中 ES6 语法报错的解决方法 ES6 语法报错是 WebStorm 和 Vue 开发中常见的问题，本文将总结 WebStorm 和 Vue 中 ES6 语法报错的解决方法，以便开发者避免采坑。 WebStorm 中 ES6 语法报错的解决...
ie11兼容es6语法资源包
03-08
标题中的"ie11兼容es6语法资源包"就是为了解决一个长期存在的问题：如何在不支持新标准的老版本浏览器，如Internet Explorer 11（IE11），中运行使用ES6新特性的代码。 首先，我们来详细探讨一下ES6，也称为...
解决node终端下运行js文件不支持ES6语法
12-20
在标题和描述中提到的问题就是关于在Node.js环境中运行包含ES6语法的JS文件时遇到的不兼容问题。 首先，我们来看一下问题的现象。在创建了一个名为`class.js`的文件并定义了一个ES6的类`Person`之后，尝试在Node.js...
第一节：HTML的文件结构
2203_75647316的博客
02-16 795
HTML的结构
HTML零基础教学（REAL）
MeyrlNotFound的博客
12-12 1300
一种超文本标记语言: HyperText Markup Language常见误区：HTML 不是一种编程语言，而是一种标记语言标记语言是一套标记标签HTML文档的别名web 页面HTML 使用标记标签来描述网页HTML 文档包含了HTML 标签及文本内容。
HTML初步学习
qq_62292176的博客
04-14 1001
HTML 超文本标记语言 1.结构代码 <!DOCTYPE html>//文档申明 <html> <head>//页头 <meta charset="UTF-8"> <title>网页标题</title> </head> <body>//页身 网页显示内容 </body> </html> <!--文档声
let的理解
qq_43952245的博客
09-15 941
文章目录对let的通俗理解什么是提升var 声明的「创建、初始化和赋值」过程function 声明的「创建、初始化和赋值」过程let 声明的「创建、初始化和赋值」过程对于for循环中的let理解 对let的通俗理解 let 声明的变量的作用域是块级的； let 不能重复声明已存在的变量； let 有暂时死区，不会被提升。 什么是提升 需要理解 JS 变量的「创建create、初始化initia...
globalThis
liangshanbo1215的博客
10-18 564
globalThis是一个非常有用的特性，它为 JavaScript 开发者提供了一种标准化的方式来访问全局对象，无论代码运行在什么环境中。通过使用globalThis，你可以编写更加一致和可维护的代码。
let声明的变量--详解
qq_38969618的博客
10-15 2602
let声明的变量具有以下特性： （1）具有块级作用域。 （2）使用let声明的全局变量（全局变量：全局范围内有效），不会成为window对象的属性。 （3）没有变量提升。 （4）变量名不能重复声明，会报错（var已经声明的变量名，let也不能重复声明）。 ps:如果访问一个对象不存在的属性，不会报错，只会出现undefined. 参照：https://blog.youkuaiyun.com/f...
JavaScript 学习-9.使用let声明变量
qq_27371025的博客
05-20 2148
前言 ES2015(ES6) 新增加了两个重要的 JavaScript 关键字: let 和 const。 let 声明的变量只在 let 命令所在的代码块内有效。 const 声明一个只读的常量，一旦声明，常量的值就不能改变。 在 ES6 之前，JavaScript 使用var声明变量只有两种作用域： 全局变量 与 函数内的局部变量。 var声明变量使用 var声明变量只有两种作用域： 全局变量 与 函数内的局部变量。 全局变量 在函数外声明的变量作用域是全局的, 在任意地方都可以引用 var
HTML5 入门：一个最简单的HTML页面（doctype、meta、Head、标签的使用)
weixin_34402408的博客
01-23 718
HTML5的&lt;!doctype&gt;声明怎么写 这是HTML 4.01的doctype： &lt;!DOCTYPE html PUBLIC "-//W3C/DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"&gt; XHTML 1.0的doctype。它的长度跟HTML 4.01的差不太多： &lt;!...
es6语法
03-21
好的，我现在需要处理用户关于ES6语法的查询。用户希望了解ES6的语法教程及特性，并且根据提供的引用内容，需要结合站内已有的参考资料来回答问题。首先，我要回顾用户提供的三个引用内容，看看它们提供了哪些关于...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值