zoukankan      html  css  js  c++  java
  • 程序员必须知道的六大ES6新特性

    一 、字符串扩展

    1、传统上,JavaScript只有indexOf方法,可以用来确定一个字符串是否包含在另一个字符串中。ES6又提供了三种新方法。
    includes():返回布尔值,表示是否找到了参数字符串。
    startsWith():返回布尔值,表示参数字符串是否在源字符串的头部。
    endsWith():返回布尔值,表示参数字符串是否在源字符串的尾部。

    var s = 'Hello world!';
    console.log(s.startsWith('Hello')); // true
    console.log(s.endsWith('!')); // true
    console.log(s.includes('o')); // true

    //这三个方法都支持第二个参数,表示开始搜索的位置。
    var s = 'Hello world!';
    s.startsWith('world', 6) // true
    s.endsWith('Hello', 5) // true
    s.includes('Hello', 6) // false

    2、padStart() padEnd()
    ES2017 引入了字符串补全长度的功能。如果某个字符串不够指定长度,会在头部或尾部补全。padStart()用于头部补全,padEnd()用于尾部补全。

    'x'.padStart(5, 'ab') // 'ababx'
    'x'.padStart(4, 'ab') // 'abax'

    'x'.padEnd(5, 'ab') // 'xabab'
    'x'.padEnd(4, 'ab') // 'xaba'
    //上面代码中,padStart和padEnd一共接受两个参数,第一个参数用来指定字符串的最小长度,第二个参数是用来补全的字符串。

    //如果原字符串的长度,等于或大于指定的最小长度,则返回原字符串。
    'xxx'.padStart(2, 'ab') // 'xxx'
    'xxx'.padEnd(2, 'ab') // 'xxx'

    //如果用来补全的字符串与原字符串,两者的长度之和超过了指定的最小长度,则会截去超出位数的补全字符串。
    'abc'.padStart(10, '0123456789')
    // '0123456abc'

    //如果省略第二个参数,默认使用空格补全长度。
    'x'.padStart(4) // ' x'
    'x'.padEnd(4) // 'x '

    //padStart的常见用途是为数值补全指定位数。下面代码生成10位的数值字符串。
    '1'.padStart(10, '0') // "0000000001"
    '12'.padStart(10, '0') // "0000000012"
    '123456'.padStart(10, '0') // "0000123456"

    //另一个用途是提示字符串格式。
    '12'.padStart(10, 'YYYY-MM-DD') // "YYYY-MM-12"
    '09-12'.padStart(10, 'YYYY-MM-DD') // "YYYY-09-12"

    3、模板字符串

    //传统的JavaScript语言,输出模板通常是这样写的。
    $('#result').append(
    'There are <b>' + basket.count + '</b> ' +
    'items in your basket, ' +
    '<em>' + basket.onSale +
    '</em> are on sale!'
    );
    //上面这种写法相当繁琐不方便,ES6引入了模板字符串解决这个问题。

    $('#result').append(`
    There are <b>${basket.count}</b> items
    in your basket, <em>${basket.onSale}</em>
    are on sale!
    `);

    var first="刘";
    var last="梦";
    //var name= 'Your name is '+ first+ ' '+ last+ '.';
    var name1= `Yournameis${first}${last}`;
    console.log(name);

    多行字符串
    如果使用模板字符串表示多行字符串,所有的空格和缩进都会被保留在输出之中。
    如果你不想要这个换行,可以使用trim方法消除它。
    console.log(`In JavaScript ' ' is a line-feed.`);

    console.log(`In JavaScript this is
    not legal.`);

    console.log(`string text line 1
    string text line 2`);

    大括号内部可以放入任意的JavaScript表达式,可以进行运算,以及引用对象属性。
    var x = 1;
    var y = 2;

    `${x} + ${y} = ${x + y}`
    // "1 + 2 = 3"

    `${x} + ${y * 2} = ${x + y * 2}`
    // "1 + 4 = 5"

    var obj = {x: 1, y: 2};
    `${obj.x + obj.y}`
    // 3


    二、数值的扩展

    //1、指数运算符 ES2016 新增了一个指数运算符(**)。
    2 ** 2 // 4
    2 ** 3 // 8
    //指数运算符可以与等号结合,形成一个新的赋值运算符(**=)。

    let a = 1.5;
    a **= 2;
    // 等同于 a = a * a;

    let b = 4;
    b **= 3;
    // 等同于 b = b * b * b;

    四、函数的扩展


    1、函数的默认值:ES6 之前,不能直接为函数的参数指定默认值,只能采用变通的方法。

    function log(x, y) {
    y = y || 'World';
    console.log(x, y);
    }

    log('Hello') // Hello World
    log('Hello', 'China') // Hello China
    log('Hello', '') // Hello World
    //上面代码检查函数log的参数y有没有赋值,如果没有,则指定默认值为World。这种写法的缺点在于,如果参数y赋值了,但是对应的布尔值为false,则该赋值不起作用。就像上面代码的最后一行,参数y等于空字符,结果被改为默认值。

    //为了避免这个问题,通常需要先判断一下参数y是否被赋值,如果没有,再等于默认值。
    if (typeof y === 'undefined') {
    y = 'World';
    }

    //ES6 允许为函数的参数设置默认值,即直接写在参数定义的后面。
    function log(x, y = 'World') {
    console.log(x, y);
    }
    log('Hello') // Hello World
    log('Hello', 'China') // Hello China
    log('Hello', '') // Hello

    //参数变量是默认声明的,所以不能用let或const再次声明。
    function foo(x = 5) {
    let x = 1; // error
    const x = 2; // error
    }
    //使用参数默认值时,函数不能有同名参数。
    function foo(x, x, y = 1) {
    // ...
    }
    // SyntaxError: Duplicate parameter name not allowed in this context

    //参数默认值的位置:通常情况下,定义了默认值的参数,应该是函数的尾参数。因为这样比较容易看出来,到底省略了哪些参数。如果非尾部的参数设置默认值,实际上这个参数是没法省略的。
    // 例一
    function f(x = 1, y) {
    return [x, y];
    }
    f() // [1, undefined]
    f(2) // [2, undefined])
    f(, 1) // 报错
    f(undefined, 1) // [1, 1]

    // 例二
    function f(x, y = 5, z) {
    return [x, y, z];
    }
    f() // [undefined, 5, undefined]
    f(1) // [1, 5, undefined]
    f(1, ,2) // 报错
    f(1, undefined, 2) // [1, 5, 2]
    //上面代码中,有默认值的参数都不是尾参数。这时,无法只省略该参数,而不省略它后面的参数,除非显式输入undefined。

    //如果传入undefined,将触发该参数等于默认值,null则没有这个效果。
    function foo(x = 5, y = 6) {
    console.log(x, y);
    }

    foo(undefined, null)
    // 5 null

    2、作用域:一旦设置了参数的默认值,函数进行声明初始化时,参数会形成一个单独的作用域(context)。等到初始化结束,这个作用域就会消失。这种语法行为,在不设置参数默认值时,是不会出现的。
    var x = 1;
    function f(x, y = x) {
    console.log(y);
    }

    f(2) // 2
    //上面代码中,参数y的默认值等于变量x。调用函数f时,参数形成一个单独的作用域。在这个作用域里面,默认值变量x指向第一个参数x,而不是全局变量x,所以输出是2。
    3、name属性:函数的name属性,返回该函数的函数名。
    function foo() {}
    foo.name // "foo"

    //ES6 对这个属性的行为做出了一些修改。如果将一个匿名函数赋值给一个变量,ES5 的name属性,会返回空字符串,而 ES6 的name属性会返回实际的函数名。
    var f = function () {};
    // ES5
    console.log(f.name); // ""

    // ES6
    console.log(f.name); // "f"

    //如果将一个具名函数赋值给一个变量,则 ES5 和 ES6 的name属性都返回这个具名函数原本的名字。
    const bar = function baz() {};
    // ES5
    console.log(bar.name); // "baz"

    // ES6
    console.log(bar.name); // "baz"


    4、ES6 允许使用“箭头”(=>)定义函数。
    var f = v => v;
    //上面的箭头函数等同于:

    var f = function(v) {
    return v;
    };

    //如果箭头函数不需要参数或需要多个参数,就使用一个圆括号代表参数部分。
    var f = () => 5;
    // 等同于
    var f = function () { return 5 };

    var sum = (num1, num2) => num1 + num2;
    // 等同于
    var sum = function(num1, num2) {
    return num1 + num2;
    };

    //如果箭头函数的代码块部分多于一条语句,就要使用大括号将它们括起来,并且使用return语句返回。
    var sum = (num1, num2) => { return num1 + num2; }

    //由于大括号被解释为代码块,所以如果箭头函数直接返回一个对象,必须在对象外面加上括号。
    var getTempItem = id => ({ id: id, name: "Temp" });

    //箭头函数可以与变量解构结合使用。
    const full = ({ first, last }) => first + ' ' + last;
    // 等同于
    function full(person) {
    return person.first + ' ' + person.last;
    }

    //箭头函数使得表达更加简洁。
    const isEven = n => n % 2 == 0;
    const square = n => n * n;

    //箭头函数的一个用处是简化回调函数。
    // 正常函数写法
    [1,2,3].map(function (x) {
    return x * x;
    });

    // 箭头函数写法
    [1,2,3].map(x => x * x);

    /*箭头函数有几个使用注意点。

    (1)函数体内的this对象,就是定义时所在的对象,而不是使用时所在的对象。

    (2)不可以当作构造函数,也就是说,不可以使用new命令,否则会抛出一个错误。

    (3)不可以使用arguments对象,该对象在函数体内不存在。如果要用,可以用 rest 参数代替。

    (4)不可以使用yield命令,因此箭头函数不能用作 Generator 函数。
    */


    五、Symbol
    ES6 引入了一种新的原始数据类型Symbol,表示独一无二的值。它是 JavaScript 语言的第七种数据类型,前六种是:undefined、null、布尔值(Boolean)、字符串(String)、数值(Number)、对象(Object)。
    Symbol 值通过Symbol函数生成。这就是说,对象的属性名现在可以有两种类型,一种是原来就有的字符串,另一种就是新增的 Symbol 类型。凡是属性名属于 Symbol 类型,就都是独一无二的,可以保证不会与其他属性名产生冲突。

    let s = Symbol();
    console.log(typeof s);
    // "symbol"
    //上面代码中,变量s就是一个独一无二的值。typeof运算符的结果,表明变量s是 Symbol 数据类型,而不是字符串之类的其他类型。

    var s1 = Symbol('foo');
    var s2 = Symbol('bar');

    console.log(s1); // Symbol(foo)
    console.log(s2); // Symbol(bar)

    console.log(s1.toString()); // "Symbol(foo)"
    console.log(s2.toString()); // "Symbol(bar)"
    // Symbol函数可以接受一个字符串作为参数,表示对 Symbol 实例的描述,主要是为了在控制台显示,或者转为字符串时,比较容易区分。
    //上面代码中,s1和s2是两个 Symbol 值。如果不加参数,它们在控制台的输出都是Symbol(),不利于区分。有了参数以后,就等于为它们加上了描述,输出的时候就能够分清,到底是哪一个值。



    六、解构:
    let [a, b, c] = [1, 2, 3];
    这种写法属于“模式匹配”,只要等号两边的模式相同,左边的变量就会被赋予对应的值。下面是一些使用嵌套数组进行解构的例子。*/

    let [foo, [[bar], baz]] = [1, [[2], 3]];
    //foo 1
    //bar 2
    //baz 3

    alert(foo);
    alert(bar);


    /*let [ , , third] = ["foo", "bar", "baz"];
    //third "baz"
    alert(third);*/

    /*let [x, , y] = [1, 2, 3];
    // x 1
    //y 3
    alert(x);*/


    /*let [head, ...tail] = [1, 2, 3, 4];
    //head 1
    //tail [2, 3, 4]
    alert(head);*/

    /*let [x, y, ...z] = ['a'];
    // x "a"
    //y undefined
    //z []
    alert(x);
    alert(y);
    alert(z);*/

  • 相关阅读:
    209. Minimum Size Subarray Sum
    208. Implement Trie (Prefix Tree)
    207. Course Schedule
    206. Reverse Linked List
    205. Isomorphic Strings
    204. Count Primes
    203. Remove Linked List Elements
    201. Bitwise AND of Numbers Range
    199. Binary Tree Right Side View
    ArcGIS API for JavaScript 4.2学习笔记[8] 2D与3D视图同步
  • 原文地址:https://www.cnblogs.com/lixishimeng/p/7109391.html
Copyright © 2011-2022 走看看