JS内容ES6专项

let变量

let用来声明变量
用法和var类似
例如：let a = 10

1，块级作用域

在一个{}中let声明的变量只存在这个{}之内

2，不允许重复声明

let a = 2;
let a = 1;

如上，网页会报错
变量的声明不能被覆盖

3，变量不能被提升

必须先声明，再使用，
如果直接使用，会报错
在声明变量之前的区域被称为暂存性死区

4，let不与顶层对象挂钩

const常量

1，常量

不允许重复定义

const声明的是一个常量，一旦声明，不能再进行更改

2，块级作用域

和let相同，只在一个块内存在

3，变量不能被提升

与let相同

必须先声明，再使用，
如果直接使用，会报错
在声明变量之前的区域被称为暂存性死区

4，不与顶层对象挂钩

变量的解构赋值

ES6进行解构赋值

let[a,b,c] = [1,2,3];

数组可以嵌套进行解构赋值

例如：

let [a,[[b],c]] = [1,[[2],3]]

let [,,third] = ["a","b","c"]
//third返回值为c

let [x,,y] = [1,2,3]
//x返回1
//y返回3

let [head, ...tail] = [1,2,3,4]
//head[1]
//tail[2,3,4] 

let [x,y,...z] = ['a']
//x"a"
//y返回undefined

let [x,y] = [1,2,3]
//x返回1
//y返回2

let [a,[b],d] = [1,[2,3],4]
//a返回1
//b返回2
//d返回4 

当解构失败时，直接返回undefined

对象的解构赋值

对象与数组的解构赋值不同，对象的属性没有次序，只需要保证变量和属性同名，就能取到值

let obj = {
	name:"kerwin",
	age:100
}
let {age} = obj 

特殊

如下

var code = "1234"

let res = {
	code:200,
	data:"111111"
}

let {data,code:co} = res;

console.log(data,co)

当对对象进行解构赋值时，若上面有一变量名与对象中的变量名相同，可以用上面的方法改变对象的变量名，再进行解构

函数解构赋值获取参数

function getData(){
	let res = {
		code:200,
		data:{
			list:["aaa","bbb","ccc"]
		}
	}
	test(res)
}

function test({code,data:{list}}){
	console.log(code,list)
}
getData()

模块字符串

拼接

之前拼接字符串： console.log("my name is"+name+".I'm"+age+"years old")
需要通过多个+相加

---

ES6：
用``（反引号）进行拼接，称为模板字符串
在``中编写${变量}将字符串和变量拼接到一起

console.log(`my name is ${name}.I'm ${age} years old`) 

换行

使用``模板字符串时，可以直接换行，不需要将字符串进行拼接

$符的特别用法

let newList = arr.map(function(item,index){
	return`<li class = ${index===0? 'active':''}">)
	<b>${item}</b>
	</li>`
})
console.log(newlist)
let oul = document.querySelector("ul")
oul.innerHTML = newlist.join("")

includes函数

includes函数可以判断是否目标包含输入的值

let myname = "xiaoming"
console.log(myname.includes("ao"))

如果包含，则返回true

同理，还有其他两个相似的函数
startWith("ao")

endWith("ao")

includes函数还支持两个变量的输入

myname.includes("ao",2)
第二个参数表示从该个字符开始进行比对

数值plus

二进制和八进制表示法

let num1 = 100; //十进制
let num2 = 0x100; //十六进制
let num3 = 0b100; //二进制
let num4 = 0o100；//八进制

isFinite与isNaN方法

减少全局方法，可以使得语言逐步模块化

let num1 = Number.isFinite(100) //返回true
let num2 = Number.isFinite(100/0) //返回false
let num3 = Number.isFinite(Infinity) //返回false
let num4 = Number.isFinite("100") //返回false
//isFinite检查是否是一个具体的数值

let num5 = Number.isFinite(NaN) //返回true
let num6 = Number.isFinite(100) //返回false
let num7 = Number.isFinite("abc") //返回false
let num8 = Number.isFinite("100") //返回false

保留整数

将小数抹去，保留整数

Math.trunc(1.2)

如上，直接返回1

判断数字的数学类型【正数，负数，0】

如果是正数，返回+1
如果是负数，返回-1
如果是0，返回+0
如果是-0，返回-0
非数值回先转换为数值，再进行对比

数组扩展

1，...展开

第一种

