JS的一些对象

摘要

JS提供了大量的内置对象，这些内置对象，不需要你创建就可以直接使用。比如document。

JS是基于对象的语言。当然此时都说是面向对象的语言。

JS提供了大量的内置对象，这些内置对象，不需要你创建就可以直接使用。比如document。

内置对象：所谓内置对象就是在JS中已经创建好，可以直接使用。

其他对象。

String

String 全局对象是一个用于字符串或一个字符序列的构造函数。

String是一个数据类型，表示所有的字符串和字符。

我们可以通过new String();创建一个字符串对象。 当然很明显''和""会来的更简单一点。但是有啥区别？

看案例：

    <script>
        console.log(String); // 构造函数
        // 使用引号创建
        var name = "卡卡西";  // 字符串
        // 使用new关键字创建
        var name1 = new String("卡卡西"); // 对象
        console.log(name == name1);// true
        console.log(typeof name); // string
        console.log(typeof name1);// object
    </script>

String赋值的内存分析：

var name = "卡卡西";
var name1 = "卡卡西";
var name2 = new String("卡卡西");

name1和name2指向同一块内存，如果修改name1,name是否一起修改？

        var name = "卡卡西";
        var name1 = "卡卡西";
        var name2 = new String("卡卡西");
        console.log("name="+name); // 卡卡西
        console.log("name1="+name1);// 卡卡西
        name1="鸣人" // 重新赋值
        console.log("name="+name);// 卡卡西
        console.log("name1="+name1);// 鸣人

我们会发现，修改name1不影响name。是因为String是常量。不能修改。我们之前做的所有的修改都是重新给变量赋值。

但是对象的属性是可以被修改的。

看例子：

        var p = {};
        p.name = "卡卡西";
        var p1 = p;
        console.log(p.name); //卡卡西
        console.log(p1.name);//卡卡西
        p1.name="鸣人"
        console.log(p.name);//鸣人
        console.log(p1.name);//鸣人

Math

Math 是一个内置对象，它拥有一些数学常数属性和数学函数方法。Math 不是一个函数对象。

Math的属性：

Math.E 欧拉常数，也是自然对数的底数，约等于 2.718。

Math.LN2 2 的自然对数，约等于 0.693。

Math.LN10 10 的自然对数，约等于 2.303。

Math.LOG2E 以 2 为底的 E 的对数，约等于 1.443。

Math.LOG10E 以 10 为底的 E 的对数，约等于 0.434。

Math.PI 圆周率，一个圆的周长和直径之比，约等于 3.14159。

Math.SQRT1_2 二分之一 ½ 的平方根，同时也是 2 的平方根的倒数 ，约等于 0.707。

Math.SQRT2 2 的平方根，约等于 1.414。

方法

Math.abs(x) 返回一个数的绝对值。

Math.acos(x) 返回一个数的反余弦值。

Math.acosh(x) 返回一个数的反双曲余弦值。

Math.asin(x) 返回一个数的反正弦值。

Math.asinh(x) 返回一个数的反双曲正弦值。

Math.atan(x) 返回一个数的反正切值。

Math.atanh(x) 返回一个数的反双曲正切值。

Math.atan2(y, x) 返回 y/x 的反正切值。

Math.cbrt(x) 返回一个数的立方根。

Math.ceil(x) 返回大于一个数的最小整数，即一个数向上取整后的值。

Math.clz32(x) 返回一个 32 位整数的前导零的数量。

Math.cos(x) 返回一个数的余弦值。

Math.cosh(x) 返回一个数的双曲余弦值。

Math.exp(x) 返回欧拉常数的参数次方，Ex，其中 x 为参数，E 是欧拉常数（2.718...，自然对数的底数）。

Math.expm1(x) 返回 exp(x) - 1 的值。

Math.floor(x) 返回小于一个数的最大整数，即一个数向下取整后的值。

Math.fround(x) 返回最接近一个数的单精度浮点型表示。

Math.hypot([x[, y[, …]]]) 返回其所有参数平方和的平方根。

Math.imul(x, y) 返回 32 位整数乘法的结果。

Math.log(x) 返回一个数的自然对数（㏒e，即 ㏑）。

Math.log1p(x) 返回一个数加 1 的和的自然对数（㏒e，即 ㏑）。

Math.log10(x) 返回一个数以 10 为底数的对数。

Math.log2(x) 返回一个数以 2 为底数的对数。

Math.max([x[, y[, …]]]) 返回零到多个数值中最大值。

Math.min([x[, y[, …]]]) 返回零到多个数值中最小值。

Math.pow(x, y) 返回一个数的 y 次幂。

