首页 › JavaScript论坛 › JavaScript入门①-基础知识筑基

上宫庄 發表於 2022-11-30 11:23:00

JavaScript入门①-基础知识筑基

<p><img src="https://img2022.cnblogs.com/blog/151257/202211/151257-20221114153633781-1367402176.png" alt="image.png" loading="lazy"></p>
<p><strong>JavaScript入门系列目录</strong></p>
<ul>
<li>JavaScript入门①-基础知识筑基</li>
<li>JavaScript入门②-函数(1)基础{浅出}</li>
<li>JavaScript入门③-函数(2)原理{深入}执行上下文</li>
<li>JavaScript入门④-万物皆对象:Object</li>
<li>JavaScript入门⑤-欲罢不能的对象、原型与继承</li>
<li>JavaScript入门⑥-WEB浏览器API</li>
<li>JavaScript入门⑦-DOM操作大全</li>
<li>JavaScript入门⑧-事件总结大全</li>
<li>JavaScript入门⑨-异步编程●异世界之旅</li>
<li>JavaScript入门⑩-ES6归纳总结</li>
</ul>
<h1 id="01javascript基础知识">01、JavaScript基础知识</h1>
<p>JavaScript（缩写：JS）是一种具有面向对象能力的、解释型的程序语言，基于对象和事件驱动，具有相对安全性的客户端脚本语言。JavaScript是一门完备的 动态编程语言，当应用于 HTML 文档时，可为网站提供动态交互特性，是前端开发最主要、正式的编程语言。</p>
<p><img src="https://img2022.cnblogs.com/blog/151257/202211/151257-20221114153733977-1743230230.png" alt="image" loading="lazy"></p>
<p>ECMAScript 是由 <strong>ECMA 国际标准化组织</strong> 制定的一套脚本语言的标准化规范，JavaScript算是他的实现，作为基础语法规范，构成了JavaScript的核心。再加收浏览器提供的DOM（HTML网页内容）操作API、浏览器BOM操作API，共同组成了 JavaScript。</p>
<h2 id="11语法规范">1.1、语法规范</h2>
<p>JS代码以行为单位，（半角）分号<code>;</code>结尾。</p>
<p><strong>🔸注释</strong>：<strong>//</strong></p>
<ul>
<li><strong>单行注释</strong>：<code>//</code>开头。</li>
<li><strong>多行注释</strong>：<code>/*</code>多行注释 <code>*/</code>（同css）</li>
</ul>
<p><strong>🔸代码风格</strong>：</p>
<ul>
<li><strong>区分大小写</strong>，字母、数字、下划线组成，不能数字开头，不能是关键字。</li>
<li><strong>小驼峰命名</strong>（推荐）：<code>initialColor</code></li>
</ul>
<p><strong>🔸关键字</strong>： 内置的关键词：如var、do、else、enum、eval、false、for、if、void、function、switch...</p>
<p><strong>🔸语句块</strong>：花括号 { 代码块 }</p>
<h2 id="12引用方式">1.2、引用方式</h2>
<ul>
<li><strong>行内JS</strong>：元素标签内部的JS代码。</li>
<li><strong>内部JS</strong>：定义在<code>&lt;script&gt;</code>标签里的JS代码，可以放到head中、body中、body后，推荐body后，先加载html再执行JS。</li>
<li><strong>外部JS</strong>（推荐）：单独的JS文件，通过script标签引入，<code>src</code>属性指定JS文件地址，此时标签中写的代码就无效了。</li>
<li><strong>动态加载</strong>：通过DOM的API动态加载JS脚本资源，用JS创建<code>&lt;script&gt;</code>标签并引入资源。</li>
</ul>
<table>
<thead>
<tr>
<th><code>&lt;script&gt;</code><strong>属性</strong></th>
<th><strong>描述</strong></th>
<th><strong>值/备注</strong></th>
</tr>
</thead>
<tbody>
<tr>
<td><strong>src</strong></td>
<td>外部资源地址，与嵌入脚本代码不可同时使用</td>
<td><code>&lt;script src="js1.js" async&gt;&lt;/script&gt;</code></td>
</tr>
<tr>
<td>type</td>
<td>定义脚本语言类型，<strong>可空</strong>，默认为JavaScript类型</td>
<td>支持的MIME类型包括<strong>text/javascript</strong>、 text/ecmascript、 application/javascript 和application/ecmascript</td>
</tr>
<tr>
<td><strong>async</strong></td>
<td><strong>异步并行</strong>加载，只针对外部JS资源</td>
<td>多个<code>async</code>脚本加载完成的顺序不确定</td>
</tr>
<tr>
<td><strong>defer</strong></td>
<td>等HTML解析完成再执行JS，在DOMContentLoaded之前执行，只针对外部JS资源</td>
<td>多个脚本资源顺序加载</td>
</tr>
</tbody>
</table>
<p><strong>🔸脚本加载策略</strong>：</p>
<ul>
<li>如果脚本无需等待页面解析，且无依赖独立运行，那么应使用 <code>async</code>。</li>
<li>如果脚本需要等待页面解析，且依赖于其它脚本，应使用 <code>defer</code>，将关联的脚本按所需顺序置于 HTML 中。</li>
</ul>
<pre><code class="language-html">&lt;body&gt;
    &lt;div&gt;
      &lt;h1&gt;基础语法&lt;/h1&gt;
      &lt;input type="button" value="行内JS" onclick="alert('Hello world!');"/&gt;
      &lt;input type="button" value="外部JS调用" onclick="hello();"/&gt;
    &lt;/div&gt;&lt;hr/&gt;
&lt;/body&gt;
&lt;script&gt;
    console.log("内部js：网页加载完成！");
