ES6学习

最新推荐文章于 2024-03-03 16:43:22 发布

l20040121_

最新推荐文章于 2024-03-03 16:43:22 发布

阅读量30

点赞数

文章标签： es6 学习 javascript

本文链接：https://blog.csdn.net/l20040121_/article/details/128757777

版权

let声明变量

1-块级作用域

<script>
for(let i=0;i<oli.length;i++){
oli[i].onclick =function(){
  console.log(i)
}
}
</script>

得到每一次循环中i的值
2-不允许重复声明
3-变量提升没有
4-不与顶层对象挂钩

const声明常量

1.常量（不可以修改）
2.不能重复定义
3.块级、
4.没有声明提升
5.不与顶层对象挂钩
ps：更改const

<script>
const myobj = {
name:"jack"
age:6
}
myobj.name = "tietui"
</script>

freeze:冻结属性

<script>
const myobj = Object.freeze{
name:"jack"
age:6
}
myobj.name = "tietui"
</script>

变量解构赋值

数组

<script>
let arr = [1,2,3]
let [a,b,c] =arr//可以通过abc访问123
let x = 1;
let y = 2;
[y,x] = [x,y]//交换值
</script>

对象

<script>
let obj = {
name:"kerwin",
age:100
}
let {name,age} = obj//交换位置和数组相同 
</script>

模板字符串

<script>
let name = "tiecui"
let oli = "<li>\<b>"+name+"<b></li>"
//或
let oli = `<li><b>${name}<b></li>`
</script>

字符串扩展

<script>
let myname = "kerwin"
console.log(myname.includes("en"))//检验字符串是否含有en
console.log(myname.startsWith("k"))//检验字符串开头是否含有k
console.log(myname.endWidth("win"))//检验字符串结尾是否含有win
console.log(myname.repeat(2))//将字符串重复两次 
</script>

数值

1.二进制八进制的写法
2.Number.isFinite Number.isNaN
3.极小常量

数组扩展

pop,删除底栈元素
拓展运算符

<script>
let arr1=[1,2,3]
let arr2=[4,5,6]
console.log([...arr1,...arr2])

</script>

Array.from
将数组对象转换成真正数组

<script>
function test(){
	console.log(Array.from(arguments))
}
test(1,2,3)
let oli=document.querySelectorAll("li")
console.log(Array.from(oli))

</script>

Array.of
将一组值转化为数组，即新建数组

<script>
let arr1=Array(3)
console.log(arr1)//[,,]

let arr2=Array.of(3)
console.log(arr2)//[3]

</script>

find，findIndex
该方法主要是应用于查找第一个符合条件的数组元素
它的参数是以一个回调函数。在回调函数中可以写你要查找元素的条件，当条件成立为true时，返回该元素。如果没有符合条件的元素，返回值为undefined

<script>
let arr=[11,12,13,14,15]
let res=arr.find(function(item){
	return item>13
})
console.log(res)//14
let res=arr.findIndex(function(item){
	return item>13
})
console.log(res)//3

</script>

fill,空白填充

<script>
let arr=new Array(3).fill("kerwin")
console.log(arr)
let arr1=[11,22,33]
console.log(arr1.fill("kerwin",1,2))

</script>

flat() flatMap()
集成扁平化

<script>
let arr=[1,2,3,[4,5,6]]

let arr1=arr.flat()
console.log(arr,arr1)

</script>

函数拓展

1、默认参数

function ajax(url,method="get",async=true){
	console.log(url,method,async)
}
ajax("/bbb")

2、-rest参数剩余参数

function(x,y,...data){//展开运算符
	console.log(data)
}

对象简写

let name="moduleA"
let obj={
	name,//name:name
	test1(){

	},
	test2(){

	}
}

对象属性表达式

let name="moduleB"
let obj={
	name,
	[name+"test2"](){
	
	}
	[name+"test2"](){
	
	}
}

拓展运算符

let obj={
	name:"kerwin"
}
let obj1={
	...obj//不是赋值obj地址，而实内容，可以单独修改
}

Object.assign
对象拼接，会将拼接的对象拼接进第一个对象（第一个对象会被改变），最好设置一个空数组
Object.is判断两个值是否完全相等（===不能判断NaN）

箭头函数

（）可以省略
{}可以省略，只有一句代码，只有返回值的时候
没有arguments
this的问题，箭头函数this是父级作用域的

<script>
var test1=function(){
	console("1111")
}
var test2=()=>{
	console.log(2222)
}

//（只有一个形参的时候）可以省略
var test = a =>{
	console.log(111,a)
}
test("kerwin",100)

//{}可以省略，只有一句代码，只有返回值的时候
var test = a =>	 100*a
console.log(test(10))

</script>

this问题

