zoukankan      html  css  js  c++  java

  • ES6快速入门

    快速了解ES6部分新特性。。。

    let和const 

    let

    ES6新增了let命令，用于声明变量。其用法类似var，但是声明的变量只在let命令所在的代码块内有效。
    {
    let x = 10;
    var y = 20;
}

x  // ReferenceError: x is not defined
y  // 20

    var声明变量存在变量提升。也就是在声明变量之前就可以使用该变量。

    console.log(x)  // undefined，var声明变量之前可以使用该变量
var x = 10;

    而let不会这样，let声明的变量不能在声明之前使用。

    console.log(x)  // ReferenceError: x is not defined，let声明变量之前不可以使用该变量
let x = 10;
    注意：
    let不允许在相同的作用域内重复声明同一个变量。 
    比如：
    function foo(){
    let x = 10;
    var x = 20;
}  // 报错

    再比如：

    function foo(){
    let y = 10;
    let y = 20;
}  // 报错
    ES5中只有全局作用域和函数作用域，并没有块级作用域。
    请看下面的示例： 
    var name = 'Q1mi'

function foo(){
    console.log(name)
    if (false){
        var name = 'Bob'
    }
}
foo()  // undefined
    出现上述现象的原因就是在函数内部，由于变量提升导致内存的name变量覆盖了外层的name变量。
    类似的情况还出现在 for循环的计数变量最后会泄露为全局变量。 
    for (var i=0;i<5;i++){
    console.log('哈哈');
}
console.log(i);  // 5

    ES6中的let声明变量的方式实际上就为JavaScript新增了块级作用域。

    var name = 'Q1mi'

function foo(){
    console.log(name)
    if (false){
        let name = 'Bob'
    }
}
foo()  // Q1mi

    此时，在foo函数内容，外层代码块就不再受内层代码块的影响。所以类似for循环的计数变量我们最好都是用let来声明。

    const

    const用来声明常量。const声明变量必须立即初始化，并且其值不能再改变。
    const声明常量的作用域与let相同，只在声明所在的块级作用域内有效。 
    例如：
    const PI = 3.14；

    全局对象的属性：

    ES6规定：var命令和function命令声明的全局变量依旧是全局对象的属性；let命令、const命令和class命令声明的全局变量不属于全局对象的属性。

    查看下面的示例代码：

    var x = 10;
let y = 20;
window.x  // 10
window.y  // undefined

    变量的解构赋值

    ES6允许按照一定的模式，从数组或对象中提取值，对变量进行赋值，这种方式被称为解构赋值。

    var [x, y, z] = [10, 20, 30]
x  // 10
y  // 20
z  // 30

    对象的解构赋值：

    var {x, y} = {x: 10, y: 20}
x  // 10
y  // 20

    字符串

    include、startsWith、endsWith

    在此之前，JavaScript中只有indexOf方法可用来确定一个字符串是否包含在另一个字符串中。

    ES6中又提供了3种新方法：

    includes()：返回布尔值，表示是否找到了参数字符串。

    stratsWith()：返回布尔值，表示参数字符串是否在源字符串的开始位置。

    endsWith()：返回布尔值，表示参数字符串是否在源字符串的结尾位置。

    示例：

    var s = "Hello world!";

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

    这三个方法都支持第2个参数，表示开始匹配的位置。

    示例：

    s.includes("o", 8)  // false