Math.random() 返回一个 0 到 1 之间的伪随机数。

Math.round(x) 返回四舍五入后的整数。

Math.sign(x) 返回一个数的符号，得知一个数是正数、负数还是 0。

Math.sin(x) 返回一个数的正弦值。

Math.sinh(x) 返回一个数的双曲正弦值。

Math.sqrt(x) 返回一个数的平方根。

Math.tan(x) 返回一个数的正切值。

Math.tanh(x) 返回一个数的双曲正切值。

Math.toSource() 返回字符串 "Math"。

Math.trunc(x) 返回一个数的整数部分，直接去除其小数点及之后的部分。

案例：

    <script>
        console.log(Math);
        console.log(Math.E);
        console.log(Math.PI);
        // 向上取整
        console.log(Math.ceil(12.2));// 13
        console.log(Math.ceil(-12.2));// -12
        // 向下取整
        console.log(Math.floor(12.2));// 12
        console.log(Math.floor(-12.2));// -13
        //
        console.log(Math.fround(12.2));// 12.199999809265137
        // 取出最大的数
        console.log(Math.max(1,3,45,67,2,43));
        var arr = [2,5,5,3,2,6,6,343,4,6,65,54,5]
        console.log(Math.max(...arr));
        // 取出最小的数
        console.log(Math.min(1,3,45,67,2,43));
        var arr = [2,5,5,3,2,6,6,343,4,6,65,54,5]
        console.log(Math.min(...arr));
        // 去次幂
        console.log(Math.pow(20,5000));
        // 四舍五入
        console.log(Math.round(4.49999));
        // 判断数字正负
        console.log(Math.sign(100));
        // 截断小数部分
        console.log(Math.trunc(12.555));
    </script>

Date

创建一个 JavaScript Date 实例，该实例呈现时间中的某个时刻。Date 对象则基于 Unix Time Stamp，即自1970年1月1日（UTC）起经过的毫秒数。

案例：

<script>
    // 日期函数
    // 创建一个当前的系统时间
    var now = new Date();
    console.log(now);//Fri Jan 21 2022 11:41:38 GMT+0800 (中国标准时间)
    // 根据毫秒数创建一个指定的时间 （1h = 60mi = 3600mm = 3600*1000）
    var date1 = new Date(1321365464560);
    console.log(date1);
    // date提供的一些API
    // 将上面的日期转换为我们需要的格式
    var year = now.getFullYear();
    var month = now.getMonth()+1; // 0~11
    var day = now.getDate();
    var hours = now.getHours();// 24 小时制
    var minutes = now.getMinutes();
    var seconds = now.getSeconds();
    console.log(year+"年"+month+"月"+day+"日 "+hours+":"+minutes+":"+seconds);
    // 获取当前的毫秒数
    console.log(now.getTime());
</script>

Array

JavaScript的 Array 对象是用于构造数组的全局对象。

数组的一些API：

Array.prototype.at() 根据指定的索引，取出数组中的元素。如果是负数，则从右边开始计算。

Array.prototype.concat() 用于合并两个或多个数组。此方法不会更改现有数组，而是返回一个新数组

Array.prototype.copyWithin() 浅复制数组的一部分到同一数组中的另一个位置，并返回它，不会改变原数组的长度

Array.prototype.entries() 返回一个新的 Array Iterator 对象，该对象包含数组中每个索引的键/值对

Array.prototype.every() 测试一个数组内的所有元素是否都能通过某个指定函数的测试。它返回一个布尔值

Array.prototype.fill() 用一个固定值填充一个数组中从起始索引到终止索引内的全部元素

Array.prototype.filter() 创建一个新数组, 其包含通过所提供函数实现的测试的所有元素

Array.prototype.find() 返回数组中满足提供的测试函数的第一个元素的值。否则返回 undefined

Array.prototype.findIndex() 返回数组中满足提供的测试函数的第一个元素的索引。若没有找到对应元素则返回 -1

Array.prototype.flat()---- 按照一个可指定的深度递归遍历数组，并将所有元素与遍历到的子数组中的元素合并为一个新数组返回

Array.prototype.flatMap()--- 使用映射函数映射每个元素，然后将结果压缩成一个新数组

Array.prototype.forEach()--- 对数组的每个元素执行一次给定的函数

Array.prototype.includes() 判断一个数组是否包含一个指定的值，如果包含则返回 true，否则返回 false

Array.prototype.indexOf() 返回在数组中可以找到一个给定元素的第一个索引，如果不存在，则返回 -1

Array.prototype.join() 将一个数组的所有元素连接成一个字符串并返回这个字符串

Array.prototype.keys() 返回一个包含数组中每个索引键的 Array Iterator 对象

