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) ["李四", "王五"]