前端第24次总结--JavaScript作用域、闭包、IIFE、数组、数组方法、排序、类数组、对象、json、this、字符串的属性和方法、正则方法、字符集、边界、量词

前端第24次总结–JavaScript作用域、闭包、IIFE、数组、数组方法、排序、类数组、对象、json、this、字符串的属性和方法、正则方法、字符集、边界、量词

作用域

闭包

// 函数封闭数据的作用
        function demo() {
            var num = 10;
            console.log(num);
        }
        demo();
        // 外部不能访问内部数据
        console.log(num);

        // 在函数内部封装一个函数
        function demo(){
            var num = 10;
            function inner() {
                console.log(num);
            }
            inner();
        }
        demo();
        // // 将内部函数暴露在外部
        function demo(){
            var num = 10;
            function inner() {
                console.log(num);
            }
            return inner; 
        }
        // 此时outer 就是 inner
        var outer = demo();
        console.log(outer);


        function init(x,y) {
            return function(y) {
                console.log(x+y);
            }
        }
        var add = init(2,4);
        // x使用的是外面的，y使用的是内部的
        console.log(add);
        add(5);
        add(6);
        add(7);

IIFE

// 普通函数
        function demo() {
            console.log('demo');
        }
        // // 函数表达式
        var demo2 =function() {
            console.log('demo2');
        }


        // // 创建执行函数：IIFE
        var demo3 = function demo3() {
            console.log('demo3');
        }()
        // 函数结尾处加一对圆括号，表示立即执行，IIFE函数
        // 小括号可以在函数名和函数表达式的后面
        // 下面这种函数定义式8行 

        // 可以将函数定义式转换为表达式  加任何运算符将其转换为表达式，后面就可以加()了
        !function demo4() {
            console.log('demo4');
        }();
        +function demo4() {
            console.log('demo4');
        }();
        -function demo4() {
            console.log('demo4');
        }();
        // // 通常采用圆括号将其括起来
        // // 转换成表达式后一定要加分号！！否则报错
        (function demo4() {
			console.log('demo4');
		})();
        
        //转换为表达式之后，就不能再当作函数了 
        // 转换为表达式后,存储的是运行后的结果
        // 表达式不能直接访问,但是可以通过变量访问


        // 我们可以将函数看作是方法名称,()看作参数集合
        var demo = (function(num) {
            console.log(1111,num);
        }(100));

        // IIFE返回值可以参与运算
        var demo = (function(){
            return 100;
        })() + 200;
        console.log(demo);

数组

数组方法

arr = [1,2,3,4,5]
        // pop、push、shift、unshift   返回值是数组长度
        var result = arr.pop();
        var result = arr.push(10,20,30);
        var result = arr.shift();
        var result = arr.unshift(100);
        console.log(result,arr);


        // 堆栈
        arrr = [1,2,3,4,5];
        arrr.push(6);
        console.log(arrr);
        arrr.pop();
        console.log(arrr);
        
        // 队列
        arrr.push(6)
        console.log(arrr);
        arrr.shift();
        console.log(arrr);

        // 将冬放到最前面
        arr = ['春','夏','秋','冬'];
        // var item = arr.pop();
        // arr.unshift(item);
        // console.log(arr);
        arr.unshift(arr.pop());
        console.log(arr);

// concat 组合
        var arr1 = [1,2,3,4];
        var arr2 = [5,6,7,8];
        var result = arr1.concat(arr2,111,222,333,444);
        console.log(result);

        // slice 拆分截取
        var arr = [0,1,2,3,4,5,6,7,8,9];
        var result = arr.slice(0,4);
        console.log(result);
        console.log(arr);
        
        var result = arr.slice(4);
        console.log(result);
        
        // 负数只能-5到-1，按照顺序，起始位置不能大于结束位置
        var result = arr.slice(-5,-1);
        // var result = arr.slice(-1,-5);
        console.log(result);

var arr = [0,1,2,3,4,5,6,7,8,9];
        // 删除
        var result = arr.splice(4,3);
        console.log(arr);
        
        // 插入  不能写数组插入（整体插入），要一个一个写
        var result = arr.splice(4,0,10,11,12,13);
        console.log(arr);
        
        // 替换
        var result = arr.splice(4,4,20,21,22,23);
        console.log(arr);
        

