es状态yellow什么意思

ECMAScript6的简单使用

现在ES6使用的是年代名法 ,所以,ES2015就是ES6—命名规则改变了

let的使用

let的使用关键,块级作用域(之前是学过的,代替了var)

const的使用:

1. 初始化的时候,必须赋值
2. 不可以第二次赋值
3. 常量名,需要大写(规范)

解构数组的使用

感觉,就是依次赋值的意思(所以,前后的结构要一样)
1. 代码1:简单的解构

let [a,b,c]=[12,13,14]

2. 代码2:解构的其他写法

1. let [a,[b,c]]=[12,[13,24]];

2. let [a,{b,c}]=[12,{c:14,b:13}]; —-12,13,14

解构对象

1. 类似于解构数组
2. 最简单的解构的方式
   
   let {a,b,c}={a:12,b:13,c:14}
3. 其他的混合解构:(就是数组和对象的混合)
   
   let {a,d}={a:12,d:[13,14]};console.log(a,d);

字符串模板

1. 可以保留换行
2. 可以在里面运算 ${ 你需要运算的表达式 }
3. 语法:
   
   var v=”世界”;
   hello ${v}
4. 理解:
   
   感觉有点类似于pre的写法

Tagged Template(带标签的模板字符串)

1. 代码:
   
var va='va就是一个字符串';
let vb='我是vb';
let str=Tag`你好世界${ va }, \n
但是我不太好${2+3} ${vb}`;
function Tag(strs,...vals) {
console.log(strs);
console.log(vals)
}

2. 就是在字符串的前面加了一个函数
   
   函数用来处理字符串的,需要自己定义
   注意,回车的记录

# 函数的参数:

1. 字符串数组—-一段一段的字符串,用${}分割
2. 也是数组—-数组里面是${}里面的内容

字符的匹配

1. 代码:

/* startsWith(注意,空格) */
    let str=" hello word";
    console.log(
        str.startsWith(' ')
    )
    console.log(
        str.endsWith('d')
    )
    console.log(
        str.includes('el')
    )

2. 没什么好说的 ##### 函数设置默认值

function add(a=200,b=50) {
            return a+b;
        }
        console.log(add());

##### spread ‘…’ 展开操作符&剩余操作符 1. 代码1:

/* ...的使用(spread的使用) */
    let arr0=['item3','item4'];
    let arr1=['item1','item2',...arr0];
    console.log(arr1);

2. 代码2

/* rest剩余操作符 */
    function rest(a,b,...c) {
        console.log(a,b,...c);
    }
    rest(1,2,3,4,5,6,7,8);

这种方法常用在(..ag)=>{ },来代替arguments

给函数设置解构参数

1. 要点:
   
   既然是解构,就要格式相对应
2. 代码:

function detail(name,sex,{age,address}={}) {
        console.log(name,sex,age,address)
    }
    detail('jk','male',{age:14,address:'大同'})

##### 在ES6中函数的name属性 代码:

/* 函数的name 属性 */
    function test1() {

    }
    console.log(test1.name);
    let test2=function test3() {

    }
    /* test2 其实还是个指针,指向test3 */
    console.log(test2.name);

##### 箭头函数 1. 代码 “` /* 箭头函数,貌似是匿名函数;但是可以给他一个指向 console.log(this); //this 指向上层的函数 console.log(arguments); //没有 arguments这个参数 * */ var a=(b,c)=>{ console.log(b,c) } a(1,2); “` 2. 在nodeJS里面经常使用,注意this的指向问题 ##### 对象表达式 1. 代码: “` function apple() { alert(“apple”); } let egg=’我是egg’ let food={ apple, egg, sayHello(){ alert(“你好世界”) } } food.sayHello(); console.log(food) “` 2. 就是两个名字一样,可以省略一个(之前在vue的时候,使用过一次的) ##### 对象的is方法(判断两个值,是否相等) 1. ‘==’ NaN==NaN 2. ‘===’ +0=-0 3. Object.is(NaN,NaN) 4. 代码:

console.log(Object.is(NaN,NaN)) 返回true ##### 对象的复制 1.代码:

/*
    * 对象的复制,这里貌似不是复制指针
    * */
    let aim={};
    Object.assign(
        aim,
        {
            a:12,
            b:13
        }
    )
    console.log(aim);

2. 可以使用解构函数 3. 使用上述方法 Object.assogn(aimObj,sourceObj) ##### 在ES6中使用的一些关于继承的方法: 1. 代码:

let a={
        sayHello(){
            alert("你好,世界")
        }
    }
    /* 创建以个继承自a的对象 */
    let b=Object.create(a);
    b.sayHello();  //这样就,继承过来了
    /* 获取原型对象 */
    console.log(Object.getPrototypeOf(b));
    /* 手动的设置原型对象
     * Object.setPrototypeOf(目标-你需要修改的变量,d)
      * */
    let d={
        sayD(){
            alert("你好我是DDDD")
        }
    }
    Object.setPrototypeOf(b,d)
    console.log(Object.getPrototypeOf(b))
    b.sayD();

2. 继承使用

var 生成的目标对象=Object.create(你要继承谁) 3. 获取原型

Object.getPrototypeof(获取谁的原型) 4. 设置原型:

Object.setprototype(目标-需要修改的对象,源) 5. 通过对象.__proto__修改属性

let e={};
    e.__proto__=a;
    e.sayHello();

这样修改也是可以的,兼容性特别不好() 6. super的使用,super 是指向原型对象的 1. 调用原型的方法 super.原型的方法或属性 2. 代码: “` /* super.原型的方法或属性 */ let a={ sayHello(){ alert(“你好世界”) } } let c={ __proto__:a, cSay(){ super.sayHello(); } } c.cSay(); “` ##### ES5 中的迭代器 0. 建议参考 [这篇文章]() 1. 代码:

