【QML-按钮】

news2025/2/4 9:02:34

QML编程指南 VX：hao541022348

  • ■ 按钮
    • ■ AbstractButton
    • ■ Button
    • ■ CheckBox
    • ■ DelayButton
    • ■ RadioButton
    • ■ RoundButton🌟
    • ■ Switch🌟
    • ■ ToolButton🌟

■ 按钮

■ AbstractButton

所有的按钮控件的父类都是 AbstractButton 。
AbstractButton 里面有按钮的样式外观包括文字图标等、点击、checked、还有就是可以配置菜单action。

1. 按下是否重复
像下面这些属性，就是 一个按钮一直被按下不释放，那这个还继续响应按钮的事件不？就怕按下一直发信号，在某些使用场景就不适合，但是有些场景就需要用到的。

  • autoRepeat 默认是false .
    2. 图标和文字展示情况
  • display : enumeration
    在这里插入图片描述
    3. 信号介绍
名称含义
canceled()当被按下时，鼠标失去了对按钮的抓取，或者当它发出释放信号，但鼠标光标不在按钮内部时，就会发出这个信号。
clicked()当被按下时，鼠标失去了对按钮的抓取，或者当它发出释放信号，但鼠标光标不在按钮内部时，就会发出这个信号。
doubleClicked()当用户通过触摸或鼠标交互式地双击按钮时，就会发出这个信号。
pressAndHold()当用户通过触摸或鼠标交互式地按下并按住按钮时，就会发出这个信号。当启用autoRepeat时不会触发。
pressed()当用户通过触摸、鼠标或键盘交互式地按下按钮时，就会发出这个信号。
released()当用户通过触摸、鼠标或键盘交互地释放按钮时，就会发出这个信号。
toggled()当用户通过触摸、鼠标或键盘交互切换可检查按钮时，就会发出这个信号。

4. 自带方法介绍
这个就只有一个槽函数：

  • void toggle()
    就是 切换按钮到选中状态。

■ Button

QtQuick.Controls 的 Button 表示用户可以按下或单击的按钮控件。这个控件其实就是代表一个按钮.
Button 是继承至 AbstractButton， 那Button就可以使用他的父类的一些功能。我们就可以设置 text, 展示一个图标 icon, 以及响应 clicks 点击事件之类的。

  • flat : bool 指示这个按钮是否是 flat 按钮，平面按钮通常不会绘制背景，除非它被按下或选中。默认值为false。
  • highlighted : bool 这个属性保存按钮是否高亮显示

事件处理

属性描述
信号
canceled()当被按下时，鼠标失去了对按钮的抓取，或者当它发出释放信号，但鼠标光标不在按钮内部时，就会发出这个信号。
clicked()当用户通过触摸、鼠标或键盘交互式地单击按钮时，就会发出这个信号。
doubleclick ()当用户通过触摸或鼠标交互式地双击按钮时，就会发出这个信号。
pressAndHold ()当用户通过触摸或鼠标交互式地按下并按住按钮时，就会发出这个信号。当启用autoRepeat时不会触发。
pressed()当用户通过触摸、鼠标或键盘交互式地按下按钮时，就会发出这个信号。
released()当用户通过触摸、鼠标或键盘交互地释放按钮时，就会发出这个信号。
toggled()当用户通过触摸、鼠标或键盘交互切换可检查按钮时，就会发出这个信号。这个信号在QtQuick中引入。对照组2.2 (Qt 5.9)。

示例一：

import QtQuick 2.12
import QtQuick.Window 2.12
import QtQuick.Controls 2.5
import QtQuick.Layouts 1.3

Window {
    visible: true
    width: 640
    height: 480
    title: qsTr("Hello World")

    Row{
        Button{
            text:"OK"
            Layout.column: 0
            Layout.alignment: Qt.AlignHCenter
            onClicked:
                console.log("Ok Btn Clicked!")
        }

        Button{
            text:"Apply"
            Layout.column: 1
            Layout.alignment: Qt.AlignHCenter
            onPressed:
            {
                console.log("Apply Btn Pressed!")
            }
        }
    }
}

定制外观
Button 有两个 visual 子控件: background 和content item.，我们就重写这个就好啦，很简单的
在这里插入图片描述

import QtQuick 2.12
import QtQuick.Window 2.12
import QtQuick.Controls 2.5

