• ES6新增属性

    13.ES6

    1.json概述

    1.什么是json
    • 一种轻量级的数据格式
    • 键必须带双引号
    • 值如果是字符串,必须带双引号
    2.json能做什么
    1. 进行网络传输,其他语言也支持json
    2. 配置文件
    3.json注意点
    1. json里面不能写注释
    2. 值如果是字符串,必须带引号,值如果是字符串,也必须加
    3. 不能到json的后面加分号
    4.如和把js中的对象转换成json格式的字符串

    JSON.stringify(对象名称)

    5.把json转换为对象或数组

    JSON.parse(json格式的代码)

    2.本地存储(localStorage)

    1. 存储在浏览器的本地存储技术
    2. 可以存储5M左右大小的数据
    3. 本地永久存储,需要手动删除
    4. 它不能跨域
    5. 必须是字符串的格式
    DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
head>

<body>
    <button>添加button>
    <button>修改button>
    <button>查看button>
    <button>删除button>
    <script>
        // localStorage
        // 存储在浏览器的本地存储技术
        // 1.可以存储5M左右大小的数据
        // 2.本地永久存储,需要手动删除
        // 3.它不能跨越
        // 4.必须是字符串的格式

        // -----获取元素----
        var btn = document.querySelectorAll("button");
        // ----------添加---------
        btn[0].onclick = function () {
            // 1.获取已有数据,转换为数组
            var oUserList = JSON.parse(localStorage.getItem("user") || '[]')
            // 2.准备一个保存的数据
            var oUser = {
                id: 1,
                name: "小易",
                age: 22
            }
            // 3.把准备的数据,添加数组
            oUserList.push(oUser)
            console.log(oUserList);
            // 4.数组去覆盖原来的本地数据
            // 把数组转换成json格式的字符串
            var str = JSON.stringify(oUserList);
            localStorage.setItem("user", str)
        }
        // ----------修改---------
        btn[1].onclick = function () {
            // 1.获取本地数据
            var oUserList = JSON.parse(localStorage.getItem("user") || '[]')
            // 2.修改第一条数据
            oUserList[0].name = "易玲"
            console.log(oUserList);
            // 3.覆盖原来的数据
            var str = JSON.stringify(oUserList)
            localStorage.setItem("user", str)
        }
        // ----------查询---------
        btn[2].onclick = function () {
            // 1.获取本地数据
            var srt = localStorage.getItem("user")
            console.log(srt);
            var list = JSON.parse(srt)
            console.log(list);
        }
        // ----------删除---------
        btn[3].onclick = function () {
            // 1.获取本地数据
            // 根据key删除指定的数据
            localStorage.removeItem("user")
            // 清除
            localStorage.clear()
        }
    script>
body>

html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51
    • 52
    • 53
    • 54
    • 55
    • 56
    • 57
    • 58
    • 59
    • 60
    • 61
    • 62
    • 63
    • 64
    • 65
    • 66
    • 67
    • 68
    • 69
    • 70
    • 71
    • 72
    • 73

    3.ES5严格模式

    1.ES5引入了严格模式

    1.消除一些不合理的地方

    2.提高代码运行效率

    2.严格模式分类

    1.全局严格 函数外的,全局的,use strict 必须放在代码的第一行

    2.局部严格 函数内的 局部的

    3.如何使用严格模式

    “use strict”

    4.全局严格的特点
    1. 不可以省略var声明变量
    2. 禁止函数使用this关键字指向全局变量
    3. 禁止使用八进制
    4. 不允许在非函数的代码块内声明函数
    5. 在严格模式下,arguments变量,形参是不会变(不同变)
    6. 作用域全局 局部 块级作用域 在严格模式下,eval函数作用域

    4.改变this指向bind,apply,call

    • 他们都能够改变函数的this指向
    • bind不会立即执行,需要手动执行
    • apply和call都会立即执行,区别在于apply的第二个参数是一个数组

    5.let作用域

    1. 如果在{}内部声明变量,外部不能访问
    2. 它防止了变量的提升,遵循先定义,后使用原则
    3. 它防止了同一个变量,不能重复声明
    4. 它声明的值,可以被修改,可以是任意类型

    6.const

    1. 它声明的变量名称只能声明一次,不能重复声明
    2. 防止变量的提升
    3. 具有块级作用域
    4. 它的值类型,不能被修改
    5. 如果是引用类型,可以修改它的属性或方法,不能修改类型和地址

    7.ES6 对数组增强

    1. Array.from()将伪数组变成数组,就是只要有length的就可以转成数组
    2. Array.of()将一组值,转换为数组

    8.ES6对函数增强2个点

    1. 函数的默认参数
    2. 箭头函数
      • 箭头函数的this(跟它的环境有关),它的this指向上下文对象
      • 它本身没有this,利用bind,apply,call无法改变this
      • 它默认情况是window(因为箭头函数的执行环境是全局的window)
      • 它无法被实例化,不能被new
      • 只有一个参数,可以省略小括号
      • 如果代码体只有一句话,{},return 都可以省略

    9.ES6对象的增强

    1. 属性简写
    2. 方法简写
    3. object.assign()

    10.Set集合

    add()不能添加重复项,添加成功返回变化后的集合

    delete()删除成功返回true,否则false

    has()判断是否存在,存在返回true,不存在返回false

    clear()清除

    利用Array.from()或[…new Set()]转成数组

    11.Map

    添加:map.set(“键”,"值)

    添加:map.set(“键”,"值)键一样,会覆盖,值一样没关系

    删除:map.delete(“键”)

    map.has(“键”)判断是否存在

    获取:map.get(“键”)

    清空:map.clear()

  • 相关阅读:
    大漠插件的使用过程（一、插件的注册）
    SpringCloud的新闻资讯项目07 --- app端文章搜索
    2023牛客OI赛前集训营-提高组（第一场） 情景剧
    web前端网页设计期末课程大作业：旅游网页主题网站设计——三亚旅游网页设计(6个页面) HTML+CSS+JavaScript
    React源码分析(二)渲染机制
    系统架构设计师-第8章-系统质量属性与架构评估-学习笔记
    用友畅捷通文吉：如何通过智能运维提升稳定性保障
    使用itextPDF实现PDF电子公章工具类
    Linux期末总复习( 详解 )
    ora.ai：基于GPT4的自定义AI聊天机器人平台
  • 原文地址：https://blog.csdn.net/qq_46372132/article/details/133362212