JavaScript (六) js的基本语法

个人博客网：https://wushaopei.github.io/    (你想要这里多有)

一、Math

1、Math对象的案例

        var result= Math.max(10,20,30,40);
         console.log(result);//40

        //例子:自己定义一个对象,实现系统的max的方法
        function MyMath() {
            //添加了一个方法
            this.getMax=function () {
                //所有数字中的最大值
                var max=arguments[0];
                for(var i=0;i<arguments.length;i++){
                    if(max<arguments[i]){
                        max=arguments[i];
                    }
                }
                return max;
            };
        }
        //实例对象
        var mt=new MyMath();
        var result=mt.getMax(10,20,30,40,100,3);
        console.log(result);//100

2、Math 对象的案例：

    <style>
        div {
             300px;
            height: 200px;
            background-color: pink;
        }
    </style>
    <script>
        //随机产生一个十六进制的颜色值
        //封装成一个函数
        console.log(parseInt(Math.random() * 5));

        function getColor() {
            var str = "#";
            //一个十六进制的值的数组
            var arr = ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "a", "b", "c", "d", "e", "f"];
            for (var i = 0; i < 6; i++) {
                //产生的每个随机数都是一个索引,根据索引找到数组中对应的值,拼接到一起
                var num = parseInt(Math.random() * 16);
                str += arr[num];
            }
            return str;
        }
        //页面记载的事件
        window.onload = function () {
            //在文档中通过id属性的值查找这个元素(标签).设置该标签的背景颜色
            document.getElementById("dv").style.backgroundColor = getColor();
        };
        //console.log(getColor());
    </script>

​

二、Date对象

1、Date对象

示例①：

           //创建实例对象
           var dt=new Date();
           //当前的时间---当前的服务器
           console.log(dt);//Date Thu Aug 01 2019 20:53:20 GMT+0800 (中国标准时间)

           var dt=new Date("2017-08-12");
           //传入的时间
           console.log(dt);//Date Sat Aug 12 2017 08:00:00 GMT+0800 (中国标准时间)

            var dt=new Date("2017/08/12");
            //传入的时间
            console.log(dt);//Date Sat Aug 12 2017 00:00:00 GMT+0800 (中国标准时间)
            //获取时间的对象
            var dt=Date.now();
            console.log(dt);//毫秒//1564664000020

示例②：

           var dt = new Date();

           //获取年份
           console.log(dt.getFullYear());//2019
           //获取月份
           console.log(dt.getMonth()+1);//是0开始的 真实的月份是需要加1的
           //获取日期
           console.log(dt.getDate());//8
           //获取小时
           console.log(dt.getHours());//1
           //获取分钟
           console.log(dt.getMinutes());//20
           //获取秒
           console.log(dt.getSeconds());//53

           //获取星期
           console.log(dt.getDay());//星期从0开始的---20

示例③：

        var dt=new Date();

        console.log(dt.toDateString());//英文的---日期 ----- Thu Aug 01 2019
        console.log(dt.toLocaleDateString());//数字格式--日期 ---  -2019/8/1
           
        console.log(dt.toTimeString());//小时分钟秒----20:53:20 GMT+0800 (中国标准时间)
        console.log(dt.toLocaleTimeString());//小时分钟秒---下午8:53:20

        console.log(dt.valueOf());//毫秒值----1564664000021
        console.log(dt);//Date Thu Aug 01 2019 20:53:20 GMT+0800 (中国标准时间)
        //转成字符串
        console.log(dt.toString());//Thu Aug 01 2019 20:53:20 GMT+0800 (中国标准时间)

        var num=10;
        console.log(num.toString());//10

2、格式化日期和时间：

        console.log(getDate(new Date()));

三、String对象

1、String 对象的定义与使用

         String---->是一个对象
         字符串可以看成是字符组成的数组,但是js中没有字符类型
         字符是一个一个的,在别的语言中字符用一对单引号括起来
         在js中字符串可以使用单引号也可以使用双引号
         因为字符串可以看成是数组,所以,可以通过for循环进行遍历
        
         字符串特性:不可变性,字符串的值是不能改变
        
         字符串的值之所以看起来是改变的,那是因为指向改变了,并不是真的值改变了

           var str="hello";
           str[1]="W";  字符串可以通过索引访问字符串中的某个值

