es6的理解

超、凢脫俗 2022-07-19 01:53 214阅读 0赞

1.  sublime 设置 运行js(es6) “cmd”: \[“node”, “–use-strict”, “–harmony”, “$file”\], “selector”: “source.js”\}
2.  语法糖(syntactic sugar)是指编程语言中可以更容易的表达一个操作的语法，它可以使程序员更加容易去使用这门语言：操作可以变得更加清晰、方便，或者更加符合程序员的编程习惯。如箭头函数，箭头函数可以绑定this对象，大大减少了显式绑定this对象的写法
    
        a => a;
        等同于
        (function (a) {
          return a;
        });
3.  对于三个点号，三点放在形参或者等号左边为rest运算符; 放在实参或者等号右边为spread运算符，或者说，放在被赋值一方为rest运算符，放在赋值一方为扩展运算符。

// 扩展运算符例子1
        let arr = [1,20,3,5,13];
        let res1 = Math.max(arr); //max不能取数组的最大值，用来取字符串的最大值
        let res2 = Math.max(...);
        console.log(...arr);
        console.log('-------');
        console.log(res1,res2);
    	// 结合react 使用扩展操作符
    	class Hello extends React.component {
    		constructor(props){
    			super(props);
    		}
    		getProps(){
    			retrun {
    				className: 'line',
    				title: 'hover'
    			}
    		}
    		render(){
    			let props = this.getProps();
    			return (
    				<div>
    					<p className="line" title="hover">第一行</p>
    					<p {...props}>第二行</p>
    				</div>
    			);
    	
    		}
    		React.render(<Hello name='world' />,document.body);
    	}

1.  Object.keys(),Object.values(),Object.entries()的理解
    
        let {keys, values, entries} = Object;
        let obj = { a: 1, b: 2, c: 3 };
        
        for (let key of keys(obj)) {
          console.log(key); // 'a', 'b', 'c'
        }
        
        for (let value of values(obj)) {
          console.log(value); // 1, 2, 3
        }
        
        for (let [key, value] of entries(obj)) {
          console.log([key, value]); // ['a', 1], ['b', 2], ['c', 3]
        }
2.  一个简单的继承
    
        class TestA {
          constructor(name){
            this.name=name;
            this.saywords=[];
          }
          say(word){
            this.saywords.push(word);
          }
          sayout(){
            console.info(this.saywords);
          }
          static run(){
            console.log("++run++");
          }
        }
        class TestB extends TestA{
          constructor(name){
            super(name);
          }
          say(word){
            this.saywords.push(word);
          }
        }
        function main(){
          let b = new TestB("B");
          ['A','B','C','D','E'].map((item)=>b.say(item));
          b.sayout();
          TestB.run();
        }
        main();
3.  字符串新特性
    
        /*
        *判断一个字符串中是否含有指定值
        */
        let str = "我的邮箱是aaa@bbb.com";
        //es5
        if(str.indexOf("@">-1)){
        	console.log("包含@");
        }
        //es6
        if(str.includes("@")){
        	console.log("包含@");
        }
        
        /*
        *字符串模版
        */
        var person = {
        	name: "jack",
        	age: "18"
        }
        let res = `我的名字是${person.name},年龄是${person.age}`;
        console.log(res);
4.  assign介绍
    
        //与extend表现相同，均为浅拷贝
        let o1 = {
            a: 1,
            b: 2,
            c: {
                e: 5,
                f: 6
            }
        }
        let o2 = {
            a: 10,
            c: {
                e: 50
            },
            d: 40
        }
        let res1 = $.extend({}, o1, o2);
        let res2 = Object.assign({}, o1, o2);
        console.log(res1);
        console.log(res2);
        let t1 = {
                a: 1
            },
            t2 = {
                a: 1
            },
            t3 = t1;
        console.log(t1 == t2, t1 == t3);
        console.log(o1.c == res1.c, o1.c == res2.c, o2.c == res2.c, o2.c == res1.c);
5.  解构赋值的应用
    
        //用解构赋值处理json格式的返回数据
        var data = {
            success: true,
            content: {
                list: [1, 2, 3]
            }
            errorMsg: '找不到数据'
        }
        let { success, content, errorMsg } = data;
        if (success) {
            console.log(content);
        } else {
            console.log(errorMsg);
        }