ES6

ES6入门一

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        p{line-height: 40px;border-bottom: 1px solid green;}
    </style>
</head>
<body>
<p>1、ES6: chrome、nodeJS 支持97%; ios10 safari 支持100%,<br/>
    使用babel6.5 转换ES6为es5,只支持71%;<br/>
    使用es6-shim解决 ES6兼容性问题，只支持18%;<br/>
    android 4.4 支持5%;  android 5.1支持25%;
    <a href="http://kangax.github.io/compat-table/es6/">详情</a></p>
<p>2.1、let const 在代码块内有效</p>
<script>
    var a =2;
    {
       // a=22;      // 报错
        let a=1;   // 代码块有a 的话，前面不能未定义先使用a
        console.log("a: "+a); // 代码块
    }
</script>
<p>2.2、ES6 代码块内函数表达式</p>
<script>
    {
        let a = 'secret';
        let f = function () {
            return a ;
        }
    }
    if(true){            // if里面也算块级作用域
        const MAX = 5;
    }
   // console.log("MAX: "+MAX);  // error
</script>
<p>3.1变量的解构赋值：从数组和对象中提取值，对变量进行赋值</p>
<script>
    'use strict';
    let [x,y,z]=[1,2,3];
    console.log("x: "+x);
    let {name,age}={age:12,name:'xiaoming'};
    console.log("name: "+name);
    console.log("age: "+age);
    const [a1,b1,c1,d1,e1]='hello';
    console.log("a1: "+a1);
    console.log([[1,2],[3,4]].map(([a,b])=>a+b));
</script>
<p>3.2解构赋值用途  详见文档 </p>
<script>
   // [x2,y2]=[y2,x2]; // 交换变量的值
    function example(){   // 从函数返回多个值
        return [1,2,3];
    }
    let [a3,b3,c3]=example();  // 返回一个对象
    function example2(){
        return{
            a4:1,
            b4:2
        };
    }
    var {a4,b4}=example2();
    // 函数参数定义
    function f2({x3,y3,z3}){
        //...
    }
    f2({z3:3,x3:2,y3:3});  
    // 提取json 
    var jsonData={
        id:42,
        age:11,
        name:'xiaoming'
    }
    let {id ,age2,name2}=jsonData;
    console.log("id: "+id);
    // 遍历map
    var map = new Map();
    map.set('first','hello');
    map.set('second','world');
    for(let [key,value] of map){
        console.log(key+" is "+ value);
    }
</script>
<p>4.1 字符串扩展 字符unicode 详见文档 </p>
<script>
    // 字符串遍历
    for(let point of 'string'){
        console.log("point: "+point);
    }
    console.log('test'.charAt(2));
    var s = 'hello world';
    console.log(s.startsWith('hello'));  // 详见文档
    console.log(s.endsWith('d'));
    console.log(s.includes('r'));  // true
    console.log('x'.repeat(3));  //  xxx
    //console.log('x'.padStart(5,'ab'));  //  ES7  chrome 不支持
</script>
<p>4.2模板字符串 见文档 </p>
<div class="a">123</div>
<div class="b">444</div>
<script src="//cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<script>
    // 传统
    /*$(".result").append(
            '<div>this is ' +basket.name+' and then..'+
            '<span>'+basket.age+'</span>that is all' +
            '</div>'
    );*/
    $(".a").append("" +
            "<div style='border: 1px solid red;'>" +
            "   <span style='color: red;'>this is a</span>" +
            "   <h1>this is h1</h1>" +
            "</div>");
    /* 模板字符串*/
    var name20='kang';   // 嵌入变量 用  ${}
    $(".b").append(`
            <div>
                <span>${name20}</span>
                <h1>ssss</h1>
            </div>`);

        var x20 =3;
        var y20 =6;
        console.log(`${x20}+${y20} = ${x20+y20}`);   //记得添加  ``

