Es6

day82 2018-07-11

 

1. 内容回顾

1. JS回顾

1. 语法基础、变量、数据类型

 

2. 函数、内置对象

1. 函数

2. 内置对象

1. 自定义对象

2. Date对象

3. RegExp

4. JSON

5. Math

 

3. BOM操作和DOM操作

1. BOM操作：JS操作浏览器

location.href

2. DOM操作：操作DOM文档树

1. 找标签

2. 样式操作

3. 属性操作

4. 文档操作

5. 事件

2. 今日内容

1. ES6

https://www.cnblogs.com/liwenzhou/p/9249932.html

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);
    }
}
// 给父级绑定方法
Point.prototype.toSting = function(){
    console.log(`(${this.x}, ${this.y})`);
}

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

 

来自 <https://www.cnblogs.com/liwenzhou/p/9249932.html>

 

 

 

2. Vue

1. Vue是啥？

 

MVVM框架                        Anjular/React/Vue

前后端分离的架构

 

 

M       V         VM

 

数据层    视图层    ViewModel

 

后端提供数据，前端操作数据，DOM操作交给框架去实现

 

 

 

 

MVC(MTV)

 

M      V       C

 

数据层   视图层   控制器

 

2. Vue基础

https://cn.vuejs.org/index.html

 

1. 模板语法

指令

1. v-once                                  --> 数值只会渲染一次

2. v-if                             --> 控制标签是否在DOM中渲染

3. v-show                           --> 改变标签的display属性

4. v-bind:参数="值"                --> 把标签的属性与数据进行绑定

5. v-on:click='方法名'  --> 绑定事件

 

2. 计算属性与侦听器

 

3. class与style绑定

 

4. 条件渲染

 

5. 列表渲染

 

6. 事件绑定

 

7. 表单输入绑定