Node(2) ES6 新增语法特性

最新推荐文章于 2023-10-09 20:57:08 发布
最新推荐文章于 2023-10-09 20:57:08 发布
阅读量221 收藏 1
点赞数
分类专栏： nodejs 文章标签： Nodejs
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_46059971/article/details/107109620
版权

一、花样变量声明

  1. var 关键字
    // a.存在变量提升
console.log(score);
var score = 99;

// b.函数作用域
for(var i=0;i<10;i++){
	
}
console.log(i);

// c.可重新声明
var score = 98;
console.log(score);

// d.可重新赋值
score = 97;
console.log(score);
  2. let 关键字
    // a.无变量提升
console.log(score);
let score = 99;

// b.块级作用域
for(let i=0;i<10;i++){
	
}
console.log(i); // 报错

// c.不可重新声明
let score = 98; // 报错

// d.可重新赋值
score = 97;
console.log(score);
  3. const 关键字
    // #声明必须赋值(常量一般全部大写)
const PI;				// 报错
console.log(PI);	
	
// a.无变量提升
console.log(PI);    	// 报错
const PI= 3.1415926;
	
// b.块级作用域
{
	const SHAPE= 4;
}
console.log(SHAPE); 	// 报错

// c.不能重复声明
const PI = 3.15;		// 报错

// d.不可重新赋值
PI= 4;					// 报错
console.log(PI);

二、解构赋值

  1. 、对象解构赋值

    对象解构赋值：将对象属性的值赋给变量；

    Let’s Coding：
    
	let obj = {
		name:"张三"	,
		age:18		,
		sex:'男'	,
		score:60	,
		grade:'初三'
	}
	
	// ES5：解构赋值
	let name 	= obj.name	;
	let age		= obj.age	;
	let sex		= obj.sex	;
	console.log(name,age,sex);
	
	// ES6：解构赋值
	
	// 1.自定义赋值
	let {name:name1,age:age1,sex:sex1} = obj;
	console.log(name1,age1,sex1);
	
	// 2.全写
	let {name:name,age:age,sex:sex} = obj;
	console.log(name,age,sex);
	
	// 3.简写(变量名需与对象属性名一致)
	let {name,age,sex} = obj;
	console.log(name,age,sex);
	
	// 4.默认值
	let {name,age,sex,scories=10} = obj;
	console.log(name,age,sex,scories);
	
	// 5.默认值在编译时就赋值好了，在运行时会将对象的属性值重新赋给变量
	let {age=20} = obj;
	console.log(age); // 18

	// 补充：...another 表示出了name 属性之外的所有属性封存在另一个对象another中
	let {name,...another} = obj;
	console.log(another);
  2. 数组解构赋值

    数组解构赋值：将数组元素值依次赋值给变量；

    Let’s Coding：
    
	let array = [1,2,3,4];
	
	// ES5：数组解构赋值
	let one 	= array[0];
	let two		= array[1];
	let three	= array[2];
	let four	= array[3];
	console.log(one,two,three,four);
	
	// ES6：数组解构赋值
	
	// 1.依次赋值
	let {one,two,three,four}	= array	;
	console.log(one,two,three,four)		;
	
	// 2.多余变量
	let {one,two,three,four,five}= array;
	console.log(one,two,three,four,five);		// five：undefined
	
	// 3.默认值
	let {one,two,three,four,five=50}= array;
	console.log(one,two,three,four,five);
  3. 解构赋值&&函数
    Let’s Coding：
    // ES5：
	// 声明函数+多个形参
	function fun(name,age,sex){
		console.log(name,age,sex);
	}
	fun('zs',18,'男');
	// 对象参数
	function fun(obj){
		console.log(obj.name,obj.age,obj.sex);
	}
	fun({name:'zs',age:18,sex:'男'});

// ES6：
	function fun({name,age,sex}){
		console.log(name,age,sex);
	}
	fun({name:'ls',age:19,sex:'男'});