let arr = [1,2,3]
let arr2 = [4,5,6]
console.log([...arr,...arr2])

返回值就是1，2，3，4，5，6、

第二种

let myarr = [1,2,3,4,5,6]
let [a,b,c] = myarr
console.log(a,b,c)

返回值为1，2，3
如果改变上面代码为

let myarr = [1,2,3,4,5,6]
let [a,b,...c] = myarr
console.log(a,b,c)

a返回值为1
b返回值为2
c返回值为3，4，5，6

2，Array.from

可以对数据类型进行转换
例如：可以将数组结构 转换为数组对象

function test(){
	console.log(Arry.from(arguments))
}
test(1,2,3,4)
let olis = document.querySelectorAll("li")
Arry.from(olis).map(function(){

}) 

3,Array.of

将一组值转换为数组

let arr1 = Array(3)
let arr2 = Array.of(3)
console.log(arr1,arr2)

4,find findIndex()

findIndex()
查找符合条件的元素，如果某元素符合条件，就会返回该元素的索引值，否则返回-1

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

findlast findLastIndex()

findLastIndex()
从右向左进行遍历，之后返回一个条件符合的元素的位置
与上面相同

对象扩展

对象简写

let obj = {
	name,
	test1(){
	}	
}

对象属性

ES6简写获取对象的属性

{
  getName() { return "Luke" },
  getAge() {return 24 }
}

对象的扩展运算符

对象的扩展运算符和上面的数组扩展运算符相似
对象的扩展运算符可以执行遍历的操作

let m = {a:3,b:4};
let n = {...z};
console.log(n);//a返回3，b返回4

Object.assign

可以合并多个对象
例如

var arr1  = {a : 1}; 
var arr2 = {b : 2}; 
var arr3 = {c : 4};
var arr4 = {d : 5}; 
Object.assign(arr1,arr2,arr3,arr4);
//结果返回为{a : 1 , b : 2 , c : 4, d : 5}

Object.is

判断两个值是否相同
例如

Object.is('a', 'a');

只要相同，就返回true
特别

Object.is(0, -0);

返回值为false

Object.is(null, null);
返回值为true

ES6函数的扩展

函数参数的默认值

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

如上，本应该输入三个参数，但实际只输入了一个参数，后面两个参数存在默认参数，在运行时直接套用

rest参数 剩余参数

此处剩余参数和上面的剩余参数概念大致相似
例如

function foo(x,y,...args){
  console.log(args)
}
foo(1,2,3,4);  

这里args返回【3，4】

箭头函数

以往的函数可以简写成箭头的形式
如：(a,b)=>{执行语句}

1，只有return可以省略

2，当只有一个参数时，可以省略小括号，当只有一行执行语句时，同时不写return，语句的返回结果就是返回值：(a)=>{return a*a}简写为a=>a*a

3，无法访问arguments，无法new

4，箭头没有this

this执行父作用域

Symbol

Symbol是ES6一种新的原始数据类型

使用Symbol作为对象属性名

