let关键字
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>01_let关键字</title>
</head>
<body>
<button>测试1</button>
<br>
<button>测试2</button>
<br>
<button>测试3</button>
<br>
<!--
***let
1. 作用:
* 与var类似, 用于声明一个变量
2. 特点:
* 在块作用域内有效
* 不能重复声明
* 不会预处理, 不存在变量提升（预处理、预加载、预解析）
3. 应用:
* 循环遍历加监听
* 使用let取代var是趋势
-->
<script type="text/javascript">
// console.log(username);//当下一行是let时，没有预解析，会报错 当下一行是var时，不会报错，但值是undefined
let username = 'kobe';//
// let username = 'wade';//不能重复定义
// console.log(username);
//循环遍历加监听
let btns = document.getElementsByTagName('button');//获取三个btn
for(var i=0; i<btns.length;i++){
var btn = btns[i];//——> 拿到其中的一个btn = btns的下标为i的元素
// 无法获取正确的索引
btn.onclick = function() {
alert(i);
};
//方法一：把for(var i=0; i<btns.length;i++)里的var换为let
/*方法二：闭包的方式解决
(function (i) {
btn.onclick = function () {
alert(i);
}
})(i);//利用闭包的原理，后面带括号，就是要立即执行
*/
}
</script>
</body>
</html>
const关键字
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>02_const关键字</title>
</head>
<body>
<!--
1. 作用:
* 定义一个常量
2. 特点:
* 不能修改
* 其它特点同let
3. 应用:
* 保存不用改变的数据
-->
<script type="text/javascript">
// var KEY = 'NBA';//var可修改
// KEY = 'CBA';
// console.log(KEY);//CBA
const KEY = 'NBA';//const不可修改
// KEY = 'CBA';//当为把var换成const时，不能写，会报错
console.log(KEY);
</script>
</body>
</html>
变量的解构赋值
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>03_变量的解构赋值</title>
</head>
<body>
<!--
1. 理解:
* 从对象或数组中提取数据, 并赋值给变量(变量可多个)
2. 对象的解构赋值
let {n, a} = {n:'tom', a:12}
3. 数组的解构赋值
let [a,b] = [1, 'hello'];
4. 用途
* 给多个形参赋值
-->
<script type="text/javascript">
let obj = {username: 'kobe', age: 40};
// let username = obj.username;
// let age = obj.age;
// let xxx = obj.xxx;//undefined
// 对象的解构赋值
// 在解构赋值的时候，大括号里左边向右边要值的时候，必须是obj里已有的属性才可以，没有的话，返回的是undefined
// let {username, xxx} = obj;//相当于let xxx = obj.xxx;//undefined
// let {username, age} = obj;//相当于let age = obj.age;
// console.log(username, age);//kobe 40 意味着username和age是全局变量
// 当不想全要时，例如：只要年龄
let {age} = obj;//声明了一个全局变量age
console.log(age);
//数组的解构赋值
let arr = [1,3,5,'abc',true];
// let [a,b,c,d,e] = arr;//全局定义了5个变量
// console.log(a,b,c,d,e);
// let [a,b] = arr;
// console.log(a,b);//1 3
let [,,a,b] = arr;
console.log(a,b);//5 'abc'
//多个形参来赋值
// function foo(obj){
// console.log(obj.username, obj.age);
// }
function foo({username, age}){//{username, age} = obj;
console.log(username, age);
}
foo(obj);//kobe 40
</script>
</body>
</html>
模版字符串
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>04_模板字符串</title>
</head>
<body>
<!--
1. 模板字符串 : 简化字符串的拼接
* 模板字符串必须用 `` 包含
* 变化的部分使用${xxx}定义
-->
<script type="text/javascript">
let obj = {username: 'kobe', age: 40};
//方式一：
// let str = '我的名字叫：' + obj.username + '，我的年龄：' + obj.age;
//方式二：（简单）
str = `我的名字叫：${obj.username},我的年龄：${obj.age}`;
console.log(str);//我的名字叫：kobe,我的年龄：40
// `https://s.taobao.com/search?q=${obj.xx}&refpid=${obj.xx}&source=${obj.xx}&style=${obj.xx}&pvid=${obj.xx}&clk1=${obj.xx}&spm=${obj.xx}`
</script>
</body>
</html>