<script>
<body>
    <input type="text" id="mytext">
    <script>
        mytext.oninput=function(){
            setTimeout(function(){
                console.log(this)
            },1000)
        }
    </script>
</body>
//这里this拿到的是window，而不是mytext

//解决方案1
<body>
    <input type="text" id="mytext">
    <script>
        mytext.oninput=function(){
            var that=this//先用that保存父级
            setTimeout(function(){
                console.log(that.value)
            },1000)
        }
    </script>
</body>

//解决方案2
<body>
    <input type="text" id="mytext">
    <script>
        mytext.oninput=function(){
            setTimeout(()=>{
                console.log(this.value)
            },1000)
        }
    </script>
</body>
//霸道的箭头函数

</script>

symbol

Symbol（）函数可以接受一个字符串作为参数，表示对Symbol实例的描述。这主要是为了在控制台显示，比较容易区分

let name=Symbol()
let age-Symbol()
var obj={
	[name]:"kerwin",
	[age]:100
}

let name=Symbol("name")//这样写symbol就容易区分，不会全显示symbol（）=****
let age=Symbol("age")
var obj={
	[name]:"kerwin",
	[age]:100
}
console.log(obj)

ps：
1、不能运算
2、显示调用toString（）
3、隐式转换boolean
getOwnPropertySymbols（）拿出里面所有的symbol函数

Iterator 迭代器

作用：
1、为各种数据结构，提供一个统一的、简便的访问接口
2、使得数据结构的成员能够按某种次序排列
3、ES6创造了一种新的遍历命令for…of循环，Iterator接口主要供for…of循环

let arr=["kerwin","tiechui","gangdaner"]
for(let i of arr){
	console.log(i)//of是数组里的值，in是索引
}

过程：
1、创造一个指针对象，指向当前数据结构的起始位置。也就是说，遍历器对象本质上，就是一个指针对象
2、第一次调用指针对象的next方法，可以将指针指向数据结构的第一个成员
3、第二次调用指针对象的next方法，指针就指向数据结构的第二个成员。
4、不断调用指针对象的next方法，直到它指向数据结构的结束位置

let i=arr[symbol.iterator]()
console.log(i.next())
console.log(i.next())
console.log(i.next())
console.log(i.next())

set结构

let s1=new set([1,2,3,2,3])
console.log(s1)

let s2=new set()
s2.add(1)
s2.add(2)
s2.add(3)
console.log(s2)

size：返回set实例的成员数
set.prototype.add(value):添加某个value
set.prototype.delete(value)：删除某个value，返回一个布尔值，表示删除是否成功
set.prototype.has(value)：返回一个布尔值，表示该值是否为set成员
set.prototype.clear（）：清楚所有成员，没有返回值

遍历
set.prototype.keys():返回键名的遍历器
set.prototype.values():返回键值的遍历器
set.prototype.entries():返回键值对的遍历器
set.prototype.foreach():遍历每个成员

Map结构

类似于对象，也是键值对的集合，但是“键”的范围不限于字符串，各种类型的值（包括对象）都可以当作键

let m1=new map()
m1.set("name","kerwin")
m1.set({a:1},"大连")

console.log(m1)

let m2=new map([
	["name","kerwin"],
	[{a:1},"大连"]
])

size：返回Map结构的成员数
Map.prototype.set（key.value）：添加key对应得value，返回Map结构本身
Map.prototype.get（key）：获取key对应得value
Map.prototype.delete（key）：删除某个键
Map.prototype.has（key）：某个键是否在当前Map对象之中

map.prototype.keys():返回键名的遍历器
map.prototype.values():返回键值的遍历器
map.prototype.entires():返回所有成员的遍历器
map.prototype.foreach():遍历Map的所有成员```
# proxy代理
它的作用是在对象和对象的属性值之间设置一个代理，获取该对象的值或者设置该对象的值，以及实例化等等多种操作，都会被拦截住，经过这一层我们可以统一处理，我们可以认为它就是“代理器”
proxy本质上属于元编程非破坏性数据劫持，在原对象的基础上进行了功能的衍生而不影响原对象，符合松耦合高内聚的设计理念
# get方法

```html
let target={}
let proxy=new proxy(target,{
	get(target,prop){
		return target[prop]
	}
})

set方法

const proxy_set = new Proxy({}, {
    set: function (target, prop, value, receiver) {
        target[prop] = value;
        console.log('property set: ' + prop + ' = ' + value);
        return true;
    }
})

console.log("======proxy_set=======")
console.log('name' in proxy_set); // false
proxy_set.name = 'duXin'; // property set: name = duXin

console.log('name' in proxy_set); // true

has方法

const targetObj = {
    _secret: 'easily scared',
    eyeCount: 4
};
const proxy_has = new Proxy(targetObj, {
    has: (target, key) => {
        console.log("key==",key)
        if (key.includes('_')) {
            return false;
        }
        return key in target;
    }
})

