自学内容网 自学内容网
自学内容网 > 正文

【无标题】

🕗 发布于 2024-11-20 09:55 javascript  前端  vue.js  
  1. JavaScript内置构造函数

JavaScript提供了一些内置构造函数，用于创建各种数据类型的对象。这些构造函数允许你以更灵活的方式来处理数据，特别是在需要动态创建对象或者进行复杂数据操作的时候。

  • Number()：
    • 用于创建数字对象。虽然我们平时在代码中经常直接使用数字字面量（如5、3.14），但Number()构造函数提供了一种将其他数据类型转换为数字对象的方式。例如：
let numObj = new Number(5);
console.log(numObj); 
// 输出：Number {5}，这是一个数字对象，它有一些方法和属性，比如toFixed()方法用于格式化小数位数。
  • String()：
    • 用于创建字符串对象。同样，我们通常使用字符串字面量，但String()构造函数在某些情况下很有用，比如将其他数据类型转换为字符串对象。例如：
let strObj = new String('Hello');
console.log(strObj); 
// 输出：String {"Hello"}，字符串对象也有一些方法，如charAt()用于获取指定位置的字符。
  • Boolean()：
    • 用于创建布尔对象。不过在实际应用中，直接使用布尔字面量（true、false）更为常见，但Boolean()构造函数可以帮助我们理解布尔值的对象形式。例如：
let boolObj = new Boolean(true);
console.log(boolObj); 
// 输出：Boolean {true}，布尔对象也有一些方法，不过在日常开发中较少使用。
  • Object()：
    • 这是JavaScript中最基本的构造函数之一，用于创建普通对象。虽然我们更多地是使用对象字面量（如{name: 'John', age: 25}）来创建对象，但Object()构造函数也有它的用途。例如：
let emptyObj = new Object();
emptyObj.name = 'Alice';
emptyObj.age = 30;
console.log(emptyObj); 
// 输出：{name: "Alice", age: 30}，通过Object()构造函数先创建一个空对象，然后再为其添加属性。
  • Array()：
    • 用于创建数组对象。和数组字面量（如[1, 2, 3]）相比，Array()构造函数在某些动态创建数组的场景下很有用。例如：
let arr = new Array(3); 
// 创建一个长度为3的空数组，相当于 [undefined, undefined, undefined]
console.log(arr);
let arr2 = new Array(1, 2, 3); 
// 创建一个包含1、2、3的数组，相当于 [1, 2, 3]
console.log(arr2);
  • Function()：
    • 用于创建函数对象。虽然我们在代码中通常使用函数声明（如function add(a, b) { return a + b; }）或者函数表达式来定义函数，但Function()构造函数提供了一种动态创建函数的方式。不过这种方式比较复杂，且有安全风险，因为它会将传入的字符串作为函数体来解析。例如：
let add = new Function('a', 'b', 'return a + b;');
console.log(add(2, 3)); 
// 输出：5，通过Function()构造函数创建了一个加法函数。
  • Date()：
    • 用于创建日期对象，用于处理日期和时间相关的操作。例如：
let now = new Date();
console.log(now); 
// 输出当前日期和时间，格式类似于：Wed Nov 20 2024 10:38:02 GMT+0800 (中国标准时间)
  • RegExp()：
    • 用于创建正则表达式对象，用于进行字符串的匹配和替换等操作。例如：
let pattern = new RegExp('abc', 'g'); 
// 创建一个全局匹配'abc'的正则表达式对象
let str = 'abcdefabc';
let matches = str.match(pattern);
console.log(matches); 
// 输出：["abc", "abc"]，匹配到字符串中的两个'abc'
  1. 判断变量类型是不是数组的方法
  • 使用Array.isArray()方法：
    • 这是最直接、最准确的判断一个变量是否为数组的方法。它是JavaScript原生提供的方法，在所有现代浏览器和Node.js环境中都支持。例如：
let arr = [1, 2, 3];
let notArr = "not an array";
console.log(Array.isArray(arr)); 
// 输出：true
console.log(Array.isArray(notArr)); 
// 输出：false
  • 使用instanceof运算符：
    • instanceof用于判断一个对象是否是某个类（构造函数）的实例。在JavaScript中，数组也是对象，并且是由Array构造函数创建的，所以可以用instanceof来判断。例如：
