ES6的部分笔记

最新推荐文章于 2024-04-20 09:30:00 发布
最新推荐文章于 2024-04-20 09:30:00 发布
阅读量63 收藏
点赞数
分类专栏： JavaScript 文章标签： javascript es6
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45493444/article/details/120134331
版权

ES6的部分笔记

解构赋值

数组的解构赋值

	const F4 = ['小沈阳','刘能','赵四','宋小宝']
	let [xiao,liu,zhao,song] = F4
    console.log(xiao)
    console.log(liu)
    console.log(zhao)
    console.log(song)

对象的解构+简化写法

	const zhao ={
		name:'赵本山',
        age:'不详',
        xiaopin(){
			console.log("wwww")
        }
    }
    let {name,age,xiaopin} = zhao
    console.log(name)
    console.log(age)
	console.log(xiaopin)
	xiaopin()

箭头函数

箭头函数中的this是静态的，this始终指向函数声明时所在作用域下的this的值

	function getName(){
		console.log(this.name)
	}	
	let getName2(){
		console.log(this.name)
    }
	window.name = 'aaa',
    const school = {
		name:'bbb'
    }
	//直接调用
	getName()
	getname2()
	//输出都是全局变量，aaa
	//而call方法的调用
	getName.call(school)
	getName2.call(school)
	//输出分别是bbb和aaa

不能作为构造实例化对象

	let Person = (name,age) =>{
		this.name = name;
        this.age = age
    }
    let me = new Person('xiao',30)
   	console.log(me)
	//报错。Person不是一个构造函数

不能使用arguments变量

	let fn =()=>{ 
		console.log(arguments)
	}
    fn(1,2,3)
	//报错，arguments没有定义

箭头函数的简写

	let add = (n) =>{
		return n+n
    }
    console.log(add(9))

简写为

	let pow = n => n+n

获取元素

	<style>
        div{
            width:200px;
            height:200px
            background:#58a
        }
	</style>
	...
	<div id = "ad"></div>
	<script>
        //点击div，2s后变成粉色
	let ad = document.getelementById('ad');
        ad.addEventListener("click",function(){
            /*
    let _this = this;
  	//setTimeout是函数，其this指向window，而外层的回调函数是由ad调用的，所以是方法的形式，this指向ad
	setTimeOut(function)(){
        console.log(this)
	_this.style.background = 'pink'
    },2000
        })
        */
      setTimeOut(()=>{
          //在箭头函数中，简单说就是自己没有this,所以如果它爹有他就用爹的爹没有就用window
        console.log(this)
	this.style.background = 'pink'
    },2000
        })
            
 	//从数组中返回偶数的元素
    const arr = [1,6,9,122,23] 
	/*
    const result = arr.filter(function(item){
	if(item%2 ==0){
	return true
    }else{
	return false
    	}
    })
    */
    const result = arr.filter(item =>item%2 === 0)
    //箭头函数适合和this无挂你的回调，定时器，数组的方法回调，不适合和this有关的回调，事件回调，对象的方法
    {
    	name:"sss",
            getName:(){
			this.name
            }
        //如果改为箭头函数的话，this会指向外层的
    }
	</script>
给函数传递默认初始值
	function connect({localhost="127.0.0.1",username,password,port}){
		console.log(host)
    	console.log(username)
        console.log(password)
        console.log(port)
        //输出localhost root root 3306
    }
	connect({
		host:'localhost',
        username:'root',
        password:'root',
        port:3306
	})

rest函数

rest参数用于获取函数的实参，用来代替arguments

rest参数要放到参数的最后，

	function date(){
	console.log(args)
    }
	date('111','22','3')
	//以数组的形式输出
	function fn(a,b,...args){
		console.log(a)
        console.log(b)
        console.log(args)
    }
	fn(1,2,3,4,5,6)
	//a 是1，b是2，args是数组[3,4,5,6]

rest的放在了函数声明的实参的位置

扩展运算符，是放在了函数的调用的实参里面

	const aa =["11","22","33"]
    function bbb(){
		console.log(arguments)
    }
	bbb(...aa)

扩展运算符可实现数组的合并,克隆,

	const a = ['1','2']
   	const b = ['11','22']
    const c = [...a,...b]
    console.log(c)
	//數組的合并
	const aa = ['a','b','c']
    const bb = [...aa]
    console.log(aa)
	//数组的克隆
	//将伪数组转为真正的数组
	const divs = document.querySelectorAll('div')
    const divArr = [...divs]
    console.log(divArr)

Symbol

Symbol 的值是唯一的，用来解决命名冲突的问题，

Symbol值不能与其他数据进行运算，

Symbol定义的对象属性不能使用for …in循环遍历，但可以使用Reflect.ownKeys来获取对象的所有简明

Symbol()创建的两个不相等，但是Symbol.for()创建的两个相等

7种数据类型

U undefined

S String Symbol

O Object

N Null Number

B Boolean

	//像对象中添加方法 up 和down
	let game = {...}
    //声明一个变量
	let methods ={
		up :Symbol()
        down:Symbol()
     }
     game[methods.up] = function(){
	console.log("111")
     }
	 game[methods.down] = function(){
	console.log("222")
     }
	console.log(game)

	let youxi = {
		name:"2222",
        [Symbol('a')]:function(){
            console.log("1")
        }}
   		[Symbol('b')]:function(){
            console.log("2")
        }}
            //Symbol是表达式，要加上中括号，//这里调用我只知道用另一种方式：先在对象youxi外定义变量let say = Symbol('say')再把对象youxi内部中括号的Symbol('say')替换成刚刚在外面定义的变量say，即[say]: function..最后在对象youxi外部调用：youxi[say]()。这样就可以调用"我可以发言"那个方法了
    }
    console.log(youxi)

