JS学习笔记

1 Comment
JS学习笔记实录：
    <script>
        //  ##### JS语法
        var arr = [1,3,’word’,6,’5′];
        console.log(arr);

        //  indexOf获取数组下标 slice 截取数组 pop 删除数组最后一个 push 在数组最后增加
        console.log(‘indexOf获取数组下标->’+arr.indexOf(‘word’));
        console.log(‘slice截取数组->’+arr.slice(1,3));
        console.log(‘pop删除数组最后一个->’+arr.pop());
        console.log(‘push在数组最后增加->’+arr.push(‘==’));
        console.log(arr);
        //  在数组头部 shift 减少 unshift 增加
        console.log(arr.shift());
        console.log(arr.unshift(’11’));
        console.log(arr);
        //  排序
        console.log(arr.sort());
        //  元素反转
        console.log(arr.reverse());
        //  指定的索引开始删除若干元素，然后再从该位置添加若干元素
        console.log(arr.splice(1,2,’add1′,’add2′,’add3′));
        console.log(arr);
        //  数组连接
        console.log(arr.concat(‘concat1′,[‘concat1-1′,0]));
        //  数组返回字符串
        console.log(arr.join(‘-‘));
        
        //  案例测试
        //  var arr = [[1, 2, 3], [400, 500, 600], ‘-‘];  获取500
        var arr = [[1, 2, 3], [400, 500, 600], ‘-‘];
        console.log(arr[1][1]);
        
        //  ES6支持  Map属性get set delete has
        var arr = new Map([[‘name’,’cc’],[‘age’,’12’],[‘cute’,’yes’]]);
        console.log(arr.get(‘name’)+’,age:’+arr.get(‘age’));
        console.log(arr.has(‘age’));
        console.log(arr.set(‘height’,’155cm’));
        console.log(arr.delete(‘cute’));
        console.log(arr);
        
        //  ES6支持 for…of
        for(var x of arr){
            console.log(x);
            console.log(x[0]);
            console.log(x[1]);
        }
        
        //  arguments可判断参数 可获取参数
        function abs(…rest) {
            console.log(arguments);
            var x = arguments[0];
            console.log(x >= 0 ? x : -x);
            console.log(‘rest=’+rest);
        }
        abs(); // 0
        abs(-9); // 9
    </script>
    
    <script>
        //  使用严格模式 禁用一些糟糕的特性 
        “use strict”;
        //  ##### JS函数
        //  内部函数和外部函数的变量名重名 JavaScript的函数在查找变量时从自身函数定义开始，从“内”向“外”查找。如果内部函数定义了与外部函数重名的变量，则内部函数的变量将“屏蔽”外部函数的变量
        function test() {
            var x = 1;
            function bar() {
                var x = ‘A';
                console.log(‘x in bar() = ‘ + x); // ‘A’
            }
            console.log(‘x in test() = ‘ + x); // 1
            bar();
        }
        test();
        
        //  js内部函数的重写  如查看toString被调用的次数
        var brr = [1,2,3,4]
        var count = 0;
        var oldToString = toString; // 保存原函数
        window.toString = function () {
            count += 1;
            return oldToString.apply(null, arguments); // 调用原函数
        };
        // 测试:
        toString(brr);
        toString(brr);
        console.log(toString(brr));
        console.log(count); // 3
        
        //  map() 对数组的单个元素进行操作
        function pow(x) {
            return x * x;
        }
        var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9];
        console.log(arr.map(pow)); // [1, 4, 9, 16, 25, 36, 49, 64, 81]
        
        // reduce() 对整个数组元素进行操作
        function add(x,y){
            return x+y;
        }
        var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9];
        console.log(arr.reduce(add));//1+2…+9
        
        //  filter 对元素进行过滤 按照返回是true/false来决定取舍
        var arr = [‘A’, ”, ‘B’, null, undefined, ‘C’, ‘  ‘];
        var r = arr.filter(function (s) {
            return s && s.trim(); // 注意：IE9以下的版本没有trim()方法
        });
        console.log(r); // [‘A’, ‘B’, ‘C’]
        
        //  sort()  排序 注意：Array的sort()方法默认把所有元素先转换为String再排序，默认情况下，对字符串排序，是按照ASCII的大小比较,所以数字比较应当重写函数
        var arr = [10, 20, 1, 2];
        function dosort(x, y) {
            if (x < y) {
                return 1;
            }
            if (x > y) {
                return -1;
            }
            return 0;
        }
        console.log(arr.sort(dosort)); // [20, 10, 2, 1]
        
        // 利用闭包实现类似类里的私有属性
        function create_counter(initial) {
            var x = initial || 0;
            return {
                inc: function () {
                    x += 1; //x
                    return x;
                }
            }
        }
        var c2 = create_counter(10);
        console.log(c2.inc()); // 11
        console.log(c2.inc()); // 12
        console.log(c2.inc()); // 13
        
        //  箭头函数 xx =>   相当于  function xx() 
        
        //  generator function*定义 使用yield 进行多次返回
        function* fib(max) {
            var
                t,
                a = 0,
                b = 1,
                n = 1;
            while (n < max) {
                yield a;
                t = a + b;
                a = b;
                b = t;
                n ++;
            }
            return a;
        }
        var ff = fib(5);
        var i=0;
        while (i<5) {
            i++;
            console.log(ff.next()); // 依次输出0, 1, 1, 2, 3
        }
    </script>
    
    <script>
        //  对象
        var n = 123;
        console.log(typeof n);
        n = new Number(n); // 进行对象的包装 new
        console.log(typeof n);
        // 规则
        /*
         *不要使用new Number()、new Boolean()、new String()创建包装对象；
         *用parseInt()或parseFloat()来转换任意类型到number；
         *用String()来转换任意类型到string，或者直接调用某个对象的toString()方法；
         *通常不必把任意类型转换为boolean再判断，因为可以直接写if (myVar) {…}；
         *typeof操作符可以判断出number、boolean、string、function和undefined；
         *判断Array要使用Array.isArray(arr)；
         *判断null请使用myVar === null；
         *判断某个全局变量是否存在用typeof window.myVar === ‘undefined’；
         *函数内部判断某个变量是否存在用typeof myVar === ‘undefined’。
        **/
        
        //  时间
        var now = new Date(); // 月份范围用整数表示是0~11
        console.log(now); // Wed Jun 24 2015 19:49:22 GMT+0800 (CST)
        now.getFullYear(); // 2015, 年份
        now.getMonth(); // 5, 月份，注意月份范围是0~11，5表示六月
        now.getDate(); // 24, 表示24号
        now.getDay(); // 3, 表示星期三
        now.getHours(); // 19, 24小时制
        now.getMinutes(); // 49, 分钟
        now.getSeconds(); // 22, 秒
        now.getMilliseconds(); // 875, 毫秒数
        now.getTime(); // 1435146562875, 以number形式表示的时间戳
        
        //  正则
        var re = /^\w{3}\-\d{3,8}$/;
        console.log(re.test(‘qwe-123123′));
        //  正则切割
        console.log(‘a,b;; c  d’.split(/[\s\,\;]+/)); // [‘a’, ‘b’, ‘c’, ‘d’]
        //  正则分组匹配
        var re = /^(\d{3})-(\d{3,8})$/;
        console.log(re.exec(‘010-12345′)）; // [‘010-12345′, ‘010’, ‘12345’]
        //  g表示全局匹配 i标志，表示忽略大小写，m标志，表示执行多行匹配
        
        //  序列化JSON.stringify(arr,’特定属性或操作函数’,’显示方式’) 与 反序列化JSON.parse(arr,’操作函数’)
    </script>

One Comment

发表评论