关于ES6语法的 一些新的特性
阅读原文时间:2022年04月02日阅读:1

1.新的变量声明 :let :块级作用域,解决全局污染问题

const :常量 ,如π:3.1415927

class :类 。var:弱类型  funciton :方法 , import : 导入参数 export 导出参数(方法如下)

//lib.js
//导出常量
export const sqrt = Math.sqrt;
//导出函数
export function square(x) {
return x * x;
}
//导出函数
export function diag(x, y) {
return sqrt(square(x) + square(y));
}

//main.js
import { square, diag } from './lib';
console.log(square(11)); //
console.log(diag(4, 3)); //

2.ES 6 的解构赋值 :let [a,b,c]=[1,2,3]  等价于 let a=1 ; let b=2 ;let c=3

3.字符串的扩展

  • includes():返回布尔值,表示是否找到了参数字符串。
  • startsWith():返回布尔值,表示参数字符串是否在源字符串的头部。
  • endsWith():返回布尔值,表示参数字符串是否在源字符串的尾部。

var s = 'Hello world!';

s.startsWith('Hello') // true
s.endsWith('!') // true
s.includes('o') // true

模板字符串的替换 引入了 ${ 变量名 } 来占位字符串中的变量;如:

//before ES5
$('#result').append(
'There are ' + basket.count + ' ' +
'items in your basket, ' +
'' + basket.onSale + ' are on sale!'
);
//now ES6
$('#result').append(`
There are ${basket.count} items
in your basket, ${basket.onSale}
are on sale!
`);

标签模板:

模板字符串的功能,不仅仅是上面这些。它可以紧跟在一个函数名后面,该函数将被调用来处理这个模板字符串。这被称为“标签模板”功能(tagged template)。

alert`123`
// 等同于
alert(123)

var a = 5;
var b = 10;

tag`Hello ${ a + b } world ${ a * b }`;
// 等同于
tag(['Hello ', ' world ', ''], 15, 50);

string.raw()

String.raw方法,往往用来充当模板字符串的处理函数,返回一个斜杠都被转义(即斜杠前面再加一个斜杠)的字符串,对应于替换变量后的模板字符串。

如果原字符串的斜杠已经转义,那么String.raw不会做任何处理。

String.raw`Hi\n${2+3}!`;
// "Hi\\n5!"

String.raw`Hi\u000A!`;
// 'Hi\\u000A!'

函数的扩展:

  • 允许赋默认值

  • 与解构赋值默认值结合

    function foo({x, y = 5}) {
    console.log(x, y);
    }

    foo({}) // undefined, 5
    foo({x: 1}) // 1, 5
    foo({x: 1, y: 2}) // 1, 2
    foo() // TypeError: Cannot read property 'x' of undefined

  • rest 参数 

    function add(…values) {
    let sum = 0;
    for (var val of values) {
    sum += val;
    }
    return sum;
    }
    add(2, 5, 3) //

  • 箭头函数 (个人最喜欢这一点)相当于后端的lambda表达式其实是一种语法糖

    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;
    };

    //小案例将数字字符串转换成数字数组

    var datas= '1,3,0,0,0,0,0,0,0,0';
    datas = datas.split(",");
    var IntArr=datas.map(data=>{console.log(data); return +data;});//保存转换后的整型字符串
    console.log(datas); // console.log`${datas}`
    console.log(IntArr);

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

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

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

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

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

数组的扩展:

  • 扩展运算符:

    扩展运算符(spread)是三个点(…)。它好比 rest 参数的逆运算,将一个数组转为用逗号分隔的参数序列。
    console.log(…[1, 2, 3])
    // 1 2 3

    console.log(1, …[2, 3, 4], 5)
    // 1 2 3 4 5

    […document.querySelectorAll('div')]
    // [

    ,
    ,
    ]

    function f(v, w, x, y, z) { }
    var args = [0, 1];
    f(-1, ...args, 2, ...[3]);
  • 数组的合并

    // ES5
    [1, 2].concat(more)
    // ES6
    [1, 2, …more]

    var arr1 = ['a', 'b'];
    var arr2 = ['c'];
    var arr3 = ['d', 'e'];

    // ES5的合并数组
    arr1.concat(arr2, arr3);
    // [ 'a', 'b', 'c', 'd', 'e' ]

    // ES6的合并数组
    […arr1, …arr2, …arr3]
    // [ 'a', 'b', 'c', 'd', 'e' ]

  • 扩展运算符可以与解构赋值结合起来,用于生成数组。

    const [first, …rest] = [1, 2, 3, 4, 5];
    first //
    rest // [2, 3, 4, 5]

    const [first, …rest] = [];
    first // undefined
    rest // []

    const [first, …rest] = ["foo"];
    first // "foo"
    rest // []

    //如果将扩展运算符用于数组赋值,只能放在参数的最后一位,否则会报错。

  • 字符串转数组

    […'hello']
    // [ "h", "e", "l", "l", "o" ]

对象的扩展:

  • 属性和函数的简写

    function f(x, y) {
    return {x, y};
    }

    // 等同于

    function f(x, y) {
    return {x: x, y: y};
    }

    f(1, 2) // Object {x: 1, y: 2}

    var o = {
    method() {
    return "Hello!";
    }
    };

    // 等同于

    var o = {
    method: function() {
    return "Hello!";
    }
    };

手机扫一扫

移动阅读更方便

阿里云服务器
腾讯云服务器
七牛云服务器

你可能感兴趣的文章