console.log('eyeCount' in targetObj); // true
console.log('_secret' in proxy_has); // false

reflect对象

reflect可以用于获取目标对象的行为，它与object类似，但是更易读，为操作对象提供了一种更优雅的方式。它的方法与proxy是对应的

//代替object的某些方法
const obj={
};
reflect.defineprototype(obj,'name',{
	value:'kerwin',
	writable:false,
	configurable:false
})

//修改某些object方法返回结果
//老写法
try{
	object.defineproperty(target,property,attributes);
	//success
}catch(e){
	//fail
}

//新写法
if(reflect.defineproperty(target,property,attributes)){
	//success
}else{
	//fail
}

//命令式变为函数行为
const obj={
	name:"kerwin"
}
//老写法
consoel.log("name"in obj)//true
//新写法
console.log(reflect.has(obj,"name"))//true

//老写法
delete obj.name
//新写法
reflect.deleteproperty(obj,"name")

//配合proxy
let target = new set()
const proxy=new proxy(target,{
	get(target,key){
		const value=reflect.get(target,key)
		//遇到function都手动绑定一下this
		if(value instanceod function){
			console.log('访问${value}方法了')
			return value.bind(target)
			//不能是call apply
		}
		return value
	}
	set(){
		return reflect.set(...arguments)
	}
})

promise

promise是异步编程的一种解决方案，比传统的解决方案回调函数，更合理和更强大。ES6将其写进了语言标准，同意了用法，原生提供了promise对象指定回调函数方式更灵活易懂
解决异步回调地狱的问题
回调地狱:
当一个回调函数嵌套一个回调函数的时候
就会出现一个嵌套结构
当解套的多了就会出现回调地狱的情况
比如我们发送三个ajax请求
第一个正常发送
第二个请求需要第一个请求的结果中的某一个值作为参数
第三个请求需要第二个请求的结果中的某一个值作为参数

//语法
var q = new Promise(function(resolve，reject){
	//放异步
	settimeout（（）=>{
		//成功兑现承诺
		resolve()

		//失败拒绝承诺
		//reject（）
	},2000）
})
//pending 执行中
//fulfilled 兑现承诺
//reject 拒绝承诺

//q是promise对象
q.then(function(){
//兑现承诺，这个函数被执行
}).catch(function(){
//拒绝承诺，这个函数被执行  
})

generator函数

generator函数是ES6提供的一种异步编程解决方案
geneator函数是一种状态机，封装了多个内部状态
执行generator函数会返回一个遍历器对象们，也就是说，generator函数除了状态机，还是一个遍历器对象生成函数。返回的遍历器对象，可以一次遍历generator函数内部的每一个状态

//基本语法
function *gen(){
	console.log(1)
	tield;
	console.log(2)
	yield；
	console.log(3)
}

let g=gen()
g.next()
g.next()
g.next()

class语法

//1类的写法
classperson{
	constructor(anme,age);
		this.name=name;
		this.age=age;
	}
	say(){
		console.log(yhis.name,this.age)
	}
let obj=new person("kerwin",100)
console.log(obj)

//getter与setter
class list{
	constructor(ele){
		this.element=ele
	}

	get html(){
		return this.element.innerHTML
	}
}

class继承

class Person{
	constructor(name,age){
		this.name=name
		this.age=age
	}
	say(){
		console.log(this.name,"hello")
	}
}
//extend原型继承
class Student/*子类*/ extends Person/*父类*/{
	constructor(name.age,grade){
		super(name,age)//Person.call(this,name,age)
		this.grade=grade
	}
	say(){
	super.say()//继承上面的say
		console.log(this.name,"你好")
	}
}
var obj = new Student()
console.log(obj)

Module语法

1、私密不漏
2、重名不怕
3、依赖不乱
注意script引用记得加type=“module”（依赖不乱）

export{
	***
	*****
}
//导出函数
import{} from ' ./'
//导入函数

import{A1,A2,test as A_test} from ' ./'
import{B1,B2,test as b_test} from './'
//解决重名问题

export default c
//默认导出c

模块化

js现在有两种模块。一种是ES6模块，简称ESM；另一种是commonJS模块，简称cjs
commonjs模块是nodejs专用的，与ES6模块不兼容。语法上面，两者最明显的差异是，commonjs模块使用require（）和module.exports，ES6模块使用import和export
ES6模块不是对象，而实通过export命令显示指定输出的代码，再通过import命令输入

//写法1
export default A1
import a1from "./1.js"

export {A1,A2}
import {A1,A2} from "./1.js"
import {A1as a1,A2 as a2} from "./1.js"
import * as obj from "./1.js"