JavaScript高级-----12.ES6新增语法
1. ES6简介
2. ES6中新增语法
2.1 let
<script type="text/javascript">
/* --------let关键字就是用来声明变量的-------- */
// let a = 10;
// console.log(a);//10
/* --------使用let关键字声明的变量具有块级作用域-------- */
// if (true) {
// let b = 20;
// console.log(b);//20
// if (true) {
// let c = 30;
// }
// console.log(c);//报错
// }
// console.log(b)
/* -------在一个大括号中 使用let关键字声明的变量才具有块级作用域 var关键字是不具备这个特点的--------- */
// if (true) {
// let num = 100;
// var abc = 200;
// }
// console.log(abc); //200
// console.log(num); //报错
/* -------防止循环变量变成全局变量--------- */
for (let i = 0; i < 2; i++) {}
console.log(i); //报错
</script>
/*-----使用let关键字声明的变量没有变量提升------*/
console.log(a); //报错 必须先声明再使用
let a = 100;
在块级作用域内声明的变量，就和这个块级作用域整体进行了绑定，不会受到外部影响
/* -------使用let关键字声明的变量具有暂时性死区特性------- */
var num = 10
if (true) {
console.log(num); //报错 因为{}内外的num毫无关系，这里在{}内先使用后定义就会报错；
//{}内的num不会向上一级作用域查找num
let num = 20;
}
精度面试题1
上述代码两个的执行结果分别是2、2.
注意：在执行循环的时候，循环体里面的函数并没有被调用，程序没有走到函数内部，也就是说执行循环体的时候，函数内部的i并没有被替换为具体的数值，在循环结束后，函数才开始调用
经典面试2
<script type="text/javascript">
let arr = [];
// for (let i = 0; i < 2; i++) {
// arr[i] = function() {
// console.log(i);
// }
// }
//等效于
if (i == 0) {
arr[i] = function() {
console.log(i);
}
}
if (i == 1) {
arr[i] = function() {
console.log(i);
}
}
arr[0](); //0
arr[1](); //1
</script>
2.2 const
在用const赋值之后：
- 对于基本数据类型，一旦赋值，值不可更改，指的就是值对应的内存地址不可更改
- 不可以重新赋值，但是可以更改数据结构内部的值
<script type="text/javascript">
// 1. 使用const关键字声明的常量具有块级作用域
// if (true) {
// const a = 10;
// if (true) {
// const a = 20;
// console.log(a);//20
// }
// console.log(a);//10
// }
// console.log(a);//报错
// 2. 使用const关键字声明的常量必须赋初始值
// const PI;//报错
// 3. 常量声明后值不可更改
const PI = 3.14;
// PI = 100;//报错
const ary = [100, 200];
ary[0] = 123; //不报错 ary在内存中的地址没变
ary = [1, 2] //报错 因为改变了ary在内存中的存储地址
console.log(ary);
</script>
var let const的区别
2.3 解构赋值
分解数据结构，为变量赋值
1. 数组解构
<script type="text/javascript">
// 数组解构允许我们按照一一对应的关系从数组中提取值 然后将值赋值给变量
let ary = [1, 2, 3];
//曾经获取数组内部的值 要声明3次变量
// var a = ary[0]
// var b = ary[1]
// var c = ary[2]
let [a, b, c, d, e] = ary; //abcde都是变量
console.log(a) //1
console.log(b) //2
console.log(c) //3
console.log(d) //undefined
console.log(e) //undefined
</script>
2. 对象解构
实质是属性匹配，变量的名字匹配对象中属性的名字
<script type="text/javascript">
// 对象解构允许我们使用变量的名字匹配对象的属性 匹配成功 将对象属性的值赋值给变量
let person = {
name: 'lisi',
age: 30,
sex: '男'
};
let {name, age, sex} = person;//name, age, sex都是变量，和属性名必须相同
console.log(name)//lisi
console.log(age)//30
console.log(sex)//男
</script>
对象解构的另一种写法
<script type="text/javascript">
// 对象解构允许我们使用变量的名字匹配对象的属性 匹配成功 将对象属性的值赋值给变量
let person = {
name: 'lisi',
age: 30,
sex: '男'
};
let {name: myName} = person;//myName才是真正的变量，name仅仅用于属性匹配
console.log(name)//空
console.log(myName)//lisi
</script>
2.4 箭头函数
- (形参)
- 通过fn调用函数
// 箭头函数是用来简化函数定义语法的
const fn = () => {
console.log(123)
}
fn();//123
上图是过去和现在两种定义函数方法的比较
// 在箭头函数中 如果函数体中只有一句代码 并且代码的执行结果就是函数的返回值 函数体大括号可以省略
// const sum = (n1, n2) => {
// return n1 + n2;
// };
//等效于
const sum = (n1, n2) => n1 + n2;
//调用函数
const result = sum(10, 20);
console.log(result) //30
// 在箭头函数中 如果形参只有一个 形参外侧的小括号也是可以省略的
const fn = v => {
alert(v);
}
fn(20)
// 箭头函数不绑定this 箭头函数没有自己的this关键字 如果在箭头函数中使用this this关键字将指向箭头函数定义位置中的this
function fn() {
console.log(this); //{name: 'zhangsan'}
return () => {
console.log(this) //{name: 'zhangsan'}
}
}
const obj = {
name: 'zhangsan'
};
const resFn = fn.call(obj); //fn.call(obj)将fn函数内部的this指向obj对象
resFn(); //{name: 'zhangsan'}
经典面试题
var obj = {
age: 20,
say: () => { //obj是一个对象被，不能产生作用域，所以这个函数实际上是被定义在全局作用域中
alert(this.age) //this指向window ,window中没有age属性
}
}
obj.say();//弹出undefined
var age = 100;
var obj = {
age: 20,
say: () => { //obj是一个对象被，不能产生作用域，所以这个函数实际上是被定义在全局作用域中
alert(this.age) //this指向window ,window中没有age属性
}
}
obj.say(); //100
剩余参数
当函数实参个数大于形参个数时，可以将剩余的实参放到一个数组中
<script>
// ES6之前通常使用argument,但是在箭头函数中使用不了argument
//一下是报错写法：argument.forEach is not a function
// function sum(argument) {
// let total = 0;
// argument.forEach(function(item) {
// total = total + item;
// });
// return total;
// }
//正确写法1
// function sum(first, ...args) {
// let total = 0;
// args.forEach(function(item) {
// total = total + item;
// });
// return total;
// }
//正确写法2
// const sum = (first, ...args) => {
// let total = 0;
// args.forEach(function(item) {
// total = total + item;
// });
// return total;
// }
//正确写法3
// const sum = (first, ...args) => {
// let total = 0;
// args.forEach((item) => {
// total = total + item;
// });
// return total;
// };
//正确写法4
const sum = (first, ...args) => {
let total = 0;
args.forEach((item) => total += item);
return total;
}
console.log(sum(10, 20)); //20
console.log(sum(10, 20, 30)); //50
</script>
注：参数名...args可以任意更替为...a...b...c等其他变量名
//剩余参数和结构配合使用
let ary1 = ['张三', '李四', '王五'];
let [s1, ...s2] = ary1;
console.log(s1);//张三
console.log(s2);//(2) ["李四", "王五"]
