Es6学习笔记（1）

1.let声明变量

  • let关键字是用于声明变量(存在作用域,不能进行变量提升)，作用与var基本一样

代码展示

//声明变量
let a = 1;
let b,c,d;
let e = 100;
let f = 521, g = 'iloveyou', h = [];//赋值，字符串，数组

//1. 变量不能重复声明
// let star = '罗志祥';
// let star = '小猪';

//2. 块级作用域  全局, 函数, eval
// if else while for 
// {
//     let girl = '周扬青';
// }
// console.log(girl);

//3. 不存在变量提升(let直接报错)
// 什么是变量提升呢：就是先调用变量，在声明变量，浏览器就会输出一个undefined
// console.log(song);
// let song = '恋爱达人';

//4. 不影响作用域链
{
    let school = '尚硅谷';
    function fn(){
        console.log(school);
    }
    fn();
}
console.log(a);

结果展示:

image
image
image

2.const声明变量

  • const声明一个只读的常量。一旦声明，常量的值就不能改变。
  • const一旦声明变量，就必须立即初始化，不能留到以后赋值
  • const的作用域与let命令相同：只在声明所在的块级作用域内有效。
  • const命令声明的常量也是不提升，同样存在暂时性死区，只能在声明的位置后面使用。

3.解构赋值

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

代码展示:

//1. 数组的结构
const F4 = ['小沈阳','刘能','赵四','宋小宝'];
let [xiao, liu, zhao, song] = F4;
console.log(xiao);
console.log(liu);
console.log(zhao);
console.log(song);

//2. 对象的解构
const shan = {
    name: '赵本山',
    age: '不详',
    xiaopin: function(){
        console.log("我可以演小品");
    }
};

let {name, age, xiaopin} = shan;

console.log(name);
console.log(age);
console.log(xiaopin);
xiaopin();

// 这可以让我们的代码写起来更加的简洁

结果展示:

image

4.模板字符串

  • ES6 引入新的声明字符串的方式 『``』 ‘’ “”
  • 作用:
    • 简化字符串的拼接
    • 使用``对字符串进行拼接
    • 变量的部分使用${xxx}代替

代码展示:

//1. 声明字符串
let a = `我也是一个字符串哦!`;
console.log(a, typeof a);

//2. 内容中可以直接出现换行符,而var则需要用'+'来进行拼接，非常的麻烦
let str = `<ul>
            <li>沈腾</li>
            <li>玛丽</li>
            <li>魏翔</li>
            <li>艾伦</li>
            </ul>`;
console.log(str);

//3. 变量拼接(可以直接进行变量的拼接，不需要再借助+，固定格式${变量名})
let lovest = '魏翔';
let out = `${lovest}是我心目中最搞笑的演员!!`;
console.log(out);

结果展示:

image

5.对象的简化写法

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

// 1.首先在对象外设置变量和方法
let name = '山东蓝翔';
let change = function(){
    console.log('我们可以改变你!!');
}

// 2.在对象中引入设置好的变量和方法
const school = {
    name,
    change,
    // 这里的方法可以省略 :function
    improve(){
        console.log("我们可以提高你的技能");
    }
}
console.log(school);
school.improve();

结果展示:

image

6.箭头函数

  • 特点:
    • 箭头函数无this指向,会向外层寻找this指向,如果它定义在一个对象身上,那么该箭头函数的this就指向该对象,若该箭头函数外层什么也没有就会默认指向windows
    • 相较于传统的定义函数更为简洁
    • 不能作为构建实例化对象
    • 不能使用arguments变量
  • 使用场景:
    • 箭头函数适合与 this 无关的回调. 定时器, 数组的方法回调
    • 箭头函数不适合与 this 有关的回调. 事件回调, 对象的方法

代码展示:

// ES6 允许使用「箭头」（=>）定义函数。
//声明一个函数
let fn = (a,b) => {
    return a + b;
}
// 调用函数
let result = fn(1, 2);
console.log(result);//3

//1. this 是静态的. this 始终指向函数声明时所在作用域下的 this 的值
function getName(){
    console.log(this.name);
}
let getName2 = () => {
    console.log(this.name);
}

//设置 window 对象的 name 属性
window.name = '五邑大学';
const school = {
    name: "wyu"
}

//直接调用
getName();//五邑大学
getName2();//五邑大学

//call 方法调用，call方法：调用指定对象的方法，即将原函数中的this指向目标对象的属性
getName.call(school);//wyu function存在变量提升
getName2.call(school);//五邑大学(因为let没有变量提升,因此它始终指向函数声明时所在作用域下的this值，
// 该函数定义在window下，即它始终指向五邑大学)

//2. 不能作为构造实例化对象
// let Person = (name, age) => {
//     this.name = name;
//     this.age = age;
// }
// let me = new Person('xiao',30);
// console.log(me);

//3. 不能使用 arguments 变量
// let fn = () => {
//     console.log(arguments);
// }
// fn(1,2,3);

//4. 箭头函数的简写
    //1) 省略小括号, 当形参有且只有一个的时候
    let add = n => {
        return n + n;
    }
    console.log(add(9));
    //2) 省略花括号, 当代码体只有一条语句的时候, 此时 return 必须省略
    // 而且语句的执行结果就是函数的返回值
    let pow = n => n * n;
        
    console.log(pow(8));

结果展示:

image

箭头函数的使用场景

  • 定时器复习
    • 1.间隔定时器(每隔一段时间执行一次代码)
      • setInterval(函数，时间) //时间单位是毫秒，每隔设置的时间执行函数里的内容一遍(一直执行)
    • 2.延时定时器(规定时间执行代码)
      • setTimeout(函数，时间) //到达相应是时间执行代码(只执行一遍)
    • 3.关闭定时器和定时器返回值
      • clearTimeout(延时定时器)
      • clearInterval(间隔定时器)
  • filter(函数)方法的作用：对指定数组按照指定的函数方法进行过滤

代码展示:

// 实践1：点击div两秒过后变为粉色
// 获取元素
let div = document.querySelector('.div');
// 注册点击事件
div.addEventListener('click' , function(){
    // 设置两秒的定时器
    setTimeout(() => {
        // 这里用了箭头函数，this静态指向的是外层作用域，即指向点击事件的对应的div，到了外层的function函数，就动态的指向div了
        this.style.background= 'pink';
    }, 2000);
})


// 实践2：返回数组中的偶数
// 复习：filter(函数)方法的作用：对指定数组按照指定的函数方法进行过滤
let arr = [1 , 5 , 6 , 8 , 16 , 12];

// let result = arr.filter((item) => {
//     if (item%2 === 0) {
//         return true;
//     } else {
//         return false;
//     }
// }) 

// 可简写为以下(非常的简单)
let result = arr.filter(item => item%2 === 0);
console.log(result);

// 箭头函数的使用场景：
// 箭头函数适合与 this 无关的回调. 定时器, 数组的方法回调
// 箭头函数不适合与 this 有关的回调.  事件回调, 对象的方法

结果展示:

image