关于ES6语法的 一些新的特性

 

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)); // 121
console.log(diag(4, 3)); // 5
复制代码

 

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 <b>' + basket.count + '</b> ' +
  'items in your basket, ' +
  '<em>' + basket.onSale +
  '</em> are on sale!'
);
//now ES6
$('#result').append(`
  There are <b>${basket.count}</b> items
   in your basket, <em>${basket.onSale}</em>
  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) // 10
  • 箭头函数 (个人最喜欢这一点)相当于后端的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')]
    // [<div>, <div>, <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 // 1
    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!";
      }
    };
    复制代码
posted @   雨V幕  阅读(252)  评论(0编辑  收藏  举报
努力加载评论中...
点击右上角即可分享
微信分享提示