ES6新特性 笔记

最新推荐文章于 2024-08-17 21:56:22 发布
最新推荐文章于 2024-08-17 21:56:22 发布
阅读量163 收藏
点赞数
文章标签： es6
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_42709302/article/details/109286969
版权

es6
兼容性：
IE10+ 、chrome、FireFox、移动端、NodeJS

解决办法（转移、变换）
1、在线转换
2、提前编译

ES6 改变
1、变量

var

1、可以重复声明
2、无法限制修改
3、没有块级作用域  { }
		

let、coust

1、let 	 不能重复声明 是变量 可以修改   有块级作用域
2、coust 不能重复声明 是常量 不可以修改  有块级作用域

2、箭头函数(参数的扩展)
1.普通函数

	function 名字(){
		
	}

2.箭头函数

1.如果只有一个参数, ()可以省

 例子：
	sort() 方法用于对数组的元素进行排序。
	let arr = [3,6,1,23,53]
一般写法
	arr.sort(function(n1,n2){
		return n1-n2;
	})
箭头函数
	arr.sort((n1,n2)=>{
		return n1-n2
	})
	alert(arr)

2.如果只有一个return, {}可以省
()=>{

}

 例子：
	let show = function (a){
		return a*1
	}
	let show = a => a*1

3.函数的参数 (参数的扩展、数组的展开)

1.收集剩余的参数
	...args 剩余参数 必须放最后  args 自定义
	function show(a,b,...args){
		alert(a);
		alert(b);
		alert(args);
	}
	show(2,4,23,42,45,3)
2.数组展开
	展开后的效果，跟直接把数组的内容写在这一样
	let arr2 = [1,2,4]
	let arr1 = [2,5,8]
	let arr = [...arr2,...arr1]   等价于  let arr = [1,2,4,2,5,8] 
	alert(arr)
		
	例子
	
	function show(...arr){
		fn(...arr)  等价于 fn(3,23)
	}
	function fn(a+b){
		return(a+b)
	}
	show(3,23)

4、默认参数
默认值，传了听你的 不传听我的

function fn(a,b=12,c=3){
	console.log(a,b,c)
}
fn(8)        8,12,3
fn(34,4)     34,4,3
fn(34,4,98)	 34,4,98

5、解构赋值
1.左右两边结构必须一样
2.右边必须是个东西
3.声明和赋值不能分开

let [a,b,c] = [1,3,5]
let{a,c,b} = {a:2,c:2,c:4}

粒度一样就行
let [{a,b},[n1,n2],num,str] = [{a:12,b:4},[23,3],5,'iii']
console.log(a,b,n1,n2,num,str)

let [json,[n1,n2],num,str] = [{a:12,b:4},[23,3],5,'iii']
console.log(json,n1,n2,num,str)

let [json,arr,num,str] = [{a:12,b:4},[23,3],5,'iii']
console.log(json,arr,num,str)

3、数组方法
4个新方法
1、map 映射 一个对一个

[23,90,98]
[不及格，及格，及格]

let arr = [89,54,33]
let result = arr.map(item=>item>60?'及格'：'不及格')
alert(result)

let arr = [12,4,3]
let result = arr.map(function(item){
	returen item*2
})

或

let result = arr.map(item=>item*2)
alert(result)

2、reduce 汇总 一堆出来一个

let arr = [12,4,3]
let result = arr.reduce(function(a,b,c){    a:中间结果 tmp  b:数值 item  c:索引 index
	return(a,b,c)
	return a + b
	if(c != arr.length - 1){
		return a + b
	}else{  //最后一次
		return (a + b) / arr.length
	}
})
alert(result)

3、filter 过滤器 保留一部分，不保留一部分

let arr = [12,4,3,32,53,21]
let result = arr.filter(item => {
	if(item%3 == 0){
		return true
	}else{  
		return false
	}
	
	或者
	return item%3 == 0
})
或
let result = arr.filter(item => item%3 == 0)

4、forEach 循环（迭代） 一个对一个

let arr = [12,4,3,32,53,21]
let result = arr.forEach((item,index) => item)

4、字符串
1.多了两个新方法
startsWith

let str = 'http://www.baidu.com'
if(str.startWith('http://')){
	alert('普通网址')
}else if(str.startWith('https://')){
	alert('加密网址')
}else{
	alert('其他网址')
}

