A股上市公司传智教育(股票代码 003032)旗下技术交流社区北京昌平校区

 找回密码
 加入黑马

QQ登录

只需一步,快速开始

© 张起灵. 初级黑马   /  2019-4-25 14:00  /  764 人查看  /  0 人回复  /   0 人收藏 转载请遵从CC协议 禁止商业使用本文

javaScript
      组成部分:ECMAScrip(JavaScript语法) DOM (文档对象模型) BOM (浏览器对象模型)
      书写位置
        行内式 JS
                语法:<input type="button" value="点我试试" onclick="alert('Hello World')" />
        内嵌 JS
                语法:<script>alert('Hello  World~!');</script>
        外部 JS文件
                语法:<script src="my.js"></script>
       注释
        单行注释://  用来注释单行文字( 快捷键 ctrl  +  /   
        多行注释:/* */  用来注释多行文字(默认快捷键 alt +  shift  + a )
                注:1.快捷键修改为: ctrl + shift  +  /
                2.vscode ? 首选项按钮 ? 键盘快捷方式 ? 查找 原来的快捷键 ? 修改为新的快捷键 ? 回车确认




ECMAScript(核心语法)
        prompt('我是输入框');
        alert('我是警示信息');
        console.log('我是测试用的,仅f12下console可见');

变量的使用
        声明变量:
                1.分开写法:var 变量名;        变量名 = 赋值;
                2.综合写法:var 变量名 = ‘赋值’;
             声明多个变量
                var 变量名 = ‘赋值’,变量名 = ‘赋值’,变量名 = ‘赋值’;
             注:1.赋值为汉字或英文需要加单引号,数字不用加单引号
                2.同时声明多个变量时,只需要写一个var, 多个变量名之间使用英文逗号隔开。

        赋值
                1.可以是单独的数字,也可以是prompt('我是输入框');等等...
        调用变量
                1.alert(变量名)
             注:调用时直接输变量名,不用加引号
        交换变量
                语法:    <script>
                                //将左右的东西交换
                                var zuo = '苹果';
                                var you = '梨';
                                //添加一个空变量
                                var zhuozhi;
                                //把左手的苹果给桌子
                                zhuozhi = zuo;
                                //把右手的梨给左手
                                zuo = you;
                                //把桌子上的苹果给右手
                                you = zhuozhi;
                                console.log(zuo, you);
                        </script>
数据类型(简单数据类型)
        1.数字型:包含整数和小数。
                        最大值:Number.MAX_VALUE,这个值为:1.7976931348623157e+308
                        最小值:Number.MIN_VALUE,这个值为:5e-32
                        Infinity ,代表无穷大,大于任何数值        alert(Infinity);
                        -Infinity ,代表无穷小,小于任何数值        alert(-Infinity);
                        NaN ,代表一个非数值        alert(‘pink老师’-20);
                注:1.,在JS中八进制前面加0,十六进制前面加0x

        2. 字符串型
                注:1.用单引号或双引号,引起来的字符为字符串型。(“123”‘true’)
                       1.JS 这里我们更推荐使用‘单引号’。
                       2.JS 可以用单引号嵌套双引号 ,或者用双引号嵌套单引号(外双内单,外单内双)
                        例:var strMsg = '我是"高帅富"程序猿';
               
                    字符串转义符  \
                        1.\n :换行符,n 是 newline 的意思
                        2.\t: tab  缩进
                        3.\b: 空格 ,b 是 blank  的意思
                        注:\转义符后可以加\ ,'',"".
               
                    字符串长度(检测获取字符串的长度)length
                        var 变量名 = "我是帅气多金的程序猿!";
                        alert(变量名.length); // 显示 11

                    字符串拼接
                        + 号总结口诀:数值相加 ,字符相连
                        注:1.console.log('沙漠' + '骆驼'); 显示 沙漠骆驼
                                        2.console.log('pink老师' + 18); 显示'pink老师18'
                                3.console.log('pink' + true); 显示 pinktrue
                                4.console.log(12 + 12); 显示24
                                5.console.log('12' + 12); 显示 '1212'

        3.布尔型
                注:1.布尔类型有两个值:true 和 false ,其中 true 表示真(对),而 false 表示假(错)。
                       2.布尔型和数字型相加的时候,true 的值为 1 ,false 的值为 0。
                       3.false包含: ''(单,双引号代表空字符串)、0、NaN(非数值)、null(空值)、undefined (未赋值)


        4.Undefined
                1.一个声明后没有被赋值的变量会有一个默认值undefined
                例:var 变量名;
                      console.log('你好' + 变量名);  //显示 你好undefined
                       console.log(11 + 变量名);  //显示 NaN
                       console.log(true + 变量名); //显示  NaN

        5.Null
               1.一个声明变量给 null 值,里面存的值为空
                 例:var 变量名 = null;
                console.log('你好' + 变量名); //显示 你好null
                console.log(11 + 变量名); //显示 11
                console.log(true + 变量名); //显示  1



