vue学习（一）ES6常用语法

1 ES6常用语法#

1.1 变量提升#

例①

Copy Highlighter-hljs
# 变量提升
<div id="app">
 
</div>
 
<script>
    console.log(age);    # undefined
    var age = 18;
    console.log(age)     # 18
</script>

例②

Copy Highlighter-hljs
# 变量提升
<div id="app">
 
</div>
 
<script>
    function aa() {
        console.log(xiaoqiang)    # undefined
        if (1){
            var xiaoqiang = 'qiang';
            console.log(xiaoqiang)    # qiang
        }
    }
    aa()
</script>

例③

Copy Highlighter-hljs
# 例②的引申   let
<body>
<div id="app">
 
</div>
 
<script>
    function aa() {
//        console.log(xiaoqiang);    # 报错
        if (1){
            let xiaoqiang = 'qiang';   # let 块级作用域
            console.log(xiaoqiang)    # qiang
        }
    }
    aa()
</script>
</body>

例④

Copy Highlighter-hljs
<body>
<div id="app">
 
</div>
 
<script>
    const s12 = 'high';
    console.log(s12)    # high
-------------------------------
    const s12 = 'high';
    const s12 = 'high1';
 
    console.log(s12)   # 报错
</script>
</body>
# const 定义一个不变的变量

1.2 模板字符串#

Copy Highlighter-hljs
 
<body>
 
<div id="app">
 
</div>
 
 
<script>
# 反引号与一般引号的区别
    var ele = document.getElementById('app');
-------------------------------------
    ele.innerHTML = '<ul>' +
        '<li>1</li>' +
        '<li>2</li>' +
        '<li>3</li>' +
        '</ul>';
-------------------------------------
    ele.innerHTML = `
                    <ul>
                    <li>1</li>
                    <li>2</li>    # 形式一
                    <li>3</li>
                    </ul>`
-------------------------------------
    var xiao = 'qiang';
    var age = 18;
    var hobby = 'learn';
    ele.innerHTML = `
                    <ul>
                    <li>${xiao}</li>
                    <li>${age}</li>  # # 形式二
                    <li>${hobby}</li>
                    </ul>`
 
</script>
</body>

1.3 数据的解构#

Copy Highlighter-hljs
<script>
    # 对象
    let obj = {
        name : 'xiaoqiang',
        age:18
    };
# 类似于python的**打散
    let {name,age}=obj;     # 要用一个对象{}来接收
 
    console.log(name);
    console.log(age)
</script>

Copy Highlighter-hljs
<script>
    # 数组
    let arry = ['s','12'];
    let [a,b] = arry;
 
    console.log(a);
    console.log(b)
</script>

1.4 箭头函数#

Copy Highlighter-hljs
* 1
<script>
    let jiantou = x => x+1;
    console.log(jiantou(5))    # 6
// 省略了function关键字
// 省略了return返回值
</script>

Copy Highlighter-hljs
* 2
<script>
function aa() {
    console.log(this)    #  this的用法
                         #  打印出的是window
}
aa()
</script>
# 函数的调用的全局的 window调用

Copy Highlighter-hljs
* 3
<script>
    function aa() {
        console.log(this) # {name: "xiaoqiang", aa: ƒ}
    }
    aa();
 
    let obj = {
        name : 'xiaoqiang',
        aa:aa
    };
    obj.aa()
</script>

Copy Highlighter-hljs
* 4
<script>
    function aa() {
        console.log(this) ###
    }
    aa();
 
    let obj = {
        name : 'xiaoqiang',
        aa:aa
    };
    let obj2 = {
        name: 'xiaoxiaoqiang',
        obj:obj
    };
 
    obj.aa();
    obj2.obj.aa()
</script>
# this 取决于函数最近的调用者

1.5 类#

Copy Highlighter-hljs
* 1 单纯的类
<script>
    # 定义类要是class，一定要加constructor
    class Student{
        constructor(){
            this.name = 'xiaoqiang';
 
        }
        says(say){
            console.log(this.name  + 'says'+ say)
        }
    }
    // 实例化 要加 new；调用
    let xiaoxiao = new Student();
    xiaoxiao.says('I love China')
</script>

Copy Highlighter-hljs
* 2 类的继承
<script>
----------------------------------------
    class Student{
        constructor(){
            this.name = 'xiaoqiang';
 
        }
        says(say){
            console.log(this.name  + 'says'+ say)
        }
    }
    // 实例化 要加 new；调用
    let xiaoxiao = new Student();
    xiaoxiao.says('I love China')
