JavaScript方法

博主： E_Page
发布时间：2021 年 10 月 22 日
357 次浏览
暂无评论
5639字数
分类： code

push() 方法

我们已经见过添加数组元素最简单的方法: 为新索引赋值:

var a = [];
a[0] = "zero";
a[1] = "one";
也可以使用 push() 方法在数组末尾增加一个或多个元素:

var a = [];
a.push("zero"); // 在末尾添加一个元素. a = ["zero"]
a.push("one", "two");// 再添加两个元素.这时 a = ["zero", "one", "two"]

在数组尾部压入一个元素与给数组 a[a.length]赋值是一样的.

pop() 方法

pop() 方法
改变数组中数据的另一种方法是用 .pop() 方法。

.pop() 方法用来删除（“抛出”）一个数组末尾的值。

我们可以把这个删除（“抛出”）的值赋给一个变量存储起来。

数组中任何类型的数据条目（数值，字符串，甚至是数组）可以被“抛出来” 。

举个例子:

var oneDown = [1, 4, 6].pop(); // 现在 oneDown 的值为 6 ，数组变成了 [1, 4]

shift() 方法

.pop() 方法用来移出数组中最后一个元素。如果想要移出数组第一个元素要怎么办呢？

.shift() 就是专门用来处理这类型需求的。它的工作原理类似 .pop()，但它移除的是第一个元素，而不是最后一个。

var oneDown = [1, 4, 6].shift(); // 现在 oneDown 的值为 1 ，数组变成了 [4, 6]

unshift() 方法

unshift() 方法
你不仅可以 shift（移出）数组中的第一个元素，你也可以 unshift（移入）一个元素到数组的头部。

.unshift() 方法用起来就像 .push() 方法一样, 但不是在数组的末尾添加元素，而是在数组的头部添加元素。

var a = ["zero"];
a.unshift("one"); //  a = [ "one", "zero" ]

concat() 方法

concat() 方法
JavaScript的 concat() 方法允许您连接数组并创建一个全新的数组。

var c1 = ["HTML", "CSS"];
var c2 = ["JS", "Python"];
var courses = c1.concat(c2);

以上 courses 数组包含4个元素（HTML，CSS，JS，Python）。

concat 操作不会影响c1和c2数组 - 它会将所产生的连接作为新数组返回。

forEach() 方法

forEach() 方法
forEach() 方法用于调用数组的每个元素，并将元素传递给回调函数。

注意: forEach() 对于空数组是不会执行回调函数的。

实例: 列出数组的每个元素

var numbers = [64, 45, 72, 11, 49];
// item 传递的是数组的值, index 传递的是索引

function myFunction(item, index) { 

    demo.innerHTML = demo.innerHTML + "index[" + index + "]: " + item + "<br>"; 

}

numbers.forEach(myFunction)

indexOf() 方法

indexOf() 方法
indexOf() 方法可返回数组中某个指定的元素位置。

该方法将从头到尾地检索数组，看它是否含有对应的元素。

返回第一次出现该元素的位置。

如果在数组中没找到指定元素则返回 -1。

var fruits = ["香蕉", "橙子", "苹果", "甜瓜", "苹果"];

var a = fruits.indexOf("苹果")

var b = fruits.indexOf("樱桃")

// a 的值为 2
// b 的值为 -1

slice() 方法

slice() 方法
slice() 方法可从已有的数组中返回选定的元素。

slice() 方法可提取字符串的某个部分，并以新的字符串返回被提取的部分。

注意： slice() 方法不会改变原始数组。

语法

array.slice(start, end)

var fruits = ["Banana", "Orange", "Lemon", "Apple", "Mango"];
var citrus = fruits.slice(1,3); // -> "Orange", "Lemon"

replace() 方法

replace() 方法
replace() 方法用于在字符串中用一些字符替换另一些字符，或替换一个与正则表达式匹配的子串。

如果想了解更多正则表达式教程请查看w3c的：JavaScript 正则表达式

var str="Mr Blue has a blue house and a blue car and a blue hat";

// 将字符串中首次出现的blue替换成red
var n=str.replace("blue", "red"); //Mr Blue has a red house and a blue car and a blue hat

// 用正则匹配字符串中所有出现的blue并替换成red
var c=str.replace(/blue/g, "red"); //Mr red has a red house and a red car and a red hat

substring() 方法

substring() 方法用于提取字符串中介于两个指定下标之间的字符。