</script>
<p>4.3标签模板 见文档</p>
<p>5正则跳过</p>
<p>6 Number</p>
<script>
    console.log(Number.isFinite(222)); // true  只有数字才为true
    console.log(Number.isNaN('222')); // false
    console.log(Number.parseInt('1234'));
    console.log(Number.parseFloat('12.34'));
     //  ES6 把 ES5的 全局函数parseInt转成 Number.parseInt() ,减少全局变量
    console.log(Number.isInteger(23.3)); // false 是否整数

</script>
<p>7.1数组</p>
<h2>h2</h2>
<h2>h2</h2>
<h2>h2</h2>
<h2>h2</h2>
<script>
    var arraylike={   // 对象转数组
        '0':'a',
        '1':'b',
        length:2
    }
    let arr2 = Array.from(arraylike);   // 对象转为数组
    var arr3 = [].slice.call(arraylike);
    console.log("arr2: "+arr2);
    console.log("arr3: "+arr3[1]);

    let ps = document.querySelectorAll('h2'); //  Array.from()
    Array.from(ps).forEach(function(p){    // 数组才有 forEach() 功能
        console.log("p: "+ p.innerHTML);
    })
    console.log(Array.from('hello'));  //  字符串转数组
    console.log('abcdefg'.charAt(3));
    console.log(Array.from([1,2,3],x=>x*x));   // [1,4,9]
    // 第二个参数对前面的数组进行处理 把 每一个值 x 变了 x * x
 </script>
<p>7.2 数组 Array.of()  copyWithin()</p>
<script>
    console.log(Array.of(3,1,4,5,6));
    console.log(Array.of('a','b','c','d'));// ['a','b','c','d']
    console.log(['aa','bb','cc','dd','ee'].copyWithin(0,2,4));
                 // 从0 位置开始，将2号'cc'到长度为(4-2)的'dd ee'复制替换掉aa //  cc dd  cc dd ee
</script>
</body>
</html>

View Code

ES6入门二

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        p{line-height: 40px;
            border-bottom: 1px solid green;}
    </style>
</head>

<body>
<p>7.4 数组  find()  fill()空数组初始化 </p>
<script>
    console.log([1,4,5,10].find(n=>n<6)); // 1  // 返回n<6的第一个值
    console.log(new Array(3).fill(7));   //[7,7,7]
    console.log(['a','b'].fill(7));
</script>
<p>7.5 数组遍历  keys() key的遍历，  values() value的遍历  entries() 键值对遍历</p>
<script>
    for(let index of ['a','b']){
        console.log(index);
    }
    for(let index of ['a','b'].keys()){   // keys()
        console.log(index);
    }
</script>
<p>8.1函数 指定默认值</p>
<script>
    function logs(x,y='world'){
        console.log(x,y);
    }
    logs('hello');   //hello world  //  y为默认值world
    logs('hello','china'); // hello china

    function Point(x=0,y=0){
        this.x = x;
        this.y = y;
    }
    var p = new Point();
    console.log("p: "+p);
</script>
<p>8.2函数 解构赋值    函数的length属性，看文档</p>
<script >
    function test1({x,y=5}){
        console.log(x,y);
    }
    test1({x:10});  // 10 5   // 把对象{x,y=5}作为参数传进去

    // 参数默认值是一个变量时，变量作用域先为当前函数作用域，再是全局作用域
    var x = 11;
    function f(y=x){
        let x = 2;
        console.log(y);
    }
    f();  // 函数调用时，y的默认值X 尚未在函数内部生成，此时，x 指向全局变量
</script>
<p>8.3 rest参数  (...变量名)  传入一堆变量   </p>
<script>
    function add(...nums){
        let sum = 0;
        for(let num of nums){
            sum+=num;
        }
        return sum;
    }
    console.log(add(2,1,3,4,5,33));   // 传入一堆数，求合