具有这些属性的对象，会被覆盖掉默认的方法，使用你自定义的方法来实现功能,比如你重写了数组的length()方法，使用自己的方法计算长度

	class Person{
		static[Symbol.hasInstance](param){//可以控制false和true
			console.log(param)
   			console.log("111")
            return false
        }
    }
	let o = {}
    console.log(o instanceof Person)

	const arr =[1,2,3]
   	const arr2 =[11,22,33]
    arr2[Symbol.isConcatSpreadable]=false//控制arr2不可展开
	console.log(arr.concat(arr2))
迭代器
	const xiyou = ['11','22','33','44']
    for(let v of xiyou){
		console.log(v)
    }
	console.log(xiyou)
	let iterator = xiyou[Symbol.iterator]()
    //调用对象的next方法
    console.log(iterator.next())
    console.log(iterator.next())
    console.log(iterator.next())
    console.log(iterator.next())
    console.log(iterator.next())
	//每次返回一个新的值，到最后value返回undefined，done返回true

	//声明一个对象
	const banji = {
		name:"111",
        stus:[
            '1',
            '2',
            '3',
            '4'
        ]
        
    [Symbol.iterator]{
        let index = 0;
        let _this = this
		return {
        	next:function(){
  			if(index<_this.stus.length){
                        const result = {value:_this.stus[i],done:false}
                        index++
                return result
                }else{
					return{
                        value:undefind,done:true
                    }
                }
    		}
    	}
    }
生成器
	function * gen(arg){
		console.log("hello generator")
        console.log('arg')
        let one = yield '111';
        console.log(one)
        let two = yield '222';
        console.log(two)
        yield '333';
        console.log('4')
    }
	let iterator = gen('AAA')
    //可以传入实参
    //console.log(iterator)
    //执行获取迭代器对象
	console.log(iterator.next())//来控制输出执行
	console.log(iterator.next('BBB'))
	//第二次调next方法，传入的实参， 为第一次yield的整体返回结果
	console.log(iterator.next('CCC'))
	console.log(iterator.next('DDD'))

回调地狱

		setTimeOut(()=>{
			console.log(111);
            setTimeOut(()=>{
				console.log(222);
                setTimeOut(()=>{
					console.log(333);
        		},3000)
        	},2000)
        },1000)

	//解决回调地狱函数方法1
	function one(){
		setTimeOut(()=>{
			console.log(111)
            iterator.next()
        },1000)
    }
	function two(){
		setTimeOut(()=>{
			console.log(222)
            iterator.next()
        },2000)
    }
	function three(){
		setTimeOut(()=>{
			console.log(333)
            iterator.next()
        },3000)
    }
	function * gen(){
		yield one()
        yield two()
        yield three()
    }
	let iterator = gen()
    iterator.next()

	//解决回调地狱方法2
	function getUsers(){
        setTimeOut(()=>{
			let data = '用户数据';
            iterator.next(data)
        },1000)
	}
	function getOrders(){
        setTimeOut(()=>{
			let data = '订单数据';
            iterator.next(data)
        },1000)
	}
	function getGoods(){
        setTimeOut(()=>{
			let data = '商品数据';
            iterator.next(data)
        },1000)
	}
	function * gen(){
		let users = yield getUsers();
        let orders = yield getOrders();
        let goods = yield getGoods()

    }
	let iterator = gen()
    iterator.next()
Promise对象
	const p = new Promise(function(resolve,reject){
      setTimeOut(function()
        let data = '数据库中的用户数据'
        resolve(data)
        //状态成功
        },1000)
    	/*状态失败
    	let err = '数据读取失败'
    	reject(err)
    	*/
    })
    p.then(function(value){
		console.log(value)
    },function(reason){
		console.error(reason)
    })