三、箭头函数

  • 箭头函数

    箭头函数：匿名函数的简写；
    注意：箭头函数中的this与普通函数中this有不同点；

    Let’s Coding：

    	
	// 匿名函数：
	let fun = function(name){console.log(name);};
	fun("张飒");
	// 箭头函数 = 参数 -> 函数体；
	let fun = name -> console.log(name);
	
	/* 箭头函数简写规则：
		1.function 改为 -> , 读作：goesto;
		2.只有一个形参，小括号可省;
		3.形参为0或>=2，括号不可省略;
		4.函数体只有一句话，可省略大括号;
		5.函数体只有一句话，且为return + 返回值，则return省;
		6.函数体大于1句话，大括号不可省;
	*/
	
	// 无参数且函数体为一句话
	let fun = () -> console.log('Are you Ok?');
	
	// 单个参数，一句函数体
	let fun = name -> console.log('name：Are you Ok?');
	
	// 多个参数，一句函数体
	let fun = (name,age) -> console.log(name,age);

	// 单个参数+return 语句
	let fun = score -> score+10;

	// 多个参数+return+函数体
	let fun = (name,age,score) -> {
		console.log(name,age,score);
		return score+10;
	};

四、对象成员的简写

  • Let’s Coding：
	let name 	='zs'	;
	let age 	= 18	;
	let sex		='男'	;

	// ES5：对象成员简写
	let obj = {
		name:name,
		age:age,
		sex:sex
		introduce:function(){
			console.log("My name is:",name);
		}
	};
	console.log(obj);

	// ES6：对象成员简写
	let oo = {
		name,
		age,
		sexx:sex,				// 别名赋值
		introduce:function(){
			console.log("My name is:",name);
		}
		
	};

五、模板字符串

新增模板字符串：``,保留原字符串格式；

Let’s Coding:
	// ES5：
	let str = "
		one
	two three four,
	five six seven;
	"; 					// 报错

	// ES6：
	let author = "八";
	let str = `
		one
			${author}
	two three four,
	five six seven;
	`; 	
	console.log(str);
	// 函数
	function fun(){console.log("123");};
	console.log(`数字：${fun()}`);

六、(展开)运算符

展开运算符：...

  1. 对象展开运算符
    Let’s Coding：
    let song = {
	skill:"青花瓷",
}
let business = {
	skill:"money",
	num:999999999
}
let people ={
	...song,		// 将song的所有内容共享给people
	...business		// 将business的所有内容共享给people
}
console.log(people);
  2. 数组展开运算符
    Let’s Coding：
    	// 数组拼接
	let index = [1,2,3];
	let score = [...array,60,70,80];
	console.log(score);

	let sum = [...index , ...score];
	console.log(sum);

	// 求最值
	let max = Math.max.apply(Math,sum);
	console.log(max);
	max = Math.max(...sum);
	console.log(max);

七、数据类型 Set

新增数据类型 Set ：同数组存放数据，但不存放重复元素；

  • Let’s Coding:
    // 重复项数组
let arr = [1,2,1,3,4,2];
// 去除重复
let set = new Set(arr);
console.log(set);
// 返回成数组
let only = [...set];
console.log(only);

// 整理
let onlies = [...new Set(arr)];
console.log(onlies);

八、Promise

暂无

结语：今日事，今日毕；明日事，何其多。

赠诗：

明日复明日，
明日何其多。
我生待明日，
万事成蹉跎。
世人若被明日累，
春去秋来老将至。
朝看水东流，
暮看日西坠。
百年明日能几何？
请君听我《明日歌》；

