js高級(jí)第二天
1.數(shù)組方法
find
找滿足條件的數(shù)組中第一個(gè)元素 找到了之后 不會(huì)再繼續(xù)往下遍歷
沒找到返回undefined
const arr = [
{ username: '悟空', height: 70 },
{ username: '八戒', height: 60 },
{ username: '龍馬', height: 30 },
{ username: '龍馬', height: 30 }
]
const obj = arr.find((value) => value.height === 60);
console.log(obj);//{ username: '八戒', height: 60 }
findIndex
找符合條件的第一個(gè)元素的下標(biāo) 找到返回這個(gè)元素的下標(biāo) 沒找到返回-1
const index = arr.findIndex((value) => value.height === 660);
console.log(index);//-1
includes
判斷一個(gè)數(shù)組是否包含一個(gè)指定的值
const arr = ['a', 'b', 'c', 'd'];
const result = arr.includes('e');
console.log(result);//false
indexOf
搜索數(shù)組中的元素 并返回某個(gè)數(shù)據(jù)在數(shù)組中的位置 找到了 就返回這個(gè)元素的下標(biāo) 沒有找到則返回 -1
const arr = ['a', 'b', 'c', 'd'];
const index = arr.indexOf('h');
console.log(index);
join
將數(shù)組元素串聯(lián)成一個(gè)字符串
參數(shù)可選 不寫參數(shù)或傳入undefined,則使用逗號(hào)作為分隔符
const arr = ['a', 'b', 'c'].map((value) => `<li>${value}</li>`);
// const arr = ['<li>a</li>', '<li>b</li>', '<li>c</li>'];
const result = arr.join('');
console.log(result);//<li>a</li><li>b</li><li>c</li>
2.Set對(duì)象
Set本身是一個(gè)對(duì)象 存放數(shù)據(jù) 數(shù)據(jù)永遠(yuǎn)不會(huì)重復(fù) 將Set當(dāng)成是一個(gè)數(shù)組處理
把Set轉(zhuǎn)成真正數(shù)組:const arr=[...set] 再使用map find findIdex等方法
數(shù)組轉(zhuǎn)Set對(duì)象:const set=new Set([1,2,3,4])
Set對(duì)象添加數(shù)據(jù)方法:使用add方法 一次添加一個(gè)數(shù)據(jù)
set.add(1)
set.add(2)
set.add(3)
const list = [1, 4, 5, 8];
// Set對(duì)象需要new出來使用
const set = new Set(list);
console.log(set);
set.add(2)//一次只能添加一個(gè)數(shù)據(jù)
console.log(set);
3.構(gòu)造函數(shù)
構(gòu)造函數(shù)定義
本質(zhì) 是一個(gè)函數(shù)
作用 用來創(chuàng)建對(duì)象
規(guī)范 首字母大寫
常見構(gòu)造函數(shù):Set Array Object String Number Boolean Date
只要它被new 它就是構(gòu)造函數(shù)
被new出來的對(duì)象 叫實(shí)例
構(gòu)造函數(shù)的this
構(gòu)造函數(shù) 默認(rèn)情況下 就是返回了 this
this 指向new出來的實(shí)例
只要給構(gòu)造函數(shù)中的this添加屬性或者方法 那么實(shí)例自然擁有對(duì)應(yīng)的屬性和方法
構(gòu)造函數(shù)的原型
原型本質(zhì)是一個(gè)對(duì)象
當(dāng)我們在創(chuàng)建一個(gè)構(gòu)造函數(shù)的時(shí)候 原型也被創(chuàng)建
如果我們在原型對(duì)象上增加一個(gè)屬性或者方法 那么實(shí)例也擁有了所增加的屬性或方法
使用面向?qū)ο蟮姆绞絹韯?chuàng)建對(duì)象:構(gòu)造函數(shù)內(nèi)部定義非函數(shù)類型的屬性 原型來定義函數(shù)類型的屬性
function Person() {
this.hair = 100;
}
// 原型
Person.prototype.decrease=function(){
this.hair--;
}
面向?qū)ο笏季S---點(diǎn)擊按鈕使圖片放大
javascript
<button>放大</button>
<script>
function MyImg(src) {
// body標(biāo)簽上能出現(xiàn)一張圖片
const img = document.createElement('img');
img.style.transition = '2s';
// 設(shè)置 圖片地址
img.src = src;
// 在body標(biāo)簽上看見這一張圖片
document.body.append(img);
this.abc = img;
}
// 原型上寫一寫函數(shù)
MyImg.prototype.scale = function (num) {
// 獲取到 構(gòu)造函數(shù)中 創(chuàng)建的 img dom元素 - 提前把img dom 添加到 this的屬性中
this.abc.style.transform = `scale(${num})`;
};
const myImg = new MyImg('./images/1.png'); // body標(biāo)簽上能出現(xiàn)一張圖片
const myImg2=new MyImg("./images/1.png");
const button = document.querySelector('button');
button.addEventListener('click', function () {
// myImg.scale(2);//
myImg.scale(3); // 3 倍
myImg2.scale(5);
});
</script>