endsWith

let str = '123.txt'
if(str.endsWith('.txt')){
	alert('txt文件')
}else if(str.endsWith('.pdf')){
	alert('pdf文件')
}else{
	alert('其他网址')
}

2.字符串模板

let str = `sdsdsdsdd`
let a = 12
let m = `ere${a}rer`

5、面向对象
1、多了class 关键字、构造器和类分开了
2、class里面直接加方法
原来的写法：

属性
function User(name,pass){
	this.name = 'qq'
	this.pass = '123'
}
方法
User.prototype.showName = function(){
	alert(this.name)
}
User.prototype.showPass = function(){
	alert(this.pass)
}

es6的写法：

class User {
	构造器
	constructor(name,pass){
		属性
		this.name = name;
		this.pass = pass;
	}
	方法
	showName(){
		alert(this.name);
	}
	showPass(){
		alert(this.pass);
	}
}

继承：super 超类

原来的写法：
	function User(name,pass){
		this.name = 'qq'
		this.pass = '123'
	}
	User.prototype.showName = function(){
		alert(this.name)
	}
	User.prototype.showPass = function(){
		alert(this.pass)
	}
	function VipUser(name,pass,level){
		User.call(this,name，pass)
		this.level = level
	}
	VipUser.prototype = new User();
	VipUser.prototype.constructor = VipUser;
	VipUser.prototype.showLevel = function(){
		alert(this.level)
	}
	var m = new VipUser('df','123',3)
	m.showName()
	m.showPass()
	m.showLevel()
		
es6的写法：  
	class User {
		构造器
		constructor(name,pass){
			属性
			this.name = name;
			this.pass = pass;
		}
		方法
		showName(){
			alert(this.name);
		}
		showPass(){
			alert(this.pass);
		}
	}
	
	class VipUser extends User{   //extends 扩展
		constructor(name,pass,level){
			super(name,pass)
			
			this.level = level
		}
		showLevel(){
			alert(this.level)
		}
	}
	var m1 = new VipUser('df','123',3)
	m1.showName()
	m1.showPass()
	m1.showLevel()

面向对象应用–React
React
1.模块化，组件化—class
2.JSX 是js的扩展版 JSXbabelbrowser.js

<script type="text/babel">
	class Text extends React.Component{
		constructor(...args){
			super(...args)
		}
		render(){
			return <span>345</span>;
		}
	}
		
	window.onload= function(){
		let oDiv = document.getElemetnById('div')
		ReactDOM.render(
			<Text>2323</Text>,
			oDiv
		)
	}
</script>

6、Promise 解决异步操作问题
1.JSON对象
JSON方法：JSON.stringify （）、JSON.parse（）

2.简写
名字跟值一样可以省略

var json = {a:a,b:b,c:23}  
省略 
var json = {a,b,c:23}

如果有方法 :function 省略

var json = {
	a:12,
	show:function(){
		
	}
}
省略
var json = {
	a:12,
	show(){
		
	}
}

Promise --承诺
异步: 操作直接没有关系，同时进行多个操作
同步: 同时只能做一件事

异步: 代码复杂 可以ajax 嵌套
同步: 代码简单

Promise 消除异步操作
用同步一样的方式，来书写异步操作

Promise.all 用法：
1.一个ajax

let p = new Promise(function(resolve,reject){
//异步代码   resolve 成功  reject失败
	$.ajax({
		url:'XXXXX',
		dataType:'json'
		success(arr){
			resolve(arr)
		},
		error(err){
			reject(err)
		}
	})
})
p.then(function(arr){
	alert('成功')
},function(err){
	alert('失败')
})

2.多个ajax

let p1 = new Promise(function(resolve,reject){
//异步代码   resolve 成功  reject失败
	$.ajax({
		url:'XXXXX',
		dataType:'json'
		success(arr){
			resolve(arr)
		},
		error(err){
			reject(err)
		}
	})
})
let p2 = new Promise(function(resolve,reject){
	//异步代码   resolve 成功  reject失败
	$.ajax({
		url:'XXXXX',
		dataType:'json'
		success(arr){
			resolve(arr)
		},
		error(err){
			reject(err)
		}
	})
})
Promise.all([
	p1,p2
]).then(function(arr){
	let [res1,res2] = arr
	alert('成功')
},function(){
	alert('失败')
})

