前端JS学习（一）

前端JS学习（一）

基础

 JavaScript书写位置

1、行内 JavaScript
通常放在文档结尾的 $$ 上面
将 $id="JavaScript_10"></a>JavaScript输出语法</h3> <blockquote> 输出语法： 语法1： document.write(‘要出的内容’) 作用：向body内输出内容 语法2： alert(‘要出的内容’) 作用：页面弹出警告<a href="https://so.csdn.net/so/search?q=%E5%AF%B9%E8%AF%9D%E6%A1%86&spm=1001.2101.3001.7020" target="_blank" class="hl hl-1" data-report-view="{"spm":"1001.2101.3001.7020","dest":"https://so.csdn.net/so/search?q=%E5%AF%B9%E8%AF%9D%E6%A1%86&spm=1001.2101.3001.7020","extra":"{\"searchword\":\"对话框\"}"}" data-report-click="{"spm":"1001.2101.3001.7020","dest":"https://so.csdn.net/so/search?q=%E5%AF%B9%E8%AF%9D%E6%A1%86&spm=1001.2101.3001.7020","extra":"{\"searchword\":\"对话框\"}"}" data-tit="对话框" data-pretit="对话框">对话框</a> 语法3： console.log(‘控制台打印’) 作用：<a href="https://so.csdn.net/so/search?q=%E6%8E%A7%E5%88%B6%E5%8F%B0%E8%BE%93%E5%87%BA&spm=1001.2101.3001.7020" target="_blank" class="hl hl-1" data-report-view="{"spm":"1001.2101.3001.7020","dest":"https://so.csdn.net/so/search?q=%E6%8E%A7%E5%88%B6%E5%8F%B0%E8%BE%93%E5%87%BA&spm=1001.2101.3001.7020","extra":"{\"searchword\":\"控制台输出\"}"}" data-report-click="{"spm":"1001.2101.3001.7020","dest":"https://so.csdn.net/so/search?q=%E6%8E%A7%E5%88%B6%E5%8F%B0%E8%BE%93%E5%87%BA&spm=1001.2101.3001.7020","extra":"{\"searchword\":\"控制台输出\"}"}" data-tit="控制台输出" data-pretit="控制台输出">控制台输出</a>语法，程序员调试使用 换行输出：’ ’ </blockquote> <h3><a name="t3"></a><a id="JavaScript_23"></a>JavaScript输入语法</h3> <blockquote> 输入语法： 语法：prompt(‘请输入您的姓名：’) 作用：显示一个对话框，对话框中包含一条文字信息，用来提示用户输入文字 </blockquote> <h3><a name="t4"></a><a id="_28"></a>变量</h3> <blockquote> 语法：let 变量名 = 值 多个变量中间用逗号隔开，但并不推荐这样。通常为了更好的可读性，一行只声明一个变量。 在avaScript中，根据作用域的不同，变量可以分为：全局变量、局部变量 全局变量：函数外部1et 的变量 函数内部1et 的变量 全局变量在任何区域都可以访问和修改,局部变量只能在当前函数内部访问和修改。 访问原则：在能够访问到的情况下先局部，局部没有在找全局 </blockquote> <h3><a name="t5"></a><a id="_37"></a>数组</h3> <blockquote> 语法：1et 数组名=[数据1，数据2，…·，数据n] 数组是按顺序保存，所以每个数据都有自己索引号 </blockquote> <h3><a name="t6"></a><a id="_42"></a>常量</h3> <blockquote> 当某个变量永远不会改变时，可使用const来声明一个“常量”。 语法：const 变量名 = 值 注意：常量不允许重新赋值，声明的时候必须赋值（初始化） </blockquote> <h3><a name="t7"></a><a id="_47"></a>数据类型</h3> <blockquote> JS数据类型整体分为两大类：基本数据类型、引用数据类型 基本数据类型: number 数字型 string 字符串型 boolean 布尔型 undefined 未定义型 null 空类型 引用数据类型 object对象 </blockquote> <h4><a name="t8"></a><a id="emspemspnumberemsp_59"></a> number 数字型</h4> <blockquote> number 数字型可以进行算术运算操作，主要包括加、减、乘、除、取余（求模)。>+: 求和、-: 求差、*: 求积、/: 求商、%: 取模（取余数） 算术运算符优先级：先乘除取余，后加减，有括号先算括号 NaN代表一个计算错误。它是一个不正确的或者一个未定义的数学操作所得到的结果。任何对NaN的操作都会返回NaN。 </blockquote> <h4><a name="t9"></a><a id="emspemspstringemsp_64"></a> string 字符串型</h4> <blockquote> 通过单引号(“)、双引号(”)或反引号(')包裹的数据都叫字符串，单引号和双引号没有本质上的区别，推荐使用单引号。 . 字符串拼接：+运算符可以实现字符串的拼接（数字相加，字符相连） . 注意事项： 1.无论单引号或是双引号必须成对使用 2.单引号/双引号可以互相嵌套，但是不以自已嵌套自已 3.必要时可以使用转义符\，输出单引号或双引号 </blockquote> <blockquote> 模板字符串：拼接字符串和变量 语法:内容用反引号``，内容中的变量用（美元符号+{}）包住 例: <img src="https://1000bd.com/contentImg/2024/04/09/36c731f4fa58b7d1.png" alt="在这里插入图片描述"> </blockquote> <h4><a name="t10"></a><a id="booleanemsp_77"></a>boolean 布尔型</h4> <blockquote> 布尔类型数据表示真或假，它只有true和false两个固定的值。 </blockquote> <h4><a name="t11"></a><a id="undefined_80"></a>未定义类型(undefined)</h4> <blockquote> 未定义是比较特殊的类型，只有一个值undefined。未定义类型是弱数据类型，声明一个变量未赋值就是undefined（只声明变量，不赋值） </blockquote> <h4><a name="t12"></a><a id="nul_83"></a>nul（空类型)</h4> <blockquote> JavaScript中的null仅仅是一个代表“无”、"空”或“值未知”的特殊值。undefined表示没有赋值，而null表示赋值了，但是内容为空。nul作为尚未创建的对象，即将来有个变量里面存放的是一个对象，但是对象还没创建好，可以先给个null。 </blockquote> <h3><a name="t13"></a><a id="_86"></a>检测数据类型</h3> <blockquote> JavaScript中可以通过typeof关键字检测数据类型，支持两种语法形式： 作为运算符：typeof ×（常用的写法) 函数形式：typeof(x) <img src="https://1000bd.com/contentImg/2024/04/09/a21a160f0c72ec1a.png" alt="在这里插入图片描述"> </blockquote> <h3><a name="t14"></a><a id="_91"></a>类型转换</h3> <blockquote> JavaScript是弱数据类型，在使用表单、prompt获取过来的数据默认是字符串类型的，此时就不能直接简单的进行加法运算，需要转换变量的数据类型。类型转换，就是把一种数据类型的变量转换成我们需要的数据类型。 </blockquote> <h4><a name="t15"></a><a id="_93"></a>隐式转换</h4> <blockquote> 隐式转换：某些运算符被执行时，系统内部自动将数据类型进行转换。缺点是转换类型不明确。 规则： +号两边只要有一个是字符串，都会把另外一个转成字符串， - * / 等都会把数据转成数字类型。任何数据和字符串相加结果都是字符串。 <img src="https://1000bd.com/contentImg/2024/04/09/efe620401abd56eb.png" alt="在这里插入图片描述"> </blockquote> <h4><a name="t16"></a><a id="_98"></a>显式转换</h4> <blockquote> 为了避免因隐式转换带来的问题，通常根逻辑需要对数据进行显示转换。 显式转换明确告诉系统该转成什么类型。 转换为数字型：Number(数据) 只保留整数：parselnt(数据) 可以保留小数：parseFloat(数据) </blockquote> <h2><a name="t17"></a><a id="_106"></a>运算符</h2> <blockquote> 赋值运算符：对变量进行赋值的运算符 赋值运算符：=将等号右边的值赋予给左边，要求左边必须是一个容器 其他赋值运算符： += *= /= %= </blockquote> <blockquote> 一元运算符: JavaScript运算符可以根据所需表达式的个数，分为一元运算符、二元运算符、三元运算符 自增：++ 自减：– 注意：前置自增和后置自增单独使用没有区别 <code>let num=1 num++, ++num</code> 其作用都相当于 num+=1 . 注意：前置自增和后置自增如果参与运算就有区别 前置自增：先自加再使用（记忆口决：++在前先加） 后置自增：先使用再自加（记忆口诀：++在后后加） <img src="https://1000bd.com/contentImg/2024/04/09/c44599d9d2e19baf.png" alt="在这里插入图片描述"> </blockquote> <blockquote> 比较运算符： <img src="https://1000bd.com/contentImg/2024/04/09/694e70bcf202f731.png" alt="在这里插入图片描述"> </blockquote> <blockquote> 逻辑运算符：解决多重条件判断 怎么判断一个变量um是否大于5且小于10？ 错误写法：5<num<10 正确写法：num > 5 && num < 10 <img src="https://1000bd.com/contentImg/2024/04/09/10a158440fa2d118.png" alt="在这里插入图片描述"> </blockquote> <blockquote> 运算符优先级： <img src="https://1000bd.com/contentImg/2024/04/09/5fc073b7b3472685.png" alt="在这里插入图片描述"> </blockquote> <h2><a name="t18"></a><a id="_142"></a>分支语句</h2> <blockquote> i f if if 语句 if 语句有三种结构：单分支、双分支、多分支 <img src="https://1000bd.com/contentImg/2024/04/09/f72e0e34a9d99ef3.png" alt="在这里插入图片描述"> <img src="https://1000bd.com/contentImg/2024/04/09/8c6f3e04d1431680.png" alt="在这里插入图片描述"> <img src="https://1000bd.com/contentImg/2024/04/09/1e4fbaadc9284d3b.png" alt="在这里插入图片描述"> </blockquote> <blockquote> 三元运算符 <img src="https://1000bd.com/contentImg/2024/04/09/c8503af33adbdc55.png" alt="在这里插入图片描述"> </blockquote> <blockquote> switch语句 switch case语句一般用于等值判断,不适合于区间判断，switch case一般需要配合break关键字使用，没有break会造成case穿透 </blockquote> <blockquote> <img src="https://1000bd.com/contentImg/2024/04/09/0cf9f1ae845d79b2.png" alt="在这里插入图片描述"> </blockquote> <h2><a name="t19"></a><a id="_157"></a>循环语句</h2> <blockquote> while 循环： <img src="https://1000bd.com/contentImg/2024/04/09/f0495094b4daf50b.png" alt="在这里插入图片描述"> while循环需要具备三要素： 1.变量起始值 2.终止条件（没有终止条件，循环会一直执行，造成死循环） 3.变量变化量（用自增或者自减） <img src="https://1000bd.com/contentImg/2024/04/09/4a838971688e1dde.png" alt="在这里插入图片描述"> </blockquote> <blockquote> for 循环： <img src="https://1000bd.com/contentImg/2024/04/09/4b7fbb78ea32bfbc.png" alt="在这里插入图片描述"> 例子： <img src="https://1000bd.com/contentImg/2024/04/09/063d844092abff45.png" alt="在这里插入图片描述"> 当如果明确了循环的次数的时候推荐使用for循环 当不明确循环的次数的时候推荐使用while循环 </blockquote> <h2><a name="t20"></a><a id="_173"></a>数组</h2> <blockquote> 数组(Array)：是一种可以按顺序保存多个数据的数据类型 定义1：1et 数组名=[数据1，数据2，··，数据n] 定义2：1et 数组名=new Array(数据1，数据2，··，数据n) 操作数组 <img src="https://1000bd.com/contentImg/2024/04/09/c6b8098c314b0829.png" alt="在这里插入图片描述"> . 新增 数组名. push()：将一个或多个元素添加到数组的末尾，并返回该数组的新长度(重点) 数组名.unshift() ：将一个或多个元素添加到数组的开头，并返回该数组的新长度 . 删除 数组名. pop() ：从数组中删除最后一个元素，并返回该元素的值 数组名. shift() ：从数组中删除第一个元素，并返回该元素的值 数组名. splice(start,deleteCount) ：删除指定元素。start 指定修改的开始位置（从0计数），deleteCount：要移除的数组元素的个数，可选。如果省略则默认从指定的起始位置删 除到最后。 . 数组排序 数组名. sort() 方法可以排序，从小到大 升序：arr.sort(function (a,b){ return a-b}) 降序：arr.sort(function (a,b){ return b-a}) </blockquote> <h2><a name="t21"></a><a id="_196"></a>函数</h2> <blockquote> 函数：是被设计为执行特定任务的代码块，可以实现代码复用，提高开发效率。 . 无参函数定义：function 函数名(){ 函数体 } 无参函数调用：函数名() . . . 函数名命名规范： 尽量小驼峰式命名法 前缀应该为动词 例：function getName( ){ } . 参数函数定义：function 函数名(参数){ 函数体 } 参数函数调用：函数名(参数) 用户不输入实参，可以给形参默认值，默认值只会在缺少实参参数传递时才会被执行，所以有参数会优先执行传递过来的实参。 . 当函数需要返回数据出去时，用return关键字 语法：return 数据 . 函数可以分为：具名函数、匿名函数<img src="https://1000bd.com/contentImg/2024/04/09/0f037046fbb2b9d0.png" alt="在这里插入图片描述"> 匿名函数，是没有名字的函数，无法直接使用。使用方式：函数表达式、立即执行函数。 1、函数表达式：将匿名函数赋值给一个变量，并且通过变量名称进行调用 <img src="https://1000bd.com/contentImg/2024/04/09/d74349b79f66a116.png" alt="在这里插入图片描述"> 2、立即执行函数：避免全局变量之间的污染 注意：多个立即执行函数要用；隔开，要不然会报错<img src="https://1000bd.com/contentImg/2024/04/09/2f53741aab04c028.png" alt="在这里插入图片描述"> </blockquote> <h2><a name="t22"></a><a id="_221"></a>对象</h2> <blockquote> 对象(object)：JavaScript里的一种数据类型，可以理解为是一种无序的数据集合，用多个变量保存则比较散，用对象比较统一。有静态特征=>可以使用数字，字符串，数组，布尔类型等表示、动态行为=>使用函数表示。 . 对象声明 1、：1et 对象名={ } 2、：let 对象名=new Object() . 对象由属性和方法组成 属性：信息或叫特征（名词）。属性都是成对出现的，包括属性名和值，它们之间使用英文：分隔,多个属性之间使用英文，分隔 方法：功能或叫行为（动词） . 对象属性操作 <img src="https://1000bd.com/contentImg/2024/04/09/394b2018863bbb83.png" alt="在这里插入图片描述"> 对于多词属性或则“—"等属性，点操作就不能用了。采取：对象[‘属性’]方式，单引号和双引号都阔以 <img src="https://1000bd.com/contentImg/2024/04/09/68b6edb504393abb.png" alt="在这里插入图片描述"> . 对象方法操作 方法是由方法名和函数两部分构成，它们之间使用：分隔 <img src="https://1000bd.com/contentImg/2024/04/09/7b84bee261457fb0.png" alt="在这里插入图片描述"> . 遍历对象 <img src="https://1000bd.com/contentImg/2024/04/09/7668535a32846ae8.png" alt="在这里插入图片描述"> . 内置对象-Math Math对象是JavaScript提供的一个“数学”对象，提供了一系列做数学运算的方法 <img src="https://1000bd.com/contentImg/2024/04/09/1d0374e86970a3ea.png" alt="在这里插入图片描述"> </blockquote> <h3><a name="t23"></a><a id="Array_247"></a>Array对象</h3> <blockquote> Array对象是用来定义数组的。常用语法格式有如下2种： var 变量名 = new Array(元素列表); var 变量名 = [ 元素列表 ]; </blockquote> 数组定义好了，该如何获取数组中的值呢？和java中一样，需要通过索引来获取数组中的值。语法如下： <blockquote> arr[索引] = 值; </blockquote> <pre data-index="0" class="set-code-show prettyprint"><code class="prism language-javascript has-numbering" onclick="mdcp.signin(event)" style="position: unset;"><script> //定义数组 var arr = new Array(1,2,3,4); var arr = [1,2,3,4]; //获取数组中的值，索引从0开始计数 console.log(arr[0]); console.log(arr[1]); </script> <div class="hljs-button signin active" data-title="登录复制" data-report-click="{"spm":"1001.2101.3001.4334"}"></div></code><ul class="pre-numbering" style=""><li style="color: rgb(153, 153, 153);">1</li><li style="color: rgb(153, 153, 153);">2</li><li style="color: rgb(153, 153, 153);">3</li><li style="color: rgb(153, 153, 153);">4</li><li style="color: rgb(153, 153, 153);">5</li><li style="color: rgb(153, 153, 153);">6</li><li style="color: rgb(153, 153, 153);">7</li><li style="color: rgb(153, 153, 153);">8</li><li style="color: rgb(153, 153, 153);">9</li></ul></pre> 与 java 中不一样的是，JavaScript 中数组相当于 java 中的集合，数组的长度是可以变化的。而且 JavaScript 是弱数据类型的语言，所以数组中可以存储任意数据类型的值。 Array 的属性和方法 <div class="table-box"><table><thead><tr><th>属性</th><th>描述</th></tr></thead><tbody><tr><td>length</td><td>设置或返回数组中元素的数量。</td></tr></tbody></table></div> length属性可以用来获取数组的长度，所以可以借助这个属性，来遍历数组中的元素 <pre data-index="1" class="set-code-show prettyprint"><code class="prism language-javascript has-numbering" onclick="mdcp.signin(event)" style="position: unset;"><script> var arr = [1,2,3,4]; for (let i = 0; i < arr.length; i++) { console.log(arr[i]); } </script> <div class="hljs-button signin active" data-title="登录复制" data-report-click="{"spm":"1001.2101.3001.4334"}"></div></code><ul class="pre-numbering" style=""><li style="color: rgb(153, 153, 153);">1</li><li style="color: rgb(153, 153, 153);">2</li><li style="color: rgb(153, 153, 153);">3</li><li style="color: rgb(153, 153, 153);">4</li><li style="color: rgb(153, 153, 153);">5</li><li style="color: rgb(153, 153, 153);">6</li></ul></pre> <div class="table-box"><table><thead><tr><th>方法</th><th>描述</th></tr></thead><tbody><tr><td>forEach()</td><td>遍历数组中的每个有值得元素，并调用一次传入的函数</td></tr><tr><td>push()</td><td>将新元素添加到数组的末尾，并返回新的长度</td></tr><tr><td>splice()</td><td>从数组中删除元素</td></tr></tbody></table></div> forEach()方法，顾名思义，这是用来遍历的。这个函数接受一个参数，就是遍历时数组的值。 <pre data-index="2" class="set-code-show prettyprint"><code class="prism language-javascript has-numbering" onclick="mdcp.signin(event)" style="position: unset;"><script> var arr = [1,2,3,4]; arr.forEach(function(e){ console.log(e); }) // 在ES6中，引入箭头函数的写法，语法类似java中lambda表达式 arr.forEach((e) => { console.log(e); }) </script> <div class="hljs-button signin active" data-title="登录复制" data-report-click="{"spm":"1001.2101.3001.4334"}"></div></code><ul class="pre-numbering" style=""><li style="color: rgb(153, 153, 153);">1</li><li style="color: rgb(153, 153, 153);">2</li><li style="color: rgb(153, 153, 153);">3</li><li style="color: rgb(153, 153, 153);">4</li><li style="color: rgb(153, 153, 153);">5</li><li style="color: rgb(153, 153, 153);">6</li><li style="color: rgb(153, 153, 153);">7</li><li style="color: rgb(153, 153, 153);">8</li><li style="color: rgb(153, 153, 153);">9</li><li style="color: rgb(153, 153, 153);">10</li><li style="color: rgb(153, 153, 153);">11</li></ul></pre> push()函数是用于向数组的末尾添加元素的，其中函数的参数就是需要添加的元素 <pre data-index="3" class="set-code-show prettyprint"><code class="prism language-javascript has-numbering" onclick="mdcp.signin(event)" style="position: unset;"><script> var arr = [1,2,3,4]; //push: 添加元素到数组末尾 arr.push(7,8,9); </script> <div class="hljs-button signin active" data-title="登录复制" data-report-click="{"spm":"1001.2101.3001.4334"}"></div></code><ul class="pre-numbering" style=""><li style="color: rgb(153, 153, 153);">1</li><li style="color: rgb(153, 153, 153);">2</li><li style="color: rgb(153, 153, 153);">3</li><li style="color: rgb(153, 153, 153);">4</li><li style="color: rgb(153, 153, 153);">5</li></ul></pre> splice()函数用来数组中的元素，函数中填入2个参数。参数1：表示从哪个索引位置删除，参数2：表示删除元素的个数 如下代码表示：从索引2的位置开始删，删除2个元素 <pre data-index="4" class="set-code-show prettyprint"><code class="prism language-javascript has-numbering" onclick="mdcp.signin(event)" style="position: unset;"><script> var arr = [1,2,3,4]; //splice: 删除元素 arr.splice(2,2); </script> <div class="hljs-button signin active" data-title="登录复制" data-report-click="{"spm":"1001.2101.3001.4334"}"></div></code><ul class="pre-numbering" style=""><li style="color: rgb(153, 153, 153);">1</li><li style="color: rgb(153, 153, 153);">2</li><li style="color: rgb(153, 153, 153);">3</li><li style="color: rgb(153, 153, 153);">4</li><li style="color: rgb(153, 153, 153);">5</li></ul></pre> <h3><a name="t24"></a><a id="String_334"></a>String对象</h3> <blockquote> String对象的创建方式有2种： var 变量名 = new String(“…”) ; //方式一 var 变量名 = “…” ; //方式二 </blockquote> <div class="table-box"><table><thead><tr><th>属性</th><th>描述</th></tr></thead><tbody><tr><td>length</td><td>字符串的长度。</td></tr></tbody></table></div> <div class="table-box"><table><thead><tr><th>方法</th><th>描述</th></tr></thead><tbody><tr><td>charAt()</td><td>返回在指定位置的字符。</td></tr><tr><td>indexOf()</td><td>检索字符串。</td></tr><tr><td>trim()</td><td>去除字符串两边的空格</td></tr><tr><td>substring()</td><td>提取字符串中两个指定的索引号之间的字符。</td></tr></tbody></table></div> <pre data-index="5" class="set-code-hide prettyprint"><code class="prism language-javascript has-numbering" onclick="mdcp.signin(event)" style="position: unset;"><!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>JS-对象-String</title> </head> <body> </body> <script> //创建字符串对象 //var str = new String("Hello String"); var str = " Hello String "; console.log(str); //length console.log(str.length); //charAt console.log(str.charAt(4)); //indexOf console.log(str.indexOf("lo")); //trim var s = str.trim(); console.log(s.length); //substring(start,end) --- 开始索引, 结束索引 (含头不含尾) console.log(s.substring(0,5)); </script> </html> <div class="hljs-button signin active" data-title="登录复制" data-report-click="{"spm":"1001.2101.3001.4334"}"></div></code><div class="hide-preCode-box"><img class="look-more-preCode contentImg-no-view" src="https://1000bd.com/contentImg/2022/06/27/191644837.png" alt="" title=""></div><ul class="pre-numbering" style=""><li style="color: rgb(153, 153, 153);">1</li><li style="color: rgb(153, 153, 153);">2</li><li style="color: rgb(153, 153, 153);">3</li><li style="color: rgb(153, 153, 153);">4</li><li style="color: rgb(153, 153, 153);">5</li><li style="color: rgb(153, 153, 153);">6</li><li style="color: rgb(153, 153, 153);">7</li><li style="color: rgb(153, 153, 153);">8</li><li style="color: rgb(153, 153, 153);">9</li><li style="color: rgb(153, 153, 153);">10</li><li style="color: rgb(153, 153, 153);">11</li><li style="color: rgb(153, 153, 153);">12</li><li style="color: rgb(153, 153, 153);">13</li><li style="color: rgb(153, 153, 153);">14</li><li style="color: rgb(153, 153, 153);">15</li><li style="color: rgb(153, 153, 153);">16</li><li style="color: rgb(153, 153, 153);">17</li><li style="color: rgb(153, 153, 153);">18</li><li style="color: rgb(153, 153, 153);">19</li><li style="color: rgb(153, 153, 153);">20</li><li style="color: rgb(153, 153, 153);">21</li><li style="color: rgb(153, 153, 153);">22</li><li style="color: rgb(153, 153, 153);">23</li><li style="color: rgb(153, 153, 153);">24</li><li style="color: rgb(153, 153, 153);">25</li><li style="color: rgb(153, 153, 153);">26</li><li style="color: rgb(153, 153, 153);">27</li><li style="color: rgb(153, 153, 153);">28</li><li style="color: rgb(153, 153, 153);">29</li><li style="color: rgb(153, 153, 153);">30</li><li style="color: rgb(153, 153, 153);">31</li><li style="color: rgb(153, 153, 153);">32</li><li style="color: rgb(153, 153, 153);">33</li><li style="color: rgb(153, 153, 153);">34</li><li style="color: rgb(153, 153, 153);">35</li><li style="color: rgb(153, 153, 153);">36</li></ul></pre> <h3><a name="t25"></a><a id="JSON_394"></a>JSON对象</h3> 在 JavaScript 中自定义对象特别简单，其语法格式如下： <pre data-index="6" class="set-code-show prettyprint"><code class="prism language-javascript has-numbering" onclick="mdcp.signin(event)" style="position: unset;">var 对象名 = { 属性名1: 属性值1, 属性名2: 属性值2, 属性名3: 属性值3, 函数名称: function(形参列表){} }; // 通过如下语法调用属性： 对象名.属性名对象名.函数名() <div class="hljs-button signin active" data-title="登录复制" data-report-click="{"spm":"1001.2101.3001.4334"}"></div></code><ul class="pre-numbering" style=""><li style="color: rgb(153, 153, 153);">1</li><li style="color: rgb(153, 153, 153);">2</li><li style="color: rgb(153, 153, 153);">3</li><li style="color: rgb(153, 153, 153);">4</li><li style="color: rgb(153, 153, 153);">5</li><li style="color: rgb(153, 153, 153);">6</li><li style="color: rgb(153, 153, 153);">7</li><li style="color: rgb(153, 153, 153);">8</li><li style="color: rgb(153, 153, 153);">9</li><li style="color: rgb(153, 153, 153);">10</li></ul></pre> <pre data-index="7" class="set-code-show prettyprint"><code class="prism language-javascript has-numbering" onclick="mdcp.signin(event)" style="position: unset;">var user = { name: "Tom", age: 10, gender: "male", eat: function(){ console.log("用膳~"); } // 函数定义的语法可以简化 eat(){ console.log("用膳~"); } } <div class="hljs-button signin active" data-title="登录复制" data-report-click="{"spm":"1001.2101.3001.4334"}"></div></code><ul class="pre-numbering" style=""><li style="color: rgb(153, 153, 153);">1</li><li style="color: rgb(153, 153, 153);">2</li><li style="color: rgb(153, 153, 153);">3</li><li style="color: rgb(153, 153, 153);">4</li><li style="color: rgb(153, 153, 153);">5</li><li style="color: rgb(153, 153, 153);">6</li><li style="color: rgb(153, 153, 153);">7</li><li style="color: rgb(153, 153, 153);">8</li><li style="color: rgb(153, 153, 153);">9</li><li style="color: rgb(153, 153, 153);">10</li><li style="color: rgb(153, 153, 153);">11</li><li style="color: rgb(153, 153, 153);">12</li><li style="color: rgb(153, 153, 153);">13</li><li style="color: rgb(153, 153, 153);">14</li></ul></pre> JSON对象：JavaScript Object Notation，JavaScript对象标记法。是通过JavaScript标 记法书写的文本。其格式如下： <pre data-index="8" class="set-code-show prettyprint"><code class="prism language-javascript has-numbering" onclick="mdcp.signin(event)" style="position: unset;">{ "key":value, "key":value, "key":value } <div class="hljs-button signin active" data-title="登录复制" data-report-click="{"spm":"1001.2101.3001.4334"}"></div></code><ul class="pre-numbering" style=""><li style="color: rgb(153, 153, 153);">1</li><li style="color: rgb(153, 153, 153);">2</li><li style="color: rgb(153, 153, 153);">3</li><li style="color: rgb(153, 153, 153);">4</li><li style="color: rgb(153, 153, 153);">5</li></ul></pre> 其中，key必须使用引号并且是双引号标记，value可以是任意数据类型。 <pre data-index="9" class="set-code-show prettyprint"><code class="prism language-javascript has-numbering" onclick="mdcp.signin(event)" style="position: unset;">var jsonstr = '{"name":"Tom", "age":18, "addr":["北京","上海","西安"]}'; // 将json字符串转换为json对象 var obj = JSON.parse(jsonstr); // 将json对象转换成json字符串 JSON.stringify(obj) <div class="hljs-button signin active" data-title="登录复制" data-report-click="{"spm":"1001.2101.3001.4334"}"></div></code><ul class="pre-numbering" style=""><li style="color: rgb(153, 153, 153);">1</li><li style="color: rgb(153, 153, 153);">2</li><li style="color: rgb(153, 153, 153);">3</li><li style="color: rgb(153, 153, 153);">4</li><li style="color: rgb(153, 153, 153);">5</li><li style="color: rgb(153, 153, 153);">6</li><li style="color: rgb(153, 153, 153);">7</li></ul></pre> </div> </div> </li> <li class="list-group-item ul-li"> 相关阅读: <a href="/Article/Index/776423">如何设置跨域隔离启用 SharedArrayBuffer</a> <a href="/Article/Index/1496656">Adobe将类ChatGPT集成到PDF中</a> <a href="/Article/Index/1430093">version GLIBC 2.14 not found问题处理</a> <a href="/Article/Index/1306021">NotePad++ 在行前/行后添加特殊字符内容方法</a> <a href="/Article/Index/1318983">OpenCV项目开发实战--主成分分析（PCA）的特征脸应用(附C++/Python实现源码)</a> <a href="/Article/Index/1410286">React 轮播图</a> <a href="/Article/Index/722885">【开发教程5】开源蓝牙心率防水运动手环-电池电量检测</a> <a href="/Article/Index/1509627">ubuntu20.04“E: 软件包 vim 没有可安装候选”“/etc/apt/sources.list:7 中被配置了多次”解决方法</a> <a href="/Article/Index/1661918">cleanmymacX 4.74破解版安装 cleanmymac中文汉化补丁百度云免费下载 cleanmymac激活码</a> <a href="/Article/Index/1359176">面试准备-软件工程</a> </li> <li class="list-group-item from-a mb-2"> 原文地址：https://blog.csdn.net/qq_50086023/article/details/132438372 </li> </ul> </div> <div class="col-lg-4 col-sm-12"> <ul class="list-group" style="word-break:break-all;"> <li class="list-group-item ul-li-bg" aria-current="true"> 最新文章 </li> <li class="list-group-item ul-li"> <a href="/Article/Index/1484446">攻防演习之三天拿下官网站群</a> <a href="/Article/Index/1515268">数据安全治理学习——前期安全规划和安全管理体系建设</a> <a href="/Article/Index/1759065">企业安全 | 企业内一次钓鱼演练准备过程</a> <a href="/Article/Index/1485036">内网渗透测试 | Kerberos协议及其部分攻击手法</a> <a href="/Article/Index/1877332">0day的产生 | 不懂代码的"代码审计"</a> <a href="/Article/Index/1887576">安装scrcpy-client模块av模块异常，环境问题解决方案</a> <a href="/Article/Index/1887578">leetcode hot100【LeetCode 279. 完全平方数】java实现</a> <a href="/Article/Index/1887512">OpenWrt下安装Mosquitto</a> <a href="/Article/Index/1887520">AnatoMask论文汇总</a> <a href="/Article/Index/1887496">【AI日记】24.11.01 LangChain、openai api和github copilot</a> </li> </ul> <ul class="list-group pt-2" style="word-break:break-all;"> <li class="list-group-item ul-li-bg" aria-current="true"> 热门文章 </li> <li class="list-group-item ul-li"> <a href="/Article/Index/888177">十款代码表白小特效一个比一个浪漫赶紧收藏起来吧！！！</a> <a href="/Article/Index/797680">奉劝各位学弟学妹们，该打造你的技术影响力了！</a> <a href="/Article/Index/888183">五年了，我在 CSDN 的两个一百万。</a> <a href="/Article/Index/888179">Java俄罗斯方块，老程序员花了一个周末，连接中学年代！</a> <a href="/Article/Index/797730">面试官都震惊，你这网络基础可以啊！</a> <a href="/Article/Index/797725">你真的会用百度吗？我不信 — 那些不为人知的搜索引擎语法</a> <a href="/Article/Index/797702">心情不好的时候，用 Python 画棵樱花树送给自己吧</a> <a href="/Article/Index/797709">通宵一晚做出来的一款类似CS的第一人称射击游戏Demo！原来做游戏也不是很难，连憨憨学妹都学会了！</a> <a href="/Article/Index/797716">13 万字 C 语言从入门到精通保姆级教程2021 年版</a> <a href="/Article/Index/888192">10行代码集2000张美女图，Python爬虫120例，再上征途</a> </li> </ul> </div> </div> </div>     <nav class="navbar navbar-inverse navbar-fixed-bottom"> <div class="container"> <div class="row"> <div class="col-md-12"> <div class="text-muted center foot-height"> Copyright © 2022 侵权请联系<a href="mailto:2656653265@qq.com">2656653265@qq.com</a>    <a href="https://beian.miit.gov.cn/" target="_blank">京ICP备2022015340号-1</a> </div> <div style="width:300px;margin:0 auto; padding:0px 5px;"> <a href="/regex.html">正则表达式工具</a> <a href="/cron.html">cron表达式工具</a> <a href="/pwdcreator.html">密码生成工具</a> </div> <div style="width:300px;margin:0 auto; padding:5px 0;"> <a target="_blank" href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=11010502049817" style="display:inline-block;text-decoration:none;height:20px;line-height:20px;"> <img src="" style="float:left;" />京公网安备 11010502049817号</a> </div> </div> </div> </div> </nav>   <script src="/js/plugins/jquery/jquery.js">$

基础

JavaScript书写位置