但是 , 是可以  访问---读取---只读

设置 : 就是可以改变

对象的方式来看待

           var str="小苏好猥琐";
           str="小苏好邪恶了";//重新赋值
           console.log(str);

           var str="hello";
           str[1]="W";
           console.log(str);
           for(var i=0;i<str.length;i++){
             console.log(str[i]);
           }

           var str="1";
           str="2";
           str="3";

         var str="123";
         str="456";
         console.log(str);

String 对象

  string ---->字符串类型----基本类型
  String---->字符串类型----引用类型

字符串对象 -- -- String对象

           var str1="90";
           var str2="哈哈,我又变帅了";
           var str3="안녕하세요.";
           var str4="こんにちは";
           var str5="สวัสดี";
           var str6="Привет ";

var str="萨瓦迪卡";
//js中没有字符类型
//字符类型
//字符串类型

整数类型
int num=10;

小数
float num2=90.4

字符串
string str="hello";  //字符串必须用双引号

//字符
char ch='h';    //字符必须用单引号---值---只有一个
char ch='y'
'h'+'e'+'l'+'l'+'o'---- "hello"

注意：字符串是可以看成是多个字符组合成的数组的

• js中无论是单引号的还是双引号的都是字符串

           var str="hello";//可以看成是一个字符数组
           for(var i=0;i<str.length;i++){
             console.log(str[i]);
           }

2、String 对象的方法

• 实例方法---->必须要通过new的方式创建的对象(实例对象)来调用的方法
• 静态方法---->直接通过大写的构造函数的名字调用的方法(直接通过大写的对象名字调用的)

字符串的常用属性:

.length------>字符串的长度
.charAt(索引),返回值是指定索引位置的字符串,超出索引,结果是空字符串
.fromCharCode(数字值,可以是多个参数),返回的是ASCII码对应的值
.concat(字符串1,字符串2,...);返回的是拼接之后的新的字符串
.indexOf(要找的字符串,从某个位置开始的索引);返回的是这个字符串的索引值,没找到则返回-1
.lastIndexOf(要找的字符串);从后向前找,但是索引仍然是从左向右的方式,找不到则返回-1
.replace("原来的字符串","新的字符串");用来替换字符串的
.slice(开始的索引,结束的索引); 从索引5的位置开始提取,到索引为10的前一个结束,没有10，并返回这个提取后的字符串
.split("要干掉的字符串",切割后留下的个数);切割字符串
.substr(开始的位置,个数);返回的是截取后的新的字符串
.substring(开始的索引,结束的索引),返回截取后的字符串,不包含结束的索引的字符串
.toLocaleLowerCase();转小写
.toLowerCase();转小写
.toLocaleUpperCase()转大写
.toUpperCase();转大写
.trim();干掉字符串两端的空格

示例：

           var str="12345";
           console.log(str.length);//5

           var str="whatareyounoshalei";
           var result=str.charAt(1000);
           console.log(result);// 

           var str=String.fromCharCode(107,108,109);
           console.log(str);//klm

           var str=String.fromCharCode(83,79,83);
           console.log(str);//SOS

           var str="what";
           console.log(str+"are"+"you"+"no"+"sha"+"lei");//whatareyounoshalei

           var str="小苏";
           console.log(str.concat("喜欢","凤姐","这是","真的"));//小苏喜欢凤姐这是真的

           var str="小苏真的好猥好琐啊";
           var index=str.indexOf("好",5);
           console.log(index);//6

           var str="helo amen";
           var index=str.lastIndexOf("Y");
           console.log(index);//-1

           var str="小苏好帅哦,真的好勇敢哦";
           if(str.indexOf("帅")!=-1){
             str=str.replace("帅","猥琐");小苏好猥琐哦,真的好勇敢哦
           }else{
             console.log("不存在");//
           }
           console.log(str);//我邪恶了,

           var str = "如果有一天我邪恶了,请记住,我曾纯洁过";
           //从索引5的位置开始提取,到索引为10的前一个结束,没有10，并返回这个提取后的字符串
           str = str.slice(5, 10);
           console.log(str);//小苏

           var str="乔峰|慕容|凤姐|梅超风|小苏|大蛇丸";
           var arr=str.split("|");
           for(var i=0;i<arr.length;i++){
             console.log(arr[i]);//大蛇丸
           }

           var str="哈哈,小苏真的是好帅哦";
           str=str.substr(5,5);
           console.log(str);//真的是好帅

           var str="哈哈,小苏真的是好帅哦";
           str=str.substring(5,9);
           console.log(str);//真的是好

           var str="HELLO";
           //str=str.toLocaleLowerCase();
           str=str.toLowerCase();
           console.log(str);//hello

           var str="hello";
           str=str.toLocaleUpperCase();
           //str=str.toUpperCase();
           console.log(str);//HELLO

           var str="   哦,这    是一个神奇的一天   ";
           str=str.trim();
           console.log("===="+str+"====");//====哦,这    是一个神奇的一天====