substring() 方法返回的子串包括开始处的字符，但不包括结束处的字符。

语法

string.substring(from, to)

参数描述
from 必需。一个非负的整数，规定要提取的子串的第一个字符在 string Object 中的位置。
to 可选。一个非负的整数，比要提取的子串的最后一个字符在 string Object 中的位置多 1。
如果省略该参数，那么返回的子串会一直到字符串的结尾。

实例:

var str="Hello world!";
document.write(str.substring(3)+"<br>");
document.write(str.substring(3,7));

substring() 提取从 indexStart 到 indexEnd（不包括）之间的字符。特别地：

如果 indexStart 等于 indexEnd，substring 返回一个空字符串。
如果省略 indexEnd，substring 提取字符一直到字符串末尾。
如果任一参数小于 0 或为 NaN，则被当作 0。
如果任一参数大于 stringName.length，则被当作 stringName.length。
如果 indexStart 大于 indexEnd，则 substring 的执行效果就像两个参数调换了一样。
实例:

var anyString = "w3cschool";

// 输出 "w3c"

document.write(anyString.substring(0,3)+"<br>");

document.write(anyString.substring(3,0)+"<br>");

document.write(anyString.substring(3,-3)+"<br>");

document.write(anyString.substring(3,NaN)+"<br>");

document.write(anyString.substring(-2,3)+"<br>");

document.write(anyString.substring(NaN,3)+"<br>");


// 输出 "cho"

document.write(anyString.substring(4,7)+"<br>");

document.write(anyString.substring(7,4)+"<br>");


// 输出 ""

document.write(anyString.substring(4,4)+"<br>");


// 输出 "w3csch"

document.write(anyString.substring(0,6)+"<br>");


// 输出 "w3cschool"

document.write(anyString.substring(0,9)+"<br>");

document.write(anyString.substring(0,12));

Window 对象方法

窗口对象方法
我们之前有使用过的alert（）就是window对象的方法，调用window对象方法可以不需要指定window对象：

alert("hello world");
// 等价于
window.alert('hello world');

窗口对象方法:

open() 方法

open() 方法
open() 方法用于打开一个新的浏览器窗口或查找一个已命名的窗口。
语法

window.open(URL,name,specs,replace)

实例:在新浏览器窗口中打开 www.5yang.cc

function open_win() {

    window.open("https:// www.5yang.cc");

}

我知道你在想什么,是的... 如果你想设置弹窗,那么大部分浏览器都是默认阻止的,并且chrome右上角会有弹窗阻止的提示,需要用户首肯才会弹出.

实例:下面的示例在一个新的浏览器打开一个window空白页：

function openWin(){
    myWindow=window.open('','','width=200,height=100');
    myWindow.document.write("<p>这是'我的窗口'</p>");
    myWindow.focus();
}

setTimeout() 方法

setTimeout() 方法
setTimeout() 方法用于在指定的毫秒数后调用函数或计算表达式。

提示： 1000 毫秒 = 1 秒。
提示：如果你只想重复执行可以使用 setInterval() 方法。使用 clearInterval() 方法来阻止函数的执行
提示：使用 clearTimeout() 方法来阻止函数的执行。

setTimeout(function(){ alert("Hello"); }, 3000);

实例: 打开一个新窗口，3 秒后将该窗口关闭

var myWindow = window.open("", "", "width=200, height=100");
myWindow.document.write("<p>这是一个新窗口'</p>");
setTimeout(function(){ myWindow.close() }, 3000);

实例: 使用 clearTimeout() 来阻止函数的执行

var myVar;

function myFunction() {
    myVar = setTimeout(function(){ alert("Hello") }, 3000);
}

function myStopFunction() {
    clearTimeout(myVar);
}

round 方法

Math.round() 返回一个数字四舍五入后最接近的整数。

x = Math.round(20.49);   //20
x = Math.round(20.5);    //21
x = Math.round(-20.5);   //-20
x = Math.round(-20.51);  //-21

注意，与很多其他语言中的round()函数不同，Math.round()并不总是舍入到远离0的方向（尤其是在负数的小数部分恰好等于0.5的情况下）。

setInterval 方法

setInterval
setInterval() 方法调用函数或以指定的间隔（以毫秒为单位）来计算表达式。

它将持续调用该函数，直到调用 clearInterval() 或窗口关闭。

