ES6 知识点总结

最新推荐文章于 2024-08-04 16:33:59 发布

淮南King

最新推荐文章于 2024-08-04 16:33:59 发布

阅读量169

点赞数

分类专栏：前端文章标签： javascript es6/es7

本文链接：https://blog.csdn.net/qq_26020387/article/details/106949024

版权

前端专栏收录该内容

1 篇文章 0 订阅

订阅专栏

一、let关键字

作用：与var类似，用于声明变量
特点：

在块作用域内有效。
不能重复声明。
无预处理，不能先使用后声明。

<body>
	<button>测试1</button>
	<button>测试2</button>
	<button>测试3</button>
</body>
<script type="text/javascript">
//console.log(age);// age is not defined
let age = 12;
//let age = 13;不能重复声明
console.log(age);

let btns = document.getElementsByTagName('button');
for(let i = 0;i<btns.length;i++){
    btns[i].onclick = function () {
        alert(i);
    }
}
</script>

二、const关键字

作用：定义常量
特点：不能修改、其他同let关键字

<script type="text/javascript">
    const sex = '男';
    console.log(sex);
    //sex = '女';//不能修改
    console.log(sex);
</script>

三、解构赋值

作用：从对象或数组中提取数据, 并赋值给变量(多个)

<script type="text/javascript">
    let obj = {name : 'zhangsan', age : 18};
    //1.对象的解构赋值
    let {age} = obj;
    console.log(age);
    let {name, age} = {name : 'zhangsan', age : 18};
    console.log(name, age);

    //2. 数组的解构赋值
    let arr = ['abc', 23, true];
    let [a, b, c, d] = arr;
    console.log(a, b, c, d); 

	//3. 给多个形参赋值
	function person({name, age}) {
     console.log(name, age);
    }
    person1(obj);
</script>

四、模板字符串

作用：简化字符串拼接

<script type="text/javascript">
    let obj = {
        name : 'zhangsan',
        age : 18
    };
    console.log(`我叫:${obj.name}, 我的年龄是：${obj.age}`);
</script>

五、简化对象写法

特点：省略同名的属性值、省略方法的function

<script type="text/javascript">
    let x = 1;
    let y = 2;
    //简化的写法
    let obj = {
        x,
        y,
        getPoint(){
            return this.x
        }
    };
    console.log(obj, obj.getPoint());
</script>

六、箭头函数

作用：定义匿名函数。
特点：简洁、没有属于函数本身的this。

<body>
    <button id="btn">测试箭头函数1</button>
    <button id="btn2">测试箭头函数2</button>
</body>

<script type="application/javascript">
    let func = function () {
        console.log('func()');
    }
    func();

    //1. 没有形参，并且函数体只有一条语句
    let func1 = () => console.log('func1()没有形参，只有一条语句');
    func1();

    //2. 一个形参，函数体只有一条语句
    let func2 = x => x;
    console.log(func2(5));

    //3. 形参是一个以上，函数体只有一条语句
    let func3 = (x, y) => x + y;
    console.log(func3(2, 4));

    //4. 形参是一个以上，函数体有多条语句
    let func4 = (x, y) => {
        console.log('func4()',x, y);
        return x + y;
    }
    console.log(func4(1,3));

    //获取页面元素，没有箭头函数
    let btn1 = document.getElementById('btn1');
    btn1.onclick = function () {
        console.log(this);
    }

    //获取页面元素，使用箭头函数
    let btn2 = document.getElementById('btn2');

    let obj = {
        name : 'zhangsan',
        age:39,
        getName:() => {
            btn2.onclick = () =>{
                console.log(this);
            }
        }
    }
    obj.getName();

    function Person() {
        this.obj = {
            showThis : () => {
                console.log(this);
            }
        }
    }

    let func5 = new Person();
    func5.obj.showThis();

</script>

七、三点运算符

作用：可变参数。

<script type="text/javascript">
    function fun(...values) {
        console.log(values);
        values.forEach(function (item, index) {
            console.log(item, index);
        })
    }
    fun(1,2,3);

    let arr = [2,3,4,5,6];
    let arr1 = [1,...arr, 7,8,9];
    console.log(arr1);
</script>

八、形参默认值

作用：调用函数时，当不传入参数的时候默认使用形参里的默认值。