3、字符串案例

案例1：

        var str = "我爱最帅的杨哥,太帅了";
        //console.log("杨哥");
        var key = "杨哥";
        //先获取要截取的字符串的索引的位置
        var index = str.indexOf(key);
        //从指定的位置开始截取,截取两个即可
        str = str.substr(index, 2);
        console.log(str);//杨哥

案例2：找到这个字符串中所有的 o 出现的位置

        var str2 = "hello wod odd ott fbo nhyo";
        var index = 0;//开始的位置
        var key = "o";//要找的字符串
        while ((index = str2.indexOf(key, index)) != -1) {//如果是-1情况,说明找完了
            console.log(index);
            index += key.length;
        }
          //4 7 10 14 20 25
        var index=str2.indexOf("o",0);
        console.log(index);

案例3： 找到这个字符串中每个字符串出现了多少次

        var str3 = "whatOareYyouYnoYshaHleiHoHmyHgod";
        //第一步:把所有的字母全部变成小写
        str3 = str3.toLocaleLowerCase();
        //第二步:创建一个空对象,目的:把字母作为键,次数作为值
        var obj = {};
        //第三步,遍历字符串,获取每个字母
        for (var i = 0; i < str3.length; i++) {
            //判断obj这个对象中有没有这个字母(字母---键)
            var key = str3[i];//每个字母
            if (obj[key]) {//判断obj中有没有这个键
                //对象中有这个字母了
                obj[key]++;
            } else {
                //对象中没有这个字母,那就把字母加到对象中,并且给这个字母一个出现的次数,默认1次
                obj[key] = 1;
            }
        }

        //遍历对象,显示每个字母的次数
        for(var key in obj){
            console.log(key+"这个字母出现了"+obj[key]+"次");
        }

​

注意事项：

创建新的对象---空对象---没有属性,也没有方法

            var obj={
                "sex":"男"
           };
        // 我想知道这个obj对象中有没有sex这个属性
        // 把对象["属性名字"]--->放在if的判断中即可----判断对象中有没有这个属性
        // if的判断的结果是true,则有这个属性,否则没有这个属性
           if(obj["age"]){
             console.log("有");
           }else{
             console.log("没有");
           }

四、Array对象

 Array.isArray(对象)---->判断这个对象是不是数组
 instanceof关键字
 .concat(数组,数组,数组,...) 组合一个新的数组
 .every(函数)--返回值是布尔类型,函数作为参数使用,函数中有三个参数,第一个参数是元素的值，第二个参数是索引值,第三个参数是原来的数组(没用)
 如果这个数组中的每个元素的值都符合条件,最后才返回的是true

 .filter(函数);返回的是数组中每一个元素都复合条件的元素,组成了一个新的数组

 .push(值);--->把值追加到数组中,加到最后了---返回值也是追加数据之后的数组长度
 .pop();--->删除数组中最后一个元素,返回值就是删除的这个值
 .shift();--->删除数组中第一个元素,返回值就是删除的这个值
 .unshift();--->向数组的第一个元素前面插入一个新的元素,----返回值是插入后的程度
 .forEach(函数)方法---遍历数组用---相当于for循环
 .indexOf(元素值);返回的是索引,没有则是-1
 .join("字符串");----返回的是一个字符串
 .map(函数);--->数组中的每个元素都要执行这个函数,把执行后的结果重新的全部的放在一个新的数组中
 .reverse();----->反转数组
 .sort();---排序的,可能不稳定,如果不稳定,请写MDN中的那个固定的代码
 .arr.slice(开始的索引,结束的索引);把截取的数组的值放在一个新的数组中,但是不包含结束的索引对应的元素值
 .splice(开始的位置,要删除的个数,替换的元素的值);一般是用于删除数组中的元素,或者是替换元素,或者是插入元素