不倒翁丶
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
ES6新增了哪些方法？
祈澈菇凉
11-06 120
这只是 ES6 中新增方法和特性的一小部分，ES6 还引入了许多其他有用的方法和语法，如数组方法（如 Array.from、Array.find、Array.includes）、对象扩展（如对象字面量简写、计算属性名）、Symbol、Proxy、Reflect 等。
ES6新增哪些内容？
qq_45587547的博客
06-23 1711
今天分享一些ES6中新增的内容1、let和const关键字2、箭头函数3、解构赋值4、对象扩展5、模板字符串6、展开运算符7、es6模块化开发8、新增数据类型Symbol9、新增数据结构set和map。
ES6新增方法
小废物
10-22 1580
ES6
es6新增哪些特性
jiangshen_a的博客
09-01 1万+
es6新增哪些特性？
es6新增特性总结
W9728的博客
06-13 788
es6新增特性1.let和const关键字2.解构赋值3.箭头函数4.模板字符串：使用反引号``代替双引号创建字符串5.标签模板6.扩展运算符7.新增了一些字符串和数组方法8.Symbol9.迭代器(Iterator)10.生成器11.Promise承诺1.let和const关键字var/let/const的共同点：在函数内部都可以访问到在外部通过var/let/const声明的变量或常量。let: 变量不能重复声明。let a = 1;
es6新增的内容与概念
Han1484583556的博客
06-24 559
ES6是ECMAScript 6的简称，是JavaScript的最新标准。ES6引入了许多新的语法和特性，改进了JavaScript的开发体验和性能。以下是对ES6的主要特性和改进的总结：块级作用域：ES6引入了新的关键字let和const，可以创建块级作用域的变量和常量，解决了var声明变量的函数作用域问题。箭头函数：ES6引入了箭头函数（=>）的语法，简化了函数的定义和使用。箭头函数没有自己的this，继承自外围作用域的this，避免了this指向的困扰。
支持es6的node.js项目
07-18
9. **Set与Map**：ES6新增的数据结构，Set用于存储不重复的值，Map则提供键值对的存储。在Node.js中，这些数据结构可以用于优化缓存、去重等操作。 10. **生成器（Generator）**：生成器允许我们创建可暂停/恢复的...
JavaScript 语言教程 全面介绍 ECMAScript 6 新增的语法特性包括语言程序库数据结构算法 系统 网络 zip
最新发布
12-27
在数据结构方面，ES6新增了Set和Map。Set存储不重复值，适合处理集合操作；Map则提供键值对的存储，键可以是任意类型： ```javascript let set = new Set([1, 2, 3, 4, 4]); console.log(set.size); // 4 let map ...
使用webpack将ES6转化ES5的实现方法
10-16
在现代JavaScript开发中，ES6（ECMAScript 2015）已经成为主流，因为它引入了许多有用的语法特性，如箭头函数、类、模板字符串等。然而，许多老旧的浏览器或环境并不支持这些新特性，这就需要我们将ES6代码转换为ES5...
详解使用vscode+es6写nodejs服务端调试配置
10-19
在开发Node.js服务端应用时，使用Visual Studio Code (VSCode) 结合ES6语法能够提升编码效率和体验。然而，由于Node.js对ES6的支持并不完全，我们需要借助Babel来实现完整支持。本文将详细介绍如何配置VSCode，以便...
出入前端必学，深入理解ES6
02-22
Symbol是ES6新增的一种原始数据类型，它的值是唯一的，不可变的。Symbol通常用于创建对象的唯一属性键，防止属性名冲突。例如： ```javascript let key = Symbol('uniqueKey'); let obj = { [key]: 'value' };...
ES6+新增的常用知识点
qq_37464878的博客
12-01 6541
注：由于ES6之后的标准变化不大，因此在此将ES6及之后标准发生的变化在此一起总结 1.变量声明——let和const (作用域) let和const是块级作用域，var是函数作用域 (变量提升) var声明变量存在变量提升 (暂时性死区) let和const声明变量存在暂时性死区 (重复声明) var声明的变量允许重复声明，后声明的变量覆盖先声明的变量，let和const不允许 (全局变量) var在浏览器全局环境下声明的变量会自动加入全局对象的属性，不可被delete。 (初始值) var和let不需
ES6新增,常用的方法
weixin_47242632的博客
11-10 4193
一.ES6的新增 新增了canvas 绘画视图 新增了定义class的语法糖 函数的新增了箭头函数、函数参数的默认值 数组实例新增了 keys()，values()，entries() 新增了基本数据类型(symbol) 变量的解构赋值 新增了Map数据结构 和 Set数据结构 新增了模块化(import/export) 数组和对象新增了扩展运算符 数组新增了一些API接口 例如 api/app 新增了generator(生产器) 和 iterator(遍历器) 块级作用域(let,const) Obje
最全的—— ES6有哪些新特性？
热门推荐
admin_zlj的博客
04-14 5万+
目录ES6新特性一、let和const二、symbol三、解构表达式3.1 数组解构5.对象方面6.函数方面proxy5.字符串迭代器class6.promise async7.模块化模块化优点 ES6新特性 一、let和const 前面讲过：https://blog.csdn.net/ZLJ_999/article/details/123960186 二、symbol Symbol是ES6中引入的一种新的基本数据类型，用于表示一个独一无二的值，不能与其他数据类型进行运算。它是JavaScript中的第
es6新增了什么
2301_78102450的博客
07-21 96
同时，也引入了剩余参数（rest parameters）语法，用于接收不定数量的参数并将它们放入一个数组中。相比传统的for循环和forEach方法，for...of提供了更简洁的语法和更方便的迭代器操作。块级作用域变量声明（let和const）：引入了let和const关键字，用于声明块级作用域的变量和常量。类和模块：ES6引入了class关键字，支持面向对象编程的类和对象。它具有更短的语法和更方便的this绑定。模板字符串：使用反引号（`）包裹的字符串可以包含变量，并支持多行字符串和字符串插值。
ES6 的新特性
weixin_50368372的博客
03-22 3386
ES6主要的新特性
ES6新增的方法
liuss7713的博客
01-04 7149
一、ES6新增了两种声明的方式 1.let和const不存在变量的提升，即使他们所声明的变量一定要在声明后使用，要不然会报ReferenceError的这种错误 2.let和const存在暂时性死区。只要块级作用域内存在let命令，它所声明的变量就绑定到一个区域，不会再受外部的影响 3.在var中允许重复声明变量 let和const在同一作用域不允许重复声明变量 4.var不存在块级作用域 let和const存在块级作用域 二、es6新增了解构赋值 解构赋值就是从目标对象或数组中提取自己想要
es6新语法及特性
weixin_62650212的博客
03-19 1万+
在现代前端开发中，JavaScript 已经成为了必不可少的一部分，而 ES6（ECMAScript 2015）则为 JavaScript 带来了一系列的新语法和特性，使得 JavaScript 更加现代化、高效和易用。作为开发者，掌握 ES6 是必不可少的，因为它可以提高我们的开发效率，减少代码冗余，并提高代码的可读性和可维护性。在本篇博文中，我们将介绍 ES6 中一些重要的新语法和特性，帮助读者更好地掌握这一新的 JavaScript 版本。
ES6语法新特性
weixin_52416396的博客
10-09 80
在函数调用或数组和对象字面量中，使用...语法可以将数组或对象展开成独立的元素，或将多个元素合并成数组或对象。10. 模块化导入和导出：ES6中的模块化语法可以更好地组织和管理代码，提供了import和export关键字，以及export default关键字来导入和导出模块。在ES6中，可以使用解构赋值语法快速获取数组或对象中的元素，简化了代码编写和数据交换。6. 模板字符串：模板字符串是一种更方便的字符串拼接方式，使用反引号（`）定义字符串，并可以在其中插入变量和表达式，提高了代码的可读性和可维护性。
前端周考：事件处理与ES6新特性实战
2. **ES6新特性**: 一道题目考查了JavaScript ES6的新功能，区分了`assign`、`Array.from`和`for...of`循环，明确指出`forEach`是ES5中的原生方法，而不是ES6新增的。 3. **浏览器行为与方法**: 提到阻止浏览器默认...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值