<script type="text/javascript">
    //定义一个点的坐标
    function Point(x=0, y=0) {
        this.x = x;
        this.y = y;
    }
    let p = new Point();
    console.log(p);
    let point = new Point(5, 10);
    console.log(point);
</script>

九、原始数据类型Symbol

特点：

Symbol属性对应的值是唯一的，解决命名冲突问题
Symbol值不能与其他数据进行计算，包括同字符串拼串
for in, for of遍历时不会遍历symbol属性。

<script type="text/javascript">
window.onload = function () {
      let symbol = Symbol();
      console.log(typeof symbol);
      console.log(symbol);
      
      // 用作对象的属性(唯一)
      let obj = {name: 'zhangsan', age: 18};
      obj[symbol] = 'hello';
      obj[symbol] = 'symbol';
      console.log(obj);
      for(let i in obj){
        console.log(i);
      }
    }
</script>

十、 Iterator遍历器

概念： iterator是一种接口机制，为各种不同的数据结构提供统一的访问机制
作用：

为各种数据结构，提供一个统一的、简便的访问接口；
使得数据结构的成员能够按某种次序排列
ES6创造了一种新的遍历命令for…of循环，Iterator接口主要供for…of使用。

<script type="text/javascript">
// 数组
	let arr = [1, 2, 'zhangsan', true];
    for(let i of arr){
        console.log(i);
    }
    // 字符串
    let str = 'aaa';
    for(let item of str){
        console.log(item);
    }
</script>

十一、Generator函数

概念：

Generator函数是一个状态机，内部封装了不同状态的数据。
用来生成遍历器对象。
可暂停函数(惰性求值), yield可暂停，next方法可启动。每次返回的是yield后的表达式结果。

特点：

function 与函数名之间有“ * ”。
内部用yield表达式来定义不同的状态。
generator函数返回的是指针对象。
调用next方法函数内部逻辑开始执行，遇到yield表达式停止，返回{value: yield后的表达式结果/undefined, done: false/true}。
再次调用next方法会从上一次停止时的yield处开始，直到最后。
yield语句返回结果通常为undefined，当调用next方法时传参内容会作为启动时yield语句的返回值。

<script type="text/javascript">
    // 小试牛刀
    function* generatorTest() {
      console.log('函数开始执行');
      yield 'hello';
      console.log('函数暂停后再次启动');
      yield 'generator';
    }
    // 生成遍历器对象
    let Gt = generatorTest();
    // 执行函数，遇到yield后即暂停
    console.log(Gt); // 遍历器对象
    let result = Gt.next(); // 函数执行,遇到yield暂停
    console.log(result); // {value: "hello", done: false}
    result = Gt.next(); // 函数再次启动
    console.log(result); // {value: 'generator', done: false}
    result = Gt.next();
    console.log(result); // {value: undefined, done: true}表示函数内部状态已经遍历完毕

    // 对象的Symbol.iterator属性;
    let myIterable = {};
    myIterable[Symbol.iterator] = function* () {
      yield 1;
      yield 2;
      yield 4;
    };
    for(let i of myIterable){
      console.log(i);
    }
    let obj = [...myIterable];
    console.log(obj);
</script>

十二、class

通过class定义类/实现类的继承
在类中通过constructor定义构造方法
通过new来创建类的实例
通过extends来实现类的继承
通过super调用父类的构造方法
重写从父类中继承的一般方法

<script type="text/javascript">
    class Person {
        //调用类的构造方法
        constructor(name, age){
            this.name = name;
            this.age = age;

        }
        //定义一般的方法
        showName(){
            console.log(this.name, this.age);
        }
    }
    let person = new Person('zhangsan', 18);
    console.log(person, person.showName());

    //定义一个子类
    class StrPerson extends Person{
        constructor(name, age, salary){
            super(name, age);//调用父类的构造方法
            this.salary = salary;
        }
        showName(){//在子类自身定义方法
            console.log(this.name, this.age, this.salary);
        }
    }
    let str = new StrPerson('lisi', 18, 3000);
    console.log(str);
    str.showName();
</script>

十三、module

特点

ES6 的模块自动开启严格模式，不管你有没有在模块头部加上 use strict;。
模块中可以导入和导出各种类型的变量，如函数，对象，字符串，数字，布尔值，类等。
每个模块都有自己的上下文，每一个模块内声明的变量都是局部变量，不会污染全局作用域。
每一个模块只加载一次（是单例的），若再去加载同目录下同文件，直接从内存中读取。

