es7是什么前端技术

转载

互联网小墨风 2024-10-24 17:10:39

文章标签 es7是什么前端技术前端 es6 json html 文章分类 架构后端开发

前端-ES6与JSON

文章目录

前端-ES6与JSON
一、ES6

1.ES6的变量
2.ES6的类
3.ES6的继承
4.ES6模板字符串
5.箭头函数

二、JSON
三、变量的复制

1.变量的复制
2.深拷贝

五、前端的存储方法
六、this与class

一、ES6

简介： ES6，全称 ECMAScript 6.0 ，是 JavaScript 的下一个版本标准，2015.06 发版。

ES6 主要是为了解决 ES5 的先天不足，比如 JavaScript 里并没有类的概念，但是目前浏览器的 JavaScript 是 ES5 版本，大多数高版本的浏览器也支持 ES6，不过只实现了 ES6 的部分特性和功能。

1.ES6的变量

<!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>

</body>

<script>

    //  声明变量的关键字：var let const 

    // 1.let存在块级作用域，在代码块外调用，会输出未定义
    // if(true){

    //     var a = 10
    //     let b = 20
    //     console.log(b)
    // }
    // console.log(a)
    // console.log(b)


    // 2.变量提升，var输出undefined是因为var声明的变量会自动进行变量提升，而let不会
    // var tmp = new Date()

    // function fun() {
    //     console.log(tmp)
    //     if(false){
    //        // var tmp = 'hello world'  //undefined
    //         let tmp = 'hello world'  //输出时间
    //     }
    // }
    // fun()



    // 3.变量提升，foo使用var声明，会发生变量提升，即脚本开始运行时，变量foo就已经存在了，只是没有值，所以输出undenfined
    // bar使用let声明，不会发生变量提升，表示在声明之前，变量bar是不存在的，所以直接输出会报错
    // let的块级作用域规范了变量使用场景，极大的消除了潜在的bug
    // console.log(foo) //undefined
    // var foo = 2

    // console.log(bar) //报错
    // let bar = 10


    // 4.let在声明变量前赋值会报错
    // var str = '123'

    // if (true) {

    //     str = 'abc'
    //     let str

    // }

    // const声明一个只读的常量,并且一旦声明，常量的值就不能发生改变
    const pi = 3.14
    console.log(pi)




</script>

</html>

2.ES6的类

<!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>

</body>

<script>

    // ES6提供了更接近面向对象的语法，引入了class（类）的概念，作为对象的模板，通过class定义类

    class Point {
        // constructor构造方法
        constructor(x, y) {
            this.x = x
            this.y = y
        }
        // 这是定义方法的区域，前面不要加符号，也不要加function
        toString() {
            return this.x + ',' + this.y
        }
    }
    // 生成类的实例对象，要用new关键字
    var point = new Point(1,2)
    console.log(point)
    // 调用toString方法
    console.log(point.toString())


    class Time {
        // constructor方法是类的默认方法，通过new关键字生成实例对象时，自动调用该方法
        constructor(){
            // 默认返回实例对象（this），但也可以返回别的对象
            return new Date()
        }

    }
    var time = new Time()
    console.log(time)




</script>




</html>

3.ES6的继承

<!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>

</body>

<script>

    // 继承：extends
    // 创建一个父类
    class People {

        constructor(name, age) {
            this.name = name
            this.age = age
        }

        eat(food) {
            console.log(this.name + '正在吃' + food)
        }

    }
    People.prototype.play = '打扑克'
    let p = new People('小明', 18)
    p.eat('面包')
    console.log(p)


    // 创建一个子类，继承People
    class Man extends People {
        constructor(name, age, sex) {
            // super相当于自动执行父类里的构造函数
            super(name, age)
            this.sex = sex
        }

        // 封装一个自定义方法
        playMj() {
            console.log(this.name + '正在打麻将')
        }
    }

    // 实例子类的对象，参数要和构造方法里的数量一致
    let man = new Man('张三', 20, '男')
    console.log(man)
    // 调用父类的方法
    man.eat('水果')
    // 调用子类的方法
    man.playMj()
    // 存放在父类原型中的属性或方法也能被子类继承并调用
    console.log(man.play)

</script>


</html>

4.ES6模板字符串

<!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>
    <p>
        <!-- 小明考试打了80分，他今年18岁，是位男同学，热爱打篮球 -->
    </p>
    <div></div>
</body>