检测变量的数据类型
        语法:console.log(typeof 变量名);
                例:var num = 18;
                       console.log(typeof num) // 结果 number     



数据类型转换
        1.转换为字符串类型
                var 待转变量名 = 10;(这个为数字型,需要转为字符串型)
                转换方式:1.待转变量名.toString();  例:console.log(待转变量名.toString());
                        2.String(待转变量名);    例:console.log(String(待转变量名));
                        3.待转变量名 + '';   例:console.log(待转变量名 + '');    隐式转换,添加空字符串  

        2.转换为数字类型
                转换为整数
                        var 待转变量名 = '123';(这个为字符串型,需要转为数字型整数)
                        1.parseInt(待转变量名)  例:console.log(parseInt(待转变量名)); 显示123
                转换为小数
                        var 待转变量名 = '3.14';(这个为字符串型,需要转为数字型)
                        1.parseFloat(待转变量名) 例:console.log(parseFloat(待转变量名));  显示3.14
                        2.Number(待转变量名)  例:console.log(Number(待转变量名));  显示3.14
                        3.待转变量名 -或*或/ '';  例:console.log(待转变量名  -或*或/ '');
                                隐式转换,添加空字符串。*1或-0

        3.转换为布尔型
                1.注:代表空、否定的值会被转换为false  ,如 ''、0、NaN、null、undefined
                        例:console.log(Boolean('')); // 显示false
                               console.log(Boolean(0)); //显示 false
                               console.log(Boolean(NaN)); // 显示false
                               console.log(Boolean(null)); //显示 false
                               console.log(Boolean(undefined)); //显示 false
        
                2.注: 其余值都会被转换为 true
                        例:console.log(Boolean('小白')); //显示 true
                               console.log(Boolean(12)); // 显示true

                算术运算符
        包含"“+”,“-”,“*”,“/”,“%”(取余)
                注:1.取余相当于除不尽余下的数。
                       2.浮点数(小数)不能直接计算,会出现进度误差。
        

递增和递减运算符
        注:1.放在变量前面时, 我们可以称为前置递增(递减)运算符,放在变量后面时,我们可以称为后置递增(递减)运算符。
               2.递增和递减运算符必须和变量配合使用。
               3.前置递增和后置递增单独使用时效果一样。
                例:num++;= ++num;

        1.递增运算符
                1. 前置递增运算符
                        语法:var  num = 10;
                                  alert(++num + 10);   // 显示21
                        注:1.++num 前置递增,就是自加1,类似于num =  num + 1。
                               2.使用口诀:先自加,后运算。(先已后人)
               
                *2. 后置递增运算符
                        语法:var  num = 10;
                                  alert(10 + num++);  // 显示20
                        注:1.num++ 后置递增,就是自加1,类似于num =  num + 1 。
                              * 2.使用口诀:先原值运算,后自加。(先人后己)


比较运算符
        概念:比较运算符(关系运算符)是两个数据进行比较时所使用的运算符,比较运算后,会返回一个布尔值 (true / false)作为比较运算的结果。
        包含:“<”(小于号)
                ">"(大于号)
                ">="(大于等于号)
                "<="(小于等于号)
                "=="(判断是否相等,会转型)
                       注:“==”会转型(将字符串型转为数字型),只要求值一样,数据类型无要求,会显示true。
                       例: 2==2;显示true        1==“1” 显示true               1==2; 显示false
                "!="(不等号)
                "==="(全等号)
                       注:相当于左右一模一样,要求值和数据类型完全一样才显示true。
                       例:2===2;显示true     2===“2”; 显示false。
                “!==”(不全等号)

        注:1.如果结果成立会返回true,不成立返回false。