export 与 import

export 命令可以出现在模块的任何位置，但必需处于模块顶层。
import 命令会提升到整个模块的头部，首先执行。

export/导出

<!-- export -->
<script>
	//导出一个
	export var m = 1;
    // 等价于
    var m = 1;
    export {m}

    // 导出多个
    var a = 1;
    var b = 2;
    var c = 3;
    export {a, b, c}
    // 导出对象
    export const student = {
        name: 'Megan',
        age: 18
    }

    // 导出函数
    export function add(a, b) {
        return a + b;
    }
</script>

import/导入

<!-- import -->
<script>
    import variable from './Demo';
    console.log(variable);
</script>

十四、Promise对象

Promise对象：代表了未来某个将要发生的事件(通常是一个异步操作)。
优势：可以将异步操作以同步的流程表达出来, 避免了层层嵌套的回调函数(俗称’回调地狱’)。
promise对象的3个状态：
pending: 初始化状态、fullfilled: 成功状态、rejected: 失败状态

使用Promise对象

创建Promise对象

<script>
	let promise = new Promise((resolve, reject) => {
        //初始化promise状态为 pending
      //执行异步操作
      if(异步操作成功) {
        resolve(value);//修改promise的状态为fullfilled
      } else {
        reject(errMsg);//修改promise的状态为rejected
      }
    })
</script>

调用Promise对象

<script>
	promise.then(function(
      result => console.log(result),
      errorMsg => alert(errorMsg)
    ))
</script>

十五、async函数

概念：真正意义上去解决异步回调的问题，同步流程表达异步操作。
本质： Generator的语法糖
特点：

不需要像Generator去调用next方法，遇到await等待，当前的异步操作完成就往下执行
返回的总是Promise对象，可以用then方法进行下一步操作
async取代Generator函数的星号*，await取代Generator的yield
语意上更为明确，使用简单，经临床验证，暂时没有任何副作用

语法：

  async function foo(){
        await 异步操作;
        await 异步操作；
      }

十六、字符串扩展

includes(str) : 判断是否包含指定的字符串
startsWith(str) : 判断是否以指定字符串开头
endsWith(str) : 判断是否以指定字符串结尾
repeat(count) : 重复指定次数

<script type="text/javascript">
    let str = 'abcdefg';
    console.log(str.includes('a'));//true
    console.log(str.includes('h'));//false
    //startsWith(str) : 判断是否以指定字符串开头
    console.log(str.startsWith('a'));//true
    console.log(str.startsWith('d'));//false
    //endsWith(str) : 判断是否以指定字符串结尾
    console.log(str.endsWith('g'));//true
    console.log(str.endsWith('d'));//false
    //repeat(count) : 重复指定次数a
    console.log(str.repeat(5));
</script>

十七、数值扩展

二进制与八进制数值表示法: 二进制用0b, 八进制用0o
Number.isFinite(i) : 判断是否是有限大的数
Number.isNaN(i) : 判断是否是NaN
Number.isInteger(i) : 判断是否是整数
Number.parseInt(str) : 将字符串转换为对应的数值
Math.trunc(i) : 直接去除小数部分

<script type="text/javascript">
    console.log(0b1010);//10
    console.log(0o56);//46
    //Number.isFinite(i) : 判断是否是有限大的数
    console.log(Number.isFinite(NaN));//false
    console.log(Number.isFinite(5));//true
    //Number.isNaN(i) : 判断是否是NaN
    console.log(Number.isNaN(NaN));//true
    console.log(Number.isNaN(5));//falsse

    //Number.isInteger(i) : 判断是否是整数
    console.log(Number.isInteger(5.23));//false
    console.log(Number.isInteger(5.0));//true
    console.log(Number.isInteger(5));//true

    //Number.parseInt(str) : 将字符串转换为对应的数值
    console.log(Number.parseInt('123abc'));//123
    console.log(Number.parseInt('a123abc'));//NaN

    // Math.trunc(i) : 直接去除小数部分
    console.log(Math.trunc(13.123));//13
</script>

十八、数组扩展

Array.from(v) : 将伪数组对象或可遍历对象转换为真数组
Array.of(v1, v2, v3) : 将一系列值转换成数组
find(function(value, index, arr){return true}) : 找出第一个满足条件返回true的元素
findIndex(function(value, index, arr){return true}) : 找出第一个满足条件返回true的元素下标

