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. 模块

    模块功能主要由两个命令构成：export和import。export命令用于规定模块的对外接口，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‘;
时间： 2024-08-08 13:58:16

Es6 学习笔记的相关文章

es6学习笔记初步总结

es6学习笔记初步总结 1. let.const 和 block 作用域 在ES6以前,var关键字声明变量.无论声明在何处,都会被视为声明在函数的最顶部(不在函数内即在全局作用域的最顶部).这就是函数变量提升例如: let 关键词声明的变量不具备变量提升(hoisting)特性 let 和 const 声明只在最靠近的一个块中(花括号内)有效 当使用常量 const 声明时,请使用大写变量,如:CAPITAL_CASING const 在声明时必须被赋值 否则报语法错误SyntaxError

ES6学习笔记(一)

1.ES6学习之let.const (1).var.let.const 变(常)量声明 ES5 只有全局作用域和函数作用域,没有块级作用域,这带来很多不合理的场景. 在ES6中let就诞生了,实际上它为javascript新增了块级作用域. let只在变量声明时 ,所在的代码块中有效. 由于这一特性,let很适合在for循环中使用. 如下图是一个demo: let声明变量的特点: a:不存在变量提升: console.log(m);//Uncaught ReferenceError: m is

ES6学习笔记&lt;三&gt; 生成器函数与yield

为什么要把这个内容拿出来单独做一篇学习笔记? 生成器函数比较重要,相对不是很容易理解,单独做一篇笔记详细聊一聊生成器函数. 标题为什么是生成器函数与yield? 生成器函数类似其他服务器端语音中的接口(Interface),yield则是生成器函数中表示 返回 或 继续 执行的关键字. 弄清楚这两个概念后,先看一个例子: function* fun(val) { yield 1*val; yield 2*val; yield 3*val; yield 4*val; return 5*val; }

ES6学习笔记(二)——字符串扩展

相信很多人也和我一样,不喜欢这样循规蹈矩的逐条去学习语法,很枯燥乏味.主要是这样学完一遍之后,没过一段时间就忘到九霄云外了.不如实际用到的时候研究它记得牢靠,所以我就整理成笔记,加深记忆的同时便于复习查看. 在这样不断的学习过程中,也提高了自己的总结能力:) 1.字符串的遍历器接口 ES5,数组和对象可以进行遍历,使用for() 和 for...in,还有jq中的each()方法进行遍历. ES6为我们提供了字符串遍历器  for...of 循环遍历 优点:可以识别大于0xFFFF的码点,传统的

我的es6学习笔记

前两个月看了一套es6的教程,现在将当时我做的笔记分享出来,与大家一起分享,我的不足之初也希望大家可以指出来.虽然简单学过一遍,但是我项目中用到的也就const,let,解构赋值,默认参数,箭头函数,promiss,模板字符串差不多这几个吧,其他的还不是很了解.现在再拿出来结合阮一峰老师的书再重新的学习一遍. ES6 npm install babel-cli -g npm install babel-cli babel-preset-es2015 --save-dev babel es6.js

ES6学习笔记之Promise

入职百度EFE团队实习已经三周了,实习中接触到了生产环境的技术和开发流程,大开眼界,和自己在学校接小作坊式项目是很不一样的体验.其中一个很大的感触是,ES6早已不是“选修”的尝鲜技术,而是已经全面普及应用.非学不可的“必修”技术,看来该版本新加入的特性的确解决了前端项目开发中的痛点,有利于提升开发效率. 说到ES6,像let,const,箭头函数这些特性简单易懂,很快就实现了无痛上手:然而Promise不是那么直观,项目文档里大量的“返回一个Promise对象”让初接触这一概念的我一度懵比,于是

ES6学习笔记（1）——模块化

最近学习ReactJS经常遇见ES6语法,为了尽快弄懂ReactJS,因此想方设法绕过ES6,但是随着学习的深入,需要查阅的资料越来越多,发现大部分与之相关的框架和学习资料都是采用ES6写的,终究发现这是一个绕不过去的坎啊.ES6是JavaScript新一代的标准规范,其主要变化为:变量的解构赋值.箭头函数.Generator函数.Promise对象.类与继承.模块化这几个大方面,我学习时为了能看懂ES6写的代码,就先从这几个大的方面开始下手了,细节部分随着应用的需要再去查阅资料,学习参考资料为

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

最近用淘宝的weex做了个项目,最近稍微闲下来了.正好很久没有接触RN了,所以趁这个机会系统的学习一下ES6的相关知识. 孔子说:没有对比就没有伤害.所以我们要拿ES6和ES5好好对比的学习.这样才能明白es6是多少的好,积极的拥抱她! 1.let 用let声明的变量,只会在let命令所在的代码块内有效. let的块状作用域 我们来看一个简单的例子: 'use strict'; { let name = 'cloud'; var age = 21; } name;//ReferenceError

ES6学习笔记第三章

数组的解构赋值 基本用法 ES6允许按照一定的模式,从数组和对象中取值,对变量进行赋值,这被称之为解构(Destructuring). 以前,为变量赋值,只能直接指定值. var a = 1; var b = 2; var c = 3; 而ES6允许写成下面这样. var [a,b,c] = [1,2,3]; 这种写法属于"模式匹配",只要等号两边模式相同,左边的变量就会被赋值. 如果解构不成功,变量的值就等于undefined. var [foo] = [ ]; var [bar,

es6学习笔记4--数组

数组的扩展 Array.from() Array.from方法用于将两类对象转为真正的数组:类似数组的对象(array-like object)和可遍历(iterable)的对象(包括ES6新增的数据结构Set和Map). let arrayLike = { '0': 'a', '1': 'b', '2': 'c', length: 3 }; // ES5的写法 var arr1 = [].slice.call(arrayLike); // ['a', 'b', 'c'] // ES6的写法 l