/* 迭代器和生成器的区别,之后再说 */
    //ES5的迭代器,就是一个闭包而已
    function literator(arr) {
        let i=0;  //计数器
        return{
            next(){
                let done=(i>=arr.length);  //指示循环是否完成
                let value=(!done?arr[i++]:undefined); //当前循环的值

                return {
                    value:value,
                    done:done
                }
            }
        }
    }
    let myCase=literator([1,2,3,4,5]);
    console.log(myCase.next());
    console.log(myCase.next());
    console.log(myCase.next());
    console.log(myCase.next());
    console.log(myCase.next());
    console.log(myCase.next());

2. 理解:

和for(let i=0;i

ES6的生成器

1. 代码:

function* myGenerator(arr) {
        for (let i = 0; i < arr.length; i++) {
            yield arr[i];
        }
    }

    let test=myGenerator([1,2,3]);  
    console.log(test.next()); //这儿的next方法,属于test对象
    console.log(test.next());
    console.log(test.next());
    console.log(test.next());

1. 注意’*’的位置
2. 类似于构造器构造对象,next()方法,是这个构造的对象的方法

class 类的简单使用

1. 代码:

/* 类,就是一个构造器而已 */
    class myClass {
        constructor (name){  //这里写属性
            this.name=name
        }
        //并列的位置写方法
        sayHello(){
            alert(`my name is ${this.name}`)
        }
    }

    let myCase=new myClass('jkj');
    myCase.sayHello();

1. 就是一个构造器,关于继承之后再说

set和get的使用,在class 中

1. 代码:

class myClass {
      constructor(name){
          this.name=name;
      }
      get operateName(){
          return this.name;
      }
      set operateName(newName){
          this.name=newName;
          return this.name;
      }
    }
    let me=new myClass('jkj');
    console.log(me.operateName);
    console.log(me.operateName='jasonjkj');

1. 写法,有点类似于jQuery
2. 注意set和get貌似是属性,二者的名字是一样的

在class 类里面的static方法

1. 代码:

/*
    * 静态方法,就是类的方法,是构造器的自由方法
    * 不需要实例化的
    * */
    class myClass {
        constructor (){

        }
        static eat(a){
          alert('我饿了'+a);
        }
    }
    //不用实例化,直接使用
    myClass.eat('参数');

1. static 就是这个类本身的方法
2. 语法:在正常方法前面,直接添加static ,使用类名调用

在类中,继承的使用,extend

1. 代码:

class Person {
        constructor(name,sex){
            this.name=name;
            this.sex=sex;
        }
        sayHello(){
            alert("你好世界")
        }
    }
    //使用继承,再次 super指向的是原型,有原型的方法和属性
    class Teacher extends Person{
        constructor(name,sex,teach){
            super(name,sex);
            this.teach=teach;
        }
        teacherSay(){
            super.sayHello();
        }
    }

    let englishTeacher=new Teacher('jkj','male','English');
    englishTeacher.teacherSay();
    alert(englishTeacher.name);

1. 再次强调super指向原型–或者说是指向继承的原型了,被继承的类也是需要传值的

Set的使用(不重复的对象)

1. 代码:

/*
    * Set也是一个构造器,set类型的对象,里面不可以有重复的
    * */
    let myCase=new Set('abcd'); //字符串参数,会被自动分割开的
    myCase.add('e');
    myCase.add('b');
    myCase.add('b432');  //添加的时候,是作为一个整体的
    console.log(myCase); //b,没有添加进去
    console.log(myCase.size);

    myCase.delete('e');
    console.log(myCase)

    myCase.clear();
    console.log(myCase)

1. 值得注意的还是传参的问题

map的使用

1. map使对象的形式,尤其是键的类型有的很好的灵活性
2. 还是key : value的形式
3. 代码 :

/*
    * 我看来,map就是一个对象
    * 而,for-of 就是为map准备的---二者可以同时使用
    * 总之:还是 key:value的形式,
    * 对象,不可以使用对象作为key ,但是,map 可以随便写
    * */
    let map=new Map();
    //增加
    map.set('a','我是a');
    console.log(map.size);
    //读
    console.log(map);
    console.log(map.get('a'));
    let b=function () {
        alert('我是b');
    };
    map.set(b,function () {
        alert("我是b");
    });
    console.log(map.get(b))  //猜猜b是什么??,b指向的那段代码,变成了key

    //删
    map.delete(b);
    console.log(map);

    //判断有没有的方式
    console.log(map.has('a'));
    console.log(map.has(b));

    //清除map
    map.clear();
    console.log(map);

定义模块的功能

1. 会使用到jspm或者是webpack (刚学了webpack–哎,用到了)
2. 导入和导出的方式
3. 在nodeJS,vue里面有使用–这是模块化的核心
4. 语法:

1. 导出的页面使用
   
export {
参数1,参数2
}

2. 在导入的页面
   
import {a,b} from './需要导入的文件路径'


5. 导入整个对象的方式
   import * as 名字 from './需要导入的文件路径'

默认的模块导出方式

1. 之前使用过 module.export{}
2. 默认导出的语法:

1. export default { }
2. export { 对象 as default }

3. 导入
   
   使用了默认的导出方法之后,导入的语法
   import 变量名 from ‘./导入的文件路径’

补充forEach的用法

1. 代码:

let arr=['a','b','c','d']; //只可以用于数组,对象是不可以的
        arr.forEach((val,key)=>{
            console.log(val,key);  //参数,先value,再key
        })
        arr.forEach(function(val,key){
            console.log(this);   //this 的指向是window,我的天
            console.log(val,key);
        })

1. 注意this的指向,还有这个方法不可以在对象上使用的