WEB前端ES6知识点【笔记】

目录

前言

声明变量

let变量

const声明变量

变量的解构赋值

 ES6新引入字符串

 简化对象写法

ES6箭头函数及声明特点

案例

---

前言

自学尚硅谷前端ES6

web前端自学ES6部分，简单记一点电子笔记，加油!!!

ES全称EcamScript，是脚本语言规范。语法简介，功能丰富，适合框架开发应用。ES6变动较大，加入新语法，更简洁高效，具有里程碑意义。

兼容性查询网址http://kangax.github.io/compat-table/es6/

声明变量

let变量

1. let a;
2. let a,b,c;
3. let e=100;
4. letf=521,g='iloveyou',h=[];

1.  变量不能重复声明
2. 为块级作用域，只在代码块里有效（if else while for {} )
3. let声明变量不存在变量提升（不允许在声明变量前使用变量，var声明变量存在变量提升，会输出undefined）
4. 不影响作用域链效果

let遍历经典案例
 <div class="one">
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
 </div>

var items=document.getElementsByClassName('item');
        for(var i=0;i<items.length;i++){
            items[i].onclick=function(){
                this.style.background='pink';
                // 用var时不能用后边这个,用let时可以用这个   items[i].style.background='pink';
            }
        }
        // console.log(i);
        for(let i=0;i<items.length;i++){
            items[i].onclick=function(){
                // this.style.background='pink';
                items[i].style.background='pink';
            }
        }
        // 用var时相当于如下，会产生自增到3，选不上
        {var i=0}
        {var i=1}
        {var i=2}
        用let时相当于
        {let i=0
            items[i].onclick=function(){
                items[i].style.background='pink';
        }}
        {let i=1
            items[i].onclick=function(){
                items[i].style.background='pink';
        }}
        {let i=2
            items[i].onclick=function(){
                items[i].style.background='pink';
        }}

const声明变量

1. 一定要赋初始值
2. 一般常量要大写（潜规则 const A=10；）
3. 常量值不能修改（常量：不能修改的量）
4. 块级作用域（只在作用域内有效）
5. 对于数组和对象元素修改，不算做对常量的修改，不会报错

变量的解构赋值

ES6允许按照一定模式从数组和对象中提取值，对变量进行赋值，这被称为解构赋值

• 数组的解构

const F4=['A','B','C','D'];
let [a,b,c,d]=F4;
console.log(a);  //A

• 对象的解构

const lyy={
    name:'懒洋洋',
    age:'12',
    eat:function(){
       console.log('我爱青草蛋糕');
    }
 }
    let {name,age,eat}=lyy;
       console.log(name);

    let {eat}=lyy;
       eat();

 ES6新引入字符串

1.  `` 反引号  let str=`我`
2. 内容中可以直接出现换行符（es5中用+连接）
3. 可以直接进行变量拼接

 语法 ：`${变量名}拼接的内容`

let like=`苹果`;
let out=`${like}是我最喜欢的水果`;
console.log(out);

 简化对象写法

ES6允许在大括号里面直接写入变量和函数，作为对象的属性和方法，更加简洁

let name='张三';
      let change=function(){
        console.log('我');
      }

      const school={
        name,    //相当于name:name,
        change,
        improve(){
            console.log('你');
        }

improve:function(){

            console.log('你');

        }

ES6箭头函数及声明特点

ES6允许使用箭头  =>  定义函数

let fn=function () {

}    //之前

let fn= () => {

}    //简写，括号里放形参，调用方式不变

特性：

1. this是静态的      this始终指向汉书声明时所在作用域下的this的值
2. 不能作为构造函数
3. 不能使用arguments变量
4. 箭头函数简写  (a.省略小括号：当形参有且只有一个的时候) (b.省略花括号：当代码体只有一条语句时，此时return必须省略，且语句的执行结果就是函数返回值）

function getName1(){
    console.log(this.name);
}
let getName2=()=>{
    console.log(this.name);
}
window.name='HELLO';
getName1();  //HELLO
getName2();  //HELLO
const school={
    name:'你好',
}
getName1.call(school);  //你好
getName2.call(school);  //HELLO

call可以改变函数的this指向
函数名.call(作用域名）;

// 不可以作为构造实例对象
let preson=(name,age)=>{
    this.name=name;
    this.age=age;
}

let me=new preson(xiaomi,18);
console.log(me);   //xiaomi is not defined

// 不能使用argunments对象
let fn=()=>{
    console.log(argumenys);
}
fn(1,2,3);   //argumenys is not defined

// 单个变量时可以去掉小括号
 let add=n=>{
   return n+n;
 }

let result=add(6);
   console.log(result); 

// 只有一行代码时可以去掉大括号，也要去掉return
let pow=(n)=>{
   return n*n;
 }
   console.log(pow(9));

let pow=(n)=>n*n;
   console.log(pow(9));

箭头函数适合与this无关的回调（定时器，数组的回调方式...）

不适合与this有关的回调（事件回调，对象的方法...）

案例

• 点击div 2s后变色

let ad=document.getElementById('ad');
ad.addEventListener("click",function(){
    let _this=this;
    setTimeout(function(){
        console.log(this);
        _this.style.background='pink';
    },2000)
});

• 数组返回偶数

const arr=[3,5,9,45,69,78,54,887,455,258,4,6,9,7];
const result1=arr.filter(function(bbc){
    if(bbc%2===0){
        return true;
    }else{
        return false;
    }
});
console.log(result1);

//箭头函数
const result2=arr.filter(item=>{
    if(item%2===0){
        return true;
    }else{
        return false;
    }
});
console.log(result2);

//箭头函数简写
const result3=arr.filter(item2=>item2%2===0);
console.log(result3);