function myAlert() {
   alert("你好 世界");
}
setInterval(myAlert, 3000); // 每个 3 秒执行一次 myAlert

提示: 将函数的名称传递给 setInterval 方法时，不带圆括号。

最后修改：2022 年 12 月 05 日

如果觉得我的文章对你有用，请随意赞赏

发表评论取消回复
使用cookie技术保留您的个人信息以便您下次快速评论，继续评论表示您已同意该条款

评论 *

私密评论

名称 *

🎲

邮箱 *

地址

JavaScript方法

E_Page • 2021 年 10 月 22 日

<h2>push() 方法</h2><p>push() 方法</p><p>我们已经见过添加数组元素最简单的方法: 为新索引赋值:</p><p>var a = [];<br />
a[0] = "zero";<br />
a[1] = "one";<br />
也可以使用 push() 方法在数组末尾增加一个或多个元素:</p><pre><code class="language-JavaScript line-numbers">var a = [];
a.push("zero"); // 在末尾添加一个元素. a = ["zero"]
a.push("one", "two");// 再添加两个元素.这时 a = ["zero", "one", "two"]
</code></pre><p>在数组尾部压入一个元素与给数组 a[a.length]赋值是一样的.</p><h2>pop() 方法</h2><p>pop() 方法<br />
改变数组中数据的另一种方法是用 .pop() 方法。</p><p>.pop() 方法用来删除（“抛出”）一个数组末尾的值。</p><p>我们可以把这个删除（“抛出”）的值赋给一个变量存储起来。</p><p>数组中任何类型的数据条目（数值，字符串，甚至是数组）可以被“抛出来” 。</p><p>举个例子:</p><pre><code class="language-JavaScript line-numbers">var oneDown = [1, 4, 6].pop(); // 现在 oneDown 的值为 6 ，数组变成了 [1, 4]
</code></pre><h2>shift() 方法</h2><p>shift() 方法</p><p>.pop() 方法用来移出数组中最后一个元素。如果想要移出数组第一个元素要怎么办呢？</p><p>.shift() 就是专门用来处理这类型需求的。它的工作原理类似 .pop()，但它移除的是第一个元素，而不是最后一个。</p><pre><code class="language-JavaScript line-numbers">var oneDown = [1, 4, 6].shift(); // 现在 oneDown 的值为 1 ，数组变成了 [4, 6]
</code></pre><h2>unshift() 方法</h2><p>unshift() 方法<br />
你不仅可以 shift（移出）数组中的第一个元素，你也可以 unshift（移入）一个元素到数组的头部。</p><p>.unshift() 方法用起来就像 .push() 方法一样, 但不是在数组的末尾添加元素，而是在数组的头部添加元素。</p><pre><code class="language-JavaScript line-numbers">var a = ["zero"];
a.unshift("one"); //  a = [ "one", "zero" ]
</code></pre><h2>concat() 方法</h2><p>concat() 方法<br />
JavaScript的 concat() 方法允许您连接数组并创建一个全新的数组。</p><pre><code class="language-JavaScript line-numbers">var c1 = ["HTML", "CSS"];
var c2 = ["JS", "Python"];
var courses = c1.concat(c2);
</code></pre><p>以上 courses 数组包含4个元素（HTML，CSS，JS，Python）。</p><p>concat 操作不会影响c1和c2数组 - 它会将所产生的连接作为新数组返回。</p><h1>forEach() 方法</h1><p>forEach() 方法<br />
forEach() 方法用于调用数组的每个元素，并将元素传递给回调函数。</p><p>注意: forEach() 对于空数组是不会执行回调函数的。</p><p>实例: 列出数组的每个元素</p><pre><code class="language-JavaScript line-numbers">var numbers = [64, 45, 72, 11, 49];
// item 传递的是数组的值, index 传递的是索引

function myFunction(item, index) {

demo.innerHTML = demo.innerHTML + "index[" + index + "]: " + item + "&lt;br&gt;";

}

numbers.forEach(myFunction)
</code></pre><h2>indexOf() 方法</h2><p>indexOf() 方法<br />
indexOf() 方法可返回数组中某个指定的元素位置。</p><p>该方法将从头到尾地检索数组，看它是否含有对应的元素。</p><p>返回第一次出现该元素的位置。</p><p>如果在数组中没找到指定元素则返回 -1。</p><pre><code class="language-JavaScript line-numbers">var fruits = ["香蕉", "橙子", "苹果", "甜瓜", "苹果"];

