学习ES新特性的原因
语法简介，功能丰富
前端框架上开发应用比较多
前端岗位要求
ES6兼容性查看
声明变量
let方式
let声明不允许重复声明一个变量
let a = '小明'；
let a = '小刚'； //报错
let声明的变量会产生块级作用域,
{
let a = '小李'
}
console.log(a)
//作用域外无法访问作用域内变量
let声明不存在变量提升
console.log(b)
var b = 2 //undefined
变量提升实际执行过程
var b;
console.log(b);
b = 2;
console.log(a)
let a = '111' //不存在提升，报错
let声明不影响作用域链
{
let a = '北京';
function(){
console.log(school)/7
}
fn();//北京
}
const方式
const声明的是常量
const声明一定要赋初始值
常量的值一旦声明就不可修改
const a = 412;
a = 100;
console.log(a) //报错Identifier 'a' has already been declared
const声明也会产生块级作用域
对数组或者对象的元素修改不算做对常量的修改
const arr = ['1','2','3'];
arr.push('4');
console.log(arr) //123
解构赋值
数组解构赋值
const arr = ['1','2'];
let [one,two] = arr;
console.log(one,two) // 1 2
const [a,b] = [1,2]
console.log(a,b) //1 2
对象解构赋值
const people = {
name:"小明",
age:23,
jiNeng:function(){
console.log('我会唱歌')
}
};
let {name,age,jiNeng} = people;
//解构之后节省了代码
jiNeng()//我会唱歌
//解构赋值之前需要people.jiNeng();
模板字符串
let string = `我是一个字符串`;
consooe.log(string);
模板字符串中可以直接换行
let string = `<div>
<p>11<p>
</div>`;
consooe.log(string);
模板字符串使用变量拼接方式
传统方式
let a = '111';
let b= a+'是最帅的'
console.log(b)
模板字符串方式
let a = '小明';
let b= `${a}是最帅的`
console.log(b)
对象简化写法
简化的第一处
let name = '小明';
let fn = function(){
console.log('lalal')
}
//简化前
const obj = {
name:name,
fn:fn
}
console.log(obj)
//简化后
const obj = {
name,
fn
}
console.log(obj)
简化的第二处
const fn = {
name,
fn,
jiu:function(){
console.log('我是简化前的')
},
xin(){
console.log('我是简化后的')
}
}
console.log(fn.jiu)
console.log(fn.xin)
箭头函数
//传统方式
let fn = function(a,b){
return a+b;
}
let result = fn(1,2);
console.log(result)
//箭头函数方式
let fn = (a,b) =>{
return a+b
}
let result = fn(1,2)
console.log(result);
箭头函数中this始终是指向函数声明时所在作用域下的this，无论做出任何更改this始终静态的
//普通函数
function fn(){
console.log(this.name)
}
//箭头函数
let fn1 = () =>{
console.log(this.name)
}
window.name = "我指向window";
const obj = {
name:"我指向对象"
}
//改变俩个函数的this指向
fn.call(obj) //我指向对象
fn1.call(obj) //我指向window
//箭头函数的this还是window上的name，普通函数的this已经成了obj下的name
箭头函数不能作为构造函数实例化对象
let Person = (name,age)=>{
this.name = name;
this.age = age;
}
let a = new Person('小名',23)
console.log(a)
// Person is not a constructor
不能使用arguments参数,用…rest替代，用于获取函数的实参
let fn = (a,b,c) =>{
console.log(arguments)
}
fn(1,2,3)
//arguments is not defined
let fn = (...rest) =>{
console.log(rest)
}
fn(1,2,3)
//[1,2,3]
箭头函数的简写情况，当参数只有一个，当执行语句只有一条
let fn = a => a*a
console.log(fn(4))
箭头函数实例及使用场景
使用场景一 ：this指向问题
//传统方式
let btn = document.getElementById('btn');
btn.addEventListener('click',function(){
//保存this的值
let _this = this
setTimeout(function(){
//此时的this指向window
console.log(this)
//此时_this就是指向btn了
_this.style.background = 'pink'
},2000)
})
//箭头函数方式
let btn = document.getElementById('btn');
btn.addEventListener('click',function(){
setTimeout(()=>{
console.log(this)
//箭头函数的this指向的是事件声明时的作用域
this.style.background = 'pink'
},2000)
})
使用场景二：打印数组中能被二整除的数
//传统写法
const arr = [1,6,5,8,9,100];
const result = arr.filter(function(item){
if(item%2===0){
return true
}else{
return false
}
})
console.log(result)
//箭头函数写法
const arr = [1,6,5,8,9,100];
const result = arr.filter(item => item % 2 ===0);
console.log(result)
参数默认值（初始值）
带有默认值的形参一般位置都比较靠后（规范）
function add(a,b,c=10){
return a+b+c;
}
let result = add(1,2)
console.log(result)
参数默认值可以与解构赋值配合
function content(host,port='3307'){
console.log(host)
console.log(port)
}
content({
host:"localhost",
port:3306
//post这里赋值了，覆盖掉了传参时的3307初始值
})
扩展运算符
…能够将【数组】转换为逗号分割的【参数序列】
实际使用场景
数组合并
const boy = ['小明','小刚'];
const girl = ['小丽','小红'];
//传统合并
const people = boy.concat(girl);
console.log(people)
//扩展运算符方式
const people1 = [...boy,...girl];
console.log(people1)
数组克隆
const arr = ['1','2'];
const arr1 = [...arr]
console.log(arr1)
将伪数组转为真数组
<div></div><div></div>
const btns = document.querySelectorAll('div')
const btns1 = [...btns]
console.log(btns1)
Stmbol类型
是es6中新引入的一种数据类型，表示
独一无二的值,属于基本数据类型
symbol的值不能进行运算
symbol定义的对象属性不能用for…in遍历，但是可以用Reflect.ownKeys来获取对象的所有键名
//普通创建Symbol
let a = Symbol();
console.log(a,typeof a) //Symbol() "symbol"
//查看俩个值相同的symbol是否相等
let a1 = Symbol('小明');
let a2 = Symbol('小明');
console.log(a1 === a2); //false
//Symbpl.for创建
//查看俩个值相同的symbol是否相等
let a3 = Symbol.for('小明');
let a4 = Symbol.for('小明');
console.log(a3 === a4); //true
Symbol属性
Promise
promise是es6引入的异步编程的新的解决方法，语法上promise是一个构造函数，用来封装异步操作可以获取其成功或者失败的结果
promose封装ajax
const p = new Promise((resolve,reject)=>{
//1.创建对象
const xhr = new XMLHttpRequest();
//2.初始化对象
xhr.open('GET','https://api.apiopen.top/getJoke');
//3.发送
xhr.send();
//4.绑定事件，处理响应结果
xhr.onreadystatechange = function(){
//判断
if(xhr.readyState === 4){
//判断响应码是否在200-300之间
if(xhr.status >= 200&& xhr.status <300){
//如果成功
resolve(xhr.response);
}else{
//如果失败
reject(xhr.status)
}
}
}
})
//指定回调
p.then(function(value){
//如果成功则输出值
console.log(value)
},function(reason){
//如果失败则返回响应状态码
console.error(reason)
})