美文网首页
初识javascript

初识javascript

作者: Mtllll | 来源:发表于2019-03-04 21:59 被阅读0次

    js字符串

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script type="text/javascript">
    
            /*
             * 
             * 在解析器的底层,保存字符串时,实际上是以字符数组的形式保存的
             *  所以字符串的操作方法和数组都是非常相似的
             * 
             */
    
    
            var str = "Hello neusoft";
    
            //console.log(str.length);
            //console.log(str[6]);
            /*
             * length可以用来获取一个字符串的长度
             */
    
            /*
             * charAt()
             *  - 可以根据索引来获取指定位置的字符
             * 
             * charCodeAt()
             *  - 可以根据索引来获取指定位置的字符的字符编码
             * 
             * String.fromCharCode()
             *  - 可以根据字符编码来获取字符
             */
            str = "中AaHello neusoft";
    
            var result = str.charAt(0);
    
            result = str.charCodeAt(0);
    
            result = String.fromCharCode(20013);
    
            //console.log(result);
    
            /*
             * concat()
             *  - 可以用来连接两个或多个字符串
             *  - 作用+ 一样
             */
            str = "hello";
            var str2 = "world";
    
            result = str.concat(str2,"你好","天气好","吃的好");
    
            /*
             * indexOf()
             *  - 检索指定字符串在当前字符串中的位置
             *  - 参数:
             *      第一个参数,要查询的字符串
             *      第二个参数,查找开始的位置
             * 
             *  - 返回值:
             *      默认会返回字符串第一次出现的位置的索引
             *      如果没有找到该内容,则返回-1
             * 
             * lastIndexOf()
             *  - 检索指定字符串在当前字符串中的位置
             *  - 该方法和indexOf()一样,不同的是indexOf()是从前往后找
             *      而lastIndexOf()是从后往前找
             */
            str = "Helo neusoft";
    
            //result = str.indexOf("a");
            //result = str.indexOf("l",3);
            result = str.lastIndexOf("l",5);
    
            /*
             * slice()
             *  - 可以用来截取一个字符中的内容
             *  - 参数:
             *      第一个参数,截取开始位置的索引(包括开始位置)
             *      第二个参数,截取结束位置的索引(不包括结束位置)
             *      - 可以接收一个负值作为参数,如果是负值,则从后往前数
             *      - 也可以省略第二个参数,如果省略则一直截取到最后
             */
    
            str = "Hello neusoft";
    
            result = str.slice(0,5);
    
            result = str.slice(5);
    
            /*
             * substring()
             *  - 用来截取字符串的
             *  - 参数:
             *      第一个参数,截取开始位置的索引(包括开始位置)
             *      第二个参数,截取结束位置的索引(不包括结束位置)
             *      - 该方法不接收负值,如果传递了一个负值,则默认会设置为0
             *      - 该方法中如果第二个参数小于第一个,则会调整参数的位置
             *  
             */
            str = "Hello neusoft";
            result = str.substring(6,0);
    
            /*
             * substr()
             *  - 用来截取字符串
             *  - 参数:
             *      第一个参数,截取开始位置的索引
             *          - 可以是负值,如果是负值从后往前数
             *      第二个参数,截取的个数
             */
    
            str = "Hello neusoft";
            result = str.substr(-3,2);
    
            //console.log(result);
    
            /*
             * split()
             *  - 可以将一个字符串拆分为一个数组
             *  - 它需要一个字符串作为参数,将会根据该字符串对字符串进行拆分
             *      并且将拆分的后的值保存到一个数组中返回
             */
    
            str = "孙悟空@猪八戒@沙和尚@唐僧";
    
            result = str.split("@");
    
            //console.log(Array.isArray(result));
            //console.log(result);
    
            /*
             * toLowerCase()
             *  - 将一个字符串转换为小写
             * toUpperCase()
             *  - 将一个字符串转换为大写
             */
            str = "abcdefg";
    
            result = str.toUpperCase();
    
            str = "ABCDEFG";
    
            result = str.toLowerCase();
    
            console.log(result);
    
            var myStr = "I,love,you,Do,you,love,me";
            var replacedStr = myStr.replace("love","hate");//"I,hate,you,Do,you,love,me";
    
            //replace默认只替换第一次查找到的,想要全局替换,需要置上正则全局标识,如
            var myStr = "I,love,you,Do,you,love,me";
            var replacedStr = myStr.replace(/love/g,"hate");//"I,hate,you,Do,you,hate,me"
        </script>
    </head>
    <body>
    </body>
    </html>
    

    数组

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title></title>
            <script type="text/javascript">
                /*
                 * 数组(Array)
                 *  - 数组也是一个对象,功能和普通对象(Object)的功能类似的
                 *  - 数组中也可以保存不同的元素,不同的是普通对象是通过一个字符串作为属性名来操作属性的,
                 *      而数组是通过索引来操作元素的。
                 *  - 索引(index)
                 *      - 索引就是从0开始的整数
                 *  - 数组比普通对象的存储效率要高,在开发中我们经常使用数组来存储一些数据
                 */
                
                //创建一个数组对象
                var arr = new Array();
                
                //使用typeof检查一个数组对象时会返回object
                //console.log(typeof arr);
                
                /*
                 * 向数组中添加元素
                 *  - 语法:
                 *      数组[索引] = 值;
                 */
                arr[0] = 10;
                arr[1] = 20;
                arr[2] = 30;
                arr[3] = 40;
                arr[4] = 30;
            
                
                /*
                 * 读取数组中的元素
                 *  - 语法:
                 *      数组[索引]
                 */
                
                //如果读取一个数组中没有的元素,会返回undefined
                //console.log(arr[4]);
                
                //获取数组的长度
                /*
                 * length
                 *  - length属性可以获取或设置数组的长度
                 *  - 对于连续的数组通过length属性获取到的就是数组中元素的个数
                 */
                //console.log(arr.length);//获取数组的长度
                
                //修改数组的length属性
                //如果将长度修改为小于之前的长度的值,则多余的部分会被删除
                arr.length = 5;
                
                //如果将长度修改为大于之前的长度的值,则会数组中会创建出空的元素
                //arr.length = 10;
                
                //向数组的最后添加一个元素
                //语法:数组[数组.length] = 值;
                arr[arr.length] = 55;
                arr[arr.length] = 75;
                arr[arr.length] = 85;
                
                console.log(arr);
        
            </script>
        </head>
        <body>
        </body>
    </html>
    

    数组字面量表达方式(推荐)

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title></title>
            <script type="text/javascript">
                /*
                 * 数组的字面量
                 */
                //var arr = new Arry();
                var arr = [] ;
    
                /*
                 * 使用字面量,可以在创建数组的同时,向数组中添加元素
                 * 语法:
                 *  var 数组 = [元素1,元素2...元素N];
                 */
                arr = [1,2,3,4,5,6,7];
                
                //console.log(arr[6]);
                
                arr = new Array(1,2,3,4,5,6,7);
                
                arr = [10];//创建一个数组并向数组中添加一个元素
                
                arr = new Array(10);//创建一个长度为10的数组
                
                //console.log(arr.length);
                
                /*
                 * 在数组中可以保存任意类型的元素
                 */
                arr = [1,"hello",true,null,undefined,{name:"孙悟空"},function(){}];
                
                //console.log(arr[5].name);
                //console.log(arr[6]);
                
                
                //数组中也可以保存数组,如果数组中保存的依然是数组,则我们称这个数组为二维数组
                arr = [
                        [1,2,3],
                        [4,5,6],
                        [5,6,7]
                    ];
                    
                console.log(arr[0][1]); 
                
            </script>
        </head>
        <body>
        </body>
    </html>
    

    数组的常用方法push(),pop(),unshift(),shift()

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title></title>
            <script type="text/javascript">
                
                /*
                 * 创建一个数组
                 */
                var arr = ["孙悟空","猪八戒","沙和尚"];
                
                /*
                 * push()
                 *  - 该方法可以用来向数组的末尾添加新的元素,并返回数组的新的长度
                 */
                
                //console.log(arr);
                
                var result = arr.push("唐僧","白骨精","蜘蛛精");
                
                //console.log(arr);
                //console.log("result = "+result);
                
                /*
                 * pop()
                 *  - 用来删除并返回数组的最后一个元素
                 *  - 元素删除以后,会自动修正数组的长度
                 */
                result = arr.pop();
                result = arr.pop();
                
                //console.log(arr);
                //console.log("result = "+result);
                
                /*
                 * unshift()
                 *  - 向数组的最前边添加元素,并返回新的长度
                 */
                result = arr.unshift("牛魔王","铁扇公主");
                
                console.log(arr);
                //console.log("result = "+result);
                
                /*
                 * shift()
                 *  - 删除数组最前边的元素,并返回被删除的元素
                 *  - 删除完元素以后,会自动调整数组的长度
                 */
                result = arr.shift();
                result = arr.shift();
                
                
                console.log(arr);
                console.log("result = "+result);
                console.log(arr.length);
                
            </script>
        </head>
        <body>
        </body>
    </html>
    

    遍历数组方式二

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title></title>
            <script type="text/javascript">
                
                var arr = ["孙悟空","猪八戒","沙和尚","唐僧"];
                
                /*
                 * 也可以使用forEach()来遍历数组
                 *  forEach()中需要一个函数作为参数
                 *  - 像这种由我们定义而不由我们调用的函数,我们称为回调函数
                 *  - forEach()中的回调函数,由浏览器调用,
                 *      数组中有几个元素函数就会被调用几次,
                 *      每次遍历到一个元素都会调用一次函数,浏览器会通过实参的形式来将遍历到内容传递进函数
                 *  - 浏览器在调用回调函数传递了三个实参:
                 *      第一个参数:正在遍历的元素
                 *      第二个参数:正在遍历的元素的索引
                 *      第三个参数:正在遍历的数组对象
                 * 
                 *  - forEach()方法不支持IE8及以下的浏览器,所以如果需要兼容IE8则不要使用
                 *      
                 */
                arr.forEach(function(value , index , obj){
                    
                    console.log("value = "+value + "  index = "+index+" obj = "+obj);
                    
                });
                
            </script>
        </head>
        <body>
        </body>
    </html>
    

    数组方法:slice(),splice()

    这些元素将会被插入到开始位置之前的位置
                 *  - 它会将被删除的元素作为返回值返回
                 *      
                 */
                
                arr = ["孙悟空","猪八戒","沙和尚","唐僧"];
                
                //result = arr.splice(0,1);
                
                //牛魔王替换 索引为0的元素
                //result = arr.splice(0,1,"牛魔王");
                
                //arr.splice(2,1,"牛魔王","红孩儿","二郎神");
                
                arr.splice(2,0,"牛魔王","红孩儿","二郎神");
                
                console.log(arr);
                
                
            </script>
        </head>
        <body>
        </body>
    </html>
    

    练习 去除调用数组中重复的数字

    !DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title></title>
            <script type="text/javascript">
                
                //创建一个数组
                var arr = [1,2,3,1,1,1,4,2,3,5];
                
                //去除调用数组中重复的数字
                //获取数组中的数字
                for(var i=0 ; i<arr.length ; i++){
                    //console.log(arr[i]);
                    //再次遍历数组
                    for(var j=i+1 ; j<arr.length ; j++){
                        //console.log("----->" + arr[j]);
                        //比较两个数字是否相等
                        if(arr[i] == arr[j]){
                            //进入判断,证明两个数字重复,则删除arr[j]
                            arr.splice(j,1);
                            //需要在此位置在比较一次
                            j--;
                        }
                    }
                }
                
                console.log(arr);
                
            </script>
        </head>
        <body>
        </body>
    </html>
    ###数组的其他方法
    ```js
    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title></title>
            <script type="text/javascript">
                
                var arr = ["孙悟空","猪八戒"];
                var arr2 = ["白骨精","蜘蛛精"];
                var arr3 = ["太上老君","如来佛祖"];
                
                /*
                 * concat()
                 *  - 可以用来连接两个或多个数组
                 *  - 不会影响原数组,而是将新的数组的返回
                 *  - 可以将多个数组作为concat参数传递,也可以传递单个的元素
                 */
                var result = arr.concat(arr2 , arr3 , "唐僧");
                
                //console.log(result);
                
                /*
                 * join()
                 *  - 可以将数组中的所有的元素连接为一个字符串
                 *  - 该方法可以接收一个字符串作为参数,这个字符串将会将会作为连接符来连接元素
                 *      如果不传,默认使用,
                 */
                arr = ["孙悟空","猪八戒","沙和尚"];
                
                result = arr.join("@-@");
                
                //console.log(result);
                
                /*
                 * reverse()
                 *  - 该方法可以用来反转数组
                 *  - 前边的去后边,后边的去前边
                 *  - 它会影响到原数组,直接在原数组上反转
                 */
                
                //arr.reverse();
                
                //console.log(arr);
                
                /*
                 * sort()
                 *  - 可以用来对数组中的元素进行排序
                 *  - sort()会影响到原数组
                 *  - 默认它会按照元素的Unicode编码进行排序
                 *  - 如果希望使用sort对一个数字型的数组进行排序可能会得到不可预期的结果
                 *      因为它同样也会按照数字的Unicode编码进行排序
                 *  - 我们也可以自己来指定排序的规则
                 * 
                 */
                var arr4 = ["a","c","b","e","d","f"];
                
                arr4.sort();
                
                //arr4 = [2,3,10,5,4,6];
                
                
                
                /*
                 * 如果需要自定义排序规则,需要将一个函数作为参数传递给sort()方法
                 *  函数的结构:function(a , b){}
                 *  
                 * 浏览器会多次以数组中的元素作为实参来调用该函数,
                 *  a和b具体是谁不确定,但是a一定是在b前边
                 * 浏览器将会根据函数的返回值,来决定两个元素是否交互位置
                 *  如果返回一个大于0的值,则两个元素互相交换位置
                 *  如果返回一个等于0的值,则证明两个元素相等,位置不变
                 *  如果返回一个小于0的值,两个元素的位置也不变
                 * 
                 */
                
                arr4 = [10,4,3,5,2];
                
                arr4.sort(function(a,b){
                    
                    /*//升序  小 ---> 大
                    if(a > b){
                        //交换位置
                        return 1;
                    }else if(a == b){
                        return 0;
                    }else{
                        return -1;
                    }*/
                    
                    //降序 大 ---> 小
                    /*if(a > b){
                        //交换位置
                        return -1;
                    }else if(a == b){
                        return 0;
                    }else{
                        return 1;
                    }*/
                    
                    //如果希望升序排列,则 返回 a-b
                    //return a - b;
                    
                    //如果希望降序排列,则 返回 b-a
                    return b - a;
                    
                });
                
                console.log(arr4);
                
            </script>
        </head>
        <body>
        </body>
    </html>
    

    相关文章

      网友评论

          本文标题:初识javascript

          本文链接:https://www.haomeiwen.com/subject/cswwuqtx.html