逻辑运算符
        概念:逻辑运算符是用来进行布尔值运算的运算符,其返回值也是布尔值。后面开发中经常用于多个条件的判断。
        包含:“&&”(简称“与”and)
                注:两边都是 true才返回true,否则返回 false(一假为假)
                    “||”(简称“或”or)
                注:两边都为 false 才返回 false,否则返回true(一真为真)
                    “!”(简称“非”not)
                注:1.逻辑非(!)也叫作取反符,用来取一个布尔值相反的值,如true 的相反值是 false
                        例:!true;显示false。    !false;显示true。

逻辑中断
        1.如果第一个表达式的值为真(ture),则返回表达式1。
                例:console.log( 123 || 456 );  // 显示 123
        2.如果第一个表达式的值为假(false),则返回表达式2。
                例:console.log( 0 ||  456 ); //显示  456
        注:false包含: ''(单,双引号代表空字符串)、0、NaN(非数值)、null(空值)、undefined (未赋值)

        案例:var num = 0;
                console.log(123 || num++);
                console.log(num);
                注:最后num等于0,因为123为真,所以后面的不在运算。


赋值运算符
        概念:用来把数据赋值给变量的运算符。
        包含: 例:num=10;
                “=”(直接赋值)     例:var num = 10;
                “+=”(加一个数后再赋值)     例:var num+=5; //显示15
                “-=”(减一个数后再赋值)     例:var num -=5; //显示5
                “*=”(乘一个数后再赋值)      例:var num *=5; //显示50
                “/=”(除一个数后再赋值)      例:var num /=5; //显示2
                "%="(取余后后再赋值)      例:var num %=5; //显示0



运算符优先级
        1.小括号        ()
        2.一元运算符        “++”“--”“!”
        3.算数运算符        先“*”“/”“%”后“+”“-”
        4.关系运算符        “>”“>=”“<”“<=”
        5.相等运算符        “==”“!==”“===”“!==”
        6.逻辑运算符        先“&&”后“||”
        7.赋值运算符        “=”
        8.逗号运算符        “,”

概念:流程控制主要有三种结构,分别是**顺序结构**、**分支结构**和**循环结构**,代表三种代码执行的顺序。

if语句
        双分支语句
                结构:// 条件表达式成立才会执行代码,不成立则不执行
                        if (条件表达式1) {
                                    // 条件成立执行的代码语句
                        } else{
                                如果条件表达式1不成立执行的代码
                        }
                注:if如果条件表达式为真那么执行第一句,否则执行else里的代码。

        多分支语句
                结构:if (条件表达式1) {
                            语句1;
                        } else if (条件表达式2)  {
                            语句2;
                        } else if (条件表达式3)  {
                           语句3;
                         ....
                        } else {
                            // 上述条件都不成立执行此处代码
                        }
                注:1.谁满足执行谁,否则执行else里的语句。
                       2.一般查询方位时使用。


三元表达式
        语法:表达式1 ? 表达式2 : 表达式3;
        注:1.如果表达式1为 true ,则返回表达式2的值,如果表达式1为 false,则返回表达式3的值。
               2.类似于  if  else (双分支) 的简写。


switch语句
        语法:switch(表达式){
                        case value1:
                        执行语句1;
                        break;
                        case value2:
                        执行语句2;
                        break;
                        ......
                        default:
                        执行最后的语句;        
                }
        执行思路:利用我们表达式的值和case后的选项值相匹配,如果匹配上,则执行该case,如果都没匹配上,则执行default内的值。
        注:1实际开发中,表达式经常写为变量。
               2.变量值和case里的值相匹配的时候必须为全等。
               3.一般为固定值是使用。
在Js 中,主要有三种类型的循环语句: for 循环,while 循环, do...while 循环。
注:循环次数确定用for循环,不确定用while循环。


