JavaScript ES6语法新特性整理，ES6必须掌握的知识点，更强大更方便

最新推荐文章于 2024-07-06 00:11:00 发布
最新推荐文章于 2024-07-06 00:11:00 发布
阅读量652 收藏 2
点赞数
分类专栏： 前端展现 文章标签： es6
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xiaohui_brook/article/details/108491698
版权

ES6

一、前言

ES6全称ECMAScript 6，从2015年6月正式发布至今已有四五个年头，那些不支持ES6语法的浏览器终将淹没在历史的长河里。

兼容性：
IE10+、Chrome、FireFox
IOS10+、Android 6+、NodeJS
不兼容的也可以转换/编译为ES5.1。

现在都快2021年了，让我们全面拥抱ES6把！

二、新特性预览

为什么？当然是ES6有两把刷子，主要的变化方面如下：

  • 变量&常量
  • 函数
  • 字符串
  • 数组
  • 面向对象
  • Promise
  • generator
  • 模块化

三、开始学习

1. 变量&常量

新增let和const关键字，用于声明变量和常量。

  • 不能重复声明
  • 块级作用域
  • 常量值就不支持修改

新增产量申明const关键字，一旦申明，常量值就不能修改。

1.1 解构赋值
  • 左右结构必须一样
  • 声明和赋值不能分开
//原写法
let arr = [1,2,3];
let a = arr[0];
let b = arr[1];
let c = arr[2];

//解构赋值写法
let [a,b,c] = [1,2,3];

//json也可以
let {a,b,c} = {a:1,b:2,c:3};
console.log(a,b,c);//1 2 3

//颗粒粗细控制
let {user,type} = {{name:'Mike',id:'0012'},type:'worker'};
let {{name,id},type}= {{name:'Mike',id:'0012'},type:'worker'};
1.2 JSON
  • 赋值时，名字更值一样时，可以简写
let name = 'Mike'
let json = {name,id:'001'};
console.log(json);//{ name: "Mike", id: "001" }

2. 函数

2.1 箭头函数

新增箭头函数，是标准函数的简写。
不需要写function了，加一个=>即可。

let show=function(){
	alert('Hello World!');
};

//可简写为：
let show=()=>{
	alert('Hello World!');
};
  • 如果只有一个参数，()可以省
let show=function(name){
	alert('Hello '+name+'!');
};

//可简写为：
let show=name=>{
	alert('Hello '+name+'!');
};
  • 如果只有一个return，return和{}可以省
let add=function(a,b){
	return a+b;
};

//可简写为：
let add=(a,b)=>a+b;
2.2 函数参数
  • 参数扩展
    当传入的参数数量不确定时，可以把不确定的部分统一使用一个参数用数组的格式组装起来。把这个参数叫做剩余参数，它值能放在最后一个参数位上。
//声明方式，使用...为前缀即可
let show=function(a,b,...args){
	alert(args);
};

show(1,2,3,4,5,6,7);//[3,4,5,6,7]
  • 数组展开
let show=(a,b,c)=>a+b+c;
let arr = [1,2,3];
let result = show(...arr ); //5
  • 默认参数
let show=(name='World')=>{
	alert('Hello '+name+'!');
};

show();//Hello World!
show('You');//Hello You!

2.3 字符串

新增以下两个新方法：

  • startsWith 判断以什么开头
let str ='http://www.baidu.com';
if(str.startsWith('http://')){
	alert("普通网址");
}else if(str.startsWith('https://')){
	alert("加密网址");
}
  • endsWith 判断以什么结尾
let str ='教学.mp4';
if(str. endsWith('mp4')){
	alert("视频");
}else if(str. endsWith('mp3')){
	alert("音频");
}
2.4 字符串模板
  • 可以直接放如参数，${name}
  • 可以随意换行，不用每行做拼接
let name = 'World';
let str = `<div>
			<h1>Hello ${name}</h1>
		</div>`

3. 数组

新增以下四个方法：

  • map 映射
let arr = [1,2,3];
//把arr中的每个值都变为两倍
let result = arr.map(item=>item*2);
  • reduce 汇总
let arr = [6,12,24,48];
//求合
let result = arr.reduce((tmp,item,index)=>tmp+item);//90
//取平均数
let result = arr.reduce((tmp,item,index)=>(index<(arr.length-1))?tmp+item:(tmp+item)/arr.length);//22.5

求合中reduce方法三个参数讲解
数组arr=[6,12,24,48]，合为90，具体计算流程如下：

次数tmp
临时值		item
当前值		index
序号		return
tmp+item
16
取arr[0]		12
取arr[1]		118
218
第1次的返回值		24
取arr[2]		242
342
第2次的返回值		48
取arr[3]		390
最终结果
  • filter 过滤
    进多出少。
    返回true及保留，返回false及排除。