3.多个ajax 简洁版

function createPromise(url){
return new Promise(function(resolve,reject){
	//异步代码   resolve 成功  reject失败
	$.ajax({
		url,
		dataType:'json'
		success(arr){
			resolve(arr)
		},
		error(err){
			reject(err)
		}
	})
})
}
Promise.all([
	createPromise('data/arr.tex')
	createPromise('data/json.tex')
]).then(function(arr){
	let [res1,res2] = arr
	alert('成功')
},function(){
	alert('失败')
})

4.多个ajax 最终版 常用

ajax 已经封装了Promise对象 
Promise.all([
	$.ajax({url:'data/arr.txt',dataType:'json'})
	$.ajax({url:'data/json.txt',dataType:'json'})
]).then(function(arr){
	let [res1,res2] = arr
	alert('成功')
},function(){
	alert('失败')
})

Promise.rece 用法： 谁先来用哪个

Promise.rece([
	$.ajax({url:'data/arr.txt',dataType:'json'})
		$.ajax({url:'data/json.txt',dataType:'json'})
	]).then(function(arr){
		let [res1,res2] = arr
		alert('成功')
	},function(){
		alert('失败')
	})

总结：	
	Promise.all([
		$.ajax({url:'data/arr.txt',dataType:'json'})
		$.ajax({url:'data/json.txt',dataType:'json'})
	]).then(results=>{
		let [res1,res2] = arr
		alert('成功')
	},err=>{
		alert('失败')
	})

7、generator 生成器
generat 生成 解决异步操作问题
普通函数---------一路到底
generator函数----中间可以停顿

function *show(){  
	//  * 的写法 
	//  1. function *show  
	//	2.function * show  
	//	3.function* show
	alert('a')
	yield;   //放弃
	alert('b')
}

function show_1(){
	alert('a')
}
function show_2(){
	alert('a')
}
let genObj = show();
console.log(genObj)
genObj.next()   走show_1
genObj.next()	走show_2

generator–yield 可以传参 也可以返回

function *show(num){
	alert('a')
	
	let a = yield;   
	
	alert('b')
	alert('b')
	return 
}
let genObj = show(8);
genObj.next()   走是yield之前  第一个next 传参没有用 需要在函数里面传参
genObj.next(9)	走let a 之后

runner 使用

runner(function *(){   //runner.js  引入
	let data1 = yield $.ajax({url:'...data1',dataType:'json'})
	let data2 = yield $.ajax({url:'...data2',dataType:'json'})
	let data3 = yield $.ajax({url:'...data3',dataType:'json'})
	
	console.log(data1,data2,data3)
})
带逻辑  回调、 Promise复杂 推荐用 runner
runner(function *(){   //runner.js  引入
	let data1 = yield $.ajax({url:'...data1',dataType:'json'})
	
	if(data1.type == 'vip'){
		let item = yield $.ajax({url:'...item',dataType:'json'})
	}else{
		let item1 = yield $.ajax({url:'...item1',dataType:'json'})
	}
	
	//...
})

generator–KOA 使用
noed.js

cnpm i koy  下载
cnpm i koy-mysql  下载
const koa = require('koa')  引入
const mysql = require('koa-mysql')  引入

mysql.createPool ({
	host:'localhost',
	user:'root',
	password:'12345',
	database:'xxx'   库名
})

let serve = new koa();   

serve.use(function *(){
	let data = yield db.query(`SELECT * FROM user_table`)
	this.body = data  输出东西
})
serve.listen(8080)   监听

异步操作：
1、回调  ajax 嵌套
2、Promise
3、generator  
4、

es7 & es8 预览
1、数组 includes
数组是否包含某个东西

2、数组 keys/values/entries

keys   		所有的key			0，1，2，3
values		所有的value			12，31，42，53
entries		多有的key-value对	{key:0,value:3},{key:1,value:32},...
entry 实体
for(let i in arr){
	alert(i)
}
for(let i of arr){
	alert(i)
}

let arr = [2,334,124,3]
for(let [key,value] of arr.entries()){
	alert(`${key}=${value}`)
}
			数组			Json
for...of  值(value)		X (出错)
for...in  下标(key)		key

幂

之前：Math.pow(3,8)

