欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

《JS原理、方法与实践》- ES6新增语法

程序员文章站 2022-07-13 08:42:48
...

let 和const

var定义的变量是function级的作用域,let定义的变量属于块级作用域,而const定义的是常量,也就是定义之后不可修改
代码示例:

function testVariable() {
	var height = 172;
	
	const name = 'zzh';
	
	if (height === 172) {
		let height = 173;
		
		// name = 'zzz'; // 报错
	}	
	
	console.log(height); // 172
}

testVariable();

字符串模板

自负串模板用来创建字符串的一种方式,可以在字符串中添加变量,免去了之前的使用+号拼接字符串。
语法: ${变量}
代码示例:

const name = 'zzh';
const testStringTemplate = `Hello ${name}`;
console.log(testStringTemplate); // hello zzh

函数参数默认值

函数参数默认值,就是给一个函数的参数提供一个默认值,当该参数没有传入时,便使用默认值。
语法: function functionName(parameter1, parameter2, …parametern = ‘default value’)
代码示例:

function getPersonInfo (name, age, sex = 'male') {
	console.log(`Person info: name: ${name}, age: ${age}, sex: ${sex}`);
}
getPersonInfo('zzh', 18); // Person info: name: zzh, age: 18, sex: male

参数扩展

参数扩展时使用三个点“…”来完成,主要有两种用法:在定义函数时将传入的多个参数封装到一个数组中;调用函数时将数组中的元素扩展为多个独立的参数。
代码示例:

function mailToPerson (...names) {
	for(let name of names) {
		console.log(`Send to ${name}`);
	}
}

mailToPerson('张三','李四','王五');
/*
[object Array]
Send to 张三
Send to 李四
Send to 王五
 * */

// 将数组[1,3,5]展开成1,3,5三个参数后传入max方法中
console.log(Math.max(...[1,3,5])); // 5
console.log(Math.max(1,3,5)); // 5

《JS原理、方法与实践》- ES6新增语法

箭头函数

语法: 参数=>函数体
如果只有一个参数不需要括号,当有多个参数时,使用括号括起来,例如:(a, b)=> 函数体,当函数体只有一条语句需要reutrn时,不需要写关键字return 且不需要使用大括号{}阔起来,其他情况需要大括号,且需要return时,需要写return关键字。
代码示例:

getName = () => 'zzh';
console.log(`name is: ${getName()}`); // name is: zzh

printInfo = (name, age) => {
	console.log(`name is: ${name}, age is: ${age}`);
}
printInfo('zzh', 18); // name is: zzh, age is: 18

for-of遍历

之前有提过for-in遍历,它可以遍历出对象的属性名。for-of遍历的结果是数组值的集合。
代码示例:

var person = {
	name: 'zzh',
	age: 18,
	sex: 'male'
};

var score = [98, 99, 100];

for(let p in person) {
	console.log(`for-in person: ${p}`);
}
// for(let p of person) {
// 	console.log(`for-of person: ${p}`);
// } // 报错,对象不可遍历

for(var s in score) {
	console.log(`for-in score: ${s}`);
}

for(var s of score) {
	console.log(`for-of score: ${s}`);
}

《JS原理、方法与实践》- ES6新增语法

如果觉得文章写得还行,请点个赞。如果想与我进一步交流,可以关注我的公众号或者加我的微信。

《JS原理、方法与实践》- ES6新增语法
《JS原理、方法与实践》- ES6新增语法

上一篇: Set集合

下一篇: JS Es6 Array方法