for 循环
        语法:for(初始化变量; 条件表达式; 操作表达式 ){
                 //循环代码
                }
                例:  for (var i = 1; i <= 100; i++) {
                                            console.log('你好吗');
                                }
                        (表示重复打印了100句你好吗)

        注:1.初始化变量: 就是用var 声明的一个普通变量, 通常用于作为计数器使用 。
                注:var i = 1;   给i赋值为1
               2.条件表达式: 就是用来决定每一次循环是否继续执行 就是终止的条件。
                注: i <= 100; 让i打印100次
               3.操作表达式: 是每次循环最后执行的代码 经常用于我们计数器变量进行更新(递增或者递减)
                注:i++;  每打印一次给i加1,运行到条件表达式最大值时停止

        让用户控制循环次数
                语法:var num = prompt('输入次数');
                          for (var i = 1; i <= num; i++){循环语句}

        重复循环不同代码
                语法:1.  for (var i = 1; i <= 100; i++) {
                                 console.log('这个人今年' + i + '岁了');
                        }
        
                          2.// for 里面是可以添加其他语句的
                        for (var i = 1; i <= 100; i++) {
                                if (i == 1) { console.log('这个人今年1岁了, 它出生了');
                        } else if (i == 100) {
                                 console.log('这个人今年100岁了,它死了'); } else {
                                        console.log('这个人今年' + i + '岁了'); }
                                        }
                注:里面可以嵌套if分支语句

        双重 for 循环
                语法:var row = prompt('请输入您打印几行星星:');
                          var col = prompt('请输入您打印几列星星:');
                          var str = '';
                          for (var i = 1; i <= row; i++) {
                        for (j = 1; j <= col; j++) {
                           str += '☆';
                        }
                        str += '\n';
                        }
                        console.log(str);
                注:外面的for控制行数,里面的for控制列数,\n是换行。


while 循环
        语法:     var num = 1;//初始化变量
                while (条件表达式) {
                         // 循环体代码
                        //操作表达式 (num++;)
                        }

        例:  var message = prompt('你爱我吗?');
                        while (message !== '我爱你') {
                            message = prompt('你爱我吗?');
                        }
                        alert('我也爱你啊!');


        注:1.必须要操作表达式,否则会成为死循环,卡死电脑。
               2.必须要有初始化变量。



do while 循环
        语法:do {
                // 循环体代码 - 条件表达式为 true 时重复执行循环体代码
                //操作表达式 (num++;)
                } while(条件表达式);

        例:        do {
                            var message = prompt('你爱我吗?');
                        } while (message !== '我爱你')
                           alert('我也爱你啊');

        注:1.先执行一次循环体,如果满足条件表达式则继续执行,否则停止执行。
               2.至少会执行一次循环体。


continue 关键字
        例:for (var i = 1; i <= 5; i++) {
                if (i == 3) {
                        console.log('这个包子有虫子,扔掉');
                         continue; // 跳出本次循环,跳出的是第3次循环
                }
                console.log('我正在吃第' + i + '个包子呢');
                }
        注:只要遇见 continue 就退出本次循环,继续执行剩余次数的循环。


break 关键字
        例:for (var i = 1; i <= 5; i++) {
                if (i == 3) {
                         break; // 直接退出整个for 循环,跳到整个for下面的语句
                 }
                console.log('我正在吃第' + i + '个包子呢');
                }
        注:只要遇见break 就退出整个循环


创建数组
        数组是用[ ]声明
        例:1.var arr = new Array();
                注:1.var arr1 = new Array(2);  // 这个2 表示 数组的长度为 2  里面有2个空的数组元素
                       2.var arr1 = new Array(2, 3); // 等价于 [2,3]  这样写表示 里面有2个数组元素 是 2和3
               2.var arr = [ 数组元素1,数组元素2];
        注:数组元素可以是任意类型。

索引
        1.indexOf(数组元素);//从前面开始查找
                语法:var arr = ['red', 'green', 'blue', 'pink', 'blue'];
                          console.log(arr.indexOf('blue'));  //显示2
                          console.log(arr.indexOf('blue', 3)); // 从索引号是 3的位置开始往后查找,显示4
        注:1.它只返回第一个满足条件的索引号 。
               2.它如果在该数组里面找不到元素,则返回的是 -1


        2.lastIndexOf(数组元素);  //从最后开始查找
                语法:var arr = ['red', 'green', 'blue', 'pink', 'blue'];
                          console.log(arr.lastIndexOf('blue')); // 显示4
                          console.log(arr.lastIndexOf('blue', 5)); // 从索引号是 5的位置开始往前查找,显示2。
        注:1.它只返回最后一个满足条件的索引号 。
               2.它如果在该数组里面找不到元素,则返回的是 -1 。

        注:数组索引是从0开始。
        


