ES6新增属性

qq_46372132

于 2023-09-27 19:18:02 发布

阅读量350

点赞数

文章标签： es6 前端 javascript

本文链接：https://blog.csdn.net/qq_46372132/article/details/133362212

版权

13.ES6

1.json概述

1.什么是json

一种轻量级的数据格式
键必须带双引号
值如果是字符串,必须带双引号

2.json能做什么

进行网络传输,其他语言也支持json
配置文件

3.json注意点

json里面不能写注释
值如果是字符串,必须带引号,值如果是字符串,也必须加
不能到json的后面加分号

4.如和把js中的对象转换成json格式的字符串

JSON.stringify(对象名称)

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

JSON.parse(json格式的代码)

2.本地存储(localStorage)

存储在浏览器的本地存储技术
可以存储5M左右大小的数据
本地永久存储,需要手动删除
它不能跨域
必须是字符串的格式

<!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>添加</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>

3.ES5严格模式

1.ES5引入了严格模式

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

2.提高代码运行效率

2.严格模式分类

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

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

3.如何使用严格模式

“use strict”

4.全局严格的特点

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

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

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

5.let作用域

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

6.const

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

7.ES6 对数组增强

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

8.ES6对函数增强2个点

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