<script>

    let person = {
        name: '小明',
        age: 18,
        sex: '男',
        like: '打篮球',
        score: 80
    }

    // ES5的字符串拼接语法，适用于少量拼接
    var p = document.querySelector('p')
    p.innerHTML = person.name + '考试打了' + person.score + '分，他今年' + person.age + '岁，是位' + person.sex +
        '同学，热爱' + person.like

    // ES6的模板字符串 ``
    var div = document.querySelector('div')
    div.innerHTML = `<b>${person.name}考试打了${person.score}分，他今年${person.age}岁</b>，
    <i>他是位${person.sex}同学，热爱${person.like} </i> `

</script>


</html>

5.箭头函数

<!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>

</body>

<script>

    // ES5的 普通函数的写法
    // let fun = function(){
    //     return 5
    // }
    // ES6的箭头函数，参数部分用圆括号
    // let fun = () => 5

    // 多个参数
    // let fun = function(num1,num2){
    //     return num1 + num2
    // }
    // let fun = (num1,num2) => {
    //     return num1 + num2
    // }
    // console.log(fun(2,3)) 

    // 一个参数时，圆括号可以省略
    // let fun = str => {
    //     console.log(str)
    // }
    // fun('hello world')

    // 箭头函数体内只有一句代码时，大括号可以省略
    // let fun = str => console.log(str)
    // fun('hello')

    // 如果箭头函数内只有一个return，那么return关键词必须省略，否则会报错
    // let fun = (num1,num2) => return num1 + num2 //会报错
    // let fun = (num1,num2) => num1 + num2 //正确的写法


    // 箭头函数返回对象，必须在对象外面加上圆括号
    // let getItem = id => ({ id : id , name : 'zhangsan' })


    let arr = [2, 5, 8]
    // ES5的回调函数，当一个函数作为参数出现的时候，这个函数就被称为回调函数
    // let result = arr.sort(function(a,b){
    //     return b - a
    // })
    // console.log(result)
    
    // 箭头函数简化回调函数的写法
    let result = arr.sort((a, b) => b - a)
    console.log(result)





</script>


</html>

二、JSON

js的对象

<!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>
    
</body>

<script>

    // 构造函数创建对象
    var obj = new Object()
    obj.name = '张三'
    obj.speak = function(){
        console.log('锄禾日当午')
    }
    obj.speak()
    console.log(obj)

    // 字面量创建对象，类似于JSON数据的写法
    var obj1 = {
        name : '李四',
        age : 18,
        speak : function(){
            console.log('hello')
        }
    }
    console.log(obj1)
    // 在JS里，对象和JSON是可以相互转化的
    // 把对象转化为JSON数据
    var a = JSON.stringify(obj1)
    // key-value，JSON数据常见的格式，键值对
    console.log(a)
    // 把JSON数据转化成对象
    console.log(JSON.parse(a))

    // JSON：JavaScript Object Notation  中文名：JavaScript对象表示法
    // 是轻量级的文本数据交换格式，JSON使用JS语法来描述数据对象，但是JSON独立于语言和平台
    // JSON解析器和JSON库支持很多不同语言，android， java
    // JSON和对象的区别：对象是可以写方法的，JSON不能



    // 自定义构造函数
    // People函数是一个构造函数，相当于面向对象的类，通过这个构造函数就可以实例出相应的对象
    function People(name,age){
        this.name = name
        this.age = age
        this.speak = function(){
            // 在构造函数里，this指向正在创建的对象
            console.log(this.name + '说：汗滴禾下土')
        }
    }

    var obj2 = new People('小明',18)
    var obj3 = new People('小红',20)
    console.log(obj2)
    console.log(obj3)
    obj2.speak()
    obj3.speak()

    // 使用上面的方法创建对象，把对象的所有静态属性和方法都在构造函数里，会造成每一个实例出的对象都会保留一份静态属性和方法
    // 而且这些方法是一模一样的，这样就会造成内存的浪费，所以对于这些相同的属性或方法放在一个公共的区域内，这个区域可以共享
    // 这些属性或方法，这个公共区域就是原型(prototype)
    function person(name,age){
        this.name = name
        this.age = age
    }
    // 向原型中添加属性或方法
    person.prototype.job = '学生'
    var person1 = new person('小白',18)
    var person2 = new person('小黑',16)
    console.log(person1)
    console.log(person2)
    console.log(person1.job)

</script>

</html>

三、变量的复制

1.变量的复制

<!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>

</body>

