阅读 51

有关ES6的语法和用途(ES6笔记)

2.1 let 关键字

  • 不允许重复声明
  • 块级作用域
  • 不存在变量提升
  • 不影响作用域链

应用场景:声明时候用let就对了

2.2 const 关键字

  • 生命必须赋予初始值
  • 标识符一般为大写
  • 不允许重复声明
  • 值不允许修改
  • 块级作用域

注意:对象属性修改和数组值修改不会引发const报错

应用场景:声明对象类型使用const,非对象类型生命用let

2.3 变量的解构赋值

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

如:

//--数组的解构赋值--
const arr = ['one','two','three','four'];
let [one ,two,three,four] = arr;
//相当于
    let one = 'one';
    let two = 'two';
    let three = 'three';
    let four = 'four';
//--对象的解构赋值--
    const lin = {
        name: '郭采洁',
        tags: ['小时代1','小时代2','小时代3','演员','歌手']
    }
    let {name, tags} = lin;
//相当于
    let name = '郭采洁';
    let tags = ['小时代1','小时代2','小时代3','演员','歌手'];
//--复杂解构--
    let jack = {
        name: 'jack',
        age: 18,
        songs: ['song1','song2','song3','song4'],
        history: [
            {name: 'history1'},
            {name: 'history2'},
            {name: 'history3'},
        ]
    };
    let {songs: [one,two,three],history:[first,second,third]} = wangfei;
//相当于:
let one = 'song1';
let two = 'song2';
let three = 'song3';
let history = [
    {name: 'history1'},
    {name: 'history2'},
    {name: 'history3'},
];
let first = {name: 'history1'};
let second = {name: 'history2'};
let third = {name: 'history3'};

复制代码

注意:频繁使用对象方法、数组元素、就可以使用解构赋值形式

2.4 模板字符串(用反引号``标识)

特点:

  • 字符串可以出现换行符
  • 可以使用${}形式输出变量

如:

let name = '刘宇';
let str = `
<ul>
    <li>周柯宇</li>
    <li>米卡</li>
    <li>赞多</li>
    <li>${name}</li>
</ul>
`
复制代码

注意:当遇到字符串与变量拼接的情况要使用模板字符串

2.5 简化对象写法

es6允许在大括号里面,直接写入变量和函数

如:


    let name = "fairy";
    let slogon = "永远的fairy";
    let improve = function() {
        console.log("可爱美丽有大方");
    }
    // 属性和方法简写
    let fairy = {
        name,
        slogon,
        improve,
        change() {
            console.log("永远的小姐姐");
        }
    }
    console.log(fairy)
复制代码

注意:对象简写形式简化了代码,所以以后简写

2.6 箭头函数

ES6 允许使用[箭头] (=>) 定义函数

    /**
    * 1、通用写法
    */
    let fn = (arg1,arg2,arg3) => {
        return arg1 + arg2 + arg3;
    }
     /**
    * 2、省略小括号的情况
    */
    let fn2 = num => {
        return num + 2;
    }
    /**
    * 3、省略花括号的情况
    */
    let fn3 = score => score * 20;
    /** 
    * 4、this指向声明时所在作用域中this的值
    */
    let fn4 = () => {
        console.log(this);
    }
    let school = {
        name: 'fairy',
        getName() {
            let fn5 = () => {
                console.log(this.name);
            }
            fn5();
        }
    }
复制代码

注意:

  • 如果形参只有一个,那么小括号可以省略
  • 函数体如果只有一条语句,则花括号可以省略,函数的返回值为该条语句的执行结果
  • 箭头函数的this指向声明时所在作用域下this的值
  • 箭头函数不能作为构造函数实现实例化
  • 5、不能使用arguments

注意:rest参数

ES6引入rest参数,用于获取函数的实参,用来代替arguments

    /**
    * 作用与arguments类似
    */
    function add(...args) {
        console.log(args)
    }
    add(1,2,3,4,5);
    /**
    * rest参数必须是最后一个形参
    */
    function minus(a,b, ...args) {
        console.log(a,b,args);
    }
    minus(100,101,1,2,3,4,5,6);
复制代码

注意:其中 args 为数组,代表 arguments和rest参数,都为数组 rest参数非常适合不定个数参数函数使用

2.8 spread扩展运算符

扩展运算符(spread)也是三个点(...)。好比rest参数的逆运算,将一个数组转为用逗号分割的序列,对数组进行解包。


    /**
    * spread展开数组
    */
    let tfboys = ["fairy", "jack","race","lisa"]
    function fn() {
        console.log(arguments);
    }
    fn(...tfboys);
    /**
    * 展开对象
    */
    let skillOne = {
        fairy: 'FAIRY'
    }
    let skillTwo = {
        jack: "JACK"
    }
    let skillThree = {
        race: "RACE"
    }
    let skillFour = {
        lisa: "LISA"
    }
    let gailun = {...skillOne,...skillThree,...skillTwo,...skillFour};
    console.log(gailun)
复制代码

2.9 Symbol

ES6引入了一种新的原始数据类型 Symbol,表示独一无二的值,是JavaScript语言的第七种数据类型,是一种类似于字符串的数据类型。