</script>
<p>8.4 扩展运算符  ...  详见文档</p>
<script >
    var nums=[4,33,23,3,5,532];
    function add(x,y,z){
        return x+y+z;
    }
    console.log(add(...nums));
    console.log(Math.max(...[14,3,22]));   // 数组求最大值
    console.log(Math.max(14,3,32));
    var arr1 = [0,1,2,3,4];
    var arr2 = [5,6,7];
    console.log([...arr1,...arr2]);    // 合并数组
</script>
<p>85. 函数 严格模式 es6规定只要函数参数使用了默认值、解构赋值，或者扩展运算符，那么函数内部
就不能显式设定为严格格式</p>
<script >
    function test22(a,b=1){
      //  "use strict";   // 报错 参数用了默认值
        console.log(a,b);
    }
    test22(3);
</script>
<p>8.6 函数 name属性  返回函数名</p>
<script>
    function foo(){}
    console.log(foo.name);
    var foo1= function () {

    }
    console.log(foo1.name);
</script>
<p>箭头 => 函数</p>
<script >
    var f = v => v;   // 箭头前是参数，箭头后是对参数进行处理，返回
    //上面函数等同于如下
    /*var f = function (v) {
        return v;
    }*/
    console.log(f(6));
    // 如果箭头函数不需要参数或需要多个参数，则用一个圆括号来代表参数部分
    var f1 = () => 533;
    // 等同于
    /*var f1 = function () {
        return 5;
    }*/
    console.log(f1());
    var f2 = (num1,num2) => num1+num2;
    console.log(f2(3,4));

    // 简化回调函数
    // 正常写法
    console.log([1,2,3,4].map(function (x) {
        return x *　x;
    }));
    // 箭头函数
    console.log([1,2,3,4].map(x=>x*x));
</script>
<p>9.1 对象 简洁法</p>
<script >
    var foo = 'bar';
    var baz = {foo};   // ==  var baz = {foo:foo};
    console.log(baz);  //  Object {foo:"bar"}
    //  -------
    function f3(x,y){
        return {x,y};   // == return {x:x,y:y};
    }
    console.log(f3(3,5));  // Object{x:3,y:5}
    // -------
    var o = {
        test4(){           // ==  test4:function(){ return ...}
            return 'hello';
        }
    };
    console.log("o: "+ o.test4());
    // ------
    var birth = '2012/2/2';
    var Person = {
        name:'xiaom',
        birth,    //   ===   birth:birth
        hello(){return 'my name is '+this.name+' '+this.birth;}
    }
    console.log("person: "+Person.name);
    console.log("person2: "+Person.hello());
   // 表达式  
   let obj = {
       ['he'+'llo'](){
        return 'hi';
    }
   };
    console.log("hi: "+obj.hello());
    console.log("hi2: "+obj.hello.name);  //  对象方法的name属性
</script>
<p> object.is ()  同值相等</p>
<p>Object.assign 对象合并</p>
<script>
   var target = {a:1};
    var source1 = {b:2};
    var souce2 = {c:3};
    Object.assign(target,source1,souce2);
    console.log("source: "+target);   // 合并成对象 target {a:1,b:2,c:3}
    //  -------
    var v1  = 'abcc';
    var v2 = true;
    var v3 = 10;
    var obj10 = Object.assign({},v1,v2,v3);  // 只有字符串才能转成对象
    console.log("obj10: "+obj10[0]+ ' ;typeof: '+ typeof obj10);
</script>
</body>
</html>

View Code

ES6入门三

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        p{line-height: 40px;
            border-bottom: 1px solid green;}
    </style>
</head>

<body>
<p>9.2 Object.assign() 对象的合并，用途见文档</p>
<p>10.1 Symbol 第7种数据类型，表示独一无二、对象的属性名独一无二</p>
<script>
    let s = Symbol();
    console.log("symbol: "+typeof s);

    var mySymbol = Symbol();
    //      ==========
    var a = {};
    a[mySymbol] = 'hello';   // symbol作为对象属性名，表示独一无二，不会被覆盖
    //       =============
    var b = {
        [mySymbol]: 'hello2'  // 注意写法
    }
    console.log("a[mySymbol]: "+a[mySymbol]);
    console.log("b[mySymbol]: "+b[mySymbol]);