Window {
    visible: true
    width: 640
    height: 480
    title: qsTr("Hello World")
        Button {
            id: selfBtn
            text: qsTr("Button")

            contentItem: Text {
                text: selfBtn.text
                font: selfBtn.font
                opacity: enabled ? 1.0 : 0.3
                color: selfBtn.down ? "#17a81a" : "#21be2b"
                horizontalAlignment: Text.AlignHCenter
                verticalAlignment: Text.AlignVCenter
                elide: Text.ElideRight
            }

            background: Rectangle {
                implicitWidth: 100
                implicitHeight: 40
                opacity: enabled ? 1 : 0.3
                border.color: selfBtn.down ? "#17a81a" : "#21be2b"
                border.width: 1
                radius: 2
            }
        }
}

填充效果

import QtQuick 2.12
import QtQuick.Window 2.12
import QtQuick.Controls 2.5

Window {
    visible: true
    width: 640
    height: 480
    title: qsTr("Hello World")
    
       Button {
           id: selfBtn
           text: qsTr("Button")

           contentItem: Text {
               text: selfBtn.text
               font: selfBtn.font
               opacity: enabled ? 1.0 : 0.3
               color: selfBtn.down ? "white" : "#e6f6e7"
               horizontalAlignment: Text.AlignHCenter
               verticalAlignment: Text.AlignVCenter
               elide: Text.ElideRight
           }

           background: Rectangle {
               implicitWidth: 100
               implicitHeight: 40
               opacity: enabled ? 1 : 0.3
               border.color: selfBtn.down ? "#17a81a" : "#21be2b"
               color: selfBtn.down ? "#17a81a" : "#21be2b"
               border.width: 1
               radius: 2
           }
       }
}

■ CheckBox

CheckBox 提供了一个选项按钮，也叫复选框，可以打开(选中)或关闭(未选中)。复选框通常用于从一组选项中选择一个或多个选项。
示例一：
在这里插入图片描述

  ColumnLayout {
      CheckBox {
          checked: true
          text: qsTr("First")
      }
      CheckBox {
          text: qsTr("Second")
      }
      CheckBox {
          checked: true
          text: qsTr("Third")
      }
  }

示例二
在这里插入图片描述

    Column {
        ButtonGroup {
            id: childGroup
            exclusive: false
            checkState: parentBox.checkState
        }

        CheckBox {
            id: parentBox
            text: qsTr("Parent")
            checkState: childGroup.checkState
        }

        CheckBox {
            checked: true
            text: qsTr("Child 1")
            leftPadding: indicator.width
            ButtonGroup.group: childGroup
        }

        CheckBox {
            text: qsTr("Child 2")
            leftPadding: indicator.width
            ButtonGroup.group: childGroup
        }
    }

示例三外观定制
在这里插入图片描述

  import QtQuick 2.12
  import QtQuick.Controls 2.12

  CheckBox {
      id: control
      text: qsTr("CheckBox")
      checked: true

      indicator: Rectangle {
          implicitWidth: 26
          implicitHeight: 26
          x: control.leftPadding
          y: parent.height / 2 - height / 2
          radius: 3
          border.color: control.down ? "#17a81a" : "#21be2b"

          Rectangle {
              width: 14
              height: 14
              x: 6
              y: 6
              radius: 2
              color: control.down ? "#17a81a" : "#21be2b"
              visible: control.checked
          }
      }

      contentItem: Text {
          text: control.text
          font: control.font
          opacity: enabled ? 1.0 : 0.3
          color: control.down ? "#17a81a" : "#21be2b"
          verticalAlignment: Text.AlignVCenter
          leftPadding: control.indicator.width + control.spacing
      }
  }

示例四：
在这里插入图片描述

    CheckBox {
        id: control
        text: qsTr("CheckBox")
        checked: true

        leftPadding: indicator.width
        ButtonGroup.group: childGroup
        indicator: Rectangle {
            implicitWidth: 22
            implicitHeight: 22
            x: control.leftPadding
            y: parent.height / 2 - height / 2
            radius: 11
            border.color: control.down ? "#17a81a" : "#21be2b"

            Rectangle {
                width: 10
                height: 10
                x: 6
                y: 6
                radius: 5
                color: control.down ? "#17a81a" : "#21be2b"
                visible: control.checked
            }
        }

        contentItem: Text {
            text: control.text
            font.pixelSize: 14
            opacity: enabled ? 1.0 : 0.3
            color: control.down ? "#17a81a" : "#21be2b"
            verticalAlignment: Text.AlignVCenter
            padding: control.indicator.width + control.spacing
        }
    }