&lt;/script&gt;
&lt;!-- 引入外部js文件，设置了src属性，script内部的代码就无效了 --&gt;
&lt;script src="../tstudy/js/js1.js" type="text/javascript" async&gt;&lt;/script&gt;
</code></pre>
<hr>
<h1 id="02变量申明varletconst">02、变量申明var/let/const</h1>
<p><strong>变量</strong>，就是一个用于存放数值的容器，比如<code>年龄=20</code>，“年龄”就是变量，“20”是他的树值。JS是一种弱类型语言，不需要指明数据类型，用<code>var</code>或 <code>let</code>关键字申明即可。</p>
<p><strong>🔸申明方式</strong>：</p>
<ul>
<li>申明并赋值，1步完成：<code>var str="hello world";</code></li>
<li>先申明，再赋值，2步完成。<code>var str1;   str1="hello world";</code> // 默认值为undefined</li>
</ul>
<p><strong>🔸动态数据类型</strong>：JavaScript 是一种“动态类型语言”，意味着一个变量可以被赋值为各种类型数据值，通过<code>typeof</code>判断数据类型。</p>
<pre><code class="language-javascript">let age;
console.log(age); //undefined
age =20;
console.log(typeof age); //number
age='年芳二十';
console.log(typeof age); //string
</code></pre>
<table>
<thead>
<tr>
<th></th>
<th><strong>var</strong></th>
<th><strong>let</strong> (IE11 ES6)</th>
<th><strong>const</strong> (IE11 ES6)</th>
</tr>
</thead>
<tbody>
<tr>
<td><strong>说明</strong></td>
<td>变量申明</td>
<td>变量申明</td>
<td><strong>只读常量</strong>申明：申明时必须初始化值，不可更改</td>
</tr>
<tr>
<td><strong>作用域</strong></td>
<td>全局（整个文档）或整个<strong>函数体</strong>内</td>
<td><strong>块级</strong>作用域<code>{}</code>包含的区域</td>
<td><strong>块级</strong>作用域<code>{}</code></td>
</tr>
<tr>
<td><strong>命名规范</strong></td>
<td>推荐：小驼峰命名</td>
<td>同var</td>
<td>推荐：全大写+下划线，<code>const MAX_SPEED</code></td>
</tr>
<tr>
<td><strong>默认值</strong></td>
<td><code>undefined</code></td>
<td><code>undefined</code></td>
<td>必须赋值</td>
</tr>
<tr>
<td><strong>变量提升</strong></td>
<td><strong>提升</strong>所有var申明的变量，可以先使用后申明（不推荐），把var变量申明提升到代码头部，⚠️<strong>注意</strong>不包括赋值</td>
<td><strong>不会提升，顺序执行</strong>：必须先申明，后使用。存在<code>暂时性死区</code><br><code>let foo=(foo+55)</code>第二个foo未申明报错</td>
<td><strong>不会提升，顺序执行</strong>：必须先申明，后使用。</td>
</tr>
<tr>
<td><strong>全局属性</strong></td>
<td>在全局环境时，会成为顶级对象的属性（不可配置属性），作为全局变量存在。<br><code>var age=3; //this.age;window.age</code></td>
<td>无</td>
<td>无</td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td><strong>重复申明</strong></td>
<td><strong>可以重复</strong>申明，覆盖前面的，有点太随意了</td>
<td><strong>不可重复申明</strong>，作用域内重复申明会报错<br>● 包括var、const申明的变量<br>● 子块可重新申明let，不同的作用域了<br>● 子块中用var变量会重复，var会提升<br></td>
<td><strong>不可重复申明</strong>，会提示错误，同<code>let</code></td>
</tr>
<tr>
<td><strong>申明多个</strong></td>
<td>支持：<code>var s1=1,st=2;</code></td>
<td>支持：<code>let s1,s2=2;</code></td>
<td>支持：<code>const s1=1,s2=2;</code></td>
</tr>
<tr>
<td><strong>性能</strong></td>
<td>一般</td>
<td>一般</td>
<td>编译器会做常量替换优化，提升代码效率</td>
</tr>
<tr>
<td><strong>总结</strong></td>
<td>🚫有点粗犷，不推荐</td>
<td>💛更严谨，推荐使用</td>
<td>💚不仅更严谨，性能还好，优先推荐！！！</td>
</tr>
</tbody>
</table>
<blockquote>
<p><strong>暂时性死区</strong>：由于没有了变量提升，及块级作用域，let、const变量只能在申明后才能用，在这之前不可用，称为“暂时性死区”。</p>
</blockquote>
<h2 id="21作用域">2.1、作用域</h2>
<p>特别注意的是 <code>var</code> 作用域在整个文档或函数内，整个文档也可认为是一个特殊的顶级函数。</p>
<ul>
<li>如下经典的for循环示例，<code>var</code>的变量提升导致输出结果诡异。</li>
</ul>
<pre><code class="language-javascript">for (var i = 1; i &lt;= 5; i++) {
    setTimeout(function () {//setTimeout为异步执行函数
      console.log(i);        //输出6 6 6 6 6
    }, 0);
}
//换成let，则输出：1 2 3 4 5
//换成const，输出1，然后报错 Assignment to constant variable
</code></pre>
<ul>
<li>var作用域在整个函数</li>
</ul>
<pre><code class="language-javascript">function foo() {
    var x = 1; //x作用域在foo函数体内，包括嵌套函数bar也可以访问
    function bar() {
      var y = 2;        //y作用域只在函数体bar
      console.log(x); // 1
      console.log(y); // 2
    }
    bar();
    console.log(x); // 1 (`x` 在作用域内)
    console.log(y); // Uncaught ReferenceError: y is not defined
}
foo();
console.log(x); // Uncaught ReferenceError: x is not defined
console.log(y);    // Uncaught ReferenceError: y is not defined
</code></pre>
<ul>
<li>let作用域仅限<code>{}</code>块，可以是函数的块<code>function{}</code>、循环的块<code>for{}</code>，或者就一个孤独的块<code>{}</code>。</li>
</ul>
<pre><code class="language-javascript">let s1;
let s1;//Uncaught SyntaxError: Identifier 's1' has already been declared
let x = 1; //后面块内的 var x会被变量提升，导致重复变量定义报错
{       
    var x = 2; //Uncaught SyntaxError: Identifier 'x' has already been declared
}
</code></pre>
<h2 id="22变量提升">2.2、变量提升</h2>
<p><strong>变量提升</strong>：JS引擎是先解析代码，获取所有被<code>var</code>申明的变量，然后再逐行执行。只提升用<code>var</code>显示申明的变量，会把所有var的申明提升到全局代码的顶部先执行，⚠️<strong>注意</strong>只提升申明，不包括赋值。</p>
<pre><code class="language-javascript">console.log(sname);//undefined只提升了x的变量申明，值为默认值
var sname = "sam";
var x=1;
function print() {
    console.log(sname);// sam
    console.log(window.sname);//sam 全局文档中申明的var变量，会作为 window 的全局变量属性
    console.log(this.sname);//sam 这里的this 指向 全局对象window
}
print();
</code></pre>
<blockquote>
<p><strong>🔸隐式全局变量</strong>：无申明变量(<code>str="hello";</code>)，自动提升为隐式全局变量（不论在什么地方），类似var变量，除了没有变量提升。so，🚫尽量不要这么使用，在严格模式下（<code>'use strict';</code>）这样写是会报错的。</p>
</blockquote>
<pre><code class="language-javascript">x = 0;//未申明变量，成为隐式全局变量
function f() {
    y = 1;//当执行该函数时，未申明变量，成为隐式全局变量
    var z = 2;//z是函数内部申明的变量，作用域只在函数体内
}
f();
console.log(x, y); // 0 1
console.log(window.x, window.y); // 0 1
console.log(z);//Uncaught ReferenceError: z is not defined
</code></pre>
<h2 id="23解构赋值">2.3、解构赋值</h2>
<p><strong>解构赋值</strong>是ES6新增的语法，可以一次性给多个变量赋值，提高了编程效率，赋值操作更简洁。具体方式就是：<strong>将属性/值从对象/数组中取出，赋值给其他变量的一种赋值方式</strong>。有两种解构赋值的语法形式：</p>
<ul>
<li><strong>数组解构</strong>：类似数组的写法，从数组中按顺序赋值，这里数组可以是其他<strong>可迭代</strong>数据。</li>
<li><strong>对象解构</strong>：类似对象的写法，从对象中按属性名赋值。</li>
</ul>
<pre><code class="language-javascript">//变量一个个赋值
let x1 = 1, x2 = 2, x3 = 3, x4 = 4;
// 用数组解构赋值
let = ;

