JavaScript基础（详细总结）下

1、JS的常用内置对象

1.1、String对象

1.1.1、创建对象

有三种方式: 单引号('') 、双引号("") 、反引号(``)

<script type="text/javascript">
        
    //双引号字符串
    let str1 = "双引号字符串";
     
    //单引号
    let str2 = '单引号字符串';
     
    //反引号字符又叫做`字符串模板` ,模板中可以使用${}来进行插值.
    let str3 = `反引号字符串`;
     
    let n = 1234;    
    let str4 =`你的验证码是：${n}`;
    console.log(str4);//你的验证码是：1234
</script>

1.1.2、常用方法

    方法                            说明
substring()          提取字符串中两个指定的索引号之间的字符，和java一样，包左不包右
toLowerCase()        把字符串转换为小写。
toUpperCase()        把字符串转换为大写。
replace()            替换与正则表达式匹配的子串。
charAt()             返回在指定位置的字符。
trim()               移除字符串首尾空白
split(delimiter)     把字符串分割为子字符串数组;分割为数组

<script>
                
    let a = "我爱这个世界";
    document.write(a.substring(2, 6));
    document.write("<br>")
    let b = "abcdefg";
    document.write(b.toLocaleUpperCase());//把字符串转换为大写
    document.write("<br>")
    let c="ABCDEFG";
    document.write(c.toLocaleLowerCase());//把字符串转换为小写
    document.write("<br>")
    let e="awejjj";
    document.write(e.charAt(2));//从0开始 //e
    document.write("<br>")
    let f="  wii i  ";
    document.write(f.trim());//wii i  //只清除两边的空白  单词中间空格不清除
    document.write("<br>")
    let o="d,w,a,d,w";
    console.info(o.split(","));
</script>

1.2、Array对象

1.2.1、创建数组

let 数组名 = [元素1,元素2,元素3.....];

格式一  

 <script>
    //数组中元素类型是随便写
    let arr = [11,22,33,44,"55"];
                
    //长度
    // alert(arr.length);
                
    //指定获取数组中的元素
    // alert(arr[4]);
                
    //通过脚标修改元素
    arr[2] = 99;
                
    arr[3] = "hello";
                
    //遍历一
    for(let i = 0; i< arr.length; i++){
        document.write(arr[i]);
        document.write("<br>");
    }
                
    //遍历二
    for(let a in arr){
        document.write(arr[a]+",");
    }
                
</script>

格式二

let 数组名 = new Array(元素1,元素2,元素3.....);

<script>
    //如果给出多个参数，表示的是数组的元素
    let arr = new Array(11,22,"hello",'88',true);
                
    //长度
    alert(arr.length);
                
    //获取
    alert(arr[2]);
                
    //如果给的参数所number类型，并且只有一个，表示是长度
    let arr = new Array(11);
    alert(arr.length);
                
    //如果给的参数所number类型，是一个小数，无法表示长度
    let arr = new Array(3.14);
    alert(arr.length);
                
    //如果给的参数字符中类型，并且是一个，表示元素
    let arr = new Array("11");
    alert(arr.length);
                
    //遍历
    for(let i in arr){
        document.write(arr[i]);
    }
                
</script>

1.2.2、常用方法

    方法                    说明
concat()        连接两个或更多的数组，并返回结果
push()          向数组的末尾添加一个或更多元素，并返回新的长度
join(参数)      将数组中的元素按照指定的分隔符拼接为字符串

  <script type="text/javascript">
        
        // 格式一创建数组
        let arr1 = ["张三","李四","王五",true];
     
        // 格式二 创建数组
        let arr2 = new Array("古力娜扎","玛尔扎哈",12.3,false);
     
        // arr1 和 arr2 合为一个数组
        let newArray = arr1.concat(arr2);
        console.log(newArray);
     
        // push: 添加一个新的元素
        let len = arr2.push("新元素");
        console.log(arr2);
        console.log(len);
     
        // join：按照一定的格式拼接字符串
        let strArray = arr2.join("=");
        console.log(strArray);
    </script>