■ DelayButton

DelayButton 是一个 check 按钮，在按钮被 check 并发出activated()信号之前包含了一个延迟。这种延迟可以防止意外按下按钮。很像长按加速的效果功能。
在这里插入图片描述
当前进度用一个介于0.0到1.0之间的十进制值表示。activation()触发所需的时间以毫秒为单位，可以通过delay属性来设置。
进度由按钮上的进度指示器指示。

示例一：

    Column {
        id: column
        anchors.fill: parent
        DelayButton
        {
            text:"长按加速"
            anchors.horizontalCenter: parent.horizontalCenter
            Layout.alignment: Qt.AlignCenter
        }
    }

示例二 定制化
在这里插入图片描述

DelayButton {
        id: control
        checked: true
        text: qsTr("Delay\nButton")

        Layout.alignment: Qt.AlignHCenter
        anchors.horizontalCenter: parent.horizontalCenter
        contentItem: Text {
            text: control.text
            font: control.font
            opacity: enabled ? 1.0 : 0.3
            color: "white"
            horizontalAlignment: Text.AlignHCenter
            verticalAlignment: Text.AlignVCenter
            elide: Text.ElideRight
        }

        background: Rectangle {
            implicitWidth: 100
            implicitHeight: 100
            opacity: enabled ? 1 : 0.3
            color: control.down ? "#17a81a" : "#21be2b"
            radius: size / 2

            readonly property real size: Math.min(control.width, control.height)
            width: size
            height: size
            anchors.centerIn: parent

            Canvas {
                id: canvas
                anchors.fill: parent

                Connections {
                    target: control
                    onProgressChanged: canvas.requestPaint()
                }

                onPaint: {
                    var ctx = getContext("2d")
                    ctx.clearRect(0, 0, width, height)
                    ctx.strokeStyle = "white"
                    ctx.lineWidth = parent.size / 20
                    ctx.beginPath()
                    var startAngle = Math.PI / 5 * 3
                    var endAngle = startAngle + control.progress * Math.PI / 5 * 9
                    ctx.arc(width / 2, height / 2, width / 2 - ctx.lineWidth / 2 - 2, startAngle, endAngle)
                    ctx.stroke()
                }
            }
        }
    }

■ RadioButton

RadioButton，也叫单选按钮，可以打开(选中)或关闭(未选中)。单选按钮通常用于从一组选项中选择一项。也就是多选1的方式
示例一：
在这里插入图片描述

import QtQuick 2.0
import QtQuick.Layouts 1.3
import QtQuick.Window 2.3
import QtQuick.Controls 2.5

Window {
    id: window
    ColumnLayout
    {
        anchors.fill: parent
        RadioButton
        {
            text: "模式1"
            Layout.alignment: Qt.AlignHCenter
        }

        RadioButton
        {
            text: "模式2"
            Layout.alignment: Qt.AlignHCenter
        }

        RadioButton
        {
            text: "模式3"
            Layout.alignment: Qt.AlignHCenter
        }
    }
}

■ RoundButton🌟

RoundButton和Button是一样的，除了它有一个radius属性，这个属性允许圆角，而不必自定义背景。功能和Button完全一样的。

示例一：
在这里插入图片描述

import QtQuick 2.0
import QtQuick.Layouts 1.3
import QtQuick.Window 2.3
import QtQuick.Controls 2.5

Window {
    id: window

    width: 300
    height: 300

    ColumnLayout
    {
        anchors.fill: parent

        RoundButton
        {
            text: "圆角按钮"
            Layout.preferredWidth: 80
            Layout.preferredHeight: 30
            radius: 5
            Layout.alignment: Qt.AlignHCenter
        }
    }
}

示例二
在这里插入图片描述

import QtQuick 2.0
import QtQuick.Layouts 1.3
import QtQuick.Window 2.3
import QtQuick.Controls 2.5