= ;        //用来交换x1、x2的值，不用第三方变量
// 从对象解构赋值
let { c, d } = { a: 0, c: 1, d: 2 };
</code></pre>
<hr>
<h1 id="03基础数据类型">03、基础数据类型</h1>
<p>ECMAScript 有 6 种<strong>基本类型</strong>，<code>Undefined</code>、<code>Null</code>、<code>Boolean</code>、<code>Number</code>、<code>String</code>、<code>Symbol</code>（符号），其他就是都是<strong>Object</strong>对象类型了，如<code>Array</code>、<code>object</code>、<code>Map</code>、<code>Date</code>、<code>function</code>等。</p>
<table>
<thead>
<tr>
<th><strong>数据类型</strong></th>
<th><strong>描述</strong></th>
<th><br></th>
</tr>
</thead>
<tbody>
<tr>
<td><strong>Number</strong></td>
<td><strong>数值</strong>：整数、小数（浮点型）<br>● 都是64位浮点类型存储的，最高精度17位，所以1和1.0是相等的。<br>● 浮点数计算时（小数位）可能不准确，不建议用浮点数做判断。<br>● 存储时会自动转换整数的浮点数值，如1.0转换为1。<br></td>
<td><code>let myAge = 17;</code></td>
</tr>
<tr>
<td><strong>Boolean</strong></td>
<td><strong>布尔类型</strong>：有两个值<code>true</code>、<code>false</code></td>
<td><code>let isFirstBlood=true;</code></td>
</tr>
<tr>
<td><strong>null</strong></td>
<td><strong>空值</strong>关键字，表示空缺、空值，其类型为<strong>object</strong>，表示一个空对象的指针。<code>undefined</code>继承自<code>null</code>，等值比较时返回true。</td>
<td>注意判断object类型时须排除null。</td>
</tr>
<tr>
<td><strong>Undefined</strong></td>
<td><strong>未定义</strong>：只有一个值<code>undefined</code>，表示未定义或不存在<br>● 未赋值的变量默认为<code>undefined</code>。<br>● 调用函数时未传递必须参数，则为<code>undefined</code>。<br>● 函数没有返回值，默认返回<code>undefined</code>。<br></td>
<td></td>
</tr>
<tr>
<td><strong>String</strong></td>
<td><strong>字符串</strong>：单引号、双引号括起来，用加号<code>+</code>连接字符串。<br>● <strong>不可变</strong>：JS的字符串一旦创建不可变，所有更改都会创建新的字符串<br>● 每一个字符元素是16 位的无符号整数值<br></td>
<td><br></td>
</tr>
<tr>
<td>Symbol ES6</td>
<td>符号类型，具有<strong>唯一性</strong>和<strong>不变性</strong>，常用于对象属性名</td>
<td><code>const fooSym = Symbol('foo')</code></td>
</tr>
<tr>
<td>bigint</td>
<td>新添加的数据类型(ES2020)</td>
<td></td>
</tr>
<tr>
<td><strong>object对象</strong></td>
<td><strong>对象</strong>：引用类型，各种值的组合</td>
<td></td>
</tr>
<tr>
<td> Array</td>
<td>数组对象</td>
<td><code>var list1=;</code></td>
</tr>
<tr>
<td> JSON对象</td>
<td>对象：<code>var jobj={name:"zhang",age:1};</code></td>
<td></td>
</tr>
<tr>
<td> function</td>
<td>函数，本身也是对象</td>
<td><code>function f1(){/*...*/}</code></td>
</tr>
</tbody>
</table>
<blockquote>
<p><strong>⚠️注意</strong>不要将基本类型中的布尔值 true / false 与值为 true/false 的 Boolean 对象弄混了，基本类型Boolean是一个对象。</p>
</blockquote>
<pre><code class="language-javascript">console.log(typeof 1); //number
console.log(typeof true); //boolean
console.log(typeof null); //object
console.log(typeof undefined); //undefined
console.log(typeof 'abc'); //string
console.log(null == undefined); //true 值比较
console.log(null === undefined); //false恒等比较
//boolean
const x = new Boolean(false);//new Boolean()创建了基本类型Boolean的对象，就不是一个平平无奇的值类型了。
console.log(typeof x);//object
console.log(x.valueOf()); //false valueOf()方法获取对象的基本数据的值
console.log(Boolean(undefined));   //false
console.log(Boolean(null));   //false
console.log(Boolean(NaN));   //false
console.log(Boolean(0));   //false
console.log(Boolean(""));   //false
console.log(Boolean(1));   //true
console.log(Boolean(-100));   //true
console.log(Boolean("abc"));   //true
</code></pre>
<h2 id="31number数字">3.1、Number数字</h2>
<p><strong>Number</strong>的属性、方法：</p>
<table>
<thead>
<tr>
<th><strong>属性/方法</strong></th>
<th><strong>描述</strong></th>
<th><strong>示例</strong></th>
</tr>
</thead>
<tbody>
<tr>
<td><strong>🔖静态属性/方法</strong></td>
<td></td>
<td></td>
</tr>
<tr>
<td>Number.<strong>NaN</strong></td>
<td>NaN是一个特殊的Number值，即非数值（Not a Number）<br>● <strong>NaN</strong>和任何值都不相等，包括它自己，和任何值计算都为NaN<br>● <code>Math</code>、<code>parseInt</code>函数执行失败会返回NaN<br></td>
<td>同<code>window.NaN</code></td>
</tr>
<tr>
<td>Number.MAX_VALUE</td>
<td>最大数值（静态属性），值接近于 1.79E+308</td>
<td></td>
</tr>
<tr>
<td>Number.MIN_VALUE</td>
<td>最接近 0 的正值，而不是最小的负值，约为 5E-324</td>
<td></td>
</tr>
<tr>
<td>Number<strong>.</strong>isNaN() IE🚫</td>
<td>判断是否等于NaN，<code>window.isNaN</code>是判断是否非数值，坑！</td>
<td>只有NaN才返回true</td>
</tr>
<tr>
<td>Number.<strong>isInteger</strong>() IE🚫</td>
<td>是否为整数</td>
<td></td>
</tr>
<tr>
<td>Number.<strong>parseFloat</strong>() IE🚫</td>
<td>解析<strong>浮点数</strong>，从第一个非空字符解析获取数字，识别第一个小数点</td>
<td>同<code>window.parseFloat()</code></td>
</tr>
<tr>
<td>Number.<strong>parseInt</strong>() IE🚫</td>
<td>解析<strong>整数</strong>，从第一个非空字符解析获取数字，支持进制参数</td>
<td>同<code>window.parseInt()</code></td>
</tr>
<tr>
<td><strong>🔖构造函数</strong></td>
<td></td>
<td></td>
</tr>
<tr>
<td><strong>Number()</strong></td>
<td><strong>转换为数字</strong>（忽略空格）。Number()转换数据不同于parseint、parseFloat，要求必须为合法数字，要求更严格，不成功便成仁。</td>
<td><code>Number(true) //1</code></td>
</tr>
<tr>
<td><strong>🔖实例属性/方法</strong></td>
<td></td>
<td></td>
</tr>
<tr>
<td><strong>toFixed</strong>(小数位数)</td>
<td>转换为指定小数位数的字符，多了会四舍五入，不足用0补位</td>
<td><code>n1.toFixed(2)</code></td>
</tr>
<tr>
<td><strong>toString</strong>()</td>
<td>转字符串，参数可以指定基数（进制）</td>
<td><code>n2.toString(2)</code> //2进制</td>
</tr>
</tbody>
</table>
<blockquote>
<p><strong>📢注意浮点数的精度</strong>：<code>0.1+0.2//输出 0.30000000000000004</code> 。由于浮点数的精度问题，永远不要用浮点数值去做条件判断。这种错误是由于IEEE 754标准导致的。</p>
</blockquote>
<pre><code class="language-javascript">Number.parseFloat("123.4a5"); //123.4
Number.parseInt("123.4a5"); //123
//注意，两个方法是不同的，全局的window.isNaN()是判断是否非数值。
window.isNaN("a") //true
Number.isNaN("a") //false//这属于JS坑爹的设计，两个含义完全不同