Array.prototype.lastIndexOf() 返回指定元素在数组中的最后一个的索引，如果不存在则返回 -1

Array.prototype.map() 返回一个新数组，其结果是该数组中的每个元素是调用一次提供的函数后的返回值

Array.prototype.pop() 从数组中删除最后一个元素，并返回该元素的值

Array.prototype.push() 将一个或多个元素添加到数组的末尾，并返回该数组的新长度

Array.prototype.reduce() 对数组中的每个元素执行一个由您提供的reducer函数（升序执行），将其结果汇总为单个返回值

Array.prototype.reduceRight() 接受一个函数作为累加器（accumulator）和数组的每个值（从右到左）将其减少为单个值

Array.prototype.reverse() 将数组中元素的位置颠倒，并返回该数组。该方法会改变原数组

Array.prototype.shift() 从数组中删除第一个元素，并返回该元素的值

Array.prototype.slice() 提取源数组的一部分并返回一个新数组

Array.prototype.some() 测试数组中是不是至少有一个元素通过了被提供的函数测试

Array.prototype.sort() 对数组元素进行原地排序并返回此数组

Array.prototype.splice() 通过删除或替换现有元素或者原地添加新的元素来修改数组,并以数组形式返回被修改的内容

Array.prototype.toLocaleString() 返回一个字符串表示数组中的元素。数组中的元素将使用各自的 Object.prototype.toLocaleString() 方法转成字符串

Array.prototype.toString() 返回一个字符串表示指定的数组及其元素。数组中的元素将使用各自的 Object.prototype.toString() 方法转成字符串

Array.prototype.unshift() 将一个或多个元素添加到数组的头部，并返回该数组的新长度

Array.prototype.values() 返回一个新的 Array Iterator 对象，该对象包含数组每个索引的值

<script>
    var arr = [9,5,2,7];
    var arr1 = new Array();
    console.log(typeof arr);// object
    console.log(typeof arr1);// object
    var x = arr.at(-1);
    console.log(x);// 7 
    // 合并数组
    var arr2 = [1,2,3,4,5]
    var arr3 = [3,4,5,6,7]
    var arr4 = arr2.concat(arr3);
    console.log(arr2);
    console.log(arr3);
    console.log(arr4);
    // copyWithin
    var arr5 = [1,2,3,4,5,6,7,8,9];
    // 从索引为3的元素开始复制到索引为5的元素的前一个。将这些内容从索引为2的开始填充，产生新的数组
    var arr6 = arr5.copyWithin(2,3,5);
    console.log(arr5);
    console.log(arr6);
    // every()
    var arr7 = [3,4,5,6,7]
    var result = arr7.every(function(curr){
        // 这里的curr表示遍历中的每一个元素
        return curr > 3;
    });
    console.log(result);
    // fill
    var arr8 = new Array(10);
    arr8.fill("鸣人");
    console.log(arr8);
    // filter();
    var arr9 = [1,2,5,4,7,23,6,5,43,64,34];
    // 取出所有的偶数放在一个新数组中 
    var arr10 = arr9.filter(function(curr){
        return curr % 2 == 0;
    });
    console.log(arr10);
    // find 和 filter差不多，但是只返回第一个
    var num = arr9.find(function(curr){
        return curr % 2 == 0;
    });
    console.log(num);
    // forEach
    var arr11 = [1,5,9,3,4,7,2,6,8,5];
    arr11.forEach(function(curr){
        if(curr % 2 ==0){
            console.log(curr+"是偶数");
        }else{
            console.log(curr+"是奇数");
        }
    });
    console.log(arr11.includes(5));
    console.log(arr11.indexOf(5));
    // join
    var str = arr11.join("哈哈");
    console.log(str);
    console.log(arr11.lastIndexOf(5))
    // map();
    var arr12 = arr11.map(function(item){
        if(item % 2 == 0){
            return "偶"
        }else{
            return "奇"
        }
    });
    console.log(arr12);
    // pop() 弹出数组的最后一个值  修改了原数组
    arr11 = [1,2,3,4,5,6]
    var n = arr11.pop();
    console.log(n);
    console.log(arr11);
    // push() 往数组的最后追加一个或者多个元素
    arr11.push(7);
    var length = arr11.push(8,9,10);
    console.log(arr11);
    // reduce
    arr11 = [1,3,2,4,5,7,6,8];
    var x = arr11.reduce(function(prex,curr){
        // 求和
        return prex + curr;
    });
    console.log(x);
    console.log(arr11);
    // 反转数组  会修改原来的数组
    arr11.reverse();
    console.log(arr11);
    // shift（） 弹出第一个元素
    console.log(arr11.shift());
    console.log(arr11);
    console.log("----------------------")
    // 截取子数组
    var arr13 = [1,2,3,4,5,6,7,8,9]
    var arr14 = arr13.slice(3,7);
    console.log(arr13);
    console.log(arr14);
    arr14[2] = 55;
    console.log(arr14);
    console.log(arr13);
    console.log("---------对象数组-------------")
    var arr15 = [{name:"鸣人"},{name:"佐助"},{name:"小明"},{name:"小飞"},{name:"卡卡西"},{name:"迈特凯"},{name:"春野樱"}];
    var arr16 = arr15.slice(1,4);
    console.log(arr15);
    console.log(arr16);//[{name:"佐助"},{name:"小明"},{name:"小飞"}]
    //  修改arr16中的某一个值
    arr16[2].name="大飞"; // 修改完成之后，原始数组和新数组的数据都会被修改。
    console.log(arr16);
    // 检查是否有满足需求的元素
    var arr17 = [1,3,5,6,7,9];
    var result = arr17.some(function(curr){
        return curr % 2 == 0;
    });
    console.log(result);
    // 排序
    arr17 = [2,10,15,18,25,32,4,5,6]
    arr17.sort();
    console.log(arr17);
    arr17 = [2,10,15,18,25,32,4,5,6]
    // 自定义排序规则
    arr17.sort(function(a,b){
        if(a > b){
            return -1;
        }else if(a == b){
            return 0;
        }else{
            return 1;
        }
    });
    console.log(arr17);
    // 按照规则给数组中插入指定的元素
    var arr18 = [1,2,3,4,5];
    // 在索引为1的位置插入18
    arr18.splice(1,0,18);
    console.log(arr18);
    arr18 = [1,2,3,4,5];
    // 在索引为1的位置插入18,19,20
    arr18.splice(1,0,18,19,20);
    console.log(arr18);
    arr18 = [1,2,3,4,5];
    // 在索引为1的位置插入18,19,20
    arr18.splice(1,0,...[18,19,20]);
    console.log(arr18);
    arr18 = [1,2,3,4,5];
    // 在索引为1的位置插入18,19,20, 并且删除原来的2和3
    arr18.splice(1,2,18,19,20);
    console.log(arr18);
    console.log(arr18.toLocaleString());
    console.log(arr18.toString());
    //   给数组的第一个位置插入新元素
    arr18.unshift("旗木卡卡西");
    console.log(arr18);
