es6
# es6
# 作用域
作用域(scope)规定了变量能够被访问到的范围，离开了这个范围变量便不能被访问，作用域分为全局作用域和局部作用域
# 块级作用域
es6的概念 ， 用{} 内的代码快
注意
var 声明的变量不具有块级作用域作用
# 申明变量区别
letvarconst
var 声明的变量不具有块级作用域、let具有块级作用域
var 申明变量，可以重新定义申明变量名 、let不行
var 申明的变量，相当于window添加属性，let直接就是变量
const 申明的变量不能改变所以称为常量
# 作用域链
对变量的正确赋值使用
function fn(){
function fun(){
consolo.log(m);
}
}
2
3
4
5
如果当前作用域不存在一个变量，就会向上级作用域查找
函数执行时会开辟一个空间，函数内部也可以开辟空间--形成作用域链
作用域链： 由作用域链串联起来的链状结构
误区示例
case 1
let num = 1;
function f1(){
num=2;
function f2(){
num = 3;
}
f2();
}
f1();
console.log(num);//3
2
3
4
5
6
7
8
9
10
case 2
let num = 1;
function f1(){
let num=2;
function f2(){
num = 3;
}
f2();
}
f1();
console.log(num);//1
2
3
4
5
6
7
8
9
10
函数内的代码需要调用才会执行
case 3
let num = 1;
function f1(){
num=2;
function f2(){
let num = 3;
}
f2();
}
f1();
console.log(num);//2
2
3
4
5
6
7
8
9
10
# 闭包
闭包：一个作用域有权访问另一个作用域的局部变量
作用：延伸变量的使用范围
function f1(){
let num = 1;
return function f2(){
console.log(num);
}
}
const b = f1();
b();//1
2
3
4
5
6
7
8
回调函数
function fn(a){
let num=1;
a(num);
}
fn(function (n){console.log(n);});
2
3
4
5
# 预解析
console.log(n)//undefined
var n=2;
fn()//2
function fn(){
console.log(n)
}
2
3
4
5
6
预解析：在代码执行之前，先要预解析，解析变量和函数
# 变量提升
变量会把代码声明的变量，提前解析到作用域最前面
只定义，不赋值
注意
let 申明的变量需要初始化 （会预解析但无法使用）
# 函数预解析
会把代码中具有名字的函数提前解析，解析到作用域最前面
只定义，不调用
注意
函数优先
# 误区示例
case 1
console.log(n);//undefined
fn();
var n = 3;
function fn(){
cosole.log(n);//undefined
var n = 6;
}
2
3
4
5
6
7
case 2
console.log(a);//function a(){}
function a(){}//函数优先
var a = 2;//覆盖
console.log(a);//2
2
3
4
# es6 函数
# 参数默认值
形参没有接收实参，那么形参的值是 undefined
es6 可以设置参数的默认值
function f(uname='yuadh',uid=404){}
# 动态参数
arguments 是一个伪数组 ，对应的实参
function f(){
}
f(1,2,3,4);
2
3
4
函数内置 arguments
# 剩余参数-...
概念1
function f(a,b,c,d,e,f){
console.log(a,b,c,d,e,f);//undefined,2,3,4,5,6
}
f(,2,3,4,5,6)
2
3
4
概念2
function f(a,b...c){
console.log(a,b,c);//1,2,[3,4,5,6]
}
f(1,2,3,4,5,6)
2
3
4
function f(...a){
console.log(a);//真数组相当于 arguments
}
f(1,2,3);
2
3
4
# 箭头函数
let fn = function (a,b){}
let fn = (a,b) => {}
2
省略极简形式
- 只有一个参数可以省略括号
- 只有一行代码可以省略大括号，会自动返回结果
let fn = a => a*a;
console.log(fn(6));//36
2
应用场景
- 定时器 函数
window.setInterval(()=>{...},1000)
注意
箭头函数里不存在
arguments，使用剩余函数代 替...arg箭头函数中不存在
this，而箭头函数中的this指向所在定义域的this-let flet obj = { uname: 'yuadh', age: 22, f: function() { window.setInterval(function() { console.log(this); }, 1000) } } obj.f();//window1
2
3
4
5
6
7
8
9
10let obj = { uname: 'yuadh', age: 22, f: function() { window.setInterval(() => { console.log(this); }, 1000) } } obj.f();//obj1
2
3
4
5
6
7
8
9
10如果涉及到
this调用时 ，尽量不要使用箭头函数let btn = document.querySelector('input') btn.addEventListener('click',()={ this.style.background = 'red'; //报错 指向对象是 window })1
2
3
4
# 解构赋值
解构赋值：解开数据解构赋值给变量
- 数组解构
let [a,b,c,d]=['yuadh','ed','ee','zz']
console.log(a,b,c,d);\\
2
case 1:变量多值少
前边的值一一对应、未赋值的变量为 undefined
case 2：变量少值多
一一对应
case 3：按需取值
let [,,a,b] = ['yuadh','ed','ee','zz']
//
let [,a,b,[,c,d]] = ['yuadh','ee','zz',['yy','dd','hh']]
2
3
case 4：剩余值
let [,a,b,...c]=['yuadh','ee','zz','yy','dd','hh']
console.log(a,b,c)//out - ee zz Array(3) [ "yy", "dd", "hh" ]
2
对象解构赋值
把属性名当作比变量名即可
let {uname,age} = {
uname : 'yuadh',
age:22,
sex:'man',
index:1
}
//可通过 `uname:username` 给变量改名字
console.log(username,age);//out - 'yuadh' ,22
2
3
4
5
6
7
8
up
let {dog:{uname}} = {
uname : 'yuadh',
dog : {
uanme:'z',
age : 1
},
age:22,
index:1
}
console.log(uname);//out - z
2
3
4
5
6
7
8
9
10
使用
function person({uname,age,sex}){
console.log('woshi${uname}zz${age}dc${sex}');
}
person({{uname:'yuadh',age:22,sex:'man'})
2
3
4