Window {
    id: window

    width: 300
    height: 300
        RoundButton
        {
            id:control
            text: "圆角按钮"
            Layout.preferredWidth: 80
            Layout.preferredHeight: 30
            radius: 10
            Layout.alignment: Qt.AlignHCenter

            contentItem: Text {
                text: control.text
                font: control.font
                opacity: enabled ? 1.0 : 0.3
                color: control.down ? "#17a81a" : "#21be2b"
                horizontalAlignment: Text.AlignHCenter
                verticalAlignment: Text.AlignVCenter
                elide: Text.ElideRight
            }

            background: Rectangle {
                implicitWidth: 100
                implicitHeight: 40
                opacity: enabled ? 1 : 0.3
                border.color: control.down ? "#17a81a" : "#21be2b"
                border.width: 1
                radius: 5
            }
        }
}

■ Switch🌟

Switch 是一个单选按钮，其实就是叫开关控件的嘛，可以拖动或打开(选中)或关闭(未选中)。
Switch 通常用于在两种状态之间进行选择。对于较大的选项集，如列表中的选项，请考虑使用SwitchDelegate。
示例一：
在这里插入图片描述

import QtQuick 2.0
import QtQuick.Layouts 1.3
import QtQuick.Window 2.3
import QtQuick.Controls 2.5

Window {
    id: window
    
    width: 300
    height: 300
    
    ColumnLayout
    {
        anchors.fill: parent

 		Switch {
            text: qsTr("Wi-Fi")
            Layout.alignment: Qt.AlignHCenter
        }
	}
}

示例二 定制化
在这里插入图片描述

    Switch {
              id: swit
              text: qsTr("WI-Fi")

              Layout.alignment: Qt.AlignHCenter

              indicator: Rectangle {
                  implicitWidth: 48
                  implicitHeight: 26
                  x: swit.leftPadding
                  y: parent.height / 2 - height / 2
                  radius: 13
                  color: swit.checked ? "#17a81a" : "#ffffff"
                  border.color: swit.checked ? "#17a81a" : "#cccccc"

                  Rectangle {
                      x: swit.checked ? parent.width - width : 0
                      width: 26
                      height: 26
                      radius: 13
                      color: swit.down ? "#cccccc" : "#ffffff"
                      border.color: swit.checked ? (swit.down ? "#17a81a" : "#21be2b") : "#999999"
                  }
              }

              contentItem: Text {
                  text: swit.text
                  font: swit.font
                  opacity: enabled ? 1.0 : 0.3
                  color: swit.down ? "#17a81a" : "#21be2b"
                  verticalAlignment: Text.AlignVCenter
                  leftPadding: swit.indicator.width + swit.spacing
              }
          }

■ ToolButton🌟

示例一：
在这里插入图片描述

  ToolBar {
      RowLayout {
          anchors.fill: parent
          ToolButton {
              text: qsTr("‹")
              onClicked: stack.pop()
          }
          Label {
              text: "Title"
              elide: Label.ElideRight
              horizontalAlignment: Qt.AlignHCenter
              verticalAlignment: Qt.AlignVCenter
              Layout.fillWidth: true
          }
          ToolButton {
              text: qsTr("⋮")
              onClicked: menu.open()
          }
      }
  }

示例二：
在这里插入图片描述

  import QtQuick 2.12
  import QtQuick.Controls 2.12

  ToolButton {
      id: control
      text: qsTr("ToolButton")
      width: 120

      contentItem: Text {
          text: control.text
          font: control.font
          opacity: enabled ? 1.0 : 0.3
          color: control.down ? "#17a81a" : "#21be2b"
          horizontalAlignment: Text.AlignHCenter
          verticalAlignment: Text.AlignVCenter
          elide: Text.ElideRight
      }

      background: Rectangle {
          implicitWidth: 40
          implicitHeight: 40
          color: Qt.darker("#33333333", control.enabled && (control.checked || control.highlighted) ? 1.5 : 1.0)
          opacity: enabled ? 1 : 0.3
          visible: control.down || (control.enabled && (control.checked || control.highlighted))
      }
  }

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/1337406.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

Electron自定义通知Notification

Electron自定义通知Notification

Notification是什么？ 对于渲染进程，Electron 允许开发者使用通知中API，来运行系统的原生通知进行显示。 如何实现系统Notification？ const { Notification } require(electron);const isAllowed Notification.isSupported();…
阅读更多...
市场复盘总结 20231226