let arr = [1, 2, 3];
let notArr = "not an array";
console.log(arr instanceof Array); 
// 输出：true
console.log(notArr instanceof Array); 
// 输出：false

需要注意的是，instanceof有一定的局限性。当涉及到跨框架或跨窗口的数组对象时，可能会出现误判的情况。例如，在一个iframe中的数组对象，在父窗口中使用instanceof判断可能会得到错误的结果。

  • 使用Object.prototype.toString.call()方法：
    • 这是一种比较通用的方法，可以准确判断各种数据类型。它通过调用对象的toString()方法来获取对象的类型信息。对于数组，其返回值为[object Array]。例如：
let arr = [1, 2, 3];
let notArr = "not an array";
console.log(Object.prototype.toString.call(arr)); 
// 输出：[object Array]
console.log(Object.prototype.toString.call(notArr)); 
// 输出：[object String]

  1. flex: 1的含义

    • 在CSS的Flex布局中，flex: 1是flex - grow、flex - shrink和flex - basis这三个属性的缩写形式。它用于在弹性容器（display: flex或display: inline - flex的父元素）中分配子元素的空间。

  2. 对应的单个属性含义及实现方式

    • flex - grow属性：
      • 含义：定义了子元素在剩余空间中的伸展比例。当容器的宽度（或高度，取决于主轴方向）大于子元素的总宽度（或高度）时，子元素会根据flex - grow属性的值来分配剩余空间。
      • 在flex: 1中的作用及实现：flex: 1中flex - grow的值为1，表示该子元素会在有剩余空间的情况下，按照与其他具有flex - grow属性的子元素的比例来分配剩余空间。例如，有两个子元素，一个设置了flex: 1，另一个设置了flex: 2，那么剩余空间会按照1:2的比例分配给这两个子元素。
    • flex - shrink属性：
      • 含义：定义了子元素在空间不足时的收缩比例。当容器的宽度（或高度）小于子元素的总宽度（或高度）时，子元素会根据flex - shrink属性的值来按比例收缩。
      • 在flex: 1中的作用及实现：flex: 1中flex - shrink的值为1，表示当容器空间不足时，该子元素会按照与其他具有flex - shrink属性的子元素的比例来收缩。例如，有两个子元素，一个设置了flex: 1，另一个设置了flex: 2，且容器空间不足，那么它们会按照1:2的比例收缩。
    • flex - basis属性：
      • 含义：定义了在分配剩余空间或收缩之前，子元素的初始大小。它可以是一个长度值（如200px），也可以是一个关键字（如auto）。
      • 在flex: 1中的作用及实现：flex: 1中flex - basis的值为0%（在没有其他单位的情况下，默认是基于百分比的计算）。这意味着该子元素在分配剩余空间或收缩之前的初始大小为0（不考虑外边距等因素），然后根据flex - grow和flex - shrink属性来分配剩余空间或收缩。

以下是一个示例代码，展示flex: 1以及其对应的单个属性的效果：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Flex Properties</title>
    <style>
       .container {
            display: flex;
            width: 600px;
            border: 1px solid black;
        }
      .box1 {
            background - color: lightblue;
            flex: 1;
        }
      .box2 {
            background - color: lightgreen;
            flex: 2;
        }
      .box3 {
            background - color: lightyellow;
            flex - grow: 1;
            flex - shrink: 1;
            flex - basis: 0%;
        }
    </style>
</head>

<body>
    <div class="container">
        <div class="box1">Box 1 with flex: 1</div>
        <div class="box2">Box 2 with flex: 2</div>
        <div class="box3">Box 3 with flex - grow: 1, flex - shrink: 1, flex - basis: 0%</div>
    </div>
</body>

</html>

在上述代码中：

  • .box1和.box2通过flex属性（flex: 1和flex: 2）来分配剩余空间，当容器宽度为600px，并且不考虑子元素内容宽度的情况下，.box1会占据容器宽度的1/3，.box2会占据容器宽度的2/3。
  • .box3通过分别设置flex - grow、flex - shrink和flex - basis这三个属性（与flex: 1的底层属性一致），其在布局中的效果和.box1是相同的，会根据容器剩余空间和其他子元素的情况来分配或收缩空间。

原文地址：https://blog.csdn.net/qq_41767061/article/details/143896247

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！

相关文章

自学内容网
Copyright © 2015-2024