var a = fruits.indexOf("苹果")

var b = fruits.indexOf("樱桃")

// a 的值为 2
// b 的值为 -1
</code></pre><h2>slice() 方法</h2><p>slice() 方法<br />
slice() 方法可从已有的数组中返回选定的元素。</p><p>slice() 方法可提取字符串的某个部分，并以新的字符串返回被提取的部分。</p><p>注意： slice() 方法不会改变原始数组。</p><p>语法</p><pre><code class="language-JavaScript line-numbers">array.slice(start, end)
</code></pre><p><img src="https://image.5yang.cc/uploads//uoloads2021/10/语法.png" alt=""  style=""></p><pre><code class="language-JavaScript line-numbers">var fruits = ["Banana", "Orange", "Lemon", "Apple", "Mango"];
var citrus = fruits.slice(1,3); // -&gt; "Orange", "Lemon"
</code></pre><h2>replace() 方法</h2><p>replace() 方法<br />
replace() 方法用于在字符串中用一些字符替换另一些字符，或替换一个与正则表达式匹配的子串。</p><p>如果想了解更多正则表达式教程请查看w3c的：<a class="wp-editor-md-post-content-link" href="https://www.w3cschool.cn/javascript/js-regexp.html" title="JavaScript 正则表达式">JavaScript 正则表达式</a></p><pre><code class="language-JavaScript line-numbers">var str="Mr Blue has a blue house and a blue car and a blue hat";

// 将字符串中首次出现的blue替换成red
var n=str.replace("blue", "red"); //Mr Blue has a red house and a blue car and a blue hat

// 用正则匹配字符串中所有出现的blue并替换成red
var c=str.replace(/blue/g, "red"); //Mr red has a red house and a red car and a red hat
</code></pre><h2>substring() 方法</h2><p>substring() 方法</p><p>substring() 方法用于提取字符串中介于两个指定下标之间的字符。</p><p>substring() 方法返回的子串包括 开始 处的字符，但不包括 结束 处的字符。</p><p>语法</p><pre><code class="language-JavaScript line-numbers">string.substring(from, to)
</code></pre><p>参数  描述<br />
from    必需。一个非负的整数，规定要提取的子串的第一个字符在 string Object 中的位置。<br />
to  可选。一个非负的整数，比要提取的子串的最后一个字符在 string Object 中的位置多 1。<br />
如果省略该参数，那么返回的子串会一直到字符串的结尾。</p><p>实例:</p><pre><code class="language-JavaScript line-numbers">var str="Hello world!";
document.write(str.substring(3)+"&lt;br&gt;");
document.write(str.substring(3,7));
</code></pre><p>substring() 提取从 indexStart 到 indexEnd（不包括）之间的字符。特别地：</p><p>如果 indexStart 等于 indexEnd，substring 返回一个空字符串。<br />
如果省略 indexEnd，substring 提取字符一直到字符串末尾。<br />
如果任一参数小于 0 或为 NaN，则被当作 0。<br />
如果任一参数大于 stringName.length，则被当作 stringName.length。<br />
如果 indexStart 大于 indexEnd，则 substring 的执行效果就像两个参数调换了一样。<br />
实例:</p><pre><code class="language-JavaScript line-numbers">var anyString = "w3cschool";

// 输出 "w3c"

document.write(anyString.substring(0,3)+"&lt;br&gt;");

document.write(anyString.substring(3,0)+"&lt;br&gt;");

document.write(anyString.substring(3,-3)+"&lt;br&gt;");

document.write(anyString.substring(3,NaN)+"&lt;br&gt;");

document.write(anyString.substring(-2,3)+"&lt;br&gt;");

document.write(anyString.substring(NaN,3)+"&lt;br&gt;");

// 输出 "cho"

document.write(anyString.substring(4,7)+"&lt;br&gt;");

document.write(anyString.substring(7,4)+"&lt;br&gt;");

// 输出 ""

document.write(anyString.substring(4,4)+"&lt;br&gt;");

// 输出 "w3csch"

document.write(anyString.substring(0,6)+"&lt;br&gt;");

// 输出 "w3cschool"

document.write(anyString.substring(0,9)+"&lt;br&gt;");

