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);*/

  • 相关阅读:
    都说程序员钱多空少,程序员真的忙到没时间回信息了吗?
    C/C++知识分享: 函数指针与指针函数,看完这篇你还能不懂?
    C++的那些事儿:从电饭煲到火箭,C++无处不在
    年薪90万程序员不如月入3800公务员?安稳与高收入,到底如何选择?
    【C++学习笔记】C++ 标准库 std::thread 的简单使用,一文搞定还不简单?
    C语言既有高级语言又有低级语言的特点,但为什么它不是低级语言呢?
    【C++学习笔记】看完这篇,C++ 的链接问题不怕你搞不明白!
    既然C++这么难学,为什么还有人“自讨苦吃”?
    编程语言这么多,为什么就只有C 语言能一直得到 SQLite 的青睐?
    初学者疑惑:C语言中,函数反复调用会有什么问题?
  • 原文地址:https://www.cnblogs.com/lixishimeng/p/7109391.html
Copyright © 2011-2022 走看看