console.log(Number(""));      //0
console.log(Number("123abc"));   //NaN，不同于parseint、parseFloat
console.log(Number("12.12.12"));   //NaN，不同于parseint、parseFloat
console.log(Number.parseFloat("12.12.12"));   //12.12

let n1=1.336,n2=100;
n1.toFixed(2)        //1.34
n2.toFixed(2)        //100.00
</code></pre>
<p>window.<strong>parseFloat</strong>(string)：从字符串的第一位（空字符会被忽略）开始，如果是数字（正号<code>+</code>、负号<code>-</code>、数字<code>0-9</code>、第一个小数点<code>.</code>、科学计数法<code>e/E</code>）则转数字，直到非数字或结束。</p>
<pre><code class="language-html">console.log(parseFloat("123abc"));    //123
console.log(parseFloat("abc123"));    //NaN
console.log(parseFloat("11.11"));      //11.11
console.log(parseFloat("11.11.33"));   //11.11
</code></pre>
<p>window.<strong>parseint</strong>(string)：同parseFloat，除了不识别小数点。</p>
<pre><code class="language-html">console.log(parseInt("123abc"));    //123
console.log(parseInt("abc123"));    //NaN
console.log(parseInt("11.11"));      //11
</code></pre>
<h2 id="32string字符串">3.2、String字符串</h2>
<p>String：字符串对象，提供各种字符串操作。</p>
<table>
<thead>
<tr>
<th><strong>属性/方法</strong></th>
<th><strong>描述</strong></th>
<th><strong>示例</strong></th>
</tr>
</thead>
<tbody>
<tr>
<td><strong>🔖构造函数</strong></td>
<td></td>
<td></td>
</tr>
<tr>
<td><strong>String()</strong></td>
<td>支持任意值转换为字符串，包括<code>null</code>、<code>undefined</code>，都是直接加引号，很粗暴！📢可以用来判断null、undefined</td>
<td><code>String(null) //"null"</code></td>
</tr>
<tr>
<td><strong>🔖实例属性/方法</strong></td>
<td></td>
<td></td>
</tr>
<tr>
<td><strong>length</strong></td>
<td>字符串长度</td>
<td><code>"abc".length; // 3</code></td>
</tr>
<tr>
<td><strong>charAt</strong>(index)</td>
<td>返回指定位置的字符</td>
<td></td>
</tr>
<tr>
<td><strong>indexOf</strong>(char)</td>
<td>返回字符的索引位置，从前往后找，<code>lastIndexOf</code>是从后往前找</td>
<td><code>s1.indexOf("12")</code></td>
</tr>
<tr>
<td><strong>substr</strong>(start,length?)</td>
<td>截取字符串：指定<strong>起始位置</strong>、<strong>长度</strong>，无<code>length</code>到结尾（下同）</td>
<td><code>s1.substr(2)</code></td>
</tr>
<tr>
<td><strong>substring</strong>(start,end?)</td>
<td>截取字符串：指定<strong>起始位置</strong>、<strong>结束位置</strong></td>
<td></td>
</tr>
<tr>
<td><strong>slice</strong>(start,end?)</td>
<td>截取字符串：<strong>起始位置</strong>、<strong>结束位置</strong>，同<code>substring</code>，区别是<strong>支持负数</strong>（倒数），（slice /slaɪs/ 切片）</td>
<td><code>str.slice(0,-1);//截取0到倒数第二位置的字符</code></td>
</tr>
<tr>
<td><strong>split</strong>(separator,limit?)</td>
<td>按照分隔符分割字符串为数组</td>
<td>（split /splɪt/ 分裂）</td>
</tr>
<tr>
<td><strong>trim</strong>()</td>
<td>移除<strong>首尾</strong>的空白字符，返回新字符，不会改变原有字符。</td>
<td></td>
</tr>
<tr>
<td><strong>trimStart</strong>()</td>
<td>同上，值移除开头的空白字符，还有移除末尾的<code>trimEnd</code>()</td>
<td></td>
</tr>
<tr>
<td><strong>padStart</strong>(len,str)</td>
<td>从头补齐字符长度到<code>len</code>，str为去替补的字符，没有则空格</td>
<td><code>"12".padStart(5,'0')</code></td>
</tr>
<tr>
<td><strong>padEnd</strong>(len,str)</td>
<td>补齐字符长度，从尾部开始</td>
<td></td>
</tr>
<tr>
<td><strong>replace</strong>(old, new)</td>
<td>字符替换，<code>str.replace("台湾","台湾省")</code>，支持正则和函数</td>
<td></td>
</tr>
<tr>
<td><strong>repeat</strong>(n)</td>
<td>创建一个重复n次的新字符串</td>
<td><code>"12".repeat(2) //1212</code></td>
</tr>
<tr>
<td><strong>toLowerCase</strong>()</td>
<td>字符转小写，大写是<code>toUpperCase()</code></td>
<td></td>
</tr>
<tr>
<td><strong>includes</strong>(str)</td>
<td>判断是否包含指定的字符串</td>
<td></td>
</tr>
<tr>
<td><strong>startsWith</strong>(str)</td>
<td>判断是否以指定字符开头，<strong>endsWith</strong>()判断结尾</td>
<td></td>
</tr>
<tr>
<td>search(str)</td>
<td>字符搜索或正则匹配搜索</td>
<td></td>
</tr>
<tr>
<td>match(regexp)</td>
<td>正则匹配搜索字符</td>
<td></td>
</tr>
</tbody>
</table>
<p><strong>🔸字符串的不变性</strong>：字符串一经创建不会改变。 <code>let str="abc"; str="123";</code></p>
<ul>
<li>这里的<strong>不改变</strong>，不是字符变量<code>str</code>不能修改，是指字符串<code>"abc"</code>本身不可更改，修改<code>str</code>会创建新的字符。所以，字符的操作都不会影响原来的字符串值，而是创建新的字符串。</li>
<li><strong>字符连接创建新字符</strong>：字符的连接，如<code>+</code>，会创建新的字符串。</li>
</ul>
<p><strong>🔸模板字符串</strong>(IE🚫)：<code>${var}</code>+反引号 `` 包装</p>
<p>板字符串可以包含特定语法（<code>${expression}</code>）的占位符，由一个内置函数负责计算表达式并输出最终的字符串。</p>
<pre><code class="language-javascript">let x=1,y=2;
console.log(`sum: ${x} + ${y} = ${x+y}`); //sum: 1 + 2 = 3
</code></pre>
<p><strong>🔸JavaScript 特殊/转义字符</strong>：在字符串中使用的特殊符号</p>
<table>
<thead>
<tr>
<th><strong>字符</strong></th>
<th><strong>描述</strong></th>
</tr>
</thead>
<tbody>
<tr>
<td>\0</td>
<td>Null 字节</td>
</tr>
<tr>
<td>\b</td>
<td>退格符</td>
</tr>
<tr>
<td>\f</td>
<td>换页符</td>
</tr>
<tr>
<td>\n</td>
<td>换行符</td>
</tr>
<tr>
<td>\r</td>
<td>回车符</td>
</tr>
<tr>
<td>\t</td>
<td>Tab (制表符)</td>
</tr>
<tr>
<td>\v</td>
<td>垂直制表符</td>
</tr>
<tr>
<td>\'</td>
<td>单引号</td>
</tr>
<tr>
<td>\"</td>
<td>双引号</td>
</tr>
<tr>
<td>\\</td>
<td>反斜杠字符（\）</td>
</tr>
</tbody>
</table>
<h2 id="33类型-隐式-转换">3.3、类型( 隐式 )转换</h2>
<p>隐式类型转转换，是自动进行的，也叫自动类型转换。</p>
<table>
<thead>
<tr>
<th><strong>值</strong></th>
<th><strong>字符串</strong></th>
<th><strong>数字</strong></th>
<th><strong>布尔值</strong></th>
</tr>
</thead>
<tbody>
<tr>
<td>undefined</td>
<td>"undefined"</td>
<td>NaN</td>
<td>false</td>
</tr>
<tr>
<td>null</td>
<td>"null"</td>
<td>0</td>
<td>false</td>
</tr>
<tr>
<td>true</td>
<td>"true"</td>
<td>1</td>
<td><strong>true</strong></td>
</tr>
<tr>
<td>false</td>
<td>"false"</td>
<td>0</td>
<td>false</td>
</tr>
<tr>
<td>""(空字符)</td>
<td>""</td>
<td>0</td>
<td>false</td>
</tr>
<tr>
<td>"1.5"</td>
<td>"1.5"</td>
<td>1.5</td>
<td><strong>true</strong></td>
</tr>
<tr>
<td>"one"</td>
<td>"one"</td>
<td>NaN</td>
<td><strong>true</strong></td>
</tr>
<tr>
<td>0</td>
<td>"0"</td>
<td>0</td>
<td>false</td>
</tr>
<tr>
<td>-1</td>
<td>"-1"</td>
<td>-1</td>
<td><strong>true</strong>（非0数字都true）</td>
</tr>
<tr>
<td>1</td>
<td>"1"</td>
<td>1</td>
<td><strong>true</strong></td>
</tr>
<tr>
<td>NaN</td>
<td>"NaN"</td>
<td>NaN</td>
<td>false</td>
</tr>
<tr>
<td>[]（空数组）</td>
<td><br></td>
<td>0</td>
<td><strong>true</strong></td>
</tr>
<tr>
<td>一个数字</td>
<td><br></td>
<td>里面的数字5</td>
<td><strong>true</strong></td>
</tr>
<tr>
<td>["a"]其他数组</td>
<td></td>
<td>NaN</td>
<td><strong>true</strong></td>
</tr>
<tr>
<td>{...}对象</td>
<td></td>
<td>NaN</td>
<td><strong>true</strong></td>
</tr>
</tbody>
</table>
<blockquote>
<p><strong>📢隐式转换总结</strong>：</p>
</blockquote>
<ul>
<li><strong>转boolean</strong>：undefined、null、NaN、0、空字符转bool都为<strong>false</strong>；非0数字（包括负数）、非空字符（包括”true“、”false“）、对象、空数组[] 转<code>boolean</code>都为<strong>true</strong>。</li>
<li><strong>转数字</strong>：非空字符串都是数字(忽略空格)的转对应数字，否则NaN；null、空字符转数字为0。</li>
<li><strong>转字符串</strong>：任意类型转字符串加引号，包括undefined、null。</li>
<li><strong>+运算</strong>：字符串+任意类型（包括空字符）均转换为<strong>字符串</strong>；boolean、数字转数值进行相加。</li>
<li><strong><code>-</code></strong>、<strong><code>*</code></strong>、<strong><code>/</code></strong>、<strong><code>%</code></strong> 运算：都是隐式转换为数值运算。</li>
<li><strong><code>==、&gt;、&lt;</code> 比较运算符</strong>：不同的值类型转数字；都是字符比较码值；如果存在对象，先转换为原始值。</li>
</ul>
<pre><code class="language-javascript">console.log("-1" - 1); // -2
console.log(2 &gt; true); // true
console.log("one" + true); // onetrue
console.log("1.5" * 2); // 3
console.log("1.5" + 2); // 1.52
console.log( / 2); // 2.5
</code></pre>
<blockquote>
<p><strong>🔸显示类型转换</strong>就是调用各种方法、类型构造函数进行显示的数据转换。</p>
</blockquote>
<ul>
<li><strong>toString</strong>()：基本每种数据类型都提供了toString()方法，转换为字符串，除开null和undefined不可使用，会报错。</li>
<li><strong>类型构造函数</strong>：Boolean()、Number()、String()的类型函数，都可以转换对应数据类型。</li>
<li><strong>valueOf</strong>()：valueOf()方法可以转换对象为一个基本数据值。</li>
<li>其他如<strong>parseInt</strong>()、<strong>parseFloat</strong>()...等方法。</li>
</ul>
<h2 id="34值类型与引用类型">3.4、值类型与引用类型</h2>
<p><strong>⁉️堆和栈</strong>：</p>
<ul>
<li><strong>栈(stack)</strong>：提供代码执行环境，并存放值类型、变量标识符。速度快，空间有限（不同浏览器不同）。</li>
<li><strong>堆(heap)</strong>：存放引用类型数据，速度慢，空间大。</li>
</ul>
<table>
<thead>
<tr>
<th></th>
<th><strong>值类型（基本类型）</strong></th>
<th><strong>对象/引用类型</strong></th>
</tr>
</thead>
<tbody>
<tr>
<td>数据类型</td>
<td>undefined、null、Boolean、Number、String、Symbol</td>
<td>Array、object、window，function等<br>包装类型：String、Number、Boolean；<br>单体内置对象：Global、Math</td>
</tr>
<tr>
<td>存储位置</td>
<td>存储在<strong>栈中</strong>（变量标识符、变量值），占用空间固定<br><img src="https://img2022.cnblogs.com/blog/151257/202211/151257-20221114153633721-697802525.png" alt="fbc57ebc6a96470b3b45d154cd09382b_1890110-20200327154803560-2032961964.png" loading="lazy"></td>
<td>存储在<strong>堆中</strong>，占用空间不固定。变量标识符存储在栈区，值为地址指针，指向存储在堆区的对象数据。</td>
</tr>
<tr>
<td>属性方法</td>
<td>不能添加任何属性、方法。</td>
<td>可以动态添加属性和方法</td>
</tr>
<tr>
<td>复制</td>
<td>复制变量值</td>
<td>复制地址指针（变量值是对象的指针），指向同一对象</td>
</tr>
<tr>
<td>参数传递</td>
<td>值传递，不影响原有变量</td>
<td>引用地址传递，共用同一个对象</td>
</tr>
<tr>
<td>垃圾回收</td>
<td>函数执行完就回收了</td>
<td>没有任何引用时，才会被垃圾回收机制收回</td>
</tr>
<tr>
<td>类型验证</td>
<td><code>typeof</code>：<code>typeof 0; //number</code></td>
<td><code>instanceof</code>：<code>[] instanceof Array //true</code><br><code>Object.prototype.toString.call({}) //</code></td>
</tr>
<tr>
<td>==比较</td>
<td>值类型是值比较</td>
<td>引用类型比较引用地址，所以要用恒等<code>===</code>比较</td>
</tr>
</tbody>
</table>
<p><img src="https://img2022.cnblogs.com/blog/151257/202211/151257-20221114160224042-964860151.png" alt="image" loading="lazy"></p>
<hr>
<h1 id="04运算操作符">04、运算/操作符</h1>
<ul>
<li>运算符优先级汇总表</li>
</ul>
<h2 id="41算数运算符">4.1、➕算数运算符</h2>
<table>
<thead>
<tr>
<th><strong>运算符</strong></th>
<th><strong>描述</strong></th>
<th><strong>示例</strong></th>
</tr>
</thead>
<tbody>
<tr>
<td><strong>+</strong></td>
<td>加</td>
<td></td>
</tr>
<tr>
<td><strong>-</strong></td>
<td>减</td>
<td></td>
</tr>
<tr>
<td><strong><code>*</code></strong></td>
<td>乘</td>
<td></td>
</tr>
<tr>
<td><strong>/</strong></td>
<td>除</td>
<td></td>
</tr>
<tr>
<td><strong>%</strong></td>
<td>取余数</td>
<td><code>6%3; //=0</code></td>
</tr>
<tr>
<td><strong><code>**</code></strong></td>
<td>指数，幂运算，等同于Math.pow(a,b)</td>
<td><code>3**2; //=Math.pow(3,2)=9</code></td>
</tr>
<tr>
<td><strong>++</strong></td>
<td>自加1，符号在前面的<strong>先运算，再赋值</strong>，在后面的反之</td>
<td><code>x=++y;//y=1+y; x=y;</code><br><code>x=y++;//x=y;y=1+y; </code></td>
</tr>
<tr>
<td><strong>--</strong></td>
<td>自减1，同上</td>
<td></td>
</tr>
</tbody>
</table>
<blockquote>
<p><strong>📢运算符优先级：</strong><code>[ ++，--，!] &gt; [*，/，% ]&gt; [ +，- ]</code></p>
</blockquote>
<pre><code class="language-javascript">var x=1;//经典面试题
console.log(x+x++ + ++x); //1+1+(1+2)=5
</code></pre>
<p><strong>🔸</strong><code>+</code><strong>加运算符会隐式转换</strong>：<strong>+运算</strong>就是字符相加、数字相加两种情况</p>
<ul>
<li>boolean、数字相加会隐式转换为数值进行相加。</li>
<li>字符串 <strong>+</strong> 非字符串会隐式转换为字符串。</li>
</ul>
<pre><code class="language-javascript">console.log(true+false);    //1
console.log(true+3);    //4
console.log(true+"1");    //true1
console.log("123"+123);    //123123
console.log("123"+);    //1231,2,3
</code></pre>
<p>🔸<strong><code>-</code></strong>，<strong><code>*</code></strong>，<strong><code>/</code></strong>，<strong><code>%</code> 隐式转换数值</strong>：都是数学运算转数字。<strong>减、乘、除、取余</strong>运算都是数学运算，会隐式转换为数字再运算。</p>
<pre><code class="language-javascript">console.log("123"-"12");    //111
console.log("123"-12);    //111
console.log("123"-1-true);    //121
console.log("123"/true);    //123
console.log("123"/2);    //61.5
</code></pre>
<h2 id="42️赋值运算符">4.2、⏸️赋值运算符</h2>
<table>
<thead>
<tr>
<th><strong>运算符</strong></th>
<th><strong>描述</strong></th>
<th><strong>示例</strong></th>
</tr>
</thead>
<tbody>
<tr>
<td><strong>=</strong></td>
<td>赋值运算符，一个神圣的仪式</td>
<td></td>
</tr>
<tr>
<td><strong>+=</strong></td>
<td>加法赋值</td>
<td><code>x+=y//x=x+y</code></td>
</tr>
<tr>
<td><strong>-=</strong></td>
<td>减法赋值</td>
<td><code>x-=y//x=x-y</code></td>
</tr>
<tr>
<td>*<strong>=</strong></td>
<td>乘法赋值</td>
<td><code>x*=y//x=x*y</code></td>
</tr>
<tr>
<td><strong>/=</strong></td>
<td>除法赋值</td>
<td><code>x/=y//x=x/y</code></td>
</tr>
<tr>
<td><strong>%=</strong></td>
<td>取余赋值</td>
<td><code>a%=3 //a=a%3</code></td>
</tr>
</tbody>
</table>
<h2 id="43比较运算符">4.3、🔀比较运算符</h2>
<table>
<thead>
<tr>
<th><strong>运算符</strong></th>
<th><strong>描述</strong></th>
<th><strong>示例/备注</strong></th>
</tr>
</thead>
<tbody>
<tr>
<td><strong>&gt;，&lt;，&gt;=，&lt;=</strong></td>
<td>大于，小于，大于等于，小于等于</td>
<td></td>
</tr>
<tr>
<td><strong>==</strong></td>
<td>相等比较，比较变量的值，而不管其类型</td>
<td><code>"1"==1; //true</code></td>
</tr>
<tr>
<td><strong>===</strong></td>
<td>恒等比较，比较类型和值</td>
<td>无类型转换</td>
</tr>
<tr>
<td><strong>!=</strong></td>
<td><code>!=</code>不等于比较</td>
<td></td>
</tr>
<tr>
<td><strong>!==</strong></td>
<td><code>!==</code>不恒等比较</td>
<td>无类型转换</td>
</tr>
</tbody>
</table>
<p>比较运算符会<strong>隐式转换为数值</strong>！</p>
<ul>
<li>都是字符，转为码值进行比较，</li>
<li>两个不同类型比较，隐式转为数值，然后进行比较。</li>
<li><strong>引用类型</strong>永远不相等，虽然其内部的数据一模一样，因为比较的是引用地址。</li>
<li><strong>推荐恒等</strong>，由于 <code>==</code>、<code>!=</code> 比较会隐式转换，会遇到较多奇葩问题，在开发中，我们<strong>一般使用严格比较恒等</strong> <code>===</code> <code>!==</code>。</li>
<li><strong>NaN</strong>与任何值比较，都是false, Infinity 只等于它自身。<code>console.log(NaN==NaN);//false</code></li>
<li>null 和 undefined， 他们直接相等，和其他原始类型比较，不相等。</li>
</ul>
<pre><code class="language-javascript">console.log("123"&gt;"45");    //false 都是字符比较字符码值
console.log("123"&gt;45);//true转换为数值比较
console.log("123"==123);    //转数值比较，true
console.log(""==false);//true 转为数值比较
console.log("false"==false);//false 转为数值比较
console.log("true"==true);//false 转为数值比较
console.log(==);//false，数组是对象
</code></pre>
<h2 id="44逻辑运算符">4.4、❗逻辑运算符</h2>
<table>
<thead>
<tr>
<th>运算符</th>
<th><strong>描述</strong></th>
<th><strong>示例/备注</strong></th>
</tr>
</thead>
<tbody>
<tr>
<td><strong>!</strong></td>
<td><code>!</code><strong>逻辑非</strong>运算符</td>
<td><code>!false //true</code></td>
</tr>
<tr>
<td><strong>&amp;&amp;</strong></td>
<td><code>&amp;&amp;</code>、<strong>||</strong> 也叫<strong>短路运算符</strong>：从左往右判断，符合要求就不继续执行了<br><strong>逻辑与</strong><code>&amp;&amp;</code>=同时满足：返回第一个为<code>false</code>的值，否则最后一个值</td>
<td><code>1 &amp;&amp; 2 &amp;&amp; 3 //返回3</code><br><code>1 &amp;&amp; 2 &amp;&amp; false &amp;&amp; 3 //返回false</code></td>
</tr>
<tr>
<td><strong>||</strong></td>
<td><strong>逻辑或</strong>=满足一个即可：返回第一个为<code>true</code>的值，否则最后一个值</td>
<td>1 || 2 || false //返回1</td>
</tr>
</tbody>
</table>
<blockquote>
<p>逻辑运算符会隐式转换为<code>boolean</code>值。</p>
</blockquote>
<p><strong>短路运算符</strong><code>&amp;&amp;</code>、<code>||</code>常用来判断都为真、至少有一个为真：</p>
<pre><code class="language-javascript">let user = { name: "sam", score: 98, age: 12 };
if (user.age &lt;= 12 &amp;&amp; user.score &gt; 95)
    console.log(`${user.name} 是一个少年天才！`);
