一、let/var/const
-
let/var：事实上var的设计可以看成JS语言设计上的错误，所以设计者决定修复这个问题，添加了一个新的关键字：let。let可以看成更完美的var。都是用来定义变量。
let/var的作用域，区别
1.变量作用域：变量在什么范围内是可用。
{
var name = 'why';
console.log(name);
}
console.log(name);
2.没有块级作用域引起的问题 if快级
var func;
if(true){
var name = "why";
func = function () {
console.log(name);
}
}
name = 'kobe'
func()
3.没有块级作用域引起的问题 for快级
var btns = document.getElementsByTagName('button');
for (var i=0; i<btns.length; i++){
下面代码只会打印最大按钮被点击信息
btns[i].addEventListener('click',function () {
console.log('第' + i + '个按钮被点击')
})
闭包可以解决上面的问题，因为函数是一个作用域
(function(i){
btns[i].addEventListener('click',function () {
console.log('第' + (i+1) + '个按钮被点击')
})
})(i)
}
或者最简单的方式，用let
for (let i=0; i<btns.length; i++) {
//因为let有作用域
btns[i].addEventListener('click',function () {
console.log('第' + (i+1) + '个按钮被点击')
})
}
</script>
-
const
const：在跟多语言中都存在，主要作用是将变量修饰为常量。当我们修饰的标识符不会被再次赋值时，就可以使用const来保证数据的安全性。
注：修饰的标识符必须赋值且不可以修改
推荐：ES6开发中，优先使用const，只有标识符需要修改时用let
常量的含义是指向的对象不能改变，但可以改变对象内部的属性
const obj = {
name: "kobe",
age: "18"
}
//不可以
obj = {}
//可以
obj.name = "hello"
二、
对象字面量的增强写法
1.属性的增强写法
const name = "kobe";
const height = "1.88";
const age = "18";
//ES5写法
const obj5 = {
name: name,
height: height,
age: age
}
//ES6写法
const obj6 = {
name,
height,
age
}
2.函数的增强写法
//ES5写法
const obj = {
run: function () {
},
eat: function () {
}
}
//ES6写法
const obj = {
run(){
},
eat(){
}
}
三、箭头函数
箭头函数也是一种定义函数的方式；一般在需要将一个函数当作参数时使用箭头函数。java8中的ramanda表达式。
1.定义函数的三种方式
1.1function
const aaa = function () {
}
2.对象字面量中定义函数
const obj = {
bbb() {
}
}
3.ES6中的箭头函数
const ccc = (参数列表) => {
}
2.箭头函数参数和返回值
2.1 参数问题
//放入两个参数
const sum = (num1, num2) => {
return num1 + num2
}
//放入一个参数 （）可以省略
const power = num => {
return num * num
}
2.2 返回值
//函数代码块中有多行代码时，正常写
const test = () => {
console.log('Hello world');
console.log('Hello Vue.js');
}
//函数代码块中只有一行代码
// const mul = (num1, num2) => {
// return num1 * num2
// }
const mul = (num1, num2) => num1 * num2
// const demo = () => {
// console.log('Hello Demo');
// }
//函数没有返回值，会打印undefined
const demo = () => console.log('Hello Demo')
console.log(demo());
3.箭头函数中this的指向
箭头函数中的this是向外层作用域中，一层层查找this，直到有this的定义
const obj = {
aaa() {
setTimeout(function () {
console.log(this);//window
},1000)
setTimeout(() => {
//上层找到aaa函数，aaa函数的this指向obj对象，所以这里箭头函数this指向obj对象
console.log(this);//obj对象
},1000)
}
}
例子
const obj = {
aaa() {
setTimeout(function () {
setTimeout(function () {
console.log(this);//window
})
setTimeout(() => {
console.log(this);//window
})
},1000)
setTimeout(() => {
setTimeout(function () {
console.log(this);//window
})
setTimeout(() => {
console.log(this);//obj
})
},1000)
}
}