1、构造函数：

        var arr1=new Array();

2、字面量的方式：

        var arr2=[];

3、判断对象是不是数组类型  :  两种

（1） instanceof

           var obj=[];
           console.log(obj instanceof Array);//false
    

（2）使用数组的

           console.log(Array.isArray(obj));//

           var arr=["a","b","c"];
           var newArr=Array.from(arr);
           console.log(newArr);

           var arr1=[10,20,30];
           var arr2=[40,50,60];
           console.log(arr1.concat(arr2));

（3）元素调用

         var arr=[1000,2000,3000];
         //    //a----: 元素的值
         //    //b----: 索引的值
         //    //c----:谁调用了这个方法,那么c就是谁---->arr
          var flag= arr.every(function (a,b) {
             console.log(a+"==="+b+"===="+c);
             return a>2000;//数组中的每个元素的值都要大于2000的情况,最后才返回true
           });

           var arr=["小明明lkko","小曹操674","小白白bd","笑眯眯a"];
          var flag=arr.every(function (ele,index) {
        //      //数组中的每个元素的长度是不是大于4
             return ele.length>4;
           });
          console.log(flag);

（4）filter 过滤

           var arr=[10,20,30,40,50,60,70,80];
           var newArr=arr.filter(function (ele) {//ele---每个元素
             return ele>40;
           });
           console.log(newArr);

           var arr=[10,0,20,0,40,0,60,100];
           var newArr=arr.filter(function (ele) {
             return ele!=0;
           });
           console.log(newArr);

(5)  unshift

           var arr=[10,20,30,40,50];
           var result=arr.unshift(100);
           console.log(result);
           console.log(arr);     

（6）forEach 、indexof 、join、map、reverse、sort、slice、splice、log

           var arr = [10, 20, 30, 40];
           arr.forEach(function (ele,index) {
             console.log(ele+'======'+index);
           });

           var arr=[10,20,30,40];
           var index=arr.indexOf(300);
           console.log(index);

           var arr=["小白","小黑","小红","小芳","小绿","小苏"];
           var str=arr.join("|");
           console.log(str);

           var numbers = [1, 4, 9];
           var roots = numbers.map(Math.sqrt);
           console.log(roots);

           var arr=[10,20,30,40,50];
           arr.reverse();//反转
           console.log(arr);

           var arr=[1,40,20,10,100];
           //a---arr[j]
           //b---arr[j+1]
           arr.sort(function (a,b) {
             if(a>b){
               return 1;
             }else if(a==b){
               return 0;
             }else{
               return -1;
             }
           });
           console.log(arr);

           var arr=[10,20,30,40,50,60,70,80,90,100];
           var newArr= arr.slice(3,7);
           console.log(newArr);

          var myFish = ['angel', 'clown', 'mandarin', 'sturgeon'];
          myFish.splice(2, 0, 'drum'); // 在索引为2的位置插入'drum'

          // myFish 变为 ["angel", "clown", "drum", "mandarin", "sturgeon"]
          myFish.splice(2, 1); // 从索引为2的位置删除一项（也就是'drum'这一项）

         console.log(myFish);
         // myFish 变为 ["angel", "clown", "mandarin", "sturgeon"]

4、基本包装类型

• 普通变量不能直接调用属性或者方法
• 对象可以直接调用属性和方法

基本包装类型:
本身是基本类型,但是在执行代码的过程中,如果这种类型的变量调用了属性或者是方法,那么这种类型就不再是基本类型了,而是基本包装类型,这个变量也不是普通的变量了,而是基本包装类型对象

string number boolean

           var str="hello";
           str=str.replace("ll","HH");
           console.log(str);

           var str=new String("hello");
           str=str.replace("ll","HH");
           console.log(str);
           str=null;

           var num=10;//number---->
           console.log(num.toString());

        // 如果是一个对象&&true,那么结果是true
        // 如果是一个true&&对象,那么结果是对象

           var flag=new Boolean(false);
           var result=true&&flag;
           console.log(result);

           var num=10;
           var num2=Number("10");//转换,没有new---类型转
           var num3=new Number("10");//基本包装类型