ES6知识整合

字符串扩展：

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

// 普通字符串
let str=`hello'\n'world`;  
// hello
// world
 
// 多行字符串
let str=`hello,
this is a string`;
// hello,
// this is a string
 
// 字符串中嵌入变量和表达式
let a='x',b='y',c=1;
let str=`hello ${a},world ${b},num is ${c+1}`;    // hello x,world y,num is 2
 
// 字符串中调用函数
function func(){
    return 'string';
}
let str=`this is ${func()}`;    // this is string

2.repeat(n)方法返回一个新字符串，表示将原字符串重复n次

var str = 'hello';

console.log(str.repeat(3));  //hellohellohello

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

var str = 'javascript';

console.log(str.includes('scr'));  //true
console.log(str.includes('vaas')); //false


var arr = ['zhangsan', 'lisi', 'wangwu'];

console.log(arr.indexOf('lisi')); //1
console.log(arr.includes('lisi')); //true

4.startsWith()：返回布尔值，表示参数字符串是否在源字符串的头部

var str = 'javascript';

console.log(str.startsWith('ja'));  //true
console.log(str.startsWith('javv')); //false

5.endsWith()：返回布尔值，表示参数字符串是否在源字符串的尾部

var str = 'javascript';

console.log(str.endsWith('ipt'));  //true
console.log(str.endsWith('t'));  //true
console.log(str.endsWith('tt')); //false

---

函数的扩展：

1.函数参数默认值

const sum = function(a = 10, b = 10) {
    return a + b;
}

console.log(sum(12, 13)); //25  添加了实参，使用实参
console.log(sum()); //20 没有实参，默认的参数。

//传统的 - 现在还在使用
var sum = function(a, b) {
    var a = a || 10;
    var b = b || 10;
    return a + b;
}

console.log(sum(12, 13));
console.log(sum());

2.箭头函数

        函数的简洁的写法；箭头函数内部的this来自于父级，而且this改变不了。(函数声明时this已经确定了)

    箭头函数的特点：

        1.箭头函数适合于无复杂逻辑纯函数场景下，例如用在map、reduce、filter、foreach的回调函数定义中.

        2.同时函数体内this对象，就是定义时所在的对象，而不是使用时所在的对象。This不会改变了。

        3.箭头函数一定是匿名函数

        4.不要在最外层定义箭头函数，因为在函数内部操作this会很容易污染全局作用域window。最起码在箭头函数外部包一层普通函数，将this控制在可见的范围内；

//箭头函数的应用
const aLi = document.querySelectorAll('li');

for (var i = 0; i < aLi.length; i++) {
    aLi[i].onclick = function() {
        //this:当前点击的li
        setTimeout(() => {
            //this不改变
            this.innerHTML = '22222222222222222222222222222222222';
        }, 2000);
    };
}

---

数组和对象的扩展：

数组的扩展方法

    1.Array.from() 方法用于将对象转为真正的数组(类数组转数组)

let obj = {
    0: 'zhangsan',
    1: 100,
    2: '男',
    length: 3
}

console.log(Array.from(obj)); //["zhangsan", 100, "男"]

    2.类数组转数组

let arr = [];

arr.name = 'lisi';
arr.age = 200;
arr.sex = '女';
console.log(arr); //length=0  [name: "lisi", age: 200, sex: "女"]

for (var i = 0; i < arr.length; i++) { //length:0，没有数组下标。
    console.log(arr[i]);//不能获取
}

for (var i in arr) { //无序的
    console.log(arr[i]); //可以获取
}

    3.Array.of() 方法用于将一组值， 转换为数组。

console.log(Array.of(1, 2, 3)); //[1, 2, 3]
console.log(Array.of(1)); //[1]
console.log(Array.of('a', 'b', 'c'));//["a", "b", "c"]

    4.fill() 方法使用给定值， 填充一个数组。

let arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

console.log(arr.fill('hello')); //["hello", "hello", "hello", "hello", "hello", "hello", "hello", "hello", "hello", "hello"]
console.log(arr.fill('hello', 3, 5)); //替换区间   参2：开始的索引   参3：结束的索引，不包括。