</script>
<p>10.2增强对象写法</p>
<script>
    let obj = {
        [s](arg){              // 对象中 属性名加[] 表示 symbol值，独一无二
            return arg+' ...';
        }
    }
    console.log("obj: "+obj[s](10));  // 10 ...    注意写法
</script>
<p>Symbol.for() 重新使用同一个Symbol值</p>
<script>
    var s1 = Symbol.for('dd');
    var s2 = Symbol.for('dd');
    if(s1===s2){
        console.log("ok: ");
    }else{
        console.log("no: ");
    }
</script>
<p>Symbol应用于Singleton 单例模式</p>
<p>11.1 【难点】proxy代理 ，外界访问对象时，都先经过proxy    get()/set() 应用于 js 对象的private</p>
<script>
    var person = {
        name:'xiaoming'
    };
    //var proxy2 = new Proxy(target,handler); //第一个指目标对象 person ,第二个对象handler{}是处理方法
    var proxy = new Proxy(person,{
        get:function (target, property) {
            if(property in target){     // 如果对象属性存在，则返回，否则抛出异常
                return target[property];
            }else{
                throw new ReferenceError("property: "+property+" does not exist");
            }
        }
    })
    console.log("proxy.name: "+proxy.name);
  //  console.log("proxy,age: "+proxy.age);  //  referenceError
</script>
<p>Reflect 看文档</p>
<p>12.1 set 类似数组，但成员不重复</p>
<script>
    //  1
    var s2 = new Set();
    [2,3,4,2,3,5,6,9].map(x => s2.add(x));
    for(let i of s2){
        console.log("set: "+i); // 2 3 4 5 6 9
    }
    //   2
    var s3= new Set([12,2,4,2,53]);
    console.log("...set: "+[...s3]); // 去除数组重复  [...new Set(array)]

</script>
<p>12.2 set 增删查改 add() delete() has() clear() </p>
<script>
    var s4 = new Set();
    s4.add(1).add(2);
    console.log("set2: "+[...s4]);
    s4.delete(1);
    console.log("set22: "+[...s4]);
</script>
<p>12.3 Array.from可以把 set 转换为数组</p>
<script>
    var items= new Set([1,2,3,4,5]);
    var array = Array.from(items);
    console.log("array: "+array+" "+array[2]);
</script>
<p>12.3 set 遍历   keys()  values() entries() 键值对 forEach()</p>
<script>
    //  1
    let s5 = new Set(['red','green','blue']);
    for(let item of s5.values()){
        console.log("item: "+item);  // red green blue
    }
    //  2   forEach 通过回调函数对成员进行处理
    let s6 = new Set([1,2,44]);
    s6.forEach(value=>console.log(value*2));
</script>
<p>12.4 weakSet 只能放对象,WeakSet中的对象都是弱引用，即垃圾回收机制不考虑WeakSet对该对象的引用</p>
<p>12.5 Map键值对</p>
<script>
//       1
var map2 = new Map([
    ['name','小明'],
    ['age',12]
]);
console.log("map2: "+map2.get('name'));
console.log("map2: "+map2.get('age'));
//      2
let map = new Map()
    .set(1,'a')
    .set(2,'b')
    .set(3,'c');