获取数组某个元素(arr[ ])
        语法:var arr = ['1','2','3'];  //创建数组
                  console.log(arr[2]);  //这个代表获取到arr变量内的‘3’。



数组的长度(arr.length)
        概念:就是数组内的数组元素的个数。
        语法:var arr = ['1','2','3'];  //创建数组
                  console.log(arr.length);  //显示3个数组元素。
        使用方法1:for (var i=0;i< arr.length ;i++)//注意是小于,因为索引为0开始。



遍历数组
        概念:就是把数组的元素从头到尾访问一次。
        语法:var arr = ['1','2','3'];  //创建数组
                  for (var i=0;i<3;i++){
                 console.log(arr[i]);
                }  
        注:for里的i是小于,不是小于等于。



(翻转数组)倒序遍历
        1.循环法
                语法: var arr = [1, 65, 62, 2, 4, 54, 5, 8];
                        for (var i = arr.length - 1; i >= 0; i--) {
                                    console.log(arr[i]);
                                }

        2.reverse法
                语法: var arr = ['pink', 'red', 'blue'];
                        arr.reverse();   //翻转
                        console.log(arr);



数组排序(冒泡排序)
        1.sort法
               var arr1 = [13, 4, 77, 1, 7];
                        arr1.sort(function(a, b) {
                            //  return a - b; //升序的顺序排列
                            return b - a; // 降序的顺序排列
                        });
                        console.log(arr1);   



数组中新增元素
        1. 通过修改 length 长度新增数组元素
                语法:1.var arr = ['red', 'green', 'blue', 'pink'];
                        arr.length = 7;//将数组元素增加到了7个
        注:增加的数组元素为空值
                           2.var arr = ['red', 'green', 'blue', 'pink'];
                        arr[arr.length] = '小王';//在数组的最后新增了一个为小王的数组元素


        2. 通过修改数组索引新增数组元素
                语法:var arr = ['red', 'green', 'blue', 'pink'];
                        arr[4] = 'hotpink';//添加了索引为第四个的数组元素,并元素值为hotpink。
        注:如果数组元素已经有值了,在给他新增的值会替换掉原来的值。


        3. push() 在我们数组的末尾 添加一个或者多个数组元素
                语法:var arr = [1, 2, 3];
                          arr.push(4, 'pink');    //在arr数组后添加了两个新的数组元素。
                          console.log(arr.push(4, 'pink'));    //在arr数组后添加了两个新的数组元素的同时打印数组长度。


        4.unshift 在我们数组的开头 添加一个或者多个数组元素
                语法:arr.unshift('red', 'purple');  //在arr数组前添加了两个新的数组元素。
                          console.log(arr.unshift('red', 'purple'));   // //在arr数组前添加了两个新的数组元素的同时打印数组长度。



删除数组元素
        1.pop() 它可以删除数组的最后一个元素  
                语法:var arr = [1, 2, 3];
                          arr.pop();    //删除了数组后最后一个元素3
                          console.log(arr.pop());    //删除了数组后最后一个元素3的同时打印出被删除的元素

        2.shift() 它可以删除数组的第一个元素
                语法:var arr = [1, 2, 3];
                          arr.shift();    //删除了数组后第一个元素1。
                           console.log(arr.shift());   //删除了数组后第一个元素1的同时打印出被删除的元素.


        注:1.pop() 和shift() 没有参数。
               2.pop和shift完毕之后,返回的结果是 删除的那个元素。


数组转换为字符串
        1. toString() 将我们的数组转换为字符串
                语法: var arr = [1, 2, 3];
                                   console.log(arr.toString());    // 1,2,3
                注:默认用逗号隔开。
        
        2.join(分隔符)
                语法:var arr1 = ['green', 'blue', 'pink'];
                                  console.log(arr1.join());    // green,blue,pink
                                  console.log(arr1.join('-'));    // green-blue-pink
                                  console.log(arr1.join('&'));    // green&blue&pink