s.startsWith("world", 6)  // true
s.endsWith("Hello", 5)  // true

    模板字符串

    模板字符串（template string）是增强版的字符串，用反引号（`）标识。它可以当做普通字符串使用，也可以用来定义多行字符串，或者在字符串中嵌入变量。在模板字符串中嵌入变量，需要将变量名写入${}中。

    var name = 'Q1mi', age = 18;
`My name is ${name}, I’m ${age} years old.`

    函数

    箭头函数

    箭头函数有个特点：

    1. 如果参数只有一个，可以省略小括号
    2. 如果不写return，可以不写大括号
    3. 没有arguments变量
    4. 不改变this指向
    其中箭头函数中this指向被固定化，不是因为箭头函数内部有绑定this的机制。实际原因是箭头函数根本没有自己的this，导致内部的this就是外层代码块的this。
     
    可以查看下面两段代码输出的区别：
    var person = {
    name: 'Q1mi',
    age:18,
    func:function(){
        console.log(this);
    }
}
person.func()  // person对象

    和

    var person = {
    name: 'Q1mi',
    age:18,
    func:()=>{
        console.log(this);
    }
}
person.func()  // window对象

    对象 

    属性简洁表示法

    ES6允许直接写入变量和函数作为对象的属性和方法。
    function (x, y){
    return {x, y}
}

    上面的写法等同于：

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

    对象的方法也可以使用简洁表示法：

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

    等同于：

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

    Object.assign() 

    Object.assign方法用来将源对象（source）的所有可枚举属性复制到目标对象（target）。它至少需要两个对象作为参数，第一个参数是目标对象，第二个参数是源对象。

    参数必须都是对象，否则抛出TypeError错误。

    Object.assjgn只复制自身属性，不可枚举属性（enumerable为false）和继承的属性不会被复制。

    简单示例：

    var x = {name: "Q1mi", age: 18};
var y = x;
var z = Object.assign({}, x);
x.age = 20;

x.age  // 20

y.age  // 20

z.age  // 18

    注意：

    Object.assign方法的其他用处，可查看文末链接。

    面向对象

    ES5的构造对象的方式 使用构造函数来创造。构造函数唯一的不同是函数名首字母要大写。
    function Point(x, y){
    this.x = x;
    this.y = y;
}

// 给父级绑定方法
Point.prototype.toSting = function(){
    return '(' + this.x + ',' + this.y + ')';
}

var p = new Point(10, 20);
console.log(p.x)
p.toSting();

// 继承
function ColorPoint(x, y, color){
    Point.call(this, x, y);
    this.color = color;
}
// 继承父类的方法
ColorPoint.prototype = Object.create(Point.prototype);
// 修复 constructor
ColorPoint.prototype.constructor = Point;
// 扩展方法
ColorPoint.prototype.showColor = function(){
    console.log('My color is ' + this.color);
}

var cp = new ColorPoint(10, 20, "red");
console.log(cp.x);
console.log(cp.toSting());
cp.showColor()

    ES6 使用Class构造对象的方式：

    class Point{
    constructor(x, y){
        this.x = x;
        this.y = y;
    }  // 不要加逗号
    toSting(){
        return `(${this.x}, ${this.y})`;
    }
}

var p = new Point(10, 20);
console.log(p.x)
p.toSting();

class ColorPoint extends Point{
    constructor(x, y, color){
        super(x, y);  // 调用父类的constructor(x, y)
        this.color = color;
    }  // 不要加逗号
    showColor(){
        console.log('My color is ' + this.color);
    }
}

    var cp = new ColorPoint(10, 20, "red");
console.log(cp.x);
cp.toSting();
cp.showColor()

    Promise

    Promise 是异步编程的一种解决方案，比传统的解决方案（回调函数和事件）更合理、更强大。它由社区最早提出和实现，ES6 将其写进了语言标准，统一了用法，原生提供了Promise对象。

    使用Promise的优势是有了Promise对象，就可以将异步操作以同步操作的流程表达出来，避免了层层嵌套的回调函数。此外，Promise对象提供统一的接口，使得控制异步操作更加容易。

    用法示例：

    const promiseObj = new Promise(function(resolve, reject) {
  // ... some code

  if (/* 异步操作成功 */){
    resolve(value);
  } else {
    reject(error);
  }
});

    Promise构造函数接受一个函数作为参数，该函数的两个参数分别是resolve和reject。它们是两个函数，由 JavaScript 引擎提供，不用自己部署。

    Promise实例生成以后，可以用then方法分别指定resolved状态和rejected状态的回调函数。

    promiseObj.then(function(value) {
  // success
}, function(error) {
  // failure
});

    then方法可以接受两个回调函数作为参数。第一个回调函数是Promise对象的状态变为resolved时调用，第二个回调函数是Promise对象的状态变为rejected时调用。其中，第二个函数是可选的，不一定要提供。这两个函数都接受Promise对象传出的值作为参数。

    我们还可以将上面的代码写成下面这种方式：

    promiseObj
.then(function(value) {
  // success
})
.catch(function(error) {
  // failure
});

    其实Promise.prototype.catch方法是.then(null, rejection)的别名，用于指定发生错误时的回调函数。

    注：

    本文中的些许示例来自阮一峰的《ECMAScript 6 标准入门》

    附：

    想了解更多有关ES6标准内容，推荐阅读：阮一峰的ECMAScript 6 入门

    多读书、多写码。世界很大，我们很小。

      
     
  • 相关阅读:
    关于java中的继承
    jdk?jre?
    spring AOP的两种配置
    ng-repeat如何限制循环次数
    AngularJS filter:search 是如何匹配的 ng-repeat filter:search ，filter:{$:search}，只取repeat的item的value 不含label
    Anjular的ng-repeat
    SpringBoot扫描不到类，注入失败A component required a bean of type 'XXService' that could...
    React路由安装使用和多种方式传参
    Vue详细介绍模板语法和过滤器的使用！
    Vue定义组件和生命周期函数及实例演示！
  • 原文地址：https://www.cnblogs.com/bai-max/p/9355002.html
Copyright © 2011-2022 走看看