ES6开篇

es6开篇

变量与常量

变量

可修改的

var

var 可以重复声明变量

var 无法限制修改

没有块级作用域

let

不能重复声明

有块级作用域

常量

不可修改

const：不可以修改值

箭头函数 =>

如果只有一个参数小括号可以省略

如果只有一个return 花括号可以省略

箭头函数中没有自己的this，始终指向函数声明时所在作用域下的this

不能作为构造函数实例化对象

不能使用arguments变量

剩余运算符(扩展运算符) …

//剩余运算符必须放在最后一个参数，不然会报错
function fn(a,b,...c) {
    console.log(a);
    console.log(b);
    console.log(c);
}
fn(1,2,3,4,5,6,7,8,9);

//剩余运算符还可以直接展开数组
var arr = [1,2,3]
function fn1(a,b,c) {
    console.log(a);
    console.log(b);
    console.log(c);
}
fn1(...arr)

数组的合并 (案例)

let a = [1,2,3];
let b = [4,5,6];
let c = [...a,...b];

案例：伪数组转为真数组

let divs = document.getElementsByTagName("div");
let divArr = [...divs];

解构赋值

es6中允许按照一定的模式从数组和对象中提取值，对变量进行赋值，主要的应用在于 解构拿到的json数据

左右两边的结构必须一致

声明和赋值不能分开

数组的解构赋值

let [a,b,c] = [1,2,3]

对象的解构赋值

let {age,name} = {
    name : "zhangsan",
    age : 18
}

模板字符串

使用反引号创建字符串

内容里面可以直接换行

可以直接拼接变量 使用 ${变量}

let num = 10;
let str = `
    <ul>
        <li>111${num}</li>
    </ul>
`

对象的简化写法

let name = "青鸟";
let change = function () {
    console.log("知识改变命运");
}
const school = {
    name,
    change,
    fn(){
        console.log("111");
    }
}

函数的默认参数值

es6允许给函数的形参直接赋初始值

一般默认值会给后面的参数

默认值可以与解构赋值结合使用

function fn(a,b=6,c=10) {
    alert(a+b+c);
}
fn(12);
let preson = {
    name : "张三",
    age : 18,
    job : function () {}
}
function fn1({name,age,job,school='青鸟'}) {
    console.log(name);
    console.log(age);
    console.log(job);
    console.log(school);
}
fn1(...preson)

新的数据类型 Symbol

es6引入了一种新的数据类型Symbol，表示独一无二的值，是js中的第七种数据类型， 类似于我们之前看到过的字符串

Symbol的特点：

Symbol的值是唯一的，用来解决命名冲突的问题

Symbol值不能与其他数据进行运算

Symbol定义的对象属性不能使用for in循环遍历，但可以使用 Reflect.ownKeys来获取对象的所有键名

let s1 = Symbol();
let s2 = Symbol("青鸟");
let s3 = Symbol.for("青鸟")

迭代器

迭代器（iterator）是一种接口，为各种不同的数据结构提供统一的访问机制。任何数 据结构只要部署iertator接口，就可以完成便遍历操作

ES6创造了一种新的遍历命令 for…of循环，iterator接口主要供for…of消费

原声具备iterator接口的数据(可用for…of循环)

Array

Arguments

Set

Map

String

TypeArray

NodeList

工作原理：

创建一个指针对象，指向当前数据结构的起始位置

第一次调用对象的next方法，指针自动指向数据结构的第 一个成员

接下来不断的调用next方法，指针一直往后移动，直到指 向最后一个成员

每调用next方法返回一个包含value和done属性的对象

//创建一个数组
const xiyou = ["唐僧","悟空","八戒","沙僧"];

for(let i of xiyou){
    console.log(i);
}

//工作原理
//a
let iterator = xiyou[Symbol.iterator]();
console.log(iterator);
//b
console.log(iterator.next());
//c
console.log(iterator.next());

去重

const banji = {
    name : "终极一班",
    students : [
        'xiangming',
        'xiangming',
        'xiangming',
        'knight'
    ],
    [Symbol.iterator](){
        let index = 0;
        return {
            next:()=>{
                if(index < this.students.length){
                    const result = {
                        value:this.students[index],
                        done : false
                    };
                    index++;
                    return result;
                }else{
                    return {
                        value : undefined,done:true
                    }
                }
            }
        }
    }
}
for (let v of banji){
    console.log(v);
}

生成器

生成器函数是ES6提供的一种异步编程解决方案，语法行为与传统函数完全不同