console.log("map3: "+map.get(1));
console.log("map3: "+map.get(2));
console.log("map3: "+map.get(3));
</script>
<p>13.1 Iterator 遍历器  for... of 原理见文档</p>
<script>
    //   应用
    //  1. 解构赋值
    let set2 = new Set().add('a2').add('b2').add('c2');
    let [x ,y]= set2;
    console.log("x: "+x);
    console.log("y: "+y);
    let [first, ...other] = set2;
    console.log("first: "+first);
    console.log("other: "+other);
    //  2  set
    let set3 = new Set().add('a3');
    console.log("set3: "+[...set3]);   // 用 [...set3]来输出 set
    var arrList = Array.from([...set3]);
    console.log("arrList: "+arrList[0]);
    // 3   扩展运算符
    var str = 'hello';
    console.log("str: "+[...str]);
    var str2 = [...str];
    console.log("str2: "+str2[0]);
</script>
<p>14.1Generator 异步编程</p>
<script>
    function* hello() {    // 有个 * 号
        yield 'hello';     // 使用 yield 暂停标志
        yield 'world';
        return 'ending';
    }
    var hm = hello();
    var first2=hm.next();   // 使用 Iterator 的 next()方法
    console.log("first: "+first2.value);  //  hello
    console.log("hello: "+(yield 123));
</script>
</body>
</html>

View Code

ES6入门四

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        p{line-height: 40px;
            border-bottom: 1px solid green;}
    </style>
</head>
<p>14.1Generator函数是遍历器生成函数，把它赋值给对象的Symbol.iterator属性，则该对象具有Iterator接口</p>
<body>
<script>

   var my = {};
   my[Symbol.iterator]=function* () {
       yield 1;
       yield 2;
       yield 3;
   };
   console.log("test: "+[...my]);
</script>
<p>14.2 next方法的参数表示上一个yield语句的返回值</p>
<script>
    function* f() {
        for(var i =0;true;i++){
            var rest = yield i;
            if(rest){
                i = -14;
            }
            console.log("rest: "+rest);
        }
    }
    var g = f();
    console.log("f: "+g.next().value);
    console.log("f: "+g.next().value);
    console.log("f: "+g.next(true).value);
    console.log("f: "+g.next().value);
    //遇到 yield 语句，就暂停执行后面的操作，并将紧跟在yield后面的表达式的值
    //作为返回的对象的value 属性值
    function* foo(x) {
        var y = 2*(yield (x+1));
        var z = yield (y/3);
        console.log("y: "+y);  //24
        console.log("z: "+z);  //13
        return (x+y+z);
    }
    var a = foo(5);
    console.log("a: "+a.next().value);
    console.log("a: "+a.next().value);
    console.log("a: "+a.next().value);
    var b = foo(5);
    console.log("b: "+b.next().value);    //6
    console.log("b: "+b.next(12).value);   //8
    // 把上一次yield 语句的值设为12 即 yield (x+1) = 12; y =2*12=24
    console.log("b: "+b.next(13).value);  //42
    // 把上一次yield 语句的值设为13 即 yield (y/3) = 13; z =13
</script>
<p>14.3 for...of 可以遍历Generator函数生成的Iterator对象，不需要next方法</p>
<script>
    function* foo2() {
        yield 1;
        yield 2;
        yield 3;
        yield 4;
        return 5;
    }
    for(let v of foo2()){   // 注意是 foo2()
        console.log("v: "+v);// 1 2 3 4  不包括return 的结果
    }
</script>
<p>14.4 for...of 扩展运算符... 解构赋值 Array.from,调用的都是遍历器接口，都可以
将Generator函数返回的Iterator对象，作 为参数</p>
<script>
    function* num() {
        yield 1;
        yield 2;
        return 3;
    }
    //  注意写法  num()
    console.log("num: "+[...num()]); // [1,2]
    console.log("num: "+Array.from(num()));
    let [x,y]=num();
    console.log("x: "+x);
    console.log("y: "+y);
    for(let n of num()){
        console.log("n: "+n);
    }
</script>
<p>14.5 Generator try...catch...看文档</p>
<p>14.6 Generator return</p>
<script>
    function* num2() {
        yield 4;
        yield 5;

    }
    var num2= num2();
    console.log("num2: "+num2.next().value);     //     4
    console.log("num2: "+num2.return(10).value); //     10