let name = Symbol()
let age = Symbol()
var obj = {
	[name]:"xiaoming"
	[age]:"100"

Symbol函数可以接受一个字符串作为参数，表示对Symbol实例的描述主要是为了在控制台显示，便于区分

对象中的Symbol可以确保不同对象中可以有相同的属性名

1，不能进行运算

console.log(s1>"aaaaa")

2，显示调用toString()

console.log(s1.toString()+"aaaa")

3，Symbol.for()可以重新使用同一个name值

var obj = {
	[Symbol.for("name")]:"xiaoming",
	[Symbol.for("age")]:100
}
console.log(obj[Symbol.for("name")])

lterator迭代器

1，为各种数据结果提供一个统一的，渐变的数据接口

Array Arguments Set Map String TypedArray NodeList

2，使得数据结果的成员能够按某种次序排列

3，ES6创造了一种新的遍历命令for...of循环，lterator接口主要提供for...of循环

let a = ['A','B','C'];
for(let i of a)
    console.log(i) // i 保存Value

for(let i in a)
    console.log(i) // i 保存Key

Set

类似于数组，但成员的值都是唯一的，没有重复的值

set基本属性

let s1 = new Set([1,2,3,4,5])
console.log(s1)

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

其他属性

add

s.add()可以在括号内添加元素
例如

s1.add(5).add(6)

可以直接给其添加元素

has

s.has()可以判断是否含有括号内的目标元素
返回值为boolean值（true或者false）

delete

s.delete()可以删除括号内的元素

Map

类似于对象，也是键值对的集合，但“键”的值可以包括含对象在内的各种类型的值

Map基本

let m = new Map([
["name","kerwin"],
["age",100],
[{a:1},"大连"]
]) 

其他属性

set get has delete size clear

Proxy代理

它的作用是在对象和对象的属性值之间的一个代理，获取该对象的值或者设置该对象的值，以及实例化等操作都会被拦截，可以经过这一层统一处理，我们可以认为它是代理器

get方法

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

set方法

let target = {}
let proxy = new Proxy(target,{
	set (target,key,value){
		console.log("set",target,key,value)
		if(key==="data"){
			box.innerHTML = value
		}
		target[key] = value
	},

Reflect

Reflect可以用于获取目标对象的行为，它与Object类似，但是更易读，为操作对象提供了更优雅的方式，与Proxy对应

代替Object的某些方法

const obj = {
}
Reflect.definedProperty(obj.'name',{
	value:'xiaoming')
	writable:false,
	configurable:false
})

修改某些Object方法返回结果

老写法：delete obj.name
新写法：Reflect.delectProperty(obj."name")

与Proxy配合

例如

let target = new Set()
const proxy = new Proxy(target,{
	get(target,key){
		const value = Reflect.get(target.key)
		if (value instanceof Function){
			console.log(`访问${value}方法`)
			return value.bind(target)
		}
		return value
	},
	set(){
		return Reflect.set(...arguments)
	}
})
proxy.add(1)
let arr = [1,2,3]
let proxy = new Proxu(arr,{
	get(target,key){
		coonsole.log('get',key)
		return Reflect.get(...arguments)
	}
	set(target,key,value){
		console.log('set',key,value)
		return Reflect.set(...arguments)
	}
})

Promise

Promise是异步编程的一种解决方案，比传统的解决方案，回调函数，更合理，更强大。

指回调函数方式更灵活
解决异步回调函数的问题

回调地狱

当一个回调函数嵌套一个回调函数的时候，就会出现一个嵌套结构，当出现多层嵌套时就回出现回调地狱的情况

例如
这是一个promise的使用方法

promiseClick()
.then(function(data){
    console.log(data);
    return runAsync2();
})
.then(function(data){
    console.log(data);
    return runAsync3();
})
.then(function(data){
    console.log(data);
});

promise可以简化层层回调的写法

Generator函数

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

基本语法

function *gen(){
	yield "aaa"
	yield "bbb"
	return "ccc"
}
let g = gen()
let res1 = g.next()
console.log(rest1)
let res2 = g.next()
console.log(rest2)
let res3 = g.next()
console.log(rest3)
	

调用此函数之后，该函数并不执行，也不返回函数运行结果，而是指向内部状态的指针对象

class

类的写法

class Person{
	constructor(name,age){
		this.name = name;
		this.age = age;
	}
	say(){
		console.log(this.name.this.age)
	}
}
let obj = new Person("xiaoming",100)

类的继承

父元素继承

class Parent {
    constructor(name, age) {
        this.name = name
        this.age = age
    }

    say () {
        console.log(this.name)
    }
}

子类继承

class Son extends Parent {
   
}
const m = new Son('Jee', 20)
console.log(m) 
m.running() 

moudle模块化

异步加载，私密不漏（导入的时候不进行导出），重名不怕（导出的时候进行重命名操作），依赖不乱
例如，一个html文档中还存在其他的多个JS文档链接

导入1.js中的方法

import xiaomingA1 from './1.js'
import xiaomingA1 from './2.js'
import xiaomingA1 from './3.js'
console.log(obj,test1,test2)

通过模块化的引入，可以使各个变量不会相互影响

模块化

JS现在有两种模块，一种是ES6模块，另一种是CJS模块

CJS是NodeJS专用的，与ES6模块不兼容，两者最明显的差异是CJS使用require()和moudle.exports,ES6模块使用import和export

ES6模块不是对象，而是通过export命令显示指定输出的代码，再通过import命令输入

写法1

export default A1
import a1 from"./1.js"

写法2

export {A1,A2}
import {A1,A2} from"./1.js"
import {A1 as a1,A2 as a2}from"./1.js"
import *as obj from "./1.js"
console.log(obj)