let arr = [1,2,3,4];
//取单数
let result = arr.filter (item=>!item%2==0);//[1,3]
  • forEach 迭代
let arr = [6,12,24,48];
arr.forEach((item,index)=>{
	alert(indxe + ":" +item);
});

4. 面向对象

4.1 类

规范了类的写法。

  • 有了专用关键字class
  • 有专门的构造器
  • 方法可直接写类里面了
class User{
	//构造器
	constructor(id,name){
		this.id = id;
		this.name = name;
	}
	getId(){
		return this.id;
	}
	getName(){
		return this.name;
	}
}
4.2 继承

有了专门的继承语法。

class VipUser{
	constructor(id,name,level){
		super(id,name);
		this.level = level;
	}
	getLevel(){
		return this.level;
	}
}

5. Promise

//读取省
let readProvince= new Promise(function(resolve,reject)){
	//异步读取数据
	//...
	//读取成功调用resolve
	//读取失败调用reject
});
//读取市
let readCity = new Promis(...); 
//读取区
let readArea= new Promis(...); 

//单个调用
readProvince.then(function(arr){
		//读取成功
	},function(arr){
		//读取失败
	});

//多个调用
Promise.all([readProvince,readCity,readArea]).then(funciton(arr){
	//全都成功了,结果为arr数组[省,市,区]
},function(){
	//至少有一个失败
})

以上代码在实际项目中可以进行封装

//读取
let readData=type=>new Promis(function(resolve,reject)){
	//异步读取数据
	//...
	//读取成功调用resolve
	//读取失败调用reject
});

//多个调用
Promise.all([
	readData('Province'),
	readData('City'),
	readData('Areae')
]).then(results=>{
	//全都成功了,结果为results数组[省,市,区]
	let [province,city,areae] = results;
},err=>{
	//至少有一个失败
})
相关概念
  • 异步
    操作之间没啥关系，同时进行多个操作。
  • 同步
    同时只进行一个操作。

6. generator

癞蛤蟆，捅一步跳一步。

//方法名前加*号表示generator函数
function *flow(){
	alert('步骤1');
	yield;//暂时放弃执行下面的
	alert('步骤2');
	yield;
	alert('步骤3');
}
//generator函数无法直接调用
let grt = flow(); //获取函数对象
grt.next(); //下一步，提示：步骤1
alert('步骤0');
grt.next(); //下一步，提示：步骤2
yield

可以传参，可以返回内容；可用于处理带有逻辑的异步操作，这是Promise无法简单完成的。

//通过用户的喜好，返回对应的推荐商品
function *flow(){
	let xh = '在这里获取用户喜好';
	let likes yield xh;
	let tj = '在这里通过用户喜好获取商品';
	return tj;
}
let gettj = flow();
gettj.next();
let tjlist = gettj.next();//获得当前用户的推荐商品
对比
  • Promise
    适合一次读一堆，比如配置类型的数据。
  • generator
    适合有逻辑判断的，比如每个用户推荐内容。