</script>
<p>14.7 yield* 调用其他 Generator</p>
<script>
    function* test() {
        yield 'a';
        yield 'b';
    }
    function* test2() {
        yield 'x';
        yield* test();
        yield 'y';
    }
    for(let i of test2()){
        console.log("test: "+i);
    }
</script>
<p>15.1 promise 异步编程，比回调函数、事件好 Generator也是异步编程</p>
<script>
    var promise = new Promise(function (resolve, reject) {
        // 方式一                         //解决    // 拒绝
        /*if(/!*异步操作成功*!/){
            resolve(value);   //  value  异步操作结果
        }else{
            reject(error);
        }*/
    });
    //   方式二
        promise.then(function (value) {
            // success
        },function (error) {
            // failure
        });
</script>
<p>15.2 promise 第一个then方法异步返回的结果可以传入第二个回调函数</p>
<script>
    /*
    function getJSON() {
        // ...
    }
    getJSON("/a.json").then(
        post => getJSON(post.commentURL)
    ).then(
        comments => console.log("resoleved"),
        err => console.log("reject")
    )
    */
    //  => 箭头函数  第一个是参数 =>  后面是函数内容、返回值
    var sum = x =>x*2;
    console.log("sum: "+sum(2));
</script>
<p>15.3 promise.catch...  看文档</p>
<p>16.4异步操作   1.回调函数 2.事件监听 3.Promise
    传统回调函数要嵌套一堆函数，使用Promise 有一堆 then函数
    使用Thunk 来自动执行 Generator函数 详见文档
    ES7 提供 async 函数
</p>
<p>17.1 Class 类   ES5基本实现了类的绝大部分功能，ES6引入 class类 </p>
<script>
    class Bar{
        constructor(x,y){   // 构造器
            this.x=x;
            this.y=y;
        }
        toString(){        // 方法
            return this.x+" --- "+this.y;
        }
    }
    var b = new Bar(1,2);   // new
    console.log("b: "+b.toString());
    var b2 = new Bar(3,4);
    b2.__proto__.test33=function () {  //  扩展 test33() 方法，每个实例都可调用
        return 'abc';
    }
    console.log("b: "+b.test33());
    console.log("b2: "+b2.test33());
</script>
<p>17.2 class表达式</p>
<script>
    const MyClass= class{   // 把类赋值给一个变量，最后变成   class MyClass{}
        constructor(name){
            this.name=name;
        }
        getClassName(){
            return this.name;
        }
    }
    var inst = new MyClass('xiaoming');
    console.log("myclass: "+inst.getClassName());
</script>
<p>17.3 class私有方法 this 见文档 </p>
<p>17.4 extends</p>
<script>
    class Points{
        constructor(x,y){
            this.x=x;
            this.y=y;
        }
    }
    class ColorPoints extends Points{
        constructor(x,y,color){
            super(x,y);         // 调用父类构造函数用 super()
            this.color=color;
        }
    }
    if(Object.getPrototypeOf(ColorPoints)=== Points){
        console.log("ook: ");
    }
</script>
<p>18. Decorator 类的修饰  ES7 babel转换器已支持  chrome 好像不支持</p>
<script>
    // 1.添加属性
    function testable(target) {
        target.isTestable=true;
    }
    @testable
    class People{}
    console.log("deco: "+People.isTestable);
</script>
<p>19.1 Module模块化 可取代 CommonJS（用于服务器） 和AMD规范（浏览器）
ES6模块化思想，尽量静态化，编译时就有确定模块的依赖关系，使用严格模式</p>
Node默认模块是CommonJS
</body>
</html>

View Code

posted @ 2016-11-16 16:44 gyz418 阅读(239) 评论(0) 收藏举报

刷新页面返回顶部

gyz418

ES6

公告