promise封装读取文件

	const fs = require('fs')
    
    //调用方法读取文件（多个任务会缩进）
    fs.readfile('./...',(err,data)=>{
		if(err) throw err//如果失败则抛出错误
        console.log(data.toString())//如果没有出错，则输出内容
    })


	//使用Promise封装（多个任务不会缩进）
	const p = new Promise(functon(resolve,reject){
	fs.readFile('./...'.(err,data)=>{
	if(err) reject(err)
        resolve(data)
    	})
   })
   p.then(function(value){
		console.log(value.toString())
   },function(reason){
		console.log("读取失败")
   })

Promise封装AJAX请求

	
	const p = new Promise((resolve,reject)=>{
	//创建对象
	const xhr = new XMLHttpRequest()
    //初始化
    xhr.open("GET","...api 的地址")
	//发送
	xhr.send()
	//绑定事件，处理响应结果
	xhr.onreadystatechange = function(){
        if(xhr.readyState ===4){
			if(xhr.status>=200&&xh4.status<300){
	resolve(xhr.response)
            }else{
				reject(xhr.status)
                }
            }
        }
    })
    
    //有了Promise就不用在上面修改添加内容，在下面的代码中修改
    //指定回调
    p.then(function(value){
		console.log(value)
    },function(reason){
		console.error(reason)
    })

	const p = new Promise((resolve,reject)=>{
	setTimeOut()=>{
		reject('error')
    },1000)
  })
  	//then方法返回结果是Promise对象，对象状态由回调函数的执行结果决定，
    //如果回调函数中返回的结果是非promise类型的属性，返回对象的成功的值
    //
    const result = p.then(value=>{
		console.log(value)
        //1.非promise类型的属性
        //return 'iloveyou'
        //2.是promise对象
        //return new Promise((resolve,rejecct)=>{
		//resolve('ok')
          //reject('error')  
       // })
        //3.抛出错误
        throw new Error('出错了')
        
    },reason=>{
		console.log(reason)
    })  
    console.log(result)