1.2.3、数组特点

    1、JS中，数组元素的类型可变的。
    2、JS中，数组长度可变的。
 

1.3、Math对象

1.3.1、创建对象

Math对象不用创建，直接使用。 Math.方法名();
方法    说明
round(x)    把数四舍五入为最接近的整数。
floor(x)    向下取整
ceil(x)    向上取整
random()    随机数，返回 0 ~ 1 之间的随机数。 含0不含1

 <script>
        let round = Math.round(3.14);
        let ceil = Math.ceil(3.14);
        let floor = Math.floor(3.14);
        let random = Math.random();
        // 获取1~100之间的随机整数
        let randomNumber =  Math.floor((Math.random() * 100)) + 1;
</script>

属性     说明
PI       圆周率

1.4、Date对象

1.4.1、创建对象

var date = new Date();

1.4.2、常用方法

    方法                            说明
toLocaleString()        返回当前date对象对应的时间本地字符串格式
getTime()               获取毫秒值。返回当前如期对象描述的时间到1970年1月1日零点的毫秒值差
getFullYear()           获取年
getMonth()              获取月
getHours()              获取时
getMinutes()            获取分         
getDate()               获取日
getSeconds()            获取秒

   

 <script>
    var d = new Date();
    console.info(d);//Fri Jul 02 2021 17:23:09 GMT+0800 (中国标准时间)
    console.info(d.toLocaleString());    //2021/7/2 下午5:23:19
    console.info(d.toLocaleDateString());//2021/7/2
    console.info(d.toLocaleTimeString());//下午5:23:19
                
    console.info('获取年:'+d.getFullYear());//获取年
    console.info('获取月:'+d.getMonth());//获取月
    console.info('获取日:'+d.getDate());//获取日
    console.info('获取小时:'+d.getHours());//获取小时
    console.info('获取分:'+d.getMinutes());//获取分
    console.info('获取秒:'+d.getSeconds());//获取秒
    console.info('获取毫秒:'+d.getTime());获取毫秒
</script>

1.5、全局函数

1.5.1、什么是全局函数

全局函数不需要对象就可以直接调用: 方法名();

1.5.2、常用全局函数

    方法                说明
parseInt()        将字符串解析成一个整数。
parseFloat()      将字符串解析成一个浮点数。
isNaN()           判断是否是一个NaN类型的数据

   

 <script>
    console.log(parseInt("123.456"));//123
    console.log(parseInt("12abc3.456"));//12
     
    console.log(parseFloat("123.456"));//123.456
    console.log(parseFloat("123.45abc6"));//123.45
     
    console.log(parseInt("abc123"));//NaN : not a number 不是一个数字
    console.log(isNaN("abc123"));//true
 </script>

如果要判断是否是一个NaN类型的数据，使用isNaN()

1.5.3、字符编码

    方法            说明
encodeURI()    把字符串编码为 URI
decodeURI()    解码某个编码的 URI

   

 <script>
        let name = "樱花小子们，小男孩来咯";
        let encodeName = encodeURI(name);//编码
        //%E6%98%8E%E4%B8%8B%E5%8D%88%E4%B8%A4%E7%82%B9%E5%81%B7%E8%A2%AD% E7%8F%8D%E7%8F%A0
        console.log(encodeName);
        // 对数据进行解码
        let resultStr = decodeURI(encodeName);//解码
        console.log(resultStr);
 </script>

1.5.4、普通字符串解析js代码

    方法                                    说明
   eval()    接受一个js字符串,校验字符串中的内容是不是js代码(脚本)，如果是js代码就执行，如果不是就不执行

1.5.5、URL和URI

如下面网址：

https://www.baidu.com/a/fdks/kdjs

http:// 网络传输协议

www 万维网

.baidu.com 域名

/a/fdks/kdjs 资源路径（资源：一个文件，一个程序，图片，视频，，，）

URL: 统一资源定位符

URI：统一资源标识符 /a/fdks/kdjs