</code></pre>
<h2 id="45️其他操作符">4.5、⁉️其他操作符</h2>
<table>
<thead>
<tr>
<th>运算符</th>
<th><strong>描述</strong></th>
<th><strong>示例</strong></th>
</tr>
</thead>
<tbody>
<tr>
<td><strong>?:</strong></td>
<td><strong>三元表达式</strong>：<code>判断条件 ？条件为真 ：条件为假</code></td>
<td><code>age = 4 &gt; 2 ? 4 : 2; //4</code></td>
</tr>
<tr>
<td><strong>??=</strong></td>
<td><strong>逻辑空赋值运算符</strong>： (x ??= y) 仅在 x 是(null 或 undefined) 时对其赋值y</td>
<td><code>x??="default";</code></td>
</tr>
<tr>
<td><strong>?. ||</strong></td>
<td><strong>可选链运算符</strong>，不为空（null 或 undefined）时才执行。可以没有 ||，返回<code>undefined</code></td>
<td>page=res?.data?.size ||1;<br><code>obj?.; obj.func?.()</code></td>
</tr>
<tr>
<td><strong>void</strong></td>
<td>运行表达式，返回一个 undefined</td>
<td><code>void alert("void")</code></td>
</tr>
<tr>
<td><strong>&amp;，|，~，^，&lt;&lt;，&gt;&gt;</strong></td>
<td>二进制位的运算，32位数字的位运算</td>
<td></td>
</tr>
<tr>
<td><strong>delete</strong></td>
<td><strong>删除</strong>一个对象的属性、数组键值，删除后会变为undefined</td>
<td><code>delete objt.pro</code></td>
</tr>
<tr>
<td><strong>typeof</strong></td>
<td>获取数据类型，<code>typeof (operand)</code>，括号省略。</td>
<td><code>typeof null; //object</code></td>
</tr>
<tr>
<td><strong>in</strong></td>
<td>判断属性是否在对象中</td>
<td><code>"length" in [] //true</code></td>
</tr>
<tr>
<td><strong>instanceof</strong></td>
<td>判断对象是否指定的类型，用于引用类型、自定义类型</td>
<td><code>[] instanceof Array //true</code></td>
</tr>
<tr>
<td>new</td>
<td><code>new Object()</code>创建对象实例</td>
<td></td>
</tr>
<tr>
<td>superIE🚫</td>
<td>调用一个对象父类的函数，在子类中调用</td>
<td><code>supper.print();</code></td>
</tr>
</tbody>
</table>
<hr>
<h1 id="05逻辑语句">05、逻辑语句</h1>
<h2 id="ifswitch条件判断">if/switch条件判断</h2>
<p><strong><code>if</code></strong>条件语句，根据条件执行。<code>if</code>可单独使用，也可以跟<code>else if</code> （0个或多个，中间）、<code>else</code>（0个或1个，放最后）。</p>
<pre><code class="language-javascript">if (条件) { /*代码*/ }
else if(条件) { /*代码*/ }
else if(条件) { /*代码*/ }
else { /*代码*/ }//可以不要else部分，单独if
</code></pre>
<p><code>switch</code><strong>定值</strong>条件分支，值的判断是用的<code>===</code>恒等比较，多用于枚举值、固定的常量值。<strong>注意</strong>每一个case后需要用break，以防止穿透（继续往后执行）。</p>
<pre><code class="language-javascript">switch (表达式) {
    case 值1:
      /*代码*/;
      break;   //返回，结束switch，防止无意义的穿透执行
    case 值2:
    case 值3:      //可以多case合并一块
      /*代码*/;
      break;
    default:      //前面的case都没有命中时执行
      /*代码*/
}
</code></pre>
<h2 id="trycatch异常处理">try.catch异常处理</h2>
<p>用 <strong>try...catch</strong>...finally 语句捕获异常，<strong>throw</strong>语句抛出一个异常。</p>
<ul>
<li>JS代码如果发生了异常，则不会再执行后面的代码了，就需要做好异常捕获处理。</li>
<li><code>finally</code> 语句块为可选，不管是否抛出异常都会执行，常用来做一些清理收尾工作。</li>
<li><code>throw</code>抛出异常，可以是自定义的值、对象，可以用<code>Error</code>对象包装一个错误信息。</li>
</ul>
<pre><code class="language-javascript">function print(para) {
    if (para &lt;= 0) {
      throw "参数para必须大于0（para= "+para+"）";
      throw new Error("参数para必须大于0（para= "+para+"）");
    }
    console.log(para);
}
print(2);   //如果这里参数用-2，则会抛出异常，这里的异常没人管，后面的代码就不会执行了
try{      //try包装要执行的代码
    print(-2);
}
catch(e){   //catch捕获try中抛出的异常并处理，参数为捕获到的异常信息，如果没有异常则跳过catch语句
    console.log("发生错误：" + e);
}
finally{
    console.log("执行完毕！")    //始终会被执行的代码，用于一些清理收尾工作
}
</code></pre>
<h2 id="breakcontinue">break/continue</h2>
<ul>
<li><strong>break</strong>：<strong>结束循环</strong>，停止本层循环，跳出本层循环，<strong>大家都别干了！</strong></li>
<li><strong>continue</strong>：<strong>结束本次循环，</strong>暂停本次循环，不执行后面的代码了，继续下一次循环，<strong>我不想干了，你们继续！</strong></li>
</ul>
<h2 id="whiletrue">while(true)</h2>
<p><code>while</code>循环，先判断，符合条件才执行，会循环的<strong>判断条件 <strong>》</strong>执行</strong>，所以必须注意结束循环的控制，不然就是死循环了。</p>
<pre><code class="language-javascript">while(条件表达式){
    /*循环代码*/
    //条件控制代码，别忘了
}
</code></pre>
<h2 id="do--while-true">do{ } while (true)</h2>
<p><code>do...white</code>循环，<strong>先执行 <strong>》</strong>再判断</strong>。同while，需注意循环的控制，避免死循环。</p>
<pre><code class="language-javascript">do{
    /*循环代码*/
    //条件控制代码，别忘了
}while(条件表达式)
</code></pre>
<h2 id="foriini-循环">for(i,i&lt;n,i++){ }循环</h2>
<p>循环执行逻辑控制语句：</p>
<pre><code class="language-javascript">for(初始化语句;判断条件语句;控制条件语句){
    /*循环代码*/
}
for(let i=1;i&lt;=10;i++){ //循环1到10
    if(i&gt;6)
      break; //跳出并结束循环
    if(i%2==1)
      continue;   //如果是奇数，返回继续下一次循环
    console.log(i);   
}
</code></pre>
<h2 id="forin-可枚举属性">for(in){ }可枚举属性</h2>
<p><strong>for...in</strong>循环，对一个对象（不仅仅是数组）进行循环遍历，遍历其<strong>所有</strong>可枚举的属性（索引下标、属性），包括继承来的。</p>
<pre><code class="language-javascript">let arr=;
arr.uname="arr";
arr.print=function(){console.log(this.length)};
for(let i in arr){
    console.log(i+":"+arr);
}
/*输出：
0:1
1:2
uname:arr
print:function(){console.log(this.length)}
*/
</code></pre>
<blockquote>
<p><strong>❗慎用</strong> <strong><code>for(in)</code></strong>：for(in)是循环遍历的是所有可枚举的（enumerable）属性，对于数组、可迭代集合一般使用<code>for(of) </code>。</p>
</blockquote>
<h2 id="forof-集合值迭代">for(of) {}集合值迭代</h2>
<p><strong>for…of</strong>(IE🚫)语法是ES6新引入的语法，用于遍历可迭代（iterable）对象，只遍历数组对象元素。包括字符串String、数组Array、集合Set、字典Map、arguments 对象、DOM NodeList 对象等。</p>
<p>和<code>for...in</code>最大的区别就是，<code>for...of</code>迭代的是集合的数据值，而不是可枚举属性（索引）。</p>
<pre><code class="language-javascript">let arr=;
arr.uname="arr";
arr.print=function(){console.log(this.length)};
for(let i of arr){
    console.log(i); //12
}
</code></pre>
<h2 id="foreach数组方法">forEach()数组方法</h2>
<p><strong>forEach</strong> 作用于数组对象，用于遍历数组对象的每一个元素，并对每一个元素执行回调(callback)函数。</p>
<p>语法：ArrayObject.<strong>forEach</strong>(callback(currentValue, index, arr), thisValue))</p>
<pre><code class="language-javascript">let arr = ;
arr.uname = "arr";
arr.print = function () { console.log(this.length) };
arr.forEach(function (item, index) {
    console.log(index + ":" + item);
});
/*输出：
0:1
1:2
*/
</code></pre>
<hr>
<blockquote>
<p><strong>©️版权申明</strong>：版权所有@安木夕，本文内容仅供学习，欢迎指正、交流，转载请注明出处！<em>原文编辑地址-语雀</em></p>
</blockquote><br><br>
来源：https://www.cnblogs.com/anding/p/16889212.html

查看完整版本: JavaScript入门①-基础知识筑基