多个文件内容读取

	const fs  = require("fs")
	fs.readfile('./...1',(err,data1)=>{
		fs.readfile('./...2',(err,data2)=>{
			fs.readfile('./...3',(err,data3)=>{
	let result = data1 +'\r\n'+ data2 +'\r\n'+ data3 
    console.log(result)
    		})
    	})
    })


	//使用promise实现
	const p = new Promise((resolve,reject)=>{
		fs.readFile("./...1",(err,data)=>{
		resolve(data)
        })
    })
    p.then(value=>{
		new Promise((resolve,reject)=>{
			fs.readFile("./...2",	(err,data)=>{
		resolve([value,data])
        })
    })
    }).then(value=>{
		new Promise((resolve,reject)=>{
		fs.readFile("./...3",(err,data)=>{
		value.push(data)
        resolve(value)
        })
    })
    }).then(value=>{
		console.log(value.join('\r\n'))
    })

catch方法

	const p = new Promise((resolve,reject)=>{
		setTimeOut(()=>{
	reject('出错了')
        },1000)
    })
   // p.then(function(value){},function(reason){
	//console.error(reason)
   // })
    p.catch(function(reason){
console.log(reason)})
深海打捞的喵
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
es6学习笔记
08-12
本学习笔记将深入探讨ES6中的核心概念，帮助你全面掌握这一现代JavaScript语法。 1. **let 和 const 声明** 在ES6之前，我们主要使用`var`进行变量声明，但`let`和`const`的引入解决了作用域和提升（hoisting）的...
ES6基础笔记，照着尤神写的笔记（大部分）
05-23
ES6基础笔记，照着尤神写的笔记（大部分）
ES6学习
qq_29207823的博客
12-21 226
1.let命令 ES6 新增了let命令，用来声明变量。它的用法类似于var，但是所声明的变量，只在let命令所在的代码块内有效。 { let a = 10; var b = 1; } a // ReferenceError: a is not defined. b // 1 for循环的计数器，就很合适使用let命令。 let命令的为 JavaScript 新增了块级作...
ES6-10学习笔记
qiao
03-17 534
一、ES6 1、全局变量 //两种生成全局变量的方法（都是写在函数体外） var a=123; b=456; //两种方法生成全局变量的区别： //1、 //没有使用 var 生成的全局变量，是作为window的属性存在， //不是真正意义上的全局变量，可以用 delete b (或者delete window.b)删除，删除之后获取b则是 not defind， //而通过 var 生成的全...
5种this绑定全面解析
dandan1924的博客
11-26 369
5种this绑定全面解析 this的绑定规则总共有下面5种 1、默认绑定（严格/非严格模式） 2、隐式绑定 3、显式绑定 4、new绑定 5、箭头函数绑定 一.绑定规则 1.默认绑定 函数直接调用，一般发生在回调函数 独立函数调用：this指向全局对象 严格模式下，不能将全局对象用户默认绑定，this会指向undefined。在严格模式下调用函数则不受影响 setTimeout比较特殊，严格模式...
ES6部分笔记
weixin_46029283的博客
04-21 1323
ES6新增 一、数组新增 1.返回符合测试条件的第一个数组元素值，如果没有符合条件的则返回 undefined。 语法：arr.find(function(currentValue, index, arr){}) currentValue 必需。当前元素 index 可选。当前元素的索引值 arr 可选。当前元素所属的数组对象 2.返回符合测试条件的第一个数组元素索引，如果没有符合条件的则返回 -1。 语法：arr.findIndex(function(currentValue, index
ES6语法笔记整理
weixin_45947759的博客
09-04 531
不允许重复声明； 块儿级作用域（局部变量）； // 在if()中同理 不影响作用域链； 1.2 let 案例 标识符一般为大写（习惯） 不允许重复声明 值不允许修改 块儿级作用域（局部） console.log(FRUIT) // 错误，FRUIT未定义 对象的解构 2. 模板字符串 里面可以直接使用换行 let hello = 3. 对象的简化写法 原来： ES6： 4. 箭头函数
ES6学习笔记
一天不学习，就浑身难受
07-17 983
ECMA（EuropeanComputerManufacturersAssociation）中文名称为欧洲计算机制造商协会,这个组织的目标是评估、开发和认可电信和计算机标准。1994年后该组织改名为Ecma国际。ECMAScript是由Ecma国际通过ECMA-262标准化的脚本程序设计语言。声明const命令声明常量let命令声明变量作用作用域全局作用域函数作用域块级作用域{}作用范围var命令在全局代码中执行const命令和let命令只能在代码块中执行、、...
尚硅谷ES6学习笔记
胡西风的博客
04-04 232
介绍模块化是指将一个大的程序文件, 拆分成许多小的文件，然后将小文件组合起来。防止命名冲突代码复用高维护性模块化规范产品语法模块功能主要有两个命令构成：export 和 inportexport 命令用于规定模块的对外接口inport 命令用于输入其他模块提供的功能export let school = '尚硅谷'console.log('教技能')
ES6笔记
最新发布
善假于物
04-20 841
学习ES6之前我们先了解一下Babel，Babel是将ES6代码转换为ES5的工具。
ES6 学习笔记
qq_43645678的博客
03-06 379
ES6 学习笔记
ES6（笔记）
weixin_73630788的博客
11-12 539
ES6基础
ES6正则表达式扩展笔记
10-19
正则表达式是javascript操作字符串的一个重要组成部分，然而，在ES6中，随着字符串操作的变更， ES6也对正则表达式进行了一些更新。本文将详细介绍ES6正则表达式扩展
最全的es6笔记看了不后悔!!!!
10-14
本笔记旨在全面解析ES6的关键概念，帮助开发者更好地理解和运用这些功能。** ### 1. **变量声明与作用域** #### let 和 const - `let` 用于块级作用域内的变量声明，解决了`var`导致的变量提升和作用域混乱问题。...
ES6新增语法笔记，方便学习
03-25
最新ES6语法整理笔记，内涵各个部分小示例，方便理解和使用，记录了整个ES6新增语法部分，以及与之前版本的比较！
Promise和异步函数的reject错误处理
06-24 1372
reject一般做错误处理 两个Promise的话，前面的出错后面会等着前面的结束后面的再进行执行 Promise结束是状态改变的时候再结束， resolve和reject都不会终结Promise函数的执行 外界参与无法改变，等其自己结束 两个中有出错的都在这里出现 then的第一个回调函数是resolve对象，状态resolved unreject事件，可以用catch来终止promise链 接受多个promise对象返回一个promise对象 472)] 接受多个promise对象返回一个pr
数值Number，布尔Boolean，字符串
04-05 401
数值 JavaScript数值的特征 不区分整数值和浮点数值。 所有数值均用浮点数值表示。 采用IEEE-754标准定义的64位浮点数格式表示。 整数在实际操作时（如数组索引)，则是基于32为整数。 整数直接量 除十进制外, JavaScript能识别十六进制（以0x或0X为前缀)﹑二进制(以0b或0B为前缀）和八进制(以0o或00为前缀)。 如: 0xff 2= 55 , 0b1001 = 09 ,0o12 = 10 但在ES6的严格模式下，禁止使用八进制。 浮点数直接量 实数
ES6扩展运算符
12-22 377
ES6扩展运算符 展开数组 console.log(...[3, 4, 5]) 3 4 5 等价于 console.log(3, 4, 5) 合并数组 let arr1 = [1, 2, 3] let arr2 = [4, 5, 6] let arr3 = [7, 8, 9] console.log([...arr1, ...arr2, ...arr3]) [ 1, 2, 3, 4, 5, 6, 7, 8, 9 ] 提取数组/元素 let [var1, ...arr5] = [1, 2, 3, 4,
正则表达式
03-27 218
正则表达式 JavaScript中使用RegExp对象来封装一个正则表达式，并提供相关的方法和属性。 两种创建方法 字面量 let reg = /\bis\b/g; //g表示全文匹配 let str = "He is a boy. This is a dog. Where is she?"; console.log(str.replace(reg, "IS")); 构造函数 let reg = new RegExp("\\bis\\b", "g"); let str = "He is a boy.

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值