ES6的学习

ES6

const定义常量

 // 1.一定要赋初始值
    const SCHOOL = '尚硅谷';
    // 2.常量一般大写
    // 3.常量的值不能修改
   SCHOOL = 'nihao';//Assignment to constant variable.分配给常量变量
    // 4. 块级作用域
 {
    const A =100;
  }
 console.log(A);//wrong
    // 5.对于数组和对象的元素修改，不算做对常量的修改
    const TIME = ['mini', 'SimMO', 'time'];
    TIME.push['235'];   //修改不了
    console.log(TIME);

变量的解构赋值

  const F6 = ['小沈阳','赵本山','薛之谦','Jay'];
         let [shen,zhao,xue,zhou] = F6;
         console.log(shen);//小沈阳
         console.log(zhao);//赵本山
         console.log(xue);//薛之谦
         console.log(zhou);//Jay
        // 对象的解构
        const zhao = {
            name: '赵本山',
            age: 18,
            xiaopin: function () {
                console.log("可以演小品哦");
            }
        }
        let {name,age,xiaopin} = zhao;
        console.log(name);
       console.log(age);
       console.log(xiaopin);
        xiaopin();//可以演小品哦
        zhao.xiaopin();//可以演小品哦
        let { xiaopin } = zhao;
        xiaopin();

模板字符串

			 // 1.声明
            let str = `字符串`;
            console.log(str, typeof str);
            // 2.内容中可以直接出现换行符
            let main = `<ul>
                <li>沈腾</li>
                <li>玛丽</li>
                <li>艾伦</li>
                </ul>;`
            console.log(main);
            // 3.变量拼接
            let logo = 123;
            let out = `${logo}演员`;
            console.log(out);

ES6参数

ES6允许给函数参数赋值初始值

// 1.形参的初始值  具有默认值的参数，一般位置要靠后
function add(a, b, c = 10) {
    return a + b + c;
}
let result = add(2, 1);   //先按照实参执行，实参未赋值，再看形参，若都没值，返回的是NaN
console.log(result);
// 2.与解构赋值结合
function connect({ host = 'nihao', username, age }) {
    console.log(host);
    console.log(username);
    console.log(age);
}
connect({      //先以这为准，有值赋值，没值用上面的值
    // host:'local',      
    username: 'xiaoming',
    age: 20,
})

ES6引入rest参数，用于获取函数的实参，用来代替arguments

   // ES5获取参数的方式
    function demo() {
        console.log(arguments);     //输出的是一个对象
    }
    demo('柏芝', '阿娇', '智慧');

    // rest参数
    function date(...args) {
        console.log(args);                   //输出的是一个数组，可使用数组的API：filter,some,every,map
    }
    date('柏芝', '阿娇', '智慧'); 
    // rest参数(...args)必须要放到参数最后 
    function ln(a,b,...args){
        console.log(a);       //1
        console.log(b);       //2
        console.log(args);    //[5,5,4]
    }
    ln(1,2,5,5,4)

扩展运算符：【…】扩展运算符能将数组转换为逗号分隔的参数序列

  const tf = ['你好','hiso','shi'];
    function chu(){
        console.log(arguments);
    }
    chu(...tf);           

// 数组的合并
const miao = ['相信','未来','创新'];
const ning = ['是吗？'];
const main = [...miao,...ning]
console.log(main);
// 数组的克隆
const meta = ['E','M','G'];
const kun = [...meta];
console.log(kun);   //['E','M','G']
// 将伪数组转为真正的数组                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          
const divs = document.querySelectorAll('div');
const divArr = [...divs];
console.log(divArr); //[div, div, div]

迭代器

迭代器是一种接口，为各种不同的数据结构提供统一的访问机制。任何数据结构只要部署iterator接口，即可完成遍历操作
    //需要自定义遍历数据的时候，要想到迭代器

  // 声明一个数组
    const xiyou = ['唐僧', '孙悟空', '猪八戒', '沙'];
    //遍历数组
    // for...of:遍历数字的元素值
    // for...in:遍历数组的索引
    // for(let v of xiyou){
    //     console.log(v);
    // }
    // for(let v in xiyou){
    //     console.log(v);
    // }
    let iterator = xiyou[Symbol.iterator]();
    // 调用对象的next方法；第一次调用，指针自动指向数据结构的第一个成员
    // 每调用next方法返回一个包含value和done属性的对象
    console.log(iterator.next());
    console.log(iterator.next());
    console.log(iterator.next());
    console.log(iterator.next());
    console.log(iterator.next());
    // 自定义遍历数据
    // 声明对象
    const food = {
        name: "nihao",
        stus: [
            'kf',
            'night',
            'done'
        ],
        [Symbol.iterator]() {
            let index = 0;
            let _this = this;
            return {
                next: function () {
                    if (index < _this.stus.length) {
                        const result = { value: _this.stus[index], done: false };
                        // 下标自增
                        index++;
                        return result;
                    } else {
                        return { value: undefined, done: true };
                    }
                }
            };
        }
    }
    for (let v of food) {
        console.log(v);
    }

感受

视频很短，案例很多，不太好理解，虽然是5min钟的视频，可能敲敲案例，理解理解，也得10min以上。时间还真的很紧迫，要抓紧了，要不然最后还真的看不完了。

下周计划

1. 看ES6文档
2. 继续学习JavaScript高级