Es6 学习笔记

Posted S&Lchuck

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Es6 学习笔记相关的知识,希望对你有一定的参考价值。

  1. 变量

  2. let

    let用来声明变量,作用和var类似,所声明的变量只在let生命的代码块内有效。

    //1.不允许重复声明

     

    let num = 2;

    let num = 3; //error

     

    //2.块级作用域

     

    let a = [];

    for (let i = 0; i < 10; i++) {

    a[i] = function () {

    console.log(i);

    }

    }

    a[5](); //5

  3. const

    const声明一个只读的常量。一旦声明,常量的值就不能改变,因为常量的值不能改变,所以必须在声明常量的时候进行初始化,常量声明的对象所表示的是变量的地址,不是变量的值

    //1.必须在声明时定义变量

    const num = 5;

    const num1; //error

  4. 字符串

  5. 模板字符串

    模板字符串(template string)是增强版的字符串,用反引号(`)标识。

    let str = `

    <!DOCTYPE html>

    <html lang="en">

    <head>

    <title>es6</title>

    <meta charset="UTF-8">

    <script src="./es6.js"></script>

    </head>

    <body>

     

    </body>

    </html>

    `

  6. 扩展函数

    let str = `hello world`;

     

    //includes():返回布尔值,表示是否找到了参数字符串。

    console.log(str.includes(‘wo‘)); // true

     

    //startsWith():返回布尔值,表示参数字符串是否在源字符串的头部。

    console.log(str.startsWith(‘he‘)); //true

     

    //endsWith():返回布尔值,表示参数字符串是否在源字符串的尾部。

    console.log(str.endsWith(‘ld‘)); //true

     

    //repeat():方法返回一个新字符串,表示将原字符串重复n次。

    console.log(`x`.repeat(3)); // ‘xxx‘

    console.log(`x`.repeat(0)); //‘‘

    var buffer = new Buffer(‘node‘,‘utf8‘);

    var str = buffer.toString(‘utf8‘);

     

  7. 数字

  8. 扩展方法

    //Number.isFinite() 用来检查一个数值是否非无穷(infinity)。

    Number.isFinite(45); // true

    Number.isFinite(‘45‘); //false

     

    //Number.isNaN() 用来检查一个值是否为NaN

    Number.isNaN(45); // true

    Number.isNaN(‘45‘); //false

     

    //Number.parseInt() 用来讲一个值转化为整数

    Number.parseInt(‘12.45‘); //12

     

    //Number.parseFloat() 用来讲一个值转化为浮点数

    Number.parseFloat(‘12.45‘); //12.45

     

    //Number.isInteger() 用来判断一个值是否为整数。

    Number.parseFloat(12); //true

    Number.parseFloat(12.0); //true

    Number.parseFloat(12.1); //false

    Number.parseFloat(‘12‘); //false

  9. 数组

  10. 扩展方法

    //Array.from :方法用于将两类对象转为真正的数组

    let arrayLike = {

    ‘0‘: ‘a‘,

    ‘1‘: ‘b‘,

    ‘2‘: ‘c‘,

    length: 3

    };

    let arr = Array.from(arrayLike); // [‘a‘, ‘b‘, ‘c‘]

     

    //Array.of : 方法用于将一组值,转换为数组

    Array.of(3, 11, 8) // [3,11,8]

     

    //fill: 方法使用给定值,填充一个数组。

    [‘a‘, ‘b‘, ‘c‘].fill(7)

    // [7, 7, 7]

     

    //findIndex:返回第一个符合条件的数组成员的位置

    [1, 5, 10, 15].findIndex(function(value, index, arr) {

    return value > 9;

    }) // 2

     

    //find:返回第一个符合条件的数组

    [1, 5, 10, 15].find(function(value, index, arr) {

    return value > 9;

    }) // 10

     

    //includes:返回一个布尔值,表示某个数组是否包含给定的值

    [1, 2, 3].includes(2); // true

  11. 集合

  12. Set

    成员的值都是唯一的,没有重复的值。

    var set = new Set([1, 2, 3, 4, 4]); //[1, 2, 3, 4]

  13. Map

    是键值对的集合

    var m = new Map();

    var o = {p: "Hello World"};

     

    m.set(o, "content")

    m.get(o) // "content"

     

    m.has(o) // true

    m.delete(o) // true

    m.has(o) // false

  14. 函数

    // 默认值参数

    function test(x = 5, y = 6) {

    console.log(x, y);

    }

     

    test() // 5 6

    test(undefined, null) // 5 null , 传入undefined则参数会去默认值

     

     

    // rest参数(形式为"...变量名"),用于获取函数的多余参数

    function add(...values) {

    let sum = 0;

     

    for (var val of values) {

    sum += val;

    }

     

    return sum;

    }

     

    add(2, 5, 3) // 10

     

    //箭头函数,函数体内的this对象,就是定义时所在的对象,而不是使用时所在的对象

    var sum = (num1, num2) => num1 + num2;

    // 等同于

    var sum = function(num1, num2) {

    return num1 + num2;

    };

  15. 对象

    //Object.is 用来比较两个值是否严格相等,与严格比较运算符(===)的行为基本一致

    Object.is(‘foo‘, ‘foo‘) // true

    Object.is({}, {}) // false

    Object.is(+0, -0) // false

    Object.is(NaN, NaN) // true

     

    //Object.assign 用于对象的合并,将源对象(source)的所有可枚举属性,复制到目标对象(target

    var target = { a: 1 };

     

    var source1 = { b: 2 };

    var source2 = { c: 3 };

     

    Object.assign(target, source1, source2);

    target // {a:1, b:2, c:3}

     

    //for...in 循环遍历对象自身的和继承的可枚举属性(不含Symbol属性)

    var target = {a:1, b:2, c:3};

    for(let key in target){

    console.log(key);

    }

     

    //Object.keys 返回一个数组,成员是参数对象自身的(不含继承的)所有可遍历(enumerable)属性的键名

    var obj = { foo: "bar", baz: 42 };

    Object.keys(obj) // ["foo", "baz"]

     

    //Object.keys 返回一个数组,成员是参数对象自身的(不含继承的)所有可遍历(enumerable)属性的键名

    var obj = { foo: "bar", baz: 42 };

    Object.values(obj)// ["bar", 42]

     

    //Object.entries 返回一个数组,成员是参数对象自身的(不含继承的)所有可遍历(enumerable)属性的键值对数组

    var obj = { foo: ‘bar‘, baz: 42 };

    Object.entries(obj) // [ ["foo", "bar"], ["baz", 42] ]

     

    let obj2 = { one: 1, two: 2 };

    for (let [k, v] of Object.entries(obj2)) {

    console.log(`${JSON.stringify(k)}: ${JSON.stringify(v)}`);

    }

    // "one": 1

    // "two": 2

  16. class

    //基本语法

    class animal {

    constructor(name) {

    this.name = name;

    }

     

    say() {

    console.log(this.name);

    }

    }

     

    // 实例对象

    let nimo = new animal(‘nimo‘);

     

    //继承

    class dog extends animal {

    constructor(name, age) {

    super(name); // 调用父类的constructor

    this.age = age;

    }

     

    say() {

    console.log(this.name,this.age); //重写方法

    }

    }

    let ad = new dog(‘nimo‘,2);

     

    //静态方法

    class Foo {

    static classMethod() {

    return ‘hello‘;

    }

    }

     

  17. 异步

  18. Generator

    Generator函数是一个状态机,封装了多个内部状态。

    执行Generator函数会返回一个遍历器对象, Generator函数除了状态机,还是一个遍历器对象生成函数。返回的遍历器对象,可以依次遍历Generator函数内部的每一个状态。

    //使用function* 来定义Generator,使用 yield 来作为每次状态的返回值

    function* foo(x) {

    var y = 2 * (yield (x + 1));

    var z = yield (y / 3);

    return (x + y + z);

    }

     

    //都用next()函数来获取返回值 next函数的参数表示上一次状态的返回值

    var a = foo(5);

    a.next() // Object{value:6, done:false}

    a.next() // Object{value:NaN, done:false} 参数为undefined,上一次状态值为undefined

    a.next() // Object{value:NaN, done:true} 参数为undefined,上一次状态值为undefined

     

    var b = foo(5);

    b.next() // { value:6, done:false }

    b.next(12) // { value:8, done:false } 参数为12,上一次状态值为12,yield(x + 1) = 12,y = 2*12 = 24 yield (y / 3) = 8

    b.next(13) // { value:42, done:true } yield (y / 3)=13,z=13,x=5,y=2 * (yield (x + 1))=24,和为42

  19. Promise

    Promise是一个对象,从它可以获取异步操作的消息。Promise提供统一的API,各种异步操作都可以用同样的方法进行处理。

    //生产一个Promise实例

    var promise = new Promise(function(resolve, reject) {

    // ... some code

     

    if (/* 异步操作成功 */){

    resolve(value);

    } else {

    reject(error);

    }

    });

     

    //执行promise实例

    promise.then(function(value) {

    // success 成功后调用

    }, function(error) {

    // failure 失败后调用

    });

  20. Async

    async函数就是Generator函数的语法糖

    async函数返回一个Promise对象。

    async函数内部return语句返回的值,会成为then方法回调函数的参数。

    async函数内部抛出错误,会导致返回的Promise对象变为reject状态。抛出的错误对象会被catch方法回调函数接收到

    async函数返回的Promise对象,必须等到内部所有await命令的Promise对象执行完,才会执行then方法指定的回调函数。

    async function f() {

    return await 123;

    }

     

    f().then(v => console.log(v))

    // 123

  21. 模块

    模块功能主要由两个命令构成:exportimportexport命令用于规定模块的对外接口,import命令用于输入其他模块提供的功能。

    //export.js

    //导出变量

    export let firstName = ‘Michael‘;

    //导出方法

    export function multiply(x, y) {

    return x * y;

    };

    //导出类

    export class animal{

    //some code

    }

    //import.js

    //导入变量

    import {firstName, multiply, animal} from ‘./export‘;

以上是关于Es6 学习笔记的主要内容,如果未能解决你的问题,请参考以下文章

es6学习笔记初步总结

JavaScript学习笔记 -- ES6学习 变量的解构赋值

ES6学习笔记之变量声明let,const

es6学习笔记2-解构赋值

ES6学习笔记一

ES6基础教程一 学习笔记