----------------------------------------
## ↓ 继承 constructor会报错，要加super
    class Stu extends Student{
        constructor(){
            super();
            this.name = 'ganggang'
        }
    }
    let gang = new Stu()
 
    gang.says('Me too')
</script>

1.6 模块#

后期补

posted @ 2018-09-27 16:19 流年中渲染了微笑阅读(2280) 评论(0) 编辑收藏举报

刷新页面返回顶部

登录后才能查看或发表评论，立即登录或者逛逛博客园首页

阅读排行：
· 分享一个免费、快速、无限量使用的满血 DeepSeek R1 模型，支持深度思考和联网搜索！
· 基于 Docker 搭建 FRP 内网穿透开源项目（很简单哒）
· 25岁的心里话
· ollama系列01：轻松3步本地部署deepseek，普通电脑可用
· 按钮权限的设计及实现

公告

昵称：流年中渲染了微笑
园龄： 7年3个月
粉丝： 33
关注： 14

+加关注

2025年3月

日

一

二

三

四

五

六

流年中渲染了微笑

vue学习（一）ES6常用语法

1 ES6常用语法#

1.1 变量提升#

1.2 模板字符串#

1.3 数据的解构#

1.4 箭头函数#

1.5 类#

1.6 模块#

公告

搜索

常用链接

随笔分类

随笔档案

阅读排行榜

评论排行榜

推荐排行榜

最新评论

	# 变量提升
	<div id="app">

	</div>

	<script>
	console.log(age); # undefined
	var age = 18;
	console.log(age) # 18
	</script>

	# 例②的引申 let
	<body>
	<div id="app">

	</div>

	<script>
	function aa() {
	// console.log(xiaoqiang); # 报错
	if (1){
	let xiaoqiang = 'qiang'; # let 块级作用域
	console.log(xiaoqiang) # qiang
	}
	}
	aa()
	</script>
	</body>

	<script>
	# 对象
	let obj = {
	name : 'xiaoqiang',
	age:18
	};
	# 类似于python的**打散
	let {name,age}=obj; # 要用一个对象{}来接收

	console.log(name);
	console.log(age)
	</script>

	<script>
	# 数组
	let arry = ['s','12'];
	let [a,b] = arry;

	console.log(a);
	console.log(b)
	</script>

	* 1
	<script>
	let jiantou = x => x+1;
	console.log(jiantou(5)) # 6
	// 省略了function关键字
	// 省略了return返回值
	</script>

	* 2
	<script>
	function aa() {
	console.log(this) # this的用法
	# 打印出的是window
	}
	aa()
	</script>
	# 函数的调用的全局的 window调用

	* 3
	<script>
	function aa() {
	console.log(this) # {name: "xiaoqiang", aa: ƒ}
	}
	aa();

	let obj = {
	name : 'xiaoqiang',
	aa:aa
	};
	obj.aa()
	</script>

	* 4
	<script>
	function aa() {
	console.log(this) ###
	}
	aa();

	let obj = {
	name : 'xiaoqiang',
	aa:aa
	};
	let obj2 = {
	name: 'xiaoxiaoqiang',
	obj:obj
	};

	obj.aa();
	obj2.obj.aa()
	</script>
	# this 取决于函数最近的调用者

	* 1 单纯的类
	<script>
	# 定义类要是class，一定要加constructor
	class Student{
	constructor(){
	this.name = 'xiaoqiang';

	}
	says(say){
	console.log(this.name + 'says'+ say)
	}
	}
	// 实例化要加 new；调用
	let xiaoxiao = new Student();
	xiaoxiao.says('I love China')
	</script>

	* 2 类的继承
	<script>
	----------------------------------------
	class Student{
	constructor(){
	this.name = 'xiaoqiang';

	}
	says(say){
	console.log(this.name + 'says'+ say)
	}
	}
	// 实例化要加 new；调用
	let xiaoxiao = new Student();
	xiaoxiao.says('I love China')
	----------------------------------------
	## ↓ 继承 constructor会报错，要加super
	class Stu extends Student{
	constructor(){
	super();
	this.name = 'ganggang'
	}
	}
	let gang = new Stu()

	gang.says('Me too')
	</script>