當前位置：首頁 > 前端技术 > javascript >内容正文

javascript

JS随手记

發布時間：2024/3/13 javascript 28 豆豆

生活随笔收集整理的這篇文章主要介紹了 JS随手记小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

typeof
parseInt
parseFloat

number
string
true false
NaN
null
undefined ?(false)

-------------string---
length
charAt(0)第一個字符
charAt(a.length-1) 最后字符
indexOf('字') ?第一次出現索引號
lastIndexOf('字') 最后出現索引號
subString(0,3) 截取字符串內字符,開始，結束
前三個
replace('替換誰','新字');
split(',') ?用逗號分割成片段
例
var old='測試,數據';
var new = aa.split(','); 是數組
new[0];

--------------------array-------
var demo = []; ?(object)
demo.index ? ? ?0 start
demo = ['1','2','3'] ?element
demo.length
demo[0] = 'aaa';
demo.push('aaa'); ?最后+
demo.unshift('bbbb'); ?最前+
demo.pop() ? 返回刪除最后元素后的數組
demo.shift() ?返回刪除最前元素后的數組
delete demo[3] 刪除里面元素，不影響數組長度返回true
demo.splice(3) 徹底刪除，影響長度
demo.concat(合并數組); 合并數組;

.filter() 去篩選符合條件的數據,和 map的區別就是MAP是形成的新數組是原數組結構的映射，不改變原數組結構，而filter形成的新數組會改變原來的結構

const data = [

?{ title: 'aa', rating: 9.7 },
?{ title: 'bb', rating: 9.9 },
{ title: 'cc', rating: 8.8 }

]

const res = data.filter( item => item.rating > 9 );
//定義一個篩選器 item可以隨便取名

-----數組的MAP方法

? /**
? ?* map()：創建一個新數組，這個新數組由原數組中的每個元素都調用一次提供的函數后的返回值組成。
? ?* 例子，當前新的是accessCount 返回的是accessCount.action賦予新的
? ?*/
? const allowedActions = allowAccessCounts
? ? .map(accessCount => accessCount.action)
? ? .map(action => `'${action}'`)
? ? .join(',');

----
join方法用于把數組中的所有元素放入一個字符串，元素是通過指定的分隔符進行分隔的。
分隔符（可選，如果未填寫，則默認為逗號 “，”）

-----------------------if ----

&& ?|| ? ?else if

switch(aaa){
case 'aa':
alert();
break; ? //結束

default:

break;

}

while-----------------------

var i = 0;
while( i < 10 ){

?? ?i++;

? ?if(i % 2 ===0 ? //求余數 ){
?? ?continue; // 跳過當前循環進行下一次循環
? ? }
? ?console.log(i);

}

for 循------------------------------

let week = ['zhou1','zhou2','zhou3'];
for (var i = 0; i<week.length; i++){

?? ?console.log(week[i]);
}

for in 循環---------------

for ( var pro in aaa ?//aaa是數組 ){
?? ?console.log(aaa[pro]); //以此打印出數組每個
?? ?console.log(pro); ? //注意pro不是下標，而是字符串。

}

function -----函數---------------------

function aaa(b){
?? ?alert(b);
}

aaa();

表達式方式
var msg = 'hello';
var abc = function(){
?? ?alert(msg); ? ?//函數內可以訪問函數外變量
?? ?var new = 'hai'; ?//函數外不可以訪問函數內的變量
}

alert(new); ?//xxxx函數外不可以訪問函數內的變量
abc();

對象 ?object-------------

var byd ={?
time:'1983',
age:'18',
art: ['jack','lun','zhao'] ? //數組屬性

}; ?//設置屬性
或byd.time='1983'; ?或 byd['time'] = '1983';

byd.art[0]; //訪問對象里的數組
delete byd.age; //刪除對象里的屬性

byd.show = function(){ ? ?//用函數作為對象的屬性
?? ?
?? ?for (var i = 0; i<this.art.length;i++){

?? ??? ?document.writeln(this.art[i]);?? ??? ?

?? ?}
}

byd.show(); ?//屬性直接調用

--------------document的操作

getElementById("aaa") ?//返回對象
getElementByTagName('li') ?

querySelector ? //返回找到的第一個元素

querySelectorAll ?//返回所有

document.querySelectorAll('.aaa li')

var aaa = getElementById("aaa");
aaa.nodeName ?//返回節點的元素名稱
aaa.innerText = 'aaa' ?//里面文字
aaa.parentNode ?//找到他的父節點
aaa.previousElementSibling ?// 上一個兄弟
aaa.nextElementSibling ?// 上一個兄弟
<h1>11111</h1>
<p>222222</p>

查看子節點
<body>
<ul class="aaa">
<li>bbb</li>
<li>bbb</li>
<li>bbb</li>
<li>bbb</li>
</ul>
</body>
var aaa = document.querySelector(".aaa");
alert(aaa.childNodes);

統計有多少元素的子節點
aaa.childElementCount ? //返回數字
aaa.firstElementChild //第一個子節點可重新賦值
aaa.lastElementChild //第一個子節點

createElement('li') //創建元素類型節點
createTextNode('aaa') //創建文本類型的子節點

removeChild('<li>') //刪除元素節點?
appendChild('<li>') ?// 拼接到元素的最后
document.querySelector('.aaa').appendChild(bbb);
insertBefore ?// 插入元素

var ccc = document.querySelector('.aaa');

ccc.insertBefore( 新的元素,ccc.firstChild ?//具體的位置);?
yuan.parentNode.insertBefore(title,yuan.previousSibling);
? //大概的意思

-----event------

onclick
onmouseover
onmouseout

window.onload = function(){
var btn = document.querySelecor('.btn');
btn.onclick = function(){
?? ?console.log('clicked');
}?

//addEventListensr對象綁定事件，批量綁定

function showMsg(event){ ?//返回事件對象event
?? ?console.log(event);
?? ?console.log(event.target.alt); //圖像的alt屬性 ?//例
?? ?event.stopPropagation(); //停止事件的傳播
}
btn.addEventListener( 'click',showMsg,false ?//事件的傳播 false為冒泡 ?true為捕獲 ); //返回事件對象event

}
?
事件傳播，冒泡，由內而外，有下向上，
img > li > ul

事件捕獲方式

?ul 》 ?li > img

如果在ul和img上都綁定了onclick，事件傳播和觸發的順序

preventDefault ? //去掉事件的默認行為
比如點擊A標簽瀏覽器的鏈接跳轉效果，

總結

以上是生活随笔為你收集整理的JS随手记的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。