对象的扩展

    1.对象的简洁表示法

var num = 1;

let obj = {
    num: num, //将变量num赋值给自定义的num属性。
    shownum: function() {
        return this.num;
    }
};


//下面改写
let obj1 = {
    num, //属性名和属性值同一个字符。
    shownum() { //方法省略function
        return this.num;
    }
};

console.log(obj.num); //1
console.log(obj.shownum()); //1
console.log(obj1.num); //1
console.log(obj1.shownum()); //1

    2.Object.assign(目标对象,obj1,obj2,.....)用于对象的合并，将源对象的所有可枚举属性，复制到目标对象。

let obj1 = {
    a: 1,
    b: 2,
    c: 3
};

let obj2 = {
    c: 4,
    d: 5,
    e: 6
};

let obj3 = {
    d: 7,
    e: 8,
    f: 9
}

let obj = {};

Object.assign(obj, obj1, obj2, obj3); //属性相同，后面覆盖前面。

console.log(obj);  //{a: 1, b: 2, c: 4, d: 7, e: 8, f: 9}
console.log(Object.keys(obj)); //键，属性名    (6) ["a", "b", "c", "d", "e", "f"]
console.log(Object.values(obj)); //值，属性值    (6) [1, 2, 4, 7, 8, 9]

---

遍历器：

1.遍历器（Iterator）它是一种接口，为各种不同的数据结构提供统一的访问机制。任何数据结构只要部署 Iterator 接口，就可以完成遍历操作（即依次处理该数据结构的所有成员）。

Iterator 的作用有三个：

   a.为各种数据结构，提供一个统一的、简便的访问接口；

    b.使得数据结构的成员能够按某种次序排列；

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

2.一个数据结构只要部署了Symbol.iterator属性，就被视为具有 iterator 接口，就可以用for...of循环遍历它的成员。也就是说，for...of循环内部调用的是数据结构的Symbol.iterator方法。

let arr = [1, 2, 3, 4];
let str = 'hello';
let obj = {
    a: 1,
    b: 2,
    c: 3
}

console.log(arr[Symbol.iterator]()); //Array Iterator {}
console.log(str[Symbol.iterator]()); //String Iterator {}
console.log(obj[Symbol.iterator]()); // TypeError: obj[Symbol.iterator] is not a function

3.for...of最好的遍历方式

    for...of循环可以使用的范围包括数组、Set 和 Map 结构、某些类似数组的对象（比如arguments对象、DOM NodeList对象）、以及字符串。

//for...of的应用
let arr = [1, 2, 3, 4];
let str = 'hello';
let obj = {
    a: 1,
    b: 2,
    c: 3
}

for (let value of arr) {
    console.log(value);
}

for (let value of str) {
    console.log(value);
}

for (let value of obj) { //报错 TypeError: obj is not iterable
    console.log(value);
}

     for...of与其他遍历语法的比较

        for循环这种写法比较麻烦，因此数组提供内置的forEach方法。

        forEach没有返回值，无法中途跳出forEach循环，break命令或return命令都不能奏效。

        for...in循环有几个缺点。

                数组的键名是数字，但是for...in循环是以字符串作为键名“0”、“1”、“2”等等。

                for...in循环不仅遍历数字键名，还会遍历手动添加的其他键，甚至包括原型链上的键。

                某些情况下，for...in循环会以任意顺序遍历键名。

    总之，

       for...in循环主要是为遍历对象而设计的， 不适用于遍历数组 .

       for...of循环相比上面几种做法， 有一些显著的优点。

        有着同for...in一样的简洁语法， 但是没有for...in那些缺点。

       不同于forEach方法， 它可以与break、 continue和return配合使用。

       提供了遍历所有数据结构的统一操作接口。

---

Symbol

概念和特点

    Symbol--表示独一无二的值，它是js中的第七种数据类型，属于基本类型

    Symbol():首字母大写。

    Symbol 函数前不能使用new, 否则会报错， 原因在于symbol是一个原始类型的值， 不是对象。