现在：alert(3**8)

padStart / padEnd

es6 多了
	endsWith / startsWith
es7 多了
	padStart / padEnd
	console.log('abc'.padStart(3))   从开始位置取3位，不足补零；
	console.log('abc'.padEnd(3))   用于尾部补全，不足补零；
	
	console.log('abc'.padStart(3,'000'))

语法容忍度 es6支持
数组： [1,34,23] ---- [21,4,3,12,]
函数参数： function(23,12,){

}
async await 跟generator yield 基本差不多
generator yield 标志加 * 需要runner辅助 不可以用箭头函数

function *show(){
	alert(213)
	
	yield;
	
	alert(98)
}

runner(function *(){   //runner.js  引入
	let data1 = yield $.ajax({url:'...data1',dataType:'json'})
	let data2 = yield $.ajax({url:'...data2',dataType:'json'})
	let data3 = yield $.ajax({url:'...data3',dataType:'json'})
	
	console.log(data1,data2,data3)
})

async await 标志加 async 不需要runner 可以用箭头函数

async function show(){
	alert(213)
	
	await;
	
	alert(98)
}

async function show(){  
	let data1 = await $.ajax({url:'...data1',dataType:'json'})
	let data2 = await $.ajax({url:'...data2',dataType:'json'})
	let data3 = await $.ajax({url:'...data3',dataType:'json'})
	
	console.log(data1,data2,data3)
}