Symbol的特点

  • Symbol的值是唯一的,用来解决命名冲突的问题
  • Symbol值不能与其他数据进行运算
  • Symbol定义的对象属性不能使用for ...in循环遍历,但是可以使用 Reflect.ownKeys来获取对象的所有键名

如:

    let s1 = Symbol();
    console.log(s1, typeof s1);//Symbol() "symbol"
    // 添加标识的 symbol
    let s2 = Symbol('fairy');
    let s2_2 = Symbol('fairy');
    console.log(s2 == s2_2)//false
    // 使用Symbol for定义
    let s3 = Symbol.for('fairy');
    let s3_2 = Symbol.for('fairy');
    console.log(s3 == s3_2);//true
复制代码

注意:遇到唯一性的场景时要想到 Symbol

2.10 迭代器

遍历器(Iterator)就是一种机制,它是一种接口,为各种不同的数据结构提供统一的访问机制,任何数据结构只要部署Iterator接口,就可以完成遍历操作。

1、ES6创造了一种新的遍历命令for ...of循环,Iterator接口主要供for ...of消费

2、原生具备iterator接口的数据(可用for of 遍历)

  • Array
  • arguments
  • set
  • map
  • string
  • typedArray
  • NodeList

注意:需要自定义遍历数据的时候,要想到迭代器

2.11 生成器 如:

function * gen() {
        yieId : '一直没有耳朵';

        yieId : '一直没有尾巴';
    
        return '真奇怪';
    }
    let iterator = gen();
    console.log(iterator.next());
    console.log(iterator.next());
    console.log(iterator.next());
复制代码

2.12 Promise

是ES6引入的异步编程的新解决方案,promise是一个构造函数 用来封装异步操作并可以获取其失败或成功的记过,

promise构造函数:promise(excutor){}
promise.prototype.then方法
promise.prototype.catch方法
复制代码

2.13 Set

数据结构(set),类似数组,成员的值都是唯一的,集合实现了 iterator接口,可使用[扩展运算符]和[for...of...]进行遍历,集合的属性和方法:

  • size 返回集合的元素个数
  • add 新增一个新元素,返回当前集合
  • delete 删除元素 返回boolean值
  • has 检测集合中是否包含某个元素,返回boolean值
  • clear 清空集合返回Undefined

如:

    // 创建一个空集合
    let s = new Set();
    // 创建一个非空集合
    let s1 = new Set([1,2,3,1,2,3])
    // 返回集合的元素个数
    console.log(s1.size);//3
    // 添加新元素
    console.log(s1.add(4));//set{1,2,3,4}
    // 删除元素
    console.log(s1.delete(1));//true
    // 检测是否存在某个值
    console.log(s1.has(2));//true
    // 清空集合
    console.log(s1.clear());//undefined
复制代码

2.14 Map

es6提供了map数据结构,类似于对象,键值对的集合,但是“键”的范围不限于字符串,各种类型的值(包括对象)都可当做“键”,也可以使用[扩展运算符]和[for...of...]进行遍历。map的属性和方法

  • size 返回map的元素个数
  • set 增加一个新元素,返回当前map
  • get 返回键名对象的键值
  • has 检测map中是否包含某个元素,返回boolean值
  • chear 清空集合返回Undefined

如:

    // 创建一个空map
    let m = new Map();
    // 创建一个非空map
    let m2 = new Map([
        ['name','fairy'],
        ['flogon','超级无敌宇宙最可爱']
    ]);
    // 获取映射元素的个数
    console.log(m2.size);//2
    // 添加映射值
    console.log(m2.set('age', 6))//map(3){"name" => "fairy","flogon" => "超级无敌宇宙最可爱","age" => 6}
    // 获取映射值
    console.log(m2.get('age'))// 6
    // 检测是否有该映射
    console.log(m2.has('age'))// true
    // 清除
    console.log(m2.clear())//undefined
复制代码

2.15 class类

es6提供了更接近传统语言的写法,引入了class(类)概念

如:

// 父类
    class Phone {
        // 构造方法
        constructor(brand, color, price) {
            this.brand =  brand;
            this.color = color;
            this.price = price;
        }
        // 对象方法
        call() {
            console.log('我可以打电话')
        }
    }
    // 子类
    class SmartPhone extends Phone {
        constructor(brand, color, price, screen, pixel) {
            super(brand, color, price);
            this.screen = screen;
            this.pixel = pixel;
        }
        // 子类方法
        photo() {
            console.log("我可以拍照");
        }
        playGame() {
            console.log("我可以玩游戏")
        }
        // 方法重写
        call() {
            console.log("方法重写")
        }
        // 静态方法
        static run() {
            console.log("我可以正常运行")
        }
        static connect() {
            console.log("我可以建立连接")
        }
    }

    // 实例化对象
    const Nokia = new Phone('洛基亚','灰色',230);
    const iPhone6s = new SmartPhone('苹果','白色', 6088,'4.7inch','500w');
    // 调用子类方法
    iPhone6s.playGame();//我可以玩游戏
    // 调用重写方法
    iPhone6s.call();//方法重写
    // 调用静态方法
    SmartPhone.run();//我可以正常运行
复制代码
文章分类
前端
文章标签