检测是否为数组

        (1) instanceof  运算符 它可以用来检测是否为数组
                var arr = [];
                var obj = {};  //待检测数组
                console.log(arr instanceof Array); //返回true
                console.log(obj instanceof Array);  //返回false

                (2) Array.isArray(参数);  H5新增的方法  ie9以上版本支持
                console.log(Array.isArray(arr));//返回true
                console.log(Array.isArray(obj));//返回false


根据位置返回字符
        1.charAt(index) 根据位置返回字符
                语法: var str = 'andy';
                                   console.log(str.charAt(3));   //显示str里索引为3的字符y。
                          for (var i = 0; i < str.length; i++) {
                                    console.log(str.charAt(i));
                                }    //遍历了str里的所有字符

        2.str[index] H5 新增的
                语法:  var str = 'andy';
                         console.log(str[3]); //显示str里索引为3的字符y。
                注:和charAt(index) 作用一样,但是存在兼容性问题。

        3.charCodeAt(index)  返回相应索引号的字符ASCII值 目的: 判断用户按下了那个键
                语法: var str = 'andy';
                        console.log(str.charCodeAt(0)); // 显示了str里索引为0的ASCII值,a为97。
声明函数
        1.命名函数
             语法:// 声明函数
                 function 函数名() {
                         //函数体代码
                        }
        例:function sayHi() {
                            console.log('hi~~');
                        }
                sayHi();//调用函数

        注:1.function 声明函数的关键字 全部小写。
               2.函数是做某件事情,函数名一般是动词。
               3.必须要有小括号。
        
        2.函数表达式
             语法: var 变量名 = function() {
                }
                   变量名();  //调用函数,括号内的值相当与实参。

        注:1.函数表达式声明方式跟声明变量差不多,只不过变量里面存的是值 而 函数表达式里面存的是函数
               2.函数表达式也可以进行传递参数。

调用函数
        语法:函数名(); // 通过调用函数名来执行函数体代码

形参和实参
        概念:1.在声明函数时,可以在函数名称后面的小括号中添加一些参数,这些参数被称为形参,而在调用该函数时, 同样也需要传递相应的参数,这些参数被称为实参。
                  2.简单理解就是,在声明函数的小括号内为形参,调用函数的小括号内为实参。
        例:// 声明函数 function getSum(形参1, 形参2) {
                        console.log(形参1 + 形参2);
                        } // 调用函数
                        getSum(1, 3); // 4
                        getSum(6, 5); // 11
        注:1.实参和形参的多个参数之间用逗号(,)分隔。
               2. 实参个数多于形参,只取到形参的个数 。
               3. 实参个数少于形参,多的形参定义为undefined,结果为NaN。

函数的返回值
        return 语句
                语法:// 声明函数 function 函数名(){
                        return  需要返回的值;
                         }
                // 调用函数
                函数名();    // 此时调用函数就可以得到函数体内return 后面的值
        
        例://  求任意两个数的和
                        function getSum(num1, num2) {
                                    return num1 + num2;
                                }
                        console.log(getSum(1, 2));

        注:1.return后面的语句不会再执行,一般写在最后面。
               2.return后的值逗号隔开,那么只会返回最后一个值。
               3.如果有多个值,可以使用数组。
                例:return [num1+num2,num1*num2];
               4.如果没有return或return后不跟值, 则返回 undefined。
               5.相当于返回的是函数最后计算出的结果。

arguments的使用
        概念:当我们不确定有多少个参数传递的时候,可以用arguments 来获取。
        特点: 1.具有 length 属性。2. 按索引方式储存数据。3. 不具有数组的push , pop 等方法。
        语法:1.相当于形参,用于接收实参。

预解析
        概念::在当前作用域下, JS 代码执行之前,浏览器会默认把带有 var 和 function 声明的变量在内存中 进行提前声明或者定义,值不会提升。
        注:1.变量要先声明,后调用。
               2.命名函数可以先声明后调用,也可以先调用,后声明,尽量先声明后调用。
               3.函数表达式要先声明,后调用。