市场复盘总结 20231226

仅用于记录当天的市场情况，用于统计交易策略的适用情况，以便程序回测 短线核心：不参与任何级别的调整 昨日回顾： SELECT CODE,成交额排名,净流入排名,代码,名称,DDE大单金额,涨幅,主力净额,DDE大单净量,CONVERT(DATETIME, 最后封…
阅读更多...
概率论1：下象棋问题(3.5)

概率论1：下象棋问题(3.5)

每日小语 时刻望着他人的眼色行事，是腾飞不了的。自己怎么想就积极地去做，这是需要胆量的。——广中平佑 题目 甲、乙二人下象棋， 每局甲胜的概率为a,乙胜的概率为b. 为简化问题，设没有和局的情况，这意味着a b1. 设想…
阅读更多...
Flappy Bird游戏python完整源码

Flappy Bird游戏python完整源码

通过pygame实现当年风靡一时的flappy bird小游戏。 当前只设定了同样长度的管道，图片和声音文件自行导入。 效果如下： # -*- coding:utf-8 -*- """ 通过pygame实现曾风靡一时的flappybird游戏。 小鸟x坐标不变，画布左移实现…
阅读更多...
分享5款对工作有帮助的小工具

分享5款对工作有帮助的小工具

​ 在职场中，简单而高效的工具是我们事业成功的一部分。这五款工具可能会成为你职业生涯中的得力助手。 1.图片标注——iPhotoDraw ​ iPhotoDraw是一款图片标注软件，可以在图片上添加文字、符号、尺寸、放大细节等注释对象，增加图片的信息…
阅读更多...
〖Python网络爬虫实战㊹〗- JavaScript Hook 的用法

〖Python网络爬虫实战㊹〗- JavaScript Hook 的用法

订阅：新手可以订阅我的其他专栏。免费阶段订阅量1000 python项目实战 Python编程基础教程系列（零基础小白搬砖逆袭) 说明：本专栏持续更新中，订阅本专栏前必读关于专栏〖Python网络爬虫实战〗转为付费专栏的订阅说明作者&#xff1…
阅读更多...
SQL server 数据库练习题及答案（练习2）

SQL server 数据库练习题及答案（练习2）

使用你的名字创建一个数据库 创建表： 数据库中有三张表，分别为student,course,SC（即学生表，课程表，选课表） 问题： --1.分别查询学生表和学生修课表中的全部数据。--2.查询成绩在70到80分之间…
阅读更多...
文件操作(c)

文件操作(c)

1.文件分类：分为程序文件和数据文件 1.程序文件：源程序文件（后缀.c）,目标文件（windows环境后缀.obj）,可执行程序（windows环境后缀.exe） 2.数据文件：程序运行时读写的数据…
阅读更多...
【MySQL】复合查询 | 内外连接

【MySQL】复合查询 | 内外连接

文章目录 一、MySQL复合查询基本查询回顾多表查询自连接子查询单行子查询多行子查询多列子查询在from子句中使用子查询合并查询 二、MySQL内外连接内连接外连接左外连接右外连接 一、MySQL复合查询 基本查询回顾 准备测试表 下面给出三张表，员工表（emp&…
阅读更多...
多重断言插件之pytest-assume的简单使用

多重断言插件之pytest-assume的简单使用

背景： pytest-assume是Pytest框架的一个扩展，它允许在单个测试用例中多次断言。通常情况下，当一个断言失败时，测试会立即停止执行，而pytest-assume允许我 们继续执行剩余的断言，以便查看更多的失败信息。…
阅读更多...
k8s集群通过helm部署skywalking

k8s集群通过helm部署skywalking

1、安装helm 下载脚本安装 ~# curl -fsSL -o get_helm.sh https://raw.githubusercontent.com/helm/helm/master/scripts/get-helm-3 ~# chmod 700 get_helm.sh ~# ./get_helm.sh或者下载包进行安装 ~# wget https://get.helm.sh/helm-canary-linux-amd64.tar.gz ~# mv helm …
阅读更多...
使用 Jekyll 构建你的网站 - 初入门

使用 Jekyll 构建你的网站 - 初入门