<script>

    // 基本数据类型复制，基本数据类型存在栈里，复制是对值的复制
    var a = 10
    var b = a
    console.log(b)  // 10
    var b = 20
    console.log(b)  // 20
    console.log(a)  // 10

    var str1 = 'www'
    var str2 = str1
    console.log(str2) //www
    var str2 = 'yyy'
    console.log(str2) //yyy
    console.log(str1) //www

    // 引用数据类型复制，引用数据存在堆里，复制的是内存地址
    var obj1 = {
        name: '小明'
    }
    var obj2 = obj1
    console.log(obj2) //对象，小明
    obj2.name = '小红'
    console.log(obj2) //对象，小红
    console.log(obj1) //对象，小红


    // 更改变量2的某个属性，变量1中的属性也会发生变化
    // 对于基本数据类型，复制是对值的传递，改变2,不会影响1的值
    // 对于引用数据类型，复制是对内存地址的传递。改变2,1就会发生改变




</script>


</html>

2.深拷贝

<!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>
    
</body>


<script>

    var a = {
        name : '小明',
        age : 18
    }
    console.log(a)
    // 深拷贝的方法
    function copy(obj){
        // 创建一个空的对象，由于创建对象相当于在堆内存中开辟出一个新的空间，所以我们先创建一个对象，指向一个内存地址
        var newObj = {}
        // 遍历需要处理的对象
        for (value in obj) {
            // 把传进来的对象的所有的属性和值全部赋给刚才创建的空对象
            newObj[value] =  obj[value]
        }
        // 再把新的对象返回
        return newObj
    }
    // 复制
    var b = copy(a)
    console.log(b) // 小明
    // 更改属性
    b.name = '小红'
    console.log(b) // 小红
    console.log(a) // 小明  更改b的属性，没有影响a的值




</script>


</html>

五、前端的存储方法

<!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>

</body>

<script>

    // sessionStorage：会话存储
    // 存储时间为当前页面关闭之前，页面关闭，存储数据消失
    // 存储大小约为5M

    // 设置一个存储信息
    // sessionStorage.setItem('name','zhangsan')
    // sessionStorage.setItem('password','666666')

    // console.log(sessionStorage.getItem('name'))
    // console.log(sessionStorage.getItem('password'))

    // 遍历sessionStorage
    // for (const key in sessionStorage) {
    //    console.log('姓名:' + sessionStorage[key] + '密码:' + sessionStorage[key])
    // }

    // sessionStorage,localStorage在存储引用数据类型的数据时，会显示[Object,Object]，不会显示原始数据
    // 所以我们存数据时把对象转化成JSON数据，取的时候转回对象
    sessionStorage.setItem('person', JSON.stringify({ a: 10, b: 20 }))
    console.log(JSON.parse(sessionStorage.getItem('person')))

    // 创建一个函数，解决浏览器存储对象的问题
    




    // localStorage：本地存储
    // 存储时间是永久的，除非手动删除
    // localStorage.setItem('name','xiaoming')
    // localStorage.setItem('age','18')
    // // 移除本地存储中的某条数据
    // localStorage.removeItem('name')
    // localStorage.removeItem('age')
    // // 移除本地存储中的所有数据
    // localStorage.clear()


    // cookie存储
    // 可以手动设置存储时间，以毫秒为单位，转化为天数需要自己计算
    // 存储大小约为4KB



</script>




</html>

六、this与class

<!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>
    
</body>

<script>

    // 1.属性或方法添加到this上

    class People{
        constructor(){

        }
    }
    let peo1 = new People()
    console.log(peo1)
    peo1.userName = '张三'
    console.log(peo1.userName)  //输出张三

    // 在上面的代码中，People类定义后，给peo1添加了一个userName属性
    // 这种方式仅仅是给当前对象添加的属性，也就是this，这种方式就叫属性或方法添加到this上
    let peo2 = new People()
    console.log(peo2.userName)  //undefined
    

    // 2.属性或方法添加到类上
    
    class Person{
        constructor(){

        }
    }

    Person.prototype.job = '打工人'
    let per1 = new Person()
    let per2 = new Person()
    console.log(per1)
    console.log(per2)

    // 使用prototype，给类添加属性，这样的话，这个类的所有实例化对象就都有了job属性

    // 在JS中，每一个类都有prototype，就是类的原型，类的所有实例化对象都共享一个原型，如果要访问这个原型，可以使用__proto__指针
    class Point{
        constructor(){

        }
    }
    let p1 = new Point()
    console.log(p1)
    console.log(p1.__proto__)
    let p2 = new Point()
    console.log(p1.__proto__ === p2.__proto__) // true 证明类的所有实例化对象都共享一个原型


    // 类的静态成员
    class User{
        constructor(){

        }
    }
    // 直接使用User.userName，这种方式只是给类添加了一个静态属性，访问时不能通过实例化对象，只能使用类名调用
    User.userName = '小明'
    let user = new User()
    console.log(user.userName) //undefined
    console.log(User.userName) //小明



</script>


</html>

本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。