数组排序

arr = [2,5,8,3,6,9,2,4,6];
        // 倒序
        var result = arr.reverse();
        console.log(result);
        
        // 排序
        var result = arr.sort();
        console.log(result);
        
        arr = [2,5,8,3,6,9,2,4,6];
        // 比较函数
        var result = arr.sort(function(a,b){
            console.log(a,b);
            // a>b,升序，a<b,降序
            return a-b;
        });
        console.log(result);

var arr = ['春','夏','秋','冬'];
        // 不加参数默认逗号
        var result = arr.join();
        console.log(result);
        // 加参数  表示用参数进行连接
        var result = arr.join("+++");
        console.log(result);

// 定义函数
        function demo(a,b) {
            console.log(arguments);

            console.log(a,1111,arguments[0]);
            console.log(b,2222,arguments[1]);

            console.log(arguments.length);
        }

        demo();
        demo(1);
        demo(1,2);
        demo(1,2,3);

对象

 // 用js模拟重载
        function add() {
            // 判断arguments个数
            // 类数组是没有数组的方法的
            if (arguments.length === 1) {
                return arguments[0] + 1;
            }else if (arguments.length === 2) {
                return arguments[0] + arguments[1];
            }else if (arguments.length === 3) {
                return arguments[0]*10 +arguments[1] +arguments[2];
            }
        }

        //工作中，由于arguments访问参数很麻烦，因此我们可以用形参来简化，用arguments判断个数
        function add(a,b,c) {
            // 判断arguments个数
            if (arguments.length === 1) {
                return a + 1;
            }else if (arguments.length === 2) {
                return a + b;
            }else if (arguments.length === 3) {
                return a*10 + b + c;
            }
        }
        console.log(add(1));
        console.log(add(1,2));
        console.log(add(1,2,3));

json

// 对象 
        // 汽车
        var obj = {
            color : 'red',
            // 属性名也可以用引号包裹，例如出现不合法的属性名称，就可以包裹引号。
            'num' : 10,
            'price' : 1000
        }

        // json
        var json = '{"color":"red","num":"10","price":"1000"}';
        // var json = "{'color':'red','num':'10','price':'1000'}";

        // 因为函数在不同语言中语法不同，json不能存储函数

        // 对象转json
        console.log(JSON.stringify(obj)); 

        // json转对象
        console.log(JSON.parse(json));

// 全局的this指向window
        console.log(this);
        console.log(window);
        // 全局定义的变量，方法会挂载在window上
        var color = 'red';
        function demo () {
            // 全局定义的函数 this 也指向window
            console.log(window.color,this);
        }
        window.demo();


        // 对象中对方法
        var ickt = {
            msg:'hello',
            getMsg:function getMsg(){
                console.log(this);
                console.log(this.msg);
            }
        }
        // 执行对象的方法
        ickt.getMsg();

字符串的属性和方法

var str = 'hello ickt!';
        // 长度
        console.log(str.length);
        // 索引值访问
        console.log(str[1]);
        // charAt  从0开始  返回这个地方的字符
        console.log(str.charAt(1));
        // charCodeAt  返回该字符的编码
        console.log(str.charCodeAt(1));
        var str = '019AZaz';
        // 数字【48-57】大写字母【65-90】小写字母【97-122】空格【32】
        for (var i=0,len = str.length;i<len;i++) {
            console.log(str.charAt(i),str.charCodeAt(i));
        }
        // indexOf  某个字符首先出现的位置   不存在返回-1
        var str = 'hello ickt!';
        console.log(str.indexOf('ickt'));
        console.log(str.indexOf('icku'));
        // concat  字符串拼接
        var str2 = 'abc';
        var result = str.concat(str2,'day',1,'aaa',123);
        console.log(result,str);
        // split  字符串切割--》字符串转为数组，每一项仍然是字符串
        // 不传递参数不会切割，原来的字符串
        console.log(str.split());
        console.log(str.split(""),str);

        // 数组降维  都是字符串才行，不然会有类型转化
        arr = [1,[2],3,[4,5]];
        // 像将其转为字符串  join 将数组中的所有元素放入一个字符串
        console.log(arr.join());
        console.log(arr.join().split(','));

