19_20 js es6

东东__net2025-03-30 16:45

目录

ES6

[一、let 和 const关键字](#一、let 和 const关键字)

[1.1 var 和 let const的区别？](#1.1 var 和 let const的区别？)

[1.2 let 和const的区别](#1.2 let 和const的区别)

[1.3 关于块级作用域](#1.3 关于块级作用域)

二、箭头函数

2.1箭头函数的特点

[2.2 箭头函数的特殊性](#2.2 箭头函数的特殊性)

this的问题

arguments参数集合

2.3函数传递参数时的默认值

[2.4 箭头函数使用的场景有哪些](#2.4 箭头函数使用的场景有哪些)

三、解构赋值

3.1解构对象

[3.2 解构数组](#3.2 解构数组)

四、对象扩展

五、模板字符串

六、展开运算符

[七、 rest运算符 ...](#七、 rest运算符 ...)

[八、新增的数据类型 symbol类型](#八、新增的数据类型 symbol类型)

[九、set 和 map 数据结构](#九、set 和 map 数据结构)

[9.1 set](#9.1 set)

[9.2 map](#9.2 map)

[十一、JSON的方法 （ES5）](#十一、JSON的方法 （ES5）)

[11.1 JSON的两个方法（ES5新增）](#11.1 JSON的两个方法（ES5新增）)

[11.2 举例说明](#11.2 举例说明)

十二、es6模块化开发

[十三、 练习](#十三、 练习)

ES6

  • 之前讲的内容都是es5的内容

  • es6 （ECMASCRIPT6的版本） 2015年，只是版本不同，语法简写

  • 自2015年之后，每年升级一次 现在都es14了

  • 但是es6的改动是最大的，也有人把es6,7,8,9,10... 统称为es6

一、let 和 const关键字

  • 之前都是使用var关键字声明变量

  • 多了let 和 const

  • 和var是有区别的

1.1 var 和 let const的区别？

1、let 和 const 不允许重复声明变量

javascript 复制代码 
var num = 10;
var num = 20;
console.log(num);//20

let num1 = 10;
let num1 = 20; //报错

const num2 = 10;
const num2 = 20;//报错

2、let 和 const声明的变量没有变量提升（没有预解析）

javascript 复制代码 
//提升前
console.log(num); //undefined
var num = 100;

//提升后
var num;
console.log(num);//undefined
num = 100


// console.log(num); // 报错
// let num = 100;


console.log(num1);//报错
const num1= 100;

3、let和const声明的变量会有块级作用域

所有{} 的代码块都有块级作用域

javascript 复制代码 
function fn(){
    let num = 100; // 局部作用域
}
console.log(num);//num is not defined

if(true){
    let num1 = 200; //局部作用域
}
// console.log(num1);//num is not defined

for(let i=0;i<3;i++){
    console.log(i); //局部作用域
}
console.log(i);// i is not defined

while (condition) {
    let num2 = 300;
}
console.log(num2);//num2 is not defined

1.2 let 和const的区别

1、let声明的变量可以改变，const声明的变量值不能改变 （const声明的是常量 不能变的量）

javascript 复制代码 
let num = 100;
num = 200;
console.log(num);


const num1 = 100;
num1 = 200;
console.log(num1); //报错

const obj = {
    name:"张鑫",
    age:18
}
obj.name = "张鑫鑫";
console.log(obj); //可以修改

1.3 关于块级作用域

javascript 复制代码 
// 循环每走一次，就开启一个定时器，循环很快很快就走完了，启动的三个定时器，异步等待

        // 循环走完，30行的位置  打印出i最终的值  是3

        // 三个定时器里用的都是i i的值早就循环完变成了3 
        // 一秒钟之后，i的值一起打印3

        // for(var i=0;i<3;i++){
        //     setTimeout(function(){
        //         console.log(i);//3 3 3  一秒钟之后打印三遍
        //     },1000)
        // }
        // console.log(i);//3

===============================================================================

        // 每循环一次，都会产生一个块级作用域，都会有一个局部变量，最后就有三个局部变量

        // 每个定时器内部都会使用自己的局部变量

        for(let i=0;i<3;i++){
            setTimeout(function(){
                console.log(i); //0 1 2
            },1000)
        }
        // console.log(i);i is not defined
        // {
        //     let i = 0;
        //     setTimeout(function(){
        //         console.log(i); //0
        //     },1000)
        // }
        // {
        //     let i = 1;
        //     setTimeout(function(){
        //         console.log(i); //1
        //     },1000)
        // }
        // {
        //     let i = 2;
        //     setTimeout(function(){
        //         console.log(i); //2
        //     },1000)
        // }

二、箭头函数

  • es6里的箭头函数就是函数的一种简写形式

  • 注意：声明式函数不能简写成箭头函数

javascript 复制代码 
 // 不能写成箭头函数
        function fn(){

        }
==========================================
        // let fn1 = function(){

        // }

        let fn1 = ()=>{}
================================================

        let obj = {
            // fn:function(){

            // }
            fn:()=>{}
        }

2.1箭头函数的特点

1、如果参数只有一个，小括号可以省略的

参数有2个及以上或者没有参数 括号不能省略了

javascript 复制代码 
// let fn = (a)=>{
//     return a+10;
// }

let fn = a=>{
    return a+10;
}
console.log(fn(10));

2.2 箭头函数的特殊性

this的问题

javascript 复制代码 
var btn = document.querySelectorAll("button")
btn[0].onclick=function(){
    console.log(this); //事件处理函数  this执行的是当前的元素
}


// 箭头函数内部 没有自己的this
// 箭头函数的this是上下文的this  (箭头函数所处的当前环境的this)
console.log(this);//箭头函数所出的环境位置是这个位置
btn[1].onclick=()=>{
    console.log(this); //window
}
javascript 复制代码 
// 2-在箭头函数定义的位置往上数,这一行可以打印出this
// 因为这里的this是window
// 所以箭头函数内部的this是window
console.log(this); //window
const obj = {

    fn:function(){
        console.log(this);  //执行的当前对象
    },


    // 箭头函数的this是上下文的this  (箭头函数所处的当前环境的this)

    // 1-箭头函数内部的this 书写箭头函数位置的上一行一个可以打印出this的位置
    fn1:()=>{
        console.log(this);//Window 
    }
}
obj.fn();
obj.fn1();

arguments参数集合

在箭头函数中 不能用arguments

javascript 复制代码 
// 在普通函数里通过arguments获取到不确定个数的所有参数
function fn(){
    console.log(arguments);
}
fn(1,2,3,4)
fn(1,2)
fn(1,2,3,4,5)


// 在箭头函数中  不能用arguments
const fn1 = ()=>{
    console.log(arguments); //报错
}
fn1(1,2)
fn1(1,2,3)
fn1(1,2,3,4)

2.3函数传递参数时的默认值

javascript 复制代码 
// 如果调用函数时 传递参数了  就用传来的参数
// 如果没传参数  就用默认值代表
function fn(a,b){
    a = a || 10; //如果a能取到值 那么就用a的值  取不到就用||后的值
    b = b || 10;
    console.log(a,b);
}
fn();
fn(1,2);
=======================================================================
  • 在es6中 可以直接把默认值写到形参的位置
javascript 复制代码 
function fn(a=10,b=10){
    console.log(a,b);
}
fn();
fn(1,2);
  • 默认值方式在箭头函数中也同样
javascript 复制代码 
const fn = (a=8,b=7)=>{
    console.log(a,b);
}
fn();
fn(1,2);

2.4 箭头函数使用的场景有哪些

javascript 复制代码 
适用于高阶函数:函数的参数也是一个函数,函数的参数一般写成箭头函数
setTimeout(()=>{

},1000);

var arr = [1,2,3];
arr.forEach(item=>{
    console.log(item);
})
arr.map(item=>{

})
arr.filter(item=>{

})
arr.every(item=>{

})
arr.some(item=>{

})
.....

三、解构赋值

  • 快速从对象或者数组中取出成员的一个语法方式

3.1解构对象

javascript 复制代码 
es5里
let obj = {
    username:"刘锦扬",
    age:18,
    address:"河北省邢台市"
}
// let name = obj.username;
// let age =  obj.age;
// let address = obj.address;
// console.log(name,age,address);



es6解构
let obj = {
    username:"刘锦扬",
    age:18,
    address:"河北省邢台市"
}
let {username,age,address} = obj;
console.log(username,age,address)
注意：解构时的变量名 不能乱写  要和obj里的key值一致
let {username} = obj; 如果只用到一个  也可以取出来这一个！！

3.2 解构数组

javascript 复制代码 
es5
const arr = ["rose","Jack","TOM"];
let a = arr[0];
let b = arr[1];
let c = arr[2];
console.log(a,b,c);



es6
let [a,b,c] = arr;
console.log(a,b,c);

注意：

  • {} 解构对象使用

  • \] 解构数组使用

四、对象扩展

  • 当key和value相同时 可以只写属性名
javascript 复制代码 
let username = "李福";
let age = 10;
let address = "黑龙江省";


// 对象里  key：value的形式
// key 键名   自己定义
// value 键值  

// 在es6中 当key和value相同时 可以只写一个
// let obj = {
//     username:username,
//     age:age,
//     address:address
// }

let obj = {
    username,
    age,
    address
}
console.log(obj);
  • 对象合并方法 Object.assign
javascript 复制代码 
var obj1 = {
    username:"刘锦扬",
    age:18,
}

var obj2 = {
    address:"河北省邢台市",
    sex:"男"
}
// 第一个参数：要合并到哪个对象中去
// 第二个参数：你要合并的是谁
Object.assign(obj1,obj2);
console.log(obj1);
console.log(obj2);

五、模板字符串

  • 在es5中表示字符串使用 单引号或者双引号

  • 在es6中 可以使用反引号 ``

    • 单引号或者双引号 在引号内回车时 会报错

    • `` 内部 不会报错

    • 反引号可以直接在字符串里边拼接变量

    • 需要解析的变量 ${变量}

javascript 复制代码 
var username = "杨浩";
let age = 19;
console.log("我的名字是"+username+"，我的年龄是"+age);
console.log(`我的名字是${username}，我的年龄是${age}`);
==============================================================
var content = [
    {
        id:1,
        con:"你好1"
    },
    {
        id:2,
        con:"你好2"
    },
    {
        id:3,
        con:"你好3"
    }
];

var str = "";
content.forEach(item=>{
    str+=`<li>
            ${item.con}
        </li>`
})
console.log(str);

六、展开运算符

  • ES6中新增了运算符... 叫做展开运算符

  • 作用：把数组和对象展开

javascript 复制代码 
//把obj1的值展开 都给obj2
// var obj1 = {
//     username:"刘锦扬",
//     age:18, 
//     address:"河北省邢台市",
//     sex:"男"
// }

// let obj2 = {
//     ...obj1
// }
// console.log(obj2);  
=====================================
// 对象的合并
 var obj1 = {
    username:"刘锦扬",
    age:18
}

var obj2 = {
    ...obj1,
    address:"河北省邢台市",
    sex:"男"
}
console.log(obj2);

数组的展开

javascript 复制代码 
var arr = [1,2,3,4,5];
// console.log(arr[0],arr[1]);
console.log(...arr); //1,2,3,4,5

数组的合并

javascript 复制代码 
var arr = [1,2,3,4,5];
var arr1 = [...arr,6];
console.log(arr1);

函数传递参数时

javascript 复制代码 
var arr = [1,2,3,4,5];
function fn(){
    console.log(arguments);
}
fn(...arr)

七、 rest运算符 ...

rest运算符是获取剩余参数，是展开运算符的逆运算

javascript 复制代码 
// 是展开运算符的逆运算
// arr这个变量是啥  才能和1,2,3,4,5对应起来！！！

// 如果arr是个数组[1,2,3,4,5]  ...arr  得到 1,2,3,4,5
function fn1(...arr){
    console.log(arr);
}
fn1(1,2,3,4,5);


//剩余参数
function fn1(a,b,...arr) {
    console.log(arr); //[3,4,5]
}
fn1(1, 2, 3, 4, 5);

//和arguments类似，但是箭头函数中不能用arguments  在箭头函数里可以用rest运算符

八、新增的数据类型 symbol类型

symbol 是基本数据类型，，表示一个独一无二的值

symbol 函数 ：参数用来描述symbol的

javascript 复制代码 
基本数据类型：string  number boolean null undefined  symbol
引用数据类型：arr  obj



let s1 = Symbol('a');
let s2 = Symbol('a');
console.log(s1===s2);

九、set 和 map 数据结构

之前数据存到 数组里 也可以存到对象里

9.1 set

set 类似数组，，可以存放不会重复的元素

  • 没传参数时
javascript 复制代码 
   // set 类似数组  没有索引
       let s1 = new Set();
       s1.add(1);
       s1.add(2);
       s1.add(3);
       s1.add(4);
       s1.delete(2);
       console.log(s1);
       s1.forEach(item=>{
        console.log(item);
       })
  • 传递参数时
javascript 复制代码 
//数组去重
// let s2 = new Set([1,2,3,4,1,2,3,4,1,2]);
// let arr = [...s2];
// console.log(arr);//[1,2,3,4]

// 一句话实现数组去重
var arr1 = [1,2,3,4,1,2,3,4,1,2];
// console.log([...new Set(arr1)]);


// Array.from  也可以把set结构转为数组
let arr3 = Array.from(new Set(arr1));
console.log(arr3);

9.2 map

map类似对象，可以存放键值对，属性名：属性值 ,,

map的属性名可以是任何类型，，而普通对象的属性名只能是字符串

let obj = {

name："libai"

}

javascript 复制代码 
  let m1 = new Map();
       m1.set("name","李白");
       m1.set("age",18);
       let fn = function(){

       }
       m1.set(fn,"bbbb")
       console.log(m1);

      console.log(m1.get("name")); 
      console.log(m1.get("age")); 
      console.log(m1.get(fn)); 

      m1.forEach((val,key)=>{
        console.log(val,key);
      })

十一、JSON的方法 （ES5）

  • json 是一种特殊的字符串格式，，本质是个字符串
javascript 复制代码 
var jsonobj = '{"name":"libai","age":18，"gender":"女"}'

var jsonarr = '[{"name":"libai","age":18，"gender":"女"},{"name":"libai","age":18，"gender":"女"},{"name":"libai","age":18，"gender":"女"}]'
  • 对象内部的key 和 value都是用双引号包裹起来的字符串 （必须是双引号）

11.1 JSON的两个方法（ES5新增）

  • JSON.parse() 将json格式的字符串转化为对象

  • JSON.stringify() 将js对象或者数组转换成json格式的字符串

javascript 复制代码 
let obj = JSON.parse(jsonObj);//obj js里的对象
let arr = JSON.parse(jsonArr);//arr  js里的数组
javascript 复制代码 
let obj1 = {
    name: "李白",
    age: 18
}

let arr1 = [{
    id: 1,
    goodsname: "小米手机"
}, {
    id: 2,
    goodsname: "大米手机"
}]

let objstr = JSON.stringify(obj1);
let arrstr = JSON.stringify(arr1);
console.log(objstr);
console.log(arrstr);

11.2 举例说明

存本地存储

javascript 复制代码 
存：
// 在本地存储中  只能存字符串！！！！！！
var obj = {
    name:"李白",
    age:18
}

let arr1 = [{
    id: 1,
    goodsname: "小米手机"
}, {
    id: 2,
    goodsname: "大米手机"
}]


localStorage.setItem("userinfo",JSON.stringify(obj));
localStorage.setItem("goodsinfo",JSON.stringify(arr1));


取：
let obj = JSON.parse(localStorage.getItem("userinfo")) ;
console.log(obj);
let arr = JSON.parse(localStorage.getItem("goodsinfo")) 
console.log(arr[0]);

十二、es6模块化开发

历史上，js一直没有模块的体系，无法将一个大项目拆分成互相依赖的小文件，其他语言都有这些功能

在es6中 新增了这个模块化开发

模块化开发主要分成两部

第一步 导出 export

第二步 引入 import

导出

方式1：

module1.js

javascript 复制代码 
export let a  = 10;
export let b = 20;
export let c = 30;
export let fn = function(){
    return "我是模块1的fn函数"
}

方式2：

javascript 复制代码 
 let a  = 10;
 let b = 20;
 let c = 30;
 let fn = function(){
    return "我是模块1的fn函数"
}

export {
    a,
    b,
    c,
    fn
}

引入

main.js

javascript 复制代码 
import {a,b,c,fn} from "./09-module1.js";
console.log(a,b,c,fn());

//引入时通过as  取别名
import {a as aaa,b,c} from "./09-module2.js";
console.log(aaa,b,c);

页面中使用

javascript 复制代码 
<script src="./09-main.js" type="module"></script>

==========================================================

export default 导出

javascript 复制代码 
let a  = 10;
let b = 20;
let c = 30;
let fn = function(){
   return "我是模块1的fn函数"
}

export default {
    a,b,c,fn
}

引入

javascript 复制代码 
import customName from "./09-module3.js";
console.log(customName.a);

十三、 练习

1、留言板数据做持久化 2、把代码模块化 （发布是一个模块 删除是一个模块）

01-留言板

html 复制代码 
<body>
    <input type="text" id="ipt">
    <button id="btn">发布</button>
    <ul id="ul"></ul>
    <script>
        var ipt = document.querySelector("#ipt");
        var btn = document.querySelector("#btn");
        ul = document.querySelector("#ul");
        let arr = []; //存放所有留言
        let str = "";

        //把缓存中的数组取出来并渲染
        let localArr = JSON.parse(localStorage.getItem("arr")) || [];
        if (localArr.length > 0) {
            arr = localArr
        }
        // 写循环去展示
        arr.forEach(item => {
            str += `
                <li>
                    <h4>留言内容：${item.content}</h4>
                    <span>留言时间：${item.time}</span>
                    <button class="del">删除</button>
                </li>
                `
        })
        ul.innerHTML = str;



        btn.onclick = function () {
            str = "";
            let val = ipt.value;
            let obj = {
                content: val,
                time: new Date().getTime()
            }
            arr.push(obj);
            arr.forEach(item => {
                str += `
                <li>
                    <h4>留言内容：${item.content}</h4>
                    <span>留言时间：${item.time}</span>
                    <button class="del">删除</button>
                </li>
                `
            })
            ul.innerHTML = str;
            ipt.value = "";
            // 为了以后刷新也有数据 ，把arr存入到缓存里
            // 缓存里只能存字符串的形式  arr这个数组对象处理成json串
            localStorage.setItem("arr", JSON.stringify(arr));
        }
    </script>
</body>

但无法删除，只是数据持久化

02-留言板-封装

javascript 复制代码 
<body>
    <input type="text" id="ipt">
    <button id="btn">发布</button>
    <ul id="ul"></ul>
    <script>
        var ipt = document.querySelector("#ipt");
        var btn = document.querySelector("#btn");
        ul = document.querySelector("#ul");
        let arr = []; //存放所有留言
        let str = "";


        // 页面一加载就让它显示一个列表
        loadlist();
        btn.onclick = function () {
            str = "";
            let val = ipt.value;
            let obj = {
                content: val,
                time: new Date().getTime()
            }
            arr.push(obj);
            ipt.value = "";
            // 为了以后刷新也有数据 ，把arr存入到缓存里
            // 缓存里只能存字符串的形式  arr这个数组对象处理成json串
            localStorage.setItem("arr", JSON.stringify(arr));
            loadlist();
        }


        // 封装一个函数  功能：显示列表
        function loadlist() {
            //把缓存中的数组取出来并渲染
            let localArr = JSON.parse(localStorage.getItem("arr")) || [];
            if (localArr.length > 0) {
                arr = localArr
            }
            // 写循环去展示
            arr.forEach(item => {
                str += `
                <li>
                    <h4>留言内容：${item.content}</h4>
                    <span>留言时间：${item.time}</span>
                    <button class="del">删除</button>
                </li>
                `
            })
            ul.innerHTML = str;
        }
    </script>
</body>

03-留言板-模块化

模块化把功能抽离出去，尽可能在html里面只用html，js文件都用模块化去写

模块化，创建一个js存放留言板功能。模块化导出，用到谁导出谁。

javascript 复制代码 
//模块化，js存放留言板功能
// 导出

    let arr = []; //存放所有留言
    let str = "";
// 添加留言
   export function add(){
        var ipt = document.querySelector("#ipt");
        var btn = document.querySelector("#btn");
        btn.onclick = function () {
            str = "";
            let val = ipt.value;
            let obj = {
                content: val,
                time: new Date().getTime()
            }
            arr.push(obj);
            ipt.value = "";
            // 为了以后刷新也有数据 ，把arr存入到缓存里
            // 缓存里只能存字符串的形式  arr这个数组对象处理成json串
            localStorage.setItem("arr", JSON.stringify(arr));
            loadlist();
        }

    }

   loadlist();
   // 封装一个函数  功能：显示列表
   function loadlist() {
    var ul = document.querySelector("#ul");
    //把缓存中的数组取出来并渲染
    let localArr = JSON.parse(localStorage.getItem("arr")) || [];
    if (localArr.length > 0) {
        arr = localArr
    }
    // 写循环去展示
    arr.forEach(item => {
        str += `
        <li>
            <h4>留言内容：${item.content}</h4>
            <span>留言时间：${item.time}</span>
            <button class="del">删除</button>
        </li>
        `
    })
    ul.innerHTML = str;
}
javascript 复制代码 
<body>
    <input type="text" id="ipt">
    <button id="btn">发布</button>
    <ul id="ul"></ul>
    
    <script type="module">
        import {add} from "./liuyan.js";//引入功能 //把add函数解构出来
        add()//调用一下，这样点击的时候就执行add里面的添加功能了
    </script>
   
</body>

不光是实现功能，连封装，连模块化都讲了

相关推荐
崔庆才丨静觅4 小时前
hCaptcha 验证码图像识别 API 对接教程
前端
passerby60615 小时前
完成前端时间处理的另一块版图
前端·github·web components
掘了5 小时前
「2025 年终总结」在所有失去的人中，我最怀念我自己
前端·后端·年终总结
崔庆才丨静觅5 小时前
实用免费的 Short URL 短链接 API 对接说明
前端
崔庆才丨静觅5 小时前
5分钟快速搭建 AI 平台并用它赚钱！
前端
崔庆才丨静觅6 小时前
比官方便宜一半以上！Midjourney API 申请及使用
前端
Moment6 小时前
富文本编辑器在 AI 时代为什么这么受欢迎
前端·javascript·后端
崔庆才丨静觅6 小时前
刷屏全网的“nano-banana”API接入指南！0.1元/张量产高清创意图，开发者必藏
前端
剪刀石头布啊6 小时前
jwt介绍
前端
爱敲代码的小鱼6 小时前
AJAX（异步交互的技术来实现从服务端中获取数据）：
前端·javascript·ajax
热门推荐
01GitHub 镜像站点02Claude Code + GLM4.7 避坑指南：解决 Unable to connect to Anthropic services03openclaw配置教程（linux+局域网ollama）04UV安装并设置国内源05OpenClaw Chrome扩展使用教程 - 浏览器中继控制06Linux下V2Ray安装配置指南07Claude Code Skills 实用使用手册08Vue-skills的中文文档09让 Trae IDE 智能体 “读懂”文档 Excel+PDF+DOCX ：mcp-documents-reader 工具使用指南10一文了解国产算子编程语言 TileLang，TileLang 对国产开源生态的影响与启示