let obj = {
    a: 1
};

obj.a = 2;
console.log(obj.a); //2

//由来：自定义对象，对象的属性名很容易被覆盖。
let s1 = Symbol();
let s2 = Symbol();

console.log(s1 == s2); //false
console.log(s1);
console.log(s2);

symbol函数接收一个字符串作为参数，表示对symbol的描述，主要是为了在控制台显示，或者转为字符串的时候，比较容易区分。描述的内容相同仅仅表示的是描述，不代表其他的意义

---

set和map数据结构：

set结构：

ES6提供了数据结构Set. 它类似于数组，但是成员的值都是唯一的，没有重复的值。

Set 本身是一个构造函数，用来生成 Set 数据结构，数组作为参数

//简单的数组去重
var arr = [1, 2, 3, 4, 5, 6, 1, 2, 3, 4, 5, 6, 4, 4, 4, 6, 6, 6];

console.log([...new Set(arr)]);// [1, 2, 3, 4, 5, 6]

set的属性和方法：

    let s1 = new Set(['zhangsan', 'lisi']); //生成一个set结构

// Set类的属性--size（长度）
    console.log(s1.size); //2

// Set类的方法
// Set.add(value) 添加一个数据， 返回Set结构本身， 允许进行链式操作。
    s1.add('wangwu').add('zhaoliu');
// Set.delete(value) 删除指定数据， 返回一个布尔值， 表示删除是否成功。
    console.log(s1.delete('zhaoliu')); //true
// Set.has(value) 判断该值是否为Set的成员， 返回一个布尔值。
    console.log(s1.has('lisi')); //true
    console.log(s1.has('lisi123')); //false
// Set.clear() 清除所有的数据， 没有返回值。
    s1.clear();
// forEach()： 使用回调函数遍历每个成员
    s1.forEach((value, index, set) => {
        console.log(index + '---' + value); //索引和值是相等的。  zhangsan---zhangsan
    });

    console.log(s1); // {"zhangsan", "lisi"}

map结构

JavaScript 的对象（Object），只能用字符串当作键。这给它的使用带来了很大的限制。ES6 提供了 Map 数据结构。它类似于对象，但是“键”的范围不限于字符串，各种类型的值（包括对象）都可以当作键。Symbol类型当作key输出时 无法确认是同一个key.

let m1 = new Map([
    ['name', 'zhangsan'],
    ['age', 100]
]);

console.log(m1);//{"name" => "zhangsan", "age" => 100}

map的属性和方法：

let m1 = new Map([
    ['name', 'zhangsan'],
    [100, 1000],
    [true, 'hehe'],
    [undefined, 'xixi']
]);

//map类的属性--size
    console.log(m1.size); //4

// map.set(key,value) :设置键名key对应的键值value,然后返回整个map结构，如  果key已经有值，则键值会被更新，否则就生成该键，可以链式操作。
    m1.set('age', 100).set('sex', '男');

// map.get(key) get方法读取key对应的键值，如果找不到key，返回undefined
    console.log(m1.get(undefined)); //xixi

// map.delete(key) 删除某个键，返回true.如果删除失败，返回false.
// map.has(key) 方法返回一个布尔值，表示某个键是否在当前map对象之中。
// map.clear() 清除所有数据，没有返回值

// map.entries() 返回键值对的遍历器
    console.log(m1.keys());
    console.log(m1.values());
    console.log(m1.entries());

// map.forEach()   使用回调函数遍历每个成员

---

构造函数：

function Fn() {}

let f1 = new Fn(); //fn:构造函数。
console.log(typeof Fn); //function

//类：
class Fn {}

let f2 = new Fn(); //fn:类
console.log(typeof Fn); // function

ES6的类是构造函数的语法糖

语法糖：指计算机语言中添加的某种语法，这种语法对语言的功能并没有影响，但是更方便程序员使用。通常来说使用语法糖能够增加程序的可读性，从而减少程序代码出错的机会。