Vue第一篇 ES6的常用语法

最新推荐文章于 2024-03-12 13:53:53 发布

dengluzhuo8746

最新推荐文章于 2024-03-12 13:53:53 发布

阅读量120

点赞数

文章标签： javascript python ViewUI

原文链接：http://www.cnblogs.com/cavalier-chen/p/10096276.html

版权

01-变量的定义

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script>
    // var somedody;
    // console.log(somebody);
    // var somebody = "lingruizhi";
    // 变量的提升
    function func() {
        // console.log(somebody);
        if(1){
            let somebody = "hexin";
        }
    }
    func();
    let age = 81;
    age = 18;

    const girl = "wangshuang";
    // girl = "llal";
</script>

</body>
</html>

02- 模板字符串

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <h1>文周的爱好</h1>

</div>

<script>
   // 给div添加文本
   let ele = document.getElementById("app");
   ele.innerText = "hello";
   let hobby1 = "翻车";
   let hobby2 = "背诗";
   let hobby3 = "看女主播";
   ele.innerHTML = `<ul>
        <li>${hobby1}</li>
        <li>${hobby2}</li>
        <li>${hobby3}</li>
    </ul>`
    // ele.innerHTML = "<ul><li>"+ ""+ "</li></ul>"


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

03-函数

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script>
    // 箭头函数
    // this  当前函数最近的调用者
    // 取决于当前的上下文环境
    function aa() {
        console.log(this)
    }
    aa();
    let obj1 = {
        a: 1,
        func: aa
    }
    obj1.func();
    let obj2 = {
        obj1: obj1,
        a: 2
    }
    obj2.obj1.func();

    function myfunc(x) {
        return x+1
    }
    let fun2 = x => x+1;
    console.log(fun2(5))

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

04-数据的解构

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script>
    let obj = {
        a: 1,
        b: 2,
        x: 3,
        y: 4
    };
    let hobby = ["吹牛", "特斯拉", "三里屯"];

    let {x, y} = obj;
    let [hobby1, hobby2, hobby3] = hobby;

    console.log(x);
    console.log(y);
    console.log(hobby1);
    console.log(hobby2);
    console.log(hobby3);


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

05-类的定义

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script>
    class Animal {
        constructor(){
            this.type = "animal"
        };
        say(){
            console.log("ao~~~~")
        }
    };
    class Dog extends Animal {
        // 子类没有this
        constructor(){
            super()
            // 用super方法拿到父类的this
            this.type = "dog"
        }
        say(){
            console.log("wang~~~~")
        }
    }
    let dog = new Dog();
    console.log(dog.type);
    dog.say()

    // class Animal():
    //     def __init__


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

　　总结：

ES6的常用语法
	变量的定义
		-- var  变量的提升 函数作用域以及全局作用域
 		-- let  块级作用域  {}
		-- const  常量  不可以修改
	模板字符串
		语法 ``
		变量 ${}
	箭头函数
		类比Python的匿名函数
		this
			-- 普通函数的this取决于函数最近的调用者
			-- 箭头函数的this取决于当前上下文的环境
	数据的解构
		-- 解构对象 let {key， key} = obj
		-- 解构数组 let [x, y, x] = array
	类的定义
		-- 定义类 class
		-- 构造方法 constructor
		-- 继承 extends
		-- 子类没有this 需要用super方法来找到父类的this

转载于:https://www.cnblogs.com/cavalier-chen/p/10096276.html

dengluzhuo8746

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue第一篇 ES6的常用语法

01-变量的定义<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body><script> /...
复制链接

扫一扫