1 变量声明
使用let声明变量不能重复,不存在变量提升,即不允许在变量声明之前使用变量;不影响作用域链
2 块级作用域(全局,函数,eval)
块级作用域:由{}包括
(1)ES5之前的if和for没有块级作用域的概念,需要借助function的作用域解决应用外面变量的问题
(2)ES6中加入了let,let有if和for 的块级作用域
注:
1、var定义的变量没有块的概念,可以跨块访问,不能跨函数访问
2、let定义的变量吗,只能在块作用域里访问,不能跨块访问,也不能跨函数访问
3、const定义常量,一定要赋初值,只能在块作用域访问,不能修改
当const定义的为对象时,指向的对象不能更改,但是可以改变对象内部的属性
3 解构赋值
ES6允许按照一定模式从数组和对象中提取值,对变量进行赋值
const F4=[1,2,3,4]
let [xiao,xia,xi,xixi]=F4
4 模板字符串
`` %内容中可以出现换行符
%变量拼接
let lovest=`xiezihan`
let age=`${lovest}18`
5 箭头函数
不能作为构造函数实例化对象,不能使用arguments变量
const ccc=(参数列表)=>{}
const add=(num1,num2)=>{return num1+num2}
this指向
this是静态的,this始终指向函数声明时所在作用域下的this值
箭头函数中的this引用的是最近作用域中的this
const obj={
aaa(){
setTimeout(
function(){
console.log(this); %this指向windows对象,因为call方法将window作为第一个参数传入
})
setTimeout(()=>{
console.log(this); %为aaa函数的作用域,aaa在obj对象内定义,因此aaa的this指向对象
})
}
}
箭头函数的简写
(1)省略小括号
当形参有且只有一个时
(2)省略大括号
当代码体只有一条语句时,此时return必须省略
6 函数
(1)函数的参数可以赋予默认的初始值
(2)rest参数用于和获取函数的实参
function(...args){}
扩展运算符(…)
[…]扩展运算符能将数组转换成逗号分隔的参数序列
7 Symbol
特性:
(1)值是唯一的,可以解决命名冲突
(2)不能与其他数据进行运算
(3)定义的对象属性不能使用for…in遍历,但可以使用Reflect.ownKeys获取对象的所有键名
let s=Symbol()
let s2=Symbol().for()
使用场景:给对象添加属性和方法
8 迭代器
for…in 和for …of区别
(1)in取出的是键名
(2)of取出的是键值
原理: 创建一个指针对象指向当前数据结构的起始位置,然后调用next方法指向数据结构中的第一个成员,不断调用next,直到指向最后一个成员
<script>
const s={
name:'1',
ss:[1,2,3],
[Symbol.iterator](){
let _this=this
let index=0;
return {
next:function(){
if (index<_this.ss.length)
{
const result={value: _this.ss[index],done:false}
index++
return result
}else{
return{value:undefined,done:true}
}
}
}
}
}
for (let v of s){
console.log(v);
}
</script>
9 生成器(常用于异步编程)
function one(){
setTimeout(()=>{
console.log(111);
iterator.next()
},1000)
}
function two(){
setTimeout(()=>{
console.log(222);
iterator.next()
},1000)
}
function three(){
setTimeout(()=>{
console.log(222);
iterator.next()
},1000)
}
function * gen(){
yield one();
yield two();
yield three();
}
let iterator=gen()
iterator.next()
iterator.next()
iterator.next()
10 Promise
(1)读取文件
const p=new Promise((resolve,reject)=>{
fs.readfile("",(err,data)=>{
if (err) reject(err);
resolve(data);
})
})
p.then(function(res){console.log(res)},function(err){console.log('')})
(2)封装ajax
//1、创建对象
const xhr=new XMLHttprequest();
//2、初始化
xhr.open("get","")
//3、发送
xhr.send();
//4、绑定事件
xhr.onreadystatechange=function(){
if(xhr.readyState===4)
{
if(xhr.statue>=200&&xhr.statue<300)
{
console.log(xhr.response)
}
}
}
封装成Promise:
const p=new Promise((resolve,reject)=>{
//1、创建对象
const xhr=new XMLHttprequest();
//2、初始化
xhr.open("get","")
//3、发送
xhr.send();
//4、绑定事件
xhr.onreadystatechange=function(){
if(xhr.readyState===4)
{
if(xhr.statue>=200&&xhr.statue<300)
{
reslove(xhr.response)
}
else{
reject(xhr.status)
}
}
}
})
})
注:
(1)then方法的返回结果是Promise对象,对象状态由回调函数的执行结果决定
(2)返回非promise类型的属性,状态为成功
11 Set
类似于数组,值是唯一的
包含属性:add、delete、has、clear
数组去重
let arr=[1,2,3,4,5,1]
let res=[...new Set(arr)]
交集
let arr=[1,2,3,4,3,3,2]
let arr2=[1,1,1,1,1]
let result=[...new Set(arr)].filter(item=>{
let s2=[...new Set(arr2)]
return (s2.has(item))
})
12 Map
let m=new Map()
m.set('name','')
13 类
//ES5
function phone(brand,price){
this.brand=brand,
this.price=price
}
Phone.probetype.call=function(){
console.log(1)
}
let huawei=new Phone()
//ES6
class Phone{
constructor(){
}
}
static声明属性属于类而不属于实例化对象
类继承
class Phone{
constructor(brand,price){
this.brand=brand
this.price=price
}
call(){
console.log(1);
}
}
class SmartPhone extends Phone{
constructor(brand,price,color,size){
super(brand,price)
this.color=color
this.size=size
}
photo(){
console.log(111);
}
}
const iphone=new SmartPhone('apple',5999,'white','6.1')
console.log(iphone.call);
getter和setter
注:setter必须要有一个参数
getter属性在获取对象属性时触发,setter属性在变更对象属性时触发
数值类型转换:parseInt、parseFloat
对象方法扩展
(1)Object.is:判断对象是否相等
(2)Object.assign:合并对象