</script>

数组的遍历：

    <script>
        var arr = [9,5,1,3,6,7,4,2,12,13,18,8,6]
        // 传统遍历  for
        var str = "";
        for(var x = 0;x < arr.length;x ++){
            str += x + ",";
        }
        str = "";
        // forEach遍历
        for(var j in arr){ // j是索引   每次从数组中取出一个索引赋值给j
            str += arr[j] + "&";
        }
        str = "";
        // 使用array的forEach方法
        arr.forEach(function(curr){ // 这里的curr就是每一个元素。  每次取一个值出来传入内面的函数执行
            str += curr+"-"
        });
        str = "";
        // 使用Array的entries得到实体集合再遍历
        var iterator = arr.entries();
        // iterator --> [[0,9],[1,5]......]
        for(var item of iterator){ // 迭代器的专有的遍历方式
            // item : [0,9]
            str += item[1] + "=";
        }
        str  = "";
        // 使用Array的keys方法获取所有索引的迭代器，进行迭代
        var keysIt = arr.keys(); // [0,1,2,3.....] 
        for(var k of keysIt){
            str += arr[k] + "kkkk"
        }
        str = "";
        //  使用Arrsy的values方法获取所有的数组元素的迭代器，进行迭代
        var valuesIt = arr.values();
        for(var v of valuesIt){
            str += v +" v ";
        }
        console.log(str);
    </script>

包装类型

数据类型：

数字 -->number

字符串 -- > string

布尔型 --> boolean

案例：

    <script>
        var x = 10;
        var name = "tom";
        var f = false;
        var p = {};
        console.log(typeof x);// number
        console.log(typeof name);//string
        console.log(typeof f);// boolean
        console.log(typeof p);// object
        // 下面都是包装类型。
        var xx = new Number(10);
        var username = new String("jerry");
        var ff = new Boolean(true);
        console.log(typeof xx);// object
        console.log(typeof username);// object
        console.log(typeof ff);// object
    </script>

var x = 10与 var y = new Number(10);

        var x = 10;
        var y = new Number(10);
        console.log(x == y);// true  比较数值
        console.log(x === y);// false 比价数值和类型