苛学加
关注
专栏目录
ES6必会知识点
qq_51053759的博客
10-24 170
解构赋值 1、数组的解构 快速交换2个变量的值，不需要借助第三个变量 let x=10; let y=8; [x,y]=[y,x] console.log(x,y)//8 10 2、对象的解构 拿到后端的数据进行解构 展开运算符（扩展运算符） 1、对字符串 1.1 把字符串转成数组 1.2 把字符串反转 let str='Iloveyou' console.log([...str])//把字符串转成数组 console.log([...str].reverse
Javascript es6语法新特性总结
dosthing的博客
05-30 1万+
目录前言let命令const命令数组的特性 前言 随着2015年6月份发布的第一个ES6版本开始，新生代的JavaScript语言在编程中用得越来越多，众多浏览器也对ES6有良好的支持。那么ES6出来后，它有哪些新特性，有哪些需要注意的地方，在这里做一个总结。 let命令 es6为我们带来了let命令，与var命令类似，但是它声明的变量只在代码块中有效(块作用域)，即局部变量声明的效果。 { l...
ES6语法新特性
SilentLand的博客
09-04 420
let与const、对象、数组、函数解构、箭头函数及其this指向、模板字符串、拓展运算符（...）、数据类型Set
ES6 新特性有哪些
最新发布
weixin_64684095的博客
07-06 4319
1. 拥有块级作用域，这意味着在 if 语句、for 循环、while 循环等代码块中声明的 let 变量，只在该代码块内有效。2. 不允许在同一作用域内重复声明同一个变量1. 也具有块级作用域。2. 声明时必须进行初始化赋值，且赋值后不能再重新赋值修改其值。3. 如果 const 声明的是一个对象或数组，虽然不能重新赋值整个对象或数组，但可以修改对象的属性值或数组的元素值。
es6 语法新特性
要和代码过一辈子的博客
08-14 264
1，const let 关键字 // 在javascript中变量默认是全局的，只存在函数级作用域，没有块级作用域。let定义块级作用域： if(true){ let a = 'name'; } // const用来定义一个常量，一旦定义不可修改，如果是应用类型的，可以改变属性： const name = 'hello'; name = 'happy'; # 报错 const n...
ES6语法的新特性
u010046318的博客
08-30 1915
之前面试被问到ES6新特性，箭头函数，generator、Module等等，表示刚开始上手用ES6，目前还没有很深入，所以这次想对ES6一些常用的特性进行整理。let、const主要是实现块级作用域的。因为在原生JS中，没有块级作用域。只有在函数中，才构成一个作用域，但是利用函数是可以实现一个类似于块级作用域的。详见这里。不过，为了更方便的解决类似于下面这种问题：setTimeout(functio
前端javaScript es6语法学习 demo
12-25
以上就是JavaScript ES6中的关键知识点，掌握这些特性将有助于提升前端开发的效率和代码质量。在实际项目中，结合使用这些特性，可以使代码更加简洁、高效。通过深入理解和实践，开发者能够更好地驾驭现代JavaScript...
JavaScript ES6函数式编程入门经典_javascript_
10-01
以上就是JavaScript ES6函数式编程的一些核心知识点，理解并熟练运用这些特性，将使你的JavaScript编程更加高效和优雅。通过阅读《JavaScript ES6函数式编程入门经典》这本书，你将能深入学习这些概念，并逐步成为一...
JS实现禁止高频率连续点击的方法【基于ES6语法】
10-19
在网页开发过程中，对于用户界面的交互操作需要进行合理的控制，以免造成不良的用户体验。...本文将详细介绍如何通过...通过对本文所述知识点的理解和应用，开发者可以更好地控制用户的交互行为，优化网页的用户体验。
ES6 语法新特性
Dj19983160703的博客
04-03 303
1 symbol数据类型 //新数据类型。 生成一个独一无二的值 var str = Symbol(); var str2 = Symbol(); console.log(str == str2); //false var str3 = Symbol(2); var str4 = Symbol(2); console.log(str3 == st...
es6语法新特性一览
m0_46627254的博客
06-19 257
原文地址 https://juejin.im/post/5ca2e1935188254416288eb2 ES全称ECMAScript，ECMAScript是ECMA制定的标准化脚本语言。目前JavaScript使用的ECMAScript版本为ECMA-417。关于ECMA的最新资讯可以浏览 ECMA news查看。 ECMA规范最终由TC39敲定。TC39由包括浏览器厂商在内的各方组成，他们开会推动JavaScript提案沿着一条严格的发展道路前进。 从提案到入选ECMA规范主要有以下几个阶段： Stag
es6语法及新特性
weixin_54714100的博客
03-16 969
1.let 声明的变量具有块级作用域，这意味着它们只能在包含它们的代码块内访问。如果尝试在块级作用域之外访问 let 变量，将会抛出异常。2.const 用于定义常量，一旦被赋值，其值就不能改变。常量的赋值必须在声明时完成。复杂数据类型，如数组和对象，const只是指向该变量的存储地址，若修改复杂数据类型里的值是可以操作的。例如数组push操作，修改arr[0]=1，但不可对整个数组重新赋值var 和 let 的区别？1、var声明的变量往往会越域；let声明的变量有严格局部作用域。
js.ES6语法新特性介绍
XiaLuoCXY的博客
12-28 503
ES6全称：ECMAScript-2015, 是2015年推出的全新的js语法 1.1-变量声明let与const 1.ES5语法变量特点: avr变量会提升,没有块级作用域 2.ES6新增两种变量声明方式（let与const），类似于let:变量不会提升允许修改,有块级作用域，，不允许重复声明 3.const声明:常量，只可以声明的时候赋值一次，之后无法修改 1.2-解构赋值语法 1.2.1-对象的解构赋值 解构赋值语法 ： 其实就是变量赋值语法的简写形式 1：取出 对象的属性 赋值 给变
es6新语法及特性
热门推荐
weixin_62650212的博客
03-19 1万+
在现代前端开发中，JavaScript 已经成为了必不可少的一部分，而 ES6（ECMAScript 2015）则为 JavaScript 带来了一系列的新语法和特性，使得 JavaScript 更加现代化、高效和易用。作为开发者，掌握 ES6 是必不可少的，因为它可以提高我们的开发效率，减少代码冗余，并提高代码的可读性和可维护性。在本篇博文中，我们将介绍 ES6 中一些重要的新语法和特性，帮助读者更好地掌握这一新的 JavaScript 版本。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值