JavaScript位置與大?。?）之正確理解和運用與尺寸大小相關(guān)的DOM屬性
在web開發(fā)中，不可避免遇到要計算元素大小以及位置的問題，解決這類問題的方法是利用DOM提供的一些API結(jié)合兼容性處理來，所有內(nèi)容大概分3篇左右的文章的來說明。本文作為第一篇，介紹DOM提供的與尺寸大小相關(guān)的DOM屬性，提供一些兼容性處理的方法，并結(jié)合常見的場景說明如何正確運用這些屬性。
1. 正確理解offsetWidth、clientWidth、scrollWidth及相應(yīng)的height屬性
假設(shè)某一個元素的橫縱向滾動條都拖動到最末端，則offsetWidth、clientWidth、scrollWidth等屬性相應(yīng)的范圍如下圖所示：
1）offsetWidth ，offsetHeight對應(yīng)的是盒模型的寬度和高度，這兩個值跟我們使用chrome審查元素時看到的尺寸一致：
2）scrollWidth，與scrollHeight對應(yīng)的是滾動區(qū)域的寬度和高度 ， 但是不包含滾動條的寬度！滾動區(qū)域由padding和content組成。
3）clientWidth，clientHeight對應(yīng)的是盒模型除去邊框后的那部分區(qū)域的寬度和高度，不包含滾動條的寬度。
4）任何一個DOM元素，都可以通過以下api快速得到offsetWidth，clientWidth，scrollWidh及相關(guān)的height屬性：
//domE為一個DOM Html Element對象
domE.scrollWidth
domE.scrollHeight
domE.clientWidth
domE.clientHeight
domE.offsetWidth
domE.offsetHeight
//domE為一個DOM Html Element對象
domE.scrollWidth
domE.scrollHeight
domE.clientWidth
domE.clientHeight
domE.offsetWidth
domE.offsetHeight
5） 這些屬性在現(xiàn)代瀏覽器包括pc和mobile上幾乎沒有兼容性問題，可以放心使用 。如果你想了解詳細的兼容性規(guī)則，可以參考下面的2篇文章：
W3C DOM Compatibility – CSS Object Model View
cssom視圖模式cssom-view-module相關(guān)整理與介紹
下面針對普通html元素，html根元素和body元素的以上相關(guān)屬性一一測試，以便驗證前面的結(jié)論，總結(jié)一些可在實際編碼過程中直接使用的經(jīng)驗技巧。之所以要區(qū)分普通html元素，html根元素和body元素，是因為前面的理論，在html根元素和body元素會有一些怪異之處，需要小心處理。
注：
1、為了減少篇幅，測試貼出的代碼不是完整的代碼，但不影響學(xué)習(xí)參考，另外文中給出的測試結(jié)果都是在chrome（版本：45.0）下運行得出的，在測試結(jié)果有差異的情況下，還會給出IE9，IE10，IE11，firefox（版本：42.0），opera（版本：34.0）的測試結(jié)果，沒有差異的會在測試結(jié)果中說明，不考慮IE8及以下。
2、safari因為設(shè)備限制暫不測試，另外它跟chrome內(nèi)核相同，對標(biāo)準(zhǔn)支持的可靠性差不到哪去。
3、老版本的chrome,firefox,opera也因為設(shè)備的限制無法測試，不過從瀏覽器對標(biāo)準(zhǔn)的支持程度考慮，這三個瀏覽器在很早的版本開始對W3C的標(biāo)準(zhǔn)都是比較規(guī)矩的，加之這些瀏覽器更新?lián)Q代的速度較快，現(xiàn)在市面上這些瀏覽器主流的版本也都是較新的。
4、由于不考慮IE8及以下，同時html現(xiàn)在都用html5，所以document.compatMode = ‘BackCompat' 的情況不考慮。不過盡管BackCompat模式是IE6類的瀏覽器引出的，但是對于chrome，firefox等也存在document.compatMode = ‘BackCompat' 的情況，比如下面的這個網(wǎng)頁，你用chrome打開，并且在console中打印document.compatMode，你會發(fā)現(xiàn)它的值也是BackCompat（原因跟該頁面用的是html4.0的dtd有關(guān)，如果換成html4.01的dtd就不會在chrome和firefox里出現(xiàn)該情況了）：
http://samples.msdn.microsoft.com/workshop/samples/author/dhtml/refs/compatModeCompat.htm
更多關(guān)于compatMode的知識，你可以通過下面的幾個資源學(xué)習(xí)：
https://developer.mozilla.org/zh-CN/docs/Web/API/Document/compatMode
https://msdn.microsoft.com/en-us/library/ms533687(VS.85).aspx
http://www.cnblogs.com/uedt/archive/2010/09/21/1832402.html
測試一、驗證普通html元素（非body及html根元素）的offsetWidth、clientWidth、scrollWidth及相關(guān)height屬性：
<style type="text/css">
html,
body {
margin: 0;
}
body {
padding: 100px;
}
.box {
overflow: scroll;
width: 400px;
height: 300px;
padding: 20px;
border: 10px solid #000;
margin: 0 auto;
box-sizing: content-box;
}
.box-2 {
border: 1px solid #000;
}
</style>
<body>
<div class="box">
<div class="box-2">...</div>
</div>
</body>
<script type="text/javascript">
var boxE = document.querySelectorAll('.box')[0];
console.log('scrollWidth:' + boxE.scrollWidth);
console.log('scrollHeight:' + boxE.scrollHeight);
console.log('clientWidth:' + boxE.clientWidth);
console.log('clientHeight:' + boxE.clientHeight);
console.log('offsetWidth :' + boxE.offsetWidth);
console.log('offsetHeight:' + boxE.offsetHeight);
</script>
<styletype="text/css">
html,
body{
margin: 0;
}
body{
padding: 100px;
}
.box{
overflow: scroll;
width: 400px;
height: 300px;
padding: 20px;
border: 10px solid #000;
margin: 0 auto;
box-sizing: content-box;
}
.box-2{
border: 1px solid #000;
}
</style>
<body>
<divclass="box">
<divclass="box-2">...</div>
</div>
</body>
<scripttype="text/javascript">
var boxE = document.querySelectorAll('.box')[0];
console.log('scrollWidth:' + boxE.scrollWidth);
console.log('scrollHeight:' + boxE.scrollHeight);
console.log('clientWidth:' + boxE.clientWidth);
console.log('clientHeight:' + boxE.clientHeight);
console.log('offsetWidth :' + boxE.offsetWidth);
console.log('offsetHeight:' + boxE.offsetHeight);
</script>
在這個例子中，box元素有400*300的寬高，20px的padding和10px的border，chrome下對應(yīng)的盒模型：
js執(zhí)行結(jié)果：
從盒模型與js執(zhí)行結(jié)果可知：
1）offsetWidth與offsetHeight與chrome審查元素看到的尺寸完全一致；
2）clientWidth與clientHeight分別等于offsetWidth與offsetHeight減掉相應(yīng)邊框（上下共20px，左右共20px）和滾動條寬度后的值（chrome下滾動條寬度為17px）；
3）對于scrollWidth由于沒有發(fā)生橫向的溢出，同時由于overflow: scroll的原因，scrollWidth 跟clientWidth相同，但是沒有包含滾動條的寬度，這也驗證了前面提出的結(jié)論；
4）對于scrollHeight，在這個例子中，它其實等于上下padding（共40px） + div.box-2的offsetHeight(1370px)，div.box-2：
5）以上測試還有一個css值得注意，就是box-sizing，以上代碼中box-sizing設(shè)置為了content-box，如果把它改成border-box，結(jié)果也是類似的，因為offsetWidth，clientWidth還有scrollWidth對應(yīng)的區(qū)域不會發(fā)生改變。
6）其它瀏覽器運行結(jié)果與1-5的結(jié)論一致。
測試二、驗證html根元素和body元素的相關(guān)offset client scroll寬高屬性：
<style type="text/css">
html,
body {
margin: 0;
}
body {
border: 10px solid #D4D2D2;
}
.box {
overflow: scroll;
width: 400px;
height: 300px;
padding: 20px;
border: 10px solid #000;
margin: 0 auto;
box-sizing: content-box;
}
.box-2 {
border: 1px solid #000;
}
</style>
<body>
<div class="box">
<div class="box-2">...</div>
</div>
<div class="box">
<div class="box-2">...</div>
</div>
<div class="box">
<div class="box-2">...</div>
</div>
<div class="box">
<div class="box-2">...</div>
</div>
</body>
<script>
console.log('docE.scrollWidth:' + document.documentElement.scrollWidth);
console.log('scrollHeight:' + document.documentElement.scrollHeight);
console.log('docE.clientWidth:' + document.documentElement.clientWidth);
console.log('docE.clientHeight:' + document.documentElement.clientHeight);
console.log('docE.offsetWidth :' + document.documentElement.offsetWidth);
console.log('docE.offsetHeight:' + document.documentElement.offsetHeight);
console.log('');
console.log('body.scrollWidth:' + document.body.scrollWidth);
console.log('body.scrollHeight:' + document.body.scrollHeight);
console.log('body.clientWidth:' + document.body.clientWidth);
console.log('body.clientHeight:' + document.body.clientHeight);
console.log('body.offsetWidth :' + document.body.offsetWidth);
console.log('body.offsetHeight:' + document.body.offsetHeight);
</script>
<styletype="text/css">
html,
body{
margin: 0;
}
body{
border: 10px solid #D4D2D2;
}
.box{
overflow: scroll;
width: 400px;
height: 300px;
padding: 20px;
border: 10px solid #000;
margin: 0 auto;
box-sizing: content-box;
}
.box-2{
border: 1px solid #000;
}
</style>
<body>
<divclass="box">
<divclass="box-2">...</div>
</div>
<divclass="box">
<divclass="box-2">...</div>
</div>
<divclass="box">
<divclass="box-2">...</div>
</div>
<divclass="box">
<divclass="box-2">...</div>
</div>
</body>
<script>
console.log('docE.scrollWidth:' + document.documentElement.scrollWidth);
console.log('scrollHeight:' + document.documentElement.scrollHeight);
console.log('docE.clientWidth:' + document.documentElement.clientWidth);
console.log('docE.clientHeight:' + document.documentElement.clientHeight);
console.log('docE.offsetWidth :' + document.documentElement.offsetWidth);
console.log('docE.offsetHeight:' + document.documentElement.offsetHeight);
console.log('');
console.log('body.scrollWidth:' + document.body.scrollWidth);
console.log('body.scrollHeight:' + document.body.scrollHeight);
console.log('body.clientWidth:' + document.body.clientWidth);
console.log('body.clientHeight:' + document.body.clientHeight);
console.log('body.offsetWidth :' + document.body.offsetWidth);
console.log('body.offsetHeight:' + document.body.offsetHeight);
</script>
在這個例子中，body下一共有4個box元素（總高度為360 * 4 = 1440px），body的寬是自適應(yīng)的，body還有10px的border，運行結(jié)果如下：
從這個結(jié)果可以看到：
1）body元素由于10px邊框的原因，所以clientWidth比offsetWidth少了20px，這跟前面提到的理論是一致的，但是不可思議的是body的scrollWidth/scrollHeight竟然等于它的offsetWidth/offsetHeight，scrollWidth/scrollHeight是元素滾動區(qū)域的寬高度，按照前面給出的范圍圖來理解，body的scrollWidth/scrollHeight應(yīng)該小于它的offsetWidth/offsetHeight才對；
2）docE的scrollWidth跟scrollHeight，應(yīng)該等于body元素的offsetWidth跟offsetHeight，從運行結(jié)果來看，這一點是符合的，但是docE的clientWidth竟然等于它的offsetWidth，按照范圍圖，docE的clientWidth應(yīng)該等于offsetWidth減去滾動條寬度才對。
其它的瀏覽器運行結(jié)果與chrome也有較大的差異：
IE11：
1）IE11下body元素沒有出現(xiàn)chrome下body元素的問題
2）IE11下html根元素也有chrome類似的問題
IE10，IE9:
1）IE10,9下body元素沒有出現(xiàn)chrome下body元素的問題
2）IE10,9下html根元素也沒有chrome類似的問題
firefox：與IE11運行結(jié)果一致。
opera： 與chrome運行結(jié)果一致，可能是因為我這個版本的opera用的跟chrome一樣的webkit內(nèi)核的原因。
看起來IE9就跟IE10是最正常的，實在是有點難以理解，網(wǎng)上搜索很久，也沒有找到相關(guān)資料來說明這些差異， 最后也只能采取大膽假設(shè)的方式，猜測出幾個能解釋這些問題的原因 ：
1） 首先，網(wǎng)頁整體的滾動，跟普通html元素的滾動不一樣，普通html元素自身就是滾動對象， 但是對于網(wǎng)頁來說，滾動對象不一定是html根元素或者body元素。因為當(dāng)body內(nèi)容為空時，body的高度是0，html根元素的高度也是0，如果這個時候給html或body加上overflow: scroll的css，會看到滾動條還是出現(xiàn)瀏覽器窗口的右邊跟底邊，所以對于網(wǎng)頁整體的滾動，理論上，滾動對象應(yīng)該是window，而不是html元素或者body元素！但實際情況并非如此，就測試的瀏覽器而言：
對于IE10，IE9，它的滾動對象是html根元素，所以它們的html根元素的offset會包含滾動條的寬度；
對于其它瀏覽器，滾動對象是window，所以它們的html根元素的offset不包含滾動條的寬度。
2）第二，普通元素發(fā)生滾動時，滾動內(nèi)容=它的content區(qū)域+它的padding區(qū)域，當(dāng)網(wǎng)頁整體滾動時，滾動內(nèi)容應(yīng)該是html根元素！但實際情況也并非如此，就測試的瀏覽器而言：
對于IE9，IE10，IE11，firefox，它們的滾動區(qū)域是html根元素，所以它們的documentElement的scrollWidth和scrollHeight始終表示網(wǎng)頁整體的滾動區(qū)域大小！
對于chrome和opera，它們的滾動對象是body元素，所以它們的body的scrollWidth和scrollHeight始終表示網(wǎng)頁整體的滾動區(qū)域大?。?/p>
3）第三，瀏覽器始終把documentElement.clientWidth和documentElement.clientHeight描述為網(wǎng)頁可視區(qū)域除去滾動條部分的大小，跟網(wǎng)頁內(nèi)容沒有關(guān)系！
以上的這些推斷也并非是毫無道理，就拿滾動對象和滾動區(qū)域來說：chrome下如果要用js滾動頁面到某個位置，在不使用window.scrollTo的條件下，就必須用document.body.scrollTop = xxx 來處理，而設(shè)置document.documentElement.scrollTop無效，說明chrome的整體滾動區(qū)域是由body的滾動區(qū)域決定的；而IE11和火狐下如果要用js滾動頁面到某個位置，在不使用window.scrollTo的條件下，就必須用document.documentElement.scrollTop = xxx來處理，設(shè)置document.body.scrollTop無效，說明IE11和火狐的整體滾動區(qū)域是由html根元素的滾動區(qū)域決定的。
2. 利用JS準(zhǔn)確獲取DOM對象的大小
常見的場景有：
1）獲取整個網(wǎng)頁的可視區(qū)域的大小，不包括滾動條
2）獲取整個網(wǎng)頁的大小，包括不可見的滾動區(qū)域
3）獲取一個普通html元素的大小
4）判斷元素或網(wǎng)頁有無出現(xiàn)滾動條
5）計算滾動條的寬度
下面針對這5個場景一一說明，以下代碼均 不考慮IE8及以下，不考慮html4 ，另外請注意viewport的設(shè)置，要保證在移動設(shè)備上visual viewport與layout viewport重合。
1）如何獲取整個網(wǎng)頁的可視區(qū)域的大小，不包括滾動條
document.documentElement.clientWidth; document.documentElement.clientHeight; document.documentElement.clientWidth; document.documentElement.clientHeight;
2）如何獲取整個網(wǎng)頁的大小，包括不可見的滾動區(qū)域
function pageWidth() {
var doc = document.documentElement,
body = document.body;
if (doc.clientWidth == window.innerWidth) {
return doc["clientWidth"];
}
return Math.max(
body["scrollWidth"], doc["scrollWidth"],
body["offsetWidth"], doc["clientWidth"]
);
}
function pageHeight() {
var doc = document.documentElement,
body = document.body;
if (doc.clientHeight == window.innerHeight) {
return doc["clientHeight"];
}
return Math.max(
body["scrollHeight"], doc["scrollHeight"],
body["offsetHeight"], doc["clientHeight"]
);
}
function pageWidth() {
var doc = document.documentElement,
body = document.body;
if (doc.clientWidth == window.innerWidth) {
return doc["clientWidth"];
}
return Math.max(
body["scrollWidth"], doc["scrollWidth"],
body["offsetWidth"], doc["clientWidth"]
);
}
function pageHeight() {
var doc = document.documentElement,
body = document.body;
if (doc.clientHeight == window.innerHeight) {
return doc["clientHeight"];
}
return Math.max(
body["scrollHeight"], doc["scrollHeight"],
body["offsetHeight"], doc["clientHeight"]
);
}
以上出現(xiàn)的window.innerWidth和window.innerHeight分別用來獲取網(wǎng)頁包括滾動條的可視區(qū)域的寬高，這也是一個兼容性不錯的方法，不過從實際開發(fā)情況來看，我們需要不包括滾動條的可視區(qū)域更多一些，所以在前面沒有單獨介紹。另外在之前給出的PPK的博客中也有關(guān)于這兩個屬性的兼容性測試，可以去了解。
3）如何獲取一個普通html元素的大小
簡單方法：
docE.offsetWidth; docE.offsetHeight; docE.offsetWidth; docE.offsetHeight;
利用getBoundingClientRect：
var obj = docE.getBoundingClientRect(),
elemWidth,
elemHeight;
if(obj) {
if(obj.width) {
elemWidth = obj.width;
elemHeight = obj.height;
} else {
elemWidth = obj.right - obj.left;
elemHeight = obj.bottom - obj.top;
}
} else {
elemWidth = docE.offsetWidth;
elemHeight = docE.offsetHeight;
}
var obj = docE.getBoundingClientRect(),
elemWidth,
elemHeight;
if(obj) {
if(obj.width) {
elemWidth = obj.width;
elemHeight = obj.height;
} else {
elemWidth = obj.right - obj.left;
elemHeight = obj.bottom - obj.top;
}
} else {
elemWidth = docE.offsetWidth;
elemHeight = docE.offsetHeight;
}
getBoundingClientRect將在下篇文章中跟其它與位置有關(guān)的DOM屬性一起再詳細介紹。
4 ）判斷元素或網(wǎng)頁有無出現(xiàn)滾動條
function scrollbarState(elem) {
var docE = document.documentElement,
body = document.body;
if (!elem || elem === document || elem === docE || elem === body) {
return {
scrollbarX: docE.clientHeight window.innerHeight,
scrollbarY: docE.clientWidth window.innerWidth
}
}
if (typeof(Element) == 'function' & !(elem instanceof(Element) || !body.contains(elem))) {
return {
scrollbarX: false,
scrollbarY: false
};
}
var elemStyle = elem.style,
overflowStyle = {
hidden: elemStyle.overflow == 'hidden',
hiddenX: elemStyle.overflowX == 'hidden',
hiddenY: elemStyle.overflowY == 'hidden',
scroll: elemStyle.overflow == 'scroll',
scrollX: elemStyle.overflowX == 'scroll',
scrollY: elemStyle.overflowY == 'scroll'
};
return {
scrollbarX: overflowStyle.scroll || overflowStyle.scrollX || (!overflowStyle.hidden & !overflowStyle.hiddenX && elem.clientWidth elem.scrollWidth),
scrollbarY: overflowStyle.scroll || overflowStyle.scrollY || (!overflowStyle.hidden && !overflowStyle.hiddenY && elem.clientHeight elem.scrollHeight)
};
}
function scrollbarState(elem) {
var docE = document.documentElement,
body = document.body;
if (!elem || elem === document || elem === docE || elem === body) {
return {
scrollbarX: docE.clientHeight window.innerHeight,
scrollbarY: docE.clientWidth window.innerWidth
}
}
if (typeof(Element) == 'function' & !(eleminstanceof(Element) || !body.contains(elem))) {
return {
scrollbarX: false,
scrollbarY: false
};
}
var elemStyle = elem.style,
overflowStyle = {
hidden: elemStyle.overflow == 'hidden',
hiddenX: elemStyle.overflowX == 'hidden',
hiddenY: elemStyle.overflowY == 'hidden',
scroll: elemStyle.overflow == 'scroll',
scrollX: elemStyle.overflowX == 'scroll',
scrollY: elemStyle.overflowY == 'scroll'
};
return {
scrollbarX: overflowStyle.scroll || overflowStyle.scrollX || (!overflowStyle.hidden & !overflowStyle.hiddenX && elem.clientWidth elem.scrollWidth),
scrollbarY: overflowStyle.scroll || overflowStyle.scrollY || (!overflowStyle.hidden && !overflowStyle.hiddenY && elem.clientHeight elem.scrollHeight)
};
}
當(dāng)x或y方向的overflow為scroll的時候，該方向的scrollbarX為true，表示出現(xiàn)滾動條。
5）計算滾動條的寬度
function scrollbarWidth() {
var docE = document.documentElement,
body = document.body,
e = document.createElement('div');
e.style.cssText = 'position: absolute; top: -9999px; width: 50px; height: 50px; overflow: scroll;';
body.appendChild(e);
var _scrollbarWidth = e.offsetWidth - e.clientWidth
body.removeChild(e);
return _scrollbarWidth;
}
function scrollbarWidth() {
var docE = document.documentElement,
body = document.body,
e = document.createElement('div');
e.style.cssText = 'position: absolute; top: -9999px; width: 50px; height: 50px; overflow: scroll;';
body.appendChild(e);
var _scrollbarWidth = e.offsetWidth - e.clientWidth
body.removeChild(e);
return _scrollbarWidth;
}
以上就是本文的全部內(nèi)容，希望能對您有所幫助：）另外本文第二部分提供的代碼，是根據(jù)個人思考和經(jīng)驗總結(jié)出的一些方法，在兼容性方面可能還有未考慮到的地方， 如果您有遇到其它不兼容的情況或者有更好的代碼，還請不吝賜教 ，歡迎您的指導(dǎo)。
相關(guān)文章
javascript cookie解碼函數(shù)（兼容ff）
javascript cookie解碼函數(shù)2008-03-03
uniapp微信小程序無法獲取Vue.prototype值的解決方法
在uniapp開發(fā)過程中,各端的一些高度會有區(qū)別,為了方便就要統(tǒng)一放到全局變量中,下面這篇文章主要給大家介紹了關(guān)于uniapp微信小程序無法獲取Vue.prototype值的解決方法,需要的朋友可以參考下2022-10-10
這篇文章主要介紹了JavaScript訪問字符串中單個字符的兩種方法,本文分別講解了索引方式訪問單個字符串、charAt()函數(shù)訪問單個字符以及兩種方式的不同,需要的朋友可以參考下2015-07-07
這篇文章主要介紹了JavaScript如何向頁面中添加一個按鈕,使用兩種方式向頁面中添加一個按鈕,分別是appendChild()和innerHTML屬性,本文結(jié)合示例代碼介紹的非常詳細,需要的朋友可以參考下2023-10-10
JavaScript console對象與控制臺使用示例詳解
這篇文章主要介紹了JavaScript console對象與控制臺的使用，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)吧2022-10-10
我覺得使用JS截圖的想法是非常荒謬的，首先JS沒有權(quán)限調(diào)用操作系統(tǒng)的截圖功能，其次，瀏覽器（BOM）也沒有提供相關(guān)的截圖接口，經(jīng)過一番折騰，有點思路了，下面通過實例代碼給大家簡單介紹下js 截屏功能的實現(xiàn)代碼，一起看看吧2017-07-07
基于JavaScript實現(xiàn)一定時間后去執(zhí)行一個函數(shù)
在實際需要中可能需要規(guī)定在指定的時間之后再去執(zhí)行一個函數(shù)以達成期望的目的，這也就是一個定時器效果,本文給大家介紹基于JavaScript實現(xiàn)一定時間后去執(zhí)行一個函數(shù)的相關(guān)知識，感興趣的朋友一起學(xué)習(xí)吧2015-12-12
這篇文章主要給大家介紹了關(guān)于微信小程序開發(fā)之組件設(shè)計規(guī)范的相關(guān)資料，對剛?cè)腴T學(xué)習(xí)微信小程序的同學(xué)們還是挺有幫助的，需要的朋友可以參考下2021-05-05
這篇文章主要介紹了JavaScript 判斷瀏覽器是否是IE，幫助大家更好的理解和學(xué)習(xí)前端知識，感興趣的朋友可以了解下2021-02-02
JavaScript中實現(xiàn)數(shù)組分組功能的方法詳解
最近,JavaScript引入了一個備受期待的功能：原生支持?jǐn)?shù)組分組,這一特性使得在處理復(fù)雜的數(shù)據(jù)集時變得更加簡單和高效,本文將深入探討這一全新的JavaScript特性,希望對大家有所幫助2023-12-12