文分享自華為云社區(qū)《JavaScript 里三個點 ... 的用法-云社區(qū)-華為云》,作者: Jerry Wang 。
使用 rest 參數(shù),我們可以將任意數(shù)量的參數(shù)收集到一個數(shù)組中,然后用它們做我們想做的事情。引入了其余參數(shù)以減少由參數(shù)引起的樣板代碼。
function myFunc(a, b, ...args) {
console.log(a); // 22
console.log(b); // 98
console.log(args); // [43, 3, 26]
};
myFunc(22, 98, 43, 3, 26);
在 myFunc 的最后一個以 ...為前綴的參數(shù)中,這將導(dǎo)致所有剩余的參數(shù)都放在 javascript 數(shù)組中。
rest 參數(shù)收集所有剩余的參數(shù),因此在最后一個參數(shù)之前添加 rest 參數(shù)是沒有意義的。其余參數(shù)必須是最后一個形參。
rest 參數(shù)可以解構(gòu)(僅限數(shù)組),這意味著它們的數(shù)據(jù)可以解包為不同的變量。
function myFunc(...[x, y, z]) {
return x * y* z;
}
myFunc(1) // NaN
myFunc(1, 2, 3) // 6
myFunc(1, 2, 3, 4) // 6 (fourth parameter is not destructured)
展開運算符用于將可迭代對象(如數(shù)組)的元素擴展到可以容納多個元素的位置。
function myFunc(x, y, ...params) { // used rest operator here
console.log(x);
console.log(y);
console.log(params);
}
var inputs=["a", "b", "c", "d", "e", "f"];
myFunc(...inputs); // used spread operator here
// "a"
// "b"
// ["c", "d", "e", "f"]
一直有多種組合數(shù)組的方法,但是擴展運算符提供了一種用于組合數(shù)組的新方法:
const featured=['Deep Dish', 'Pepperoni', 'Hawaiian'];
const specialty=['Meatzza', 'Spicy Mama', 'Margherita'];
const pizzas=[...featured, 'veg pizza', ...specialty];
console.log(pizzas); // 'Deep Dish', 'Pepperoni', 'Hawaiian', 'veg pizza', 'Meatzza', 'Spicy Mama', 'Margherita'
使用擴展運算符,現(xiàn)在可以使用比 Object.assign() 更短的語法進行淺克隆(不包括原型)或合并對象。
var obj1={ foo: 'bar', x: 42 };
var obj2={ foo: 'baz', y: 13 };
var clonedObj={ ...obj1 };
// Object { foo: "bar", x: 42 }
var mergedObj={ ...obj1, ...obj2 };
// Object { foo: "baz", x: 42, y: 13 }
當(dāng)我們在代碼中看到三個點 (...) 時,它要么是 rest 參數(shù),要么是展開運算符。
有一個簡單的方法來區(qū)分它們:
點擊下方關(guān)注,第一時間了解華為云新鮮技術(shù)~
華為云博客_大數(shù)據(jù)博客_AI博客_云計算博客_開發(fā)者中心-華為云
個點(...)是擴展運算符,是ES6語法,它可以在函數(shù)調(diào)用/數(shù)組構(gòu)造時,將數(shù)組表達式或者string在語法層面展開;還可以在構(gòu)造字面量對象時將對象表達式按照key-value的方式展開。說白了就是把數(shù)組中大括號([])、對象中花括號({})去掉!
//數(shù)組
var nums=[1, 2, 3, 4, 5]
console.log(...nums)
//1 2 3 4 5
//對象
var person={ name: 'A', age: 30 }
console.log({ ...person })
// {name:'A',age:30}
它有什么用呢?
//數(shù)組的復(fù)制
var arr1=['hello']
var arr2=[...arr1]
console.log(arr2)
// ['hello']
//對象的復(fù)制
var obj1={ name: 'A' }
var obj2={ ...obj1 }
console.log(obj2)
// {name:'A'}
//數(shù)組的合并
var arr1=['hello']
var arr2=['world']
var mergeArr=[...arr1, ...arr2]
console.log(mergeArr)
// ['hello','world']
// 對象合并
var obj1={ name: 'A' }
var obj2={ age: 30 }
var mergeObj={ ...obj1, ...obj2 }
console.log(mergeObj)
// {name: "A", age: 30}
、頁面內(nèi)跳轉(zhuǎn)的錨點設(shè)置
頁面內(nèi)的跳轉(zhuǎn)需要兩步:
方法一:
①:設(shè)置一個錨點鏈接<a href="#miao">去找喵星人</a>;(注意:href屬性的屬性值最前面要加#)
②:在頁面中需要的位置設(shè)置錨點<a name="miao"></a>;(注意:a標(biāo)簽中要寫一個name屬性,屬性值要與①中的href的屬性值一樣,不加#)標(biāo)簽中按需填寫必要的文字,一般不寫內(nèi)容
方法二:
①:同方法一的①
②:設(shè)置錨點的位置 <h3 id="miao">喵星人基地</h3>;在要跳轉(zhuǎn)到的位置的標(biāo)簽中添加一個id屬性,屬性值與①中href的屬性值一樣,不加#
方法二不用單獨添加一個a標(biāo)簽來專門設(shè)置錨點 ,只在需要的位置的標(biāo)簽中添加一個id即可。
小案例:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>萌寵集結(jié)號</title>
</head>
<body>
<ul>
<li><a href="#miao">去找喵星人</a></li>
<li><a href="#wang">去找汪星人</a></li>
<li><a href="#meng">其他萌物</a></li>
</ul>
<a name="miao"></a><!--設(shè)置錨點方法1-->
<h3 id="miao">喵星人基地</h3><!--設(shè)置錨點方法2-->
<p>喵喵喵~</p>
<p>喵喵喵~</p>
<p>喵喵喵~</p>
<p>喵喵喵~</p>
<p>喵喵喵~</p>
<p>喵喵喵~</p>
<a name="wang"></a>
<p>汪汪汪~</p>
<p>汪汪汪~</p>
<p>汪汪汪~</p>
<p>汪汪汪~</p>
<p>汪汪汪~</p>
<p>汪汪汪~</p>
<a name="meng"></a>
<p>萌萌萌~</p>
<p>萌萌萌~</p>
<p>萌萌萌~</p>
<p>萌萌萌~</p>
<p>萌萌萌~</p>
<p>萌萌萌~</p>
</body>
</html>
二、跨頁面跳轉(zhuǎn)
①:設(shè)置錨點鏈接,在href中的路徑后面追加:#+錨點名,即可
如:<a href="萌寵集結(jié)號.html#miao">跳轉(zhuǎn)到萌寵集結(jié)號頁面</a>
②:要跳轉(zhuǎn)到的頁面中要設(shè)置錨點,方法見一種的步驟②,兩個方法任選其一。
*請認真填寫需求信息,我們會在24小時內(nèi)與您取得聯(lián)系。