<body>
<button>测试1</button>
<button>测试2</button>
<button>测试3</button>
</body>
<script type="text/javascript">
    //Array.from(v) : 将伪数组对象或可遍历对象转换为真数组
    let btns = document.getElementsByTagName('button');
    console.log(btns.length);//3
    Array.from(btns).forEach(function (item, index) {
        console.log(item, index);
    });
    //Array.of(v1, v2, v3) : 将一系列值转换成数组
    let arr = Array.of(1, 'abc', true);
    console.log(arr);
    //find(function(value, index, arr){return true}) : 找出第一个满足条件返回true的元素
    let arr1 = [1,3,5,2,6,7,3];
    let result = arr1.find(function (item, index) {
        return item >3
    });
    console.log(result);//5
    //findIndex(function(value, index, arr){return true}) : 找出第一个满足条件返回true的元素下标
    let result1 = arr1.findIndex(function (item, index) {
        return item >3
    });
    console.log(result1);//2
</script>

十九、对象扩展

Object.is(v1, v2) 判断2个数据是否完全相等
Object.assign(target, source1, source2…) 将源对象的属性复制到目标对象上
直接操作 proto 属性
let obj2 = {};
obj2.proto = obj1;

<script type="text/javascript">
    console.log(Object.is('abc', 'abc'));//true
    console.log(NaN == NaN);//false
    console.log(Object.is(NaN, NaN));//true

    console.log(0 == -0);//true
    console.log(Object.is(0, -0));//false

    //Object.assign(target, source1, source2..)
    let obj = {name : 'kobe', age : 39, c: {d: 2}};
    let obj1 = {};
    Object.assign(obj1, obj);
    console.log(obj1, obj1.name);

    //直接操作 __proto__ 属性
    let obj3 = {name : 'anverson', age : 41};
    let obj4 = {};
    obj4.__proto__ = obj3;
    console.log(obj4, obj4.name, obj4.age);
</script>

二十、Set和Map数据结构

Set容器 : 无序不可重复的多个value的集合体

Set()
Set(array)
add(value)
delete(value)
has(value)
clear()
size

Map容器 : 无序的 key不重复的多个key-value的集合体

Map()
Map(array)
set(key, value)//添加
get(key)
delete(key)
has(key)
clear()
size

<script type="text/javascript">

    let set = new Set([1,2,3,4,3,2,1,6]);
    console.log(set);
    set.add('abc');
    console.log(set, set.size);
    //delete(value)
    set.delete(2);
    console.log(set);
    //has(value)
    console.log(set.has(2));//false
    console.log(set.has(1));//true
    //clear()
    set.clear();
    console.log(set);

    let map = new Map([['abc', 12],[25, 'age']]);
    console.log(map);
    map.set('男', '性别');
    console.log(map);
    console.log(map.get(25));//age
    //delete(key)
    map.delete('男');
    console.log(map);
    console.log(map.has('男'));//false
    console.log(map.has('abc'));//true
    map.clear();
    console.log(map);
</script>

二十一、for_of循环

for(let value of target){}循环遍历

遍历数组
遍历Set
遍历Map
遍历字符串
遍历伪数组

<button>按钮1</button>
<button>按钮2</button>
<button>按钮3</button>
<script type="text/javascript">

    let arr = [1,2,3,4,5];
    for(let num of arr){
        console.log(num);
    }
    let set = new Set([1,2,3,4,5]);
    for(let num of set){
        console.log(num);
    }
    let str = 'abcdefg';
    for(let num of str){
        console.log(num);
    }
    let btns = document.getElementsByTagName('button');
    for(let btn of btns){
        console.log(btn.innerHTML);
    }
</script>

淮南King

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
ES6 知识点总结

一、let关键字二、const关键字三、解构赋值四、模板字符串五、简化对象写法六、箭头函数七、三点运算符八、形参默认值九、原始数据类型Symbol十、 Iterator遍历器十一、Generator函数概念：特点：十二、class十三、moduleexport 与 import一、let关键字作用：与var类似，用于声明变量特点：在块作用域内有效。不能重复声明。无预处理，不能先使用后声明。<body> <button>测试1</button> &l.
复制链接

扫一扫

专栏目录