文章目录 一、Jekyll介绍二、Jekyll安装和启动2.1 配置Ruby环境1）Windows2）macOS 2.2 安装 Jekyll2.3 构建Jekyll项目2.4 启动 Jekyll 服务 三、Jekyll常用命令四、目录结构4.1 主要目录4.2 其他的约定目录 五、使用GitLink构建Jekyll博客5.1 生成Jekyll…
阅读更多...
JAVA：JDK17新特性迈向更强大的编程体验

JAVA：JDK17新特性迈向更强大的编程体验

1、简述 随着技术的不断发展，Java语言也在不断演进，为开发者提供更强大、高效的编程体验。在JDK 17中，我们迎来了一系列引人注目的新特性，这些特性不仅使得Java更现代化，同时也进一步提升了开发效率和代码质量。本文将…
阅读更多...
CleanMyMac X2024免费许可证及功能详细讲解

CleanMyMac X2024免费许可证及功能详细讲解

一些用户反映自己的CleanMyMac卸载不干净？你的卸载方式正确码？当你在Mac上安装使用CleanMyMac后，需要将软件卸载，你会使用怎样方法完成操作呢？小编今天主要讲解如何卸载CleanMyMac以及卸载这款软件时应该注意的事项。一…
阅读更多...
OpenGL :LearnOpenGL笔记

OpenGL :LearnOpenGL笔记

glfw https://github.com/JoeyDeVries/LearnOpenGL/blob/master/src/1.getting_started/1.1.hello_window/hello_window.cpp #include <glad/glad.h>// 注: GLAD的include文件包含所需的OpenGL头文件(如GL/GL.h) &#xff0c;因此确保在其他需要OpenGL的头文件 (如GLFW…
阅读更多...
【SQL经典题目】连续日期判断、同时在线人数、会话划分、间隔日期连续、日期交叉

【SQL经典题目】连续日期判断、同时在线人数、会话划分、间隔日期连续、日期交叉

【1.查询至少连续3天下单的用户】 思路1&#xff08;使用lead&#xff09;&#xff1a; distinct user_id,create_date去重&#xff0c;确保每个用户每天只有一条访问记录lead(create_date,2,‘9999-12-31’) over(partition by user_id order by create_date)根据用户分区&am…
阅读更多...
【Unity游戏制作】游戏模型导入之前需要注意的三个基本点

【Unity游戏制作】游戏模型导入之前需要注意的三个基本点

&#x1f468;‍&#x1f4bb;个人主页&#xff1a;元宇宙-秩沅 &#x1f468;‍&#x1f4bb; hallo 欢迎 点赞&#x1f44d; 收藏⭐ 留言&#x1f4dd; 加关注✅! &#x1f468;‍&#x1f4bb; 本文由 秩沅 原创 &#x1f468;‍&#x1f4bb; 收录于专栏&#xff1a;Uni…
阅读更多...
使用Dependency Walker和Process Explorer排查瑞芯微工具软件RKPQTool.exe启动报错问题

使用Dependency Walker和Process Explorer排查瑞芯微工具软件RKPQTool.exe启动报错问题

目录 1、问题说明 2、使用Dependency Walker查看工具程序的库依赖关系 3、在可以运行的电脑上使用Process Explorer查看依赖的msvcr120.dll和msvcp120.dll库的路径 4、C/C运行时库介绍 5、可以下载安装VC_redist.x86.exe或VC_redist.x64.exe解决系统库缺失问题 C软件异常排…
阅读更多...
【如何破坏单例模式（详解）】

【如何破坏单例模式（详解）】

✅如何破坏单例模式 &#x1f4a1;典型解析✅拓展知识仓✅反射破坏单例✅反序列化破坏单例✅ObjectlnputStream ✅总结✅如何避免单例被破坏✅ 避免反射破坏单例✅ 避免反序列化破坏单例 &#x1f4a1;典型解析 单例模式主要是通过把一个类的构造方法私有化&#xff0c;来避免重…
阅读更多...
『JavaScript』全面掌握JavaScript数组的操作、方法与高级技巧

『JavaScript』全面掌握JavaScript数组的操作、方法与高级技巧

&#x1f4e3;读完这篇文章里你能收获到 学习JavaScript中数组的基本操作掌握JavaScript数组的多种内置方法了解JavaScript中的数组扩展运算符、Array.from()和Array.of()等实用技巧熟悉如何在JavaScript中使用数组方法进行数据处理 文章目录 一、基本操作1. 创建数组2. 访问和…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023