document.write(anyString.substring(0,12));
</code></pre><p><hr /></p><h1>Window 对象方法</h1><p>窗口对象方法<br />
我们之前有使用过的alert（）就是window对象的方法，调用window对象方法可以不需要指定window对象：</p><pre><code class="language-JavaScript line-numbers">alert("hello world");
// 等价于
window.alert('hello world');
</code></pre><p>窗口对象方法:<br />
<img src="https://image.5yang.cc/uploads//uoloads2021/10/窗口对象方法.png" alt=""  style=""></p><h2>open() 方法</h2><p>open() 方法<br />
open() 方法用于打开一个新的浏览器窗口或查找一个已命名的窗口。<br />
语法</p><pre><code class="language-JavaScript line-numbers">window.open(URL,name,specs,replace)
</code></pre><p><img src="https://image.5yang.cc/uploads//uoloads2021/10/参数说明.png" alt=""  style=""><br />
<img src="https://image.5yang.cc/uploads//uoloads2021/10/replace.png" alt=""  style=""><br />
实例:在新浏览器窗口中打开 www.5yang.cc</p><pre><code class="language-JavaScript line-numbers">function open_win() {

window.open("https:// www.5yang.cc");

}
</code></pre><p>我知道你在想什么,是的... 如果你想设置弹窗,那么大部分浏览器都是默认阻止的,并且chrome右上角会有弹窗阻止的提示,需要用户首肯才会弹出.</p><p>实例:下面的示例在一个新的浏览器打开一个window空白页：</p><pre><code class="language-JavaScript line-numbers">function openWin(){
    myWindow=window.open('','','width=200,height=100');
    myWindow.document.write("&lt;p&gt;这是'我的窗口'&lt;/p&gt;");
    myWindow.focus();
}
</code></pre><h2>setTimeout() 方法</h2><p>setTimeout() 方法<br />
setTimeout() 方法用于在指定的毫秒数后调用函数或计算表达式。</p><p>提示： 1000 毫秒 = 1 秒。<br />
提示： 如果你只想重复执行可以使用 setInterval() 方法。 使用 clearInterval() 方法来阻止函数的执行<br />
提示： 使用 clearTimeout() 方法来阻止函数的执行。</p><pre><code class="language-JavaScript line-numbers">setTimeout(function(){ alert("Hello"); }, 3000);
</code></pre><p>实例: 打开一个新窗口，3 秒后将该窗口关闭</p><pre><code class="language-JavaScript line-numbers">var myWindow = window.open("", "", "width=200, height=100");
myWindow.document.write("&lt;p&gt;这是一个新窗口'&lt;/p&gt;");
setTimeout(function(){ myWindow.close() }, 3000);
</code></pre><p>实例: 使用 clearTimeout() 来阻止函数的执行</p><pre><code class="language-JavaScript line-numbers">var myVar;

function myFunction() {
    myVar = setTimeout(function(){ alert("Hello") }, 3000);
}

function myStopFunction() {
    clearTimeout(myVar);
}
</code></pre><h2>round 方法</h2><p>round 方法</p><p>Math.round() 返回一个数字四舍五入后最接近的整数。</p><pre><code class="language-JavaScript line-numbers">x = Math.round(20.49);   //20
x = Math.round(20.5);    //21
x = Math.round(-20.5);   //-20
x = Math.round(-20.51);  //-21
</code></pre><p>注意，与很多其他语言中的round()函数不同，Math.round()并不总是舍入到远离0的方向（尤其是在负数的小数部分恰好等于0.5的情况下）。</p><h2>setInterval 方法</h2><p>setInterval<br />
setInterval() 方法调用函数或以指定的间隔（以毫秒为单位）来计算表达式。</p><p>它将持续调用该函数，直到调用 clearInterval() 或窗口关闭。</p><pre><code class="language-JavaScript line-numbers">function myAlert() {
   alert("你好 世界");
}
setInterval(myAlert, 3000); // 每个 3 秒执行一次 myAlert
</code></pre><p><strong>提示: 将函数的名称传递给 setInterval 方法时，不带圆括号。</strong></p>

push() 方法

pop() 方法

shift() 方法

unshift() 方法

concat() 方法

forEach() 方法

indexOf() 方法

slice() 方法

replace() 方法

substring() 方法

Window 对象方法

open() 方法

setTimeout() 方法

round 方法

setInterval 方法

发表评论 取消回复 使用cookie技术保留您的个人信息以便您下次快速评论，继续评论表示您已同意该条款

JavaScript方法

发表评论取消回复
使用cookie技术保留您的个人信息以便您下次快速评论，继续评论表示您已同意该条款