var str = 'hello ickt!';
        // 大写
        console.log(str.toUpperCase());
        // 小写
        console.log(str.toLowerCase());
        // 截取1   2是start  4是end 前闭后开
        console.log(str.slice(2,4));
        // 截取2   4是长度
        console.log(str.substr(2,4));
        // 截取3   4是end，参数不可以书写负数，start和end可以不区分顺序。小前大后
        console.log(str.substring(2,4));

        // 负数的时候
        var str = '0123456789';
        console.log(str.slice(-2,-8));      // ''  slice(8,2) 
        console.log(str.substring(-2,-8));  // ''  substring(0,0)
        console.log(str.substring(2,-8));  // ''   substring(0,2)
        console.log(str.substr(-2,-8));     // ''  substr(8,0)

正则表达式

var str = 'hello ickllt!';
        var reg = /ll/;
        console.log(reg.exec(str));
        console.log(reg.exec('ickt'));  //null

        console.log(reg.test(str));     //true
        console.log(reg.test('ickt'));  //false

// match
        var str = 'hello ickt abc';
        console.log(str.match('ickt'));
        var str = 'hello icKt abc';
        // 不区分大小写后面加个i
        console.log(str.match(/ickt/i));
        
        // search
        var str = 'hello ickt abc';
        console.log(str.search('ickt'))
        // 不区分大小写后面加个i
        console.log(str.search(/ickt/i));

        // replace
        console.log(str.replace(/ickt/i,'ICKT'),111,str);

// 匹配abc
        var reg = /abc/;
        // abc为普通字符，必须紧挨在一起
        console.log(reg.test('abcdefg'));

        // 预定义特殊字符,是一个整体，不能拆开，匹配的时候也一样
        // \r制表符
        var str = 'hello\nic\rkt';
        console.log(str);
        console.log(/\n/.test(str));
        console.log(/\r/.test(str));

        // 修饰符
        var str = 'hello\ni\nc\rkt';
        // 将\n换成111
        console.log(str.replace(/\n/g,111));
        
        // 忽略大小写
        var str = 'hello ickT';
        console.log(str.replace(/ickt/i,'abc'));

        // 多行匹配  多行字符串  两个飘键
        var str = 'hello lalala\nhello lalala\nhello lalala\nhello lalala';
    
        console.log(str);
        console.log(str.replace(/^hello/g,'abc'));
        console.log(str.replace(/^hello/gm,'abc'));
        // m多行匹配是改变^和$的位置，例如str，不加m只匹配第一个hello，整个str是一个整体。加了m每一行是一个整体。

// 字符集
        // 简单类
        // 在[]中表示abc哪个都行，不加[],表示abc是个整体
        console.log(/[abc]/.test('aeg'));
        
        // 范围类
        console.log(/[0-9]/.test('8'));
        console.log(/[A-Z]/.test('E'));
        console.log(/[a-z]/.test('e'));
        
        // 组合类
        // 16进制
        console.log(/[0-9a-z]/.test('a'));
        
        // 负向类
        // ^只有写在[]中才表示负向类，下面表示开头边界符
        console.log(/[^0-9a-z]/.test('a'));

        // 边界符
        var str = 'abchello\nhelloabc\nabchello\nhelloabc';
        console.log(str);
        // 将开头的abc换成ickt
        console.log(str.replace(/^abc/g,'ickt'));
        console.log(str.replace(/^abc/gm,'ickt'));
        // 结尾
        console.log(str.replace(/abc$/g,'ickt'));
        console.log(str.replace(/^abc$/gm,'ickt'));
        // 单词边界和不是单词边界
        var str = 'hello ickt';
        console.log(str.replace(/\b/g,'---'));
        console.log(str.replace(/\B/g,'---'));

// 量词
        // 手机号
        var reg = /^1[0-9]{10,11}$/;
        console.log(reg.test(1234567890));
        console.log(reg.test(12345678901));
        console.log(reg.test(123456789023));
        console.log(reg.test(1234567890234));
        
        // 匹配16进制数字
        var reg = /^[0-9a-f]*$/;
        console.log(reg.test('e'));
        
        // 匹配变量
        var reg = /^[a-zA-Z_$][0-9a-zA-Z_$]*$/;
        console.log(reg.test('1A'));
        console.log(reg.test('A1'));