javascript里ES6新增知识点

1.数组的扩展
Array.from() 对象类数组转为数组
Array.of（）将括号内的参数转为数组形式
fill（值,参数1，参数2） 用第一个参数填充数组，参数1和参数2代表索引范围，含头不含尾，填充的内容不限制
个人总结：
1.Array.from() 对象要使用的话，自定义属性的属性名就要有序且对象加length属性值为原有的属性个数；类数组直接使用就行
// let obj = {
// name: ‘zhangsan’,
// age: 100,
// sex: ‘男’
// };

    // //经典面试题
    // let obj1 = {
    //     0: 'zhangsan',
    //     1: 100,
    //     2: '男',
    //     length: 3
    // }
    // console.log(Array.from(obj)); //[]
    // console.log(Array.from(obj1)); //["zhangsan", 100, "男"]

//2.类数组转数组 可以直接转换
// let aLi = document.querySelectorAll(‘li’); //获取的是li标签的类数组
// aLi = Array.from(aLi); //转换
// aLi.push(document.body);
// console.log(aLi);//[li, li, li, li, li, body]
2.数组添加自定义属性后，可以console.log出添加的属性，但是length不计入内，因为索引不是有序数字，for遍历不出自定义属性，如果想要通过for循环遍历出，那么自定义属性的属性名就要有序且对象加length属性，，值为原有的属性个数；for in可以遍历出
// 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]); //可以获取 lisi  200  女
    // }

3.数组之所以可以添加自定义属性的原因是他是对象类型，而字符串 布尔值 数字类型可以添加自定义属性是因为包装对象的原因，但是他们是添加就销毁，不可能可以输出

2.遍历器
概念：一种接口，为各种不同的数据结构提供统一的访问机制。任何数据结构只要部署 Iterator 接口，就可以完成遍历操作（即依次处理该数据结构的所有成员）
Iterator 的作用有三个：
一是为各种数据结构，提供一个统一的、简便的访问接口；
二是使得数据结构的成员能够按某种次序排列；
三是 ES6 创造了一种新的遍历命令for…of循环， Iterator 接口主要供for…of消费。
数组，字符串是有部署了Symbol.iterator属性，具有 iterator 接口，对象没有，所以对象无法使用for of循环
for…of循环可以使用的范围包括数组、Set 和 Map 结构、某些类似数组的对象（比如arguments对象、DOM NodeList对象）、以及字符串。
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配合使用。
/提供了遍历所有数据结构的统一操作接口。

3.Symbol
1.Symbol的概念和特点。
Symbol–表示独一无二的值，它是js中的第七种数据类型，属于基本类型
Symbol():首字母大写。
Symbol 函数前不能使用new, 否则会报错， 原因在于symbol是一个原始类型的值， 不是对象。

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

    console.log(s1 == s2); //false，独一无二的，不会相同
    console.log(s1); //Symbol(zhangsan)
    console.log(s2); //Symbol(wangwu)

    let obj = {
        s1: 100, //s1:自定义的属性，和变量s1没有关系
        s2: 200,
        [s1]: 300, //这里的s1才是Symbol变量。
        [s2]: 400
    };

    // console.log(obj);

    for (let i in obj) {
        console.log(obj[i]); //100,200
    }

    //console.log(Object.getOwnPropertySymbols(obj)); //获取Symbol属性  [Symbol(zhangsan), Symbol(wangwu)]

    for (let i = 0; i < Object.getOwnPropertySymbols(obj).length; i++) {
        console.log(obj[Object.getOwnPropertySymbols(obj)[i]])
    }

4.set map结构
//1.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, …}
    // console.log([...new Set(arr)]);// [1, 2, 3, 4, 5, 6]

    let s1 = new Set(['zhangsan', 'lisi']); //生成一个set结构
    // Set类的属性--size（长度）
    // console.log(s1.size); //2
    // Set类的方法
    // Set.add(value) 添加一个数据， 返回Set结构本身， 允许进行链式操作。
    s1.add('wangwu').add('zhaoliu');
    console.log(s1); //{"zhangsan", "lisi", "wangwu", "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"}


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

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

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


    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', '男');
    console.log(m1); //{"name" => "zhangsan", 100 => 1000, true => "hehe", undefined => "xixi", "age" => 100,"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()   使用回调函数遍历每个成员。
    console.log(m1); //{"name" => "zhangsan", 100 => 1000, true => "hehe", undefined => "xixi"}
    m1.forEach((value, index, set) => {
        console.log(index + '---' + value); // 100---1000 true---hehe undefined---xixi age---100 sex---男
    });


    console.log(m1[Symbol.iterator]());
    for (let value of m1) {
        console.log(value);
        console.log(value[0]);
    }

个人见解，仅供参考，概不负责QAQ