let reader = async() =>{
	let data1 = await $.ajax({url:'...data1',dataType:'json'})
	let data2 = await $.ajax({url:'...data2',dataType:'json'})
	let data3 = await $.ajax({url:'...data3',dataType:'json'})
	
	console.log(data1,data2,data3)
}
笨笨的幸福1230
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
es6新特性笔记上
m0_51578916的博客
08-18 91
1.块级作用域的let引入 在ES6之前，js只有全局作用域和函数作用域，ES6中新增let关键字为其引入了块级作用域。 { var a = 5; let b = 6; } console.log(a); //5 console.log(b); //b is undefined 原因是：let声明的变量只能在其所在的代码块内才能访问，var声明的变量由于是全局变量，因此可以在代码块外访问 let的特性：暂时性死区 var声明的变量可以在声明之前使用，就是变量提升了，但是赋值还没
ES6新特性学习笔记
scorpio的博客
08-23 5321
学习笔记，仅供自己回忆时参考
关于如何运行Power Automate Flow
五角大寨
06-30 1270
可在 有人参与 或 无人参与 模式下运行桌面流。无人参与模式最适合不需要人为监督的应用程序。进行无人参与运行时，Power Automate 将自动登录到运行 Windows 10、Windows Server 2016 或 Windows Server 2019 的目标设备。 自动化完成后，Power Automate 从设备中注销并报告其活动。进行有人参与运行时，Power Automate 使用现有的 Windows 用户会话。若要运行无人参与的桌面流，目标计算机需要在所有用户注销的情况下可用。Pow
ES6新特性笔记
xie_ss的博客
04-22 554
ES6
es6笔记es6笔记es6笔记
04-03
ES6，全称ECMAScript 2015，是JavaScript语言的一个重要更新版本，引入了许多新特性，其中面向对象编程的改进是其一大亮点。本文将深入探讨ES6中的面向对象编程，包括类和对象、类继承以及面向对象的实践案例。 1. ...
ES6 学习笔记.pdf
07-05
通过这份学习笔记，我们可以看到ES6作为一个重要的JavaScript版本更新，它所引入的新特性极大推动了JavaScript的发展，使之更加成熟和强大，尤其在异步编程和模块化方面，为前端开发提供了更多现代化的解决方案。
es6尚硅谷笔记es6尚硅谷笔记
04-03
【ES6】是ECMAScript的第六版，它引入了许多新的特性和语法改进，使得JavaScript编程更加现代化和高效。在JavaScript的世界中，ECMAScript是由Ecma国际制定的一系列标准，特别是ECMA-262标准，定义了脚本语言的规范...
ES6新特性小小简单总结.md
08-08
ES6新特性的一个笔记总结
es6笔记补充es6笔记补充
04-03
本篇笔记将着重补充关于ES6的知识点，包括数据类型、高级特性以及变量、数据和内存管理。 一、JS 数据类型 在ES6之前，JavaScript有两大类数据类型：基本类型（Primitive Types）和引用类型（Reference Types）。...
jz2440 ----移植自制的USB RTL8188EUS网卡驱动
热门推荐
bo_的博客
04-18 6万+
1：google 下载rtl8188eus的网卡驱动源码 https://github.com/quickreflex/rtl8188eus 2.解压缩下载的文件，把驱动文件rtl8192_8188eus_linux_xxx.tar.gz(xxx是版本号)添加到要编译的内核树里面去 (1)假定你的内核位置为/root/linux-kernel,解压缩驱动文件,并且把解压缩后的驱动文件夹名改...
JS常见算法题整理
weixin_41082623的博客
08-23 7345
1.排序 1) 冒泡排序法： 1.比较相邻的两个元素，如果前一个比后一个大，则交换位置。 2.第一轮的时候最后一个元素是最大的一个。 3.按照步骤一的方法进行相邻两个元素的比较，由于最后一个元素已经是最大的了，因此最后一个元素不用比较。 例1： &lt;script&gt; var arr = [10,20,5,8,21,100,99]; function test() { ...
js基础试题及答案(三)
陈乾的博客
08-07 2万+
一、单选题（共30题，每题2分） 1.下列关于事件委托说法错误的是 A 事件委托可以解决事件绑定程序过多的问题 B 事件委托利用了事件捕获原理 C 事件委托可以提高代码性能 D 事件委托可以应用在click,onmousedown事件中 正确答案: B 解析: 事件委托利用的是事件冒泡的原理 2.什么属性用于获取 HTML 文件的根节点 A documentElement B rootElement C documentNode D documentRoot 正确答案: A 解析: html
ECMAScript6语法：箭头函数
pan_junbiao的博客
08-13 218
在 ES6 中，可以使用箭头“=>”定义函数。根据不同的使用场景，箭头函数有多种不同的语法。箭头函数的基本组成包括函数参数、箭头和函数体。第一种情况：箭头函数中只有一个参数，函数体中只有一条语句。第二种情况：箭头函数中参数多于一个，需要使用小括号将参数包含起来。第三种情况：箭头函数中没有参数，需要使用一对空的小括号。
ES6 (一）——ES6 简介及环境搭建
m0_62701594的博客
08-13 1074
ES6， 全称 ECMAScript 6.0 ，是 JavaScript 的下一个版本标准，2015.06 发版。ES6 主要是为了解决 ES5 的先天不足，比如 JavaScript 里并没有类的概念，但是目前浏览器的 JavaScript 是 ES5 版本，大多数高版本的浏览器也支持 ES6，不过只实现了 ES6 的部分特性和功能。
ECMAScript6语法：Promise
pan_junbiao的博客
08-13 292
在 ES6 之前，要实现异步调用，通常需要使用事件和回调函数。随着 Web 程序越来越复杂，使用事件和回调函数实现异步的方式并不能完全满足开发者的需求。而在 ES6 中提供的Promise 可以更好地解决异步编程问题。通过Promise 构造函数可以创建一个Promise 对象。Promise 构造函数只接受一个参数，该参数是一个执行器函数，在函数内包含需要异步执行的代码。
前端开发工程师面试整理-ES6+的新特性
最新发布
不务正业的猿
08-17 114
这些ES6+的新特性使JavaScript变得更强大、更简洁，提高了开发效率和代码可读性。ES6（ECMAScript 2015）及后续版本引入了许多新特性，极大地增强了JavaScript的功能和开发体验。使用function*定义生成器函数，可以通过yield暂停和恢复执行。基于Promise的异步编程语法，使异步代码更加简洁和易读。使用简洁的语法定义函数，并且不绑定自己的this。使用import和export语法导入和导出模块。Map用于存储键值对，Set用于存储唯一值的集合。用于异步操作的对象。
JavaScript - 数组对象中实用好玩的reduce方法
觉醒法师的专栏
08-12 723
JavaScript中reduce() 方法对数组中的每个元素执行一个由您提供的reducer函数(升序执行)，将其结果汇总为单个返回值。对于reduce()方法，很多人不太了解，其实熟悉之后会发现它可以应用在很多场景中，而且在老项目中我们也可以自定义实现reduce()功能。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值