对象
        概念;1.属性:事物的特征,在对象中用属性来表示(常用名词)
                2.方法:事物的行为,在对象中用方法来表示(常用动词)

创建对象
        语法:(1)利用字面量创建对象
                var obj = {};  // 创建了一个空的对象
        例:        var obj = {
                                uname: '张三疯',   //添加属性
                                age: 18,
                                sex: '男',
                                sayHi: function() {    //添加方法
                                    console.log('hi~');
                                        }
                                    }
        注:1.多个属性或者方法中间用逗号隔开的。
               2.里面的属性或者方法我们采取键值对的形式  键代表 属性名 : 值代表  属性值


        (2) 利用new Object创建对象
                 var obj = new Object(); // 创建了一个空的对象
                                obj.uname = '张三疯';   //添加属性
                                obj.age = 18;
                                obj.sex = '男';
                                obj.sayHi = function() {    //添加方法
                                console.log('hi~');
                                    }
        注:1. 我们是利用 等号 = 赋值的方法 添加对象的属性和方法。
               2.每个属性和方法之间用 分号结束。
               3.第一个字母大写。


        (3)利用构造函数创建对象
                function 构造函数名() {
                this.属性 = 值;
                this.方法 = function() {}
                }
                new 构造函数名();

        例:function Star(uname, age, sex) {
                            this.name = uname;
                            this.age = age;
                            this.sex = sex;
                            this.sing = function(sang) {
                                console.log(sang);
                            }
                        }
                       var ldh = new Star('刘德华', 18, '男');
                ldh.sing('冰雨');    //给构造函数内的函数(行为)添加属性,函数后括号内必须加形参才能显示
                console.log(ldh.name);//调用函数
                console.log(ldh['sex']);
                 
        注:1.构造函数名字首字母要大写。
               2.调用方式和上面基本一样,只是名字变为了变量名。
                例: console.log(ldh.name);


添加属性
        语法:obj[uname] = ‘张三’;
                注:给obj对象添加uname属性并给属性赋值为张三。



对象调用
        语法:1.对象名.属性名
                例: console.log(obj.uname);
                  2.对象名['属性名']
                例:console.log(obj['age']);
                  3.调用对象内函数:对象名.方法名() 千万别忘记添加小括号
                例:obj.sayHi();

遍历对象
        语法:for (变量 in 对象名字) {
                 // 在此执行代码
                }
        例: for (var k in obj) {
                            console.log(k); // k 变量 输出  得到的是 属性名
                            console.log(obj[k]); // obj[k] 得到是 属性值
                        }
                        // 我们使用 for in 里面的变量 我们喜欢写 k  或者  key


date内置对象
        日期(年月日,时分秒)
                var date = new Date();    //获取时间对象
                        colsole.log(date);    //打印时间
                        var year = date.getFullYear();    //获取年份
                        var month = date.getMonth() + 1;  //获取月份,月份要加1
                        var dates = date.getDate();  //获取日
                        var arr = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];    //给星期变为文字
                        var day = date.getDay();    //获取星期
                        var h = date.getHours();    //获取时
                        h = h < 10 ? '0' + h : h;    //给小于10 的数前加0
                        var m = date.getMinutes();    //获取分
                        m = m < 10 ? '0' + m : m;
                        var s = date.getSeconds();    //获取秒
                        s = s < 10 ? '0' + s : s;
                        console.log('今天是:' + year + '年' + month + '月' + dates + '日' + h + '时' + m + '分' + s + '秒 ' + arr[day]);    //打印出时间

        毫秒
                console.log(date.valueOf());   // 就是 我们现在时间 距离1970.1.1 总的毫秒数
                console.log(date.getTime());   // 就是 我们现在时间 距离1970.1.1 总的毫秒数
                var date1 = +new Date(); // +new Date()  括号为空那么返回的是当前的毫秒数
                 console.log(Date.now());     //H5 新增的 获得总的毫秒数

        倒计时
                毫秒数转换为天、时、分、秒(时间戳转换为时分秒)
                        公式:1. d = parseInt(总秒数/ 60/60 /24); //  计算天数 。
                                  2. h = parseInt(总秒数/ 60/60 %24) //   计算小时。
                                  3. m = parseInt(总秒数/60 %60 ); //   计算分数 。
                                  4. s = parseInt(总秒数%60);  //   计算当前秒数。

                例: function countDown(time) {
                                    var nowTime = +new Date(); // 返回的是当前时间总的毫秒数
                                    var inputTime = +new Date(time); // 返回的是用户输入时间总的毫秒数
                                    var times = (inputTime - nowTime) / 1000; // times是剩余时间总的秒数
                                    var d = parseInt(times / 60 / 60 / 24);     // 天
                                    d = d < 10 ? '0' + d : d;    //如果小于10那么就在前面加0.
                                    var h = parseInt(times / 60 / 60 % 24);     //时
                                    h = h < 10 ? '0' + h : h;   //如果小于10那么就在前面加0.
                                    var m = parseInt(times / 60 % 60);     // 分
                                    m = m < 10 ? '0' + m : m;   //如果小于10那么就在前面加0.
                                    var s = parseInt(times % 60);     // 当前的秒
                                    s = s < 10 ? '0' + s : s;   //如果小于10那么就在前面加0.
                                    return d + '天' + h + '时' + m + '分' + s + '秒';    //函数的返回值
                                }
                                console.log(countDown('2019-5-1 18:00:00')); //给函数赋值,并显示距离倒计时结束的时间。
                                var date = new Date();
                                console.log(date);//显示当前的时间



Math内置对象
        随机小数
                 Math.random();//  输出为0~1之内的小数,包含0.

        随机整数
                function getRandom(min, max) {
                            return Math.floor(Math.random() * (max - min + 1)) + min;
                        }
                        var random = getRandom(1, 10);  //给函数内的形参赋值,输出为1~10内随机的数。
                注:随机整数我们需要先封装一个函数,然后在调用。

        圆周率
                console.log(Math.PI);    //显示3.141592653589793

        最大数
                console.log(Math.max(1, 99, 3));    //显示99
                console.log(Math.max(1, 99, 'pink老师')); //显示 NaN
                        console.log(Math.max()); // 显示-Infinity
        
        绝对值
                console.log(Math.abs(-1)); // 1
                        console.log(Math.abs('-1')); // 隐式转换 会把字符串型 -1 转换为数字型
                        console.log(Math.abs('pink')); // NaN

        取整
                (1) Math.floor()   向下取整  往最小了取值
                         console.log(Math.floor(1.1)); // 1
                                console.log(Math.floor(1.9)); // 1

                (2)Math.ceil()   ceil 向上取整  往最大了取值
                         console.log(Math.ceil(1.1)); // 2
                                console.log(Math.ceil(1.9)); // 2

                (3) Math.round()   四舍五入  其他数字都是四舍五入,但是 .5 特殊 它往大了取
                         console.log(Math.round(1.1)); // 1
                                console.log(Math.round(1.5)); // 2
                                console.log(Math.round(1.9)); // 2
                                console.log(Math.round(-1.1)); // -1
                                console.log(Math.round(-1.5)); // 这个结果是 -1
                注:负数中的.5比较特殊,会往大取.(-1大于-2)



截取字符串
        substr('截取的起始位置', '截取几个字符');
                语法: var str1 = '改革春风吹满地';
                                   console.log(str1.substr(2, 2)); //显示春风
                注:第一个2 是索引号的2 从第几个开始  第二个2 是取几个字符


替换字符串
        替换字符 replace('被替换的字符', '替换为的字符')
                语法:var str = 'andy';
                                  console.log(str.replace('a', 'b'));   //显示bndy
                注:1.将里面第一个a替换为b。
                       2.它只会替换第一个字符,如果要替换多个相同的字符,那么使用for循环。

字符转换为数组
        split('分隔符')
                语法:var str2 = 'red, pink, blue';
                                  console.log(str2.split(','));    //显示["red", " pink", " blue"]
                注:会将字符串转换为数组,表示用逗号隔开的字符。

拼接字符串
        concat('要拼接的字符')
                语法:var str = 'andy';
                                  console.log(str.concat('red'));//显示andyred。
                注:相当于在字符串后添加了一个新字符。

0 个回复

您需要登录后才可以回帖 登录 | 加入黑马