js 知識點整理

1.js借鑒了c及c語言,

2.區(qū)分大小寫,? ??結尾 ';' 需加上,雖不是必須的,但在壓縮會報錯,增進性能

3.變量命名

? ?(采用駝峰命名,userName)? 開頭(字母? $? _) 中間部分(字母,數字? $? _)

4.注釋

//? 單行注釋

/*

* 多行注釋

*

*/

5.嚴格模式

function(){

? ? "user strict"? ? // 告訴js引擎切換到嚴格模式

? ? // 函數體

}

6.js變量? (是松散類型的,可以保存任何類型的數據)

使用typeof 可識別數據類型? ? ?typeof '123'? // string

基本數據類型值

基本數據類型

undefined? ? ? ? // 未申明定義? ? 派生自null

null? ? ? ? ? ? ? ? ? ?// 未定義的對象? 表示空對象指針,用來初始空對象

string? ? ? ? ? ? ? ?// 字符串? ? 轉字符串??'123'.toString() [正常使用這個,性能考慮]? ?123+''?常用方法鏈接

number? ? ? ? ? ? // 數字? ?NaN? ?非數值但為number類型? ? 1+'ab' = NaN?判斷是否為數字?isNan(123)?// false?

字面量格式:八進制? 070? // 56? ? 十進制? ? 十六進制

浮點數和整數? ?0.3? ? ? 3e-2 / 0.03? ? ? ?3e5 / 300000? ? 3*10*5

數值范圍? ? 5e-324? ? ? 1.79769313482623157e+308? ? ? ?

?常使用 轉換? ? ?parseInt('123')? ? ? (不常用 :Number() 可轉換任何類型數據? ?parseFloat() 浮點數轉換)boolean? ? ? ? ? ?// 布爾? ? true/false? 邏輯判斷時? ?1 '123'? 為true ,? ?0? ''? undefined? null? 為false

復雜數據類型

object

引用數據類型值 (對象? 數組? 函數)

A 對象

let obj = {name:'張三', age:18,01:21};

let name = obj.name; // 張三

let ages = 'age'

let age? = obj[ages];? // 18? 如果為變量 則使用 [變量]

let a01 = obj[01]; //21. obj.21 會報錯,對象中可用數字作為屬性,取值[]

正常情況 使用 '.屬性'(建議使用),如果需要使用變量 則使用? ['屬性']

obj.age = 20; // 重新賦值age

if(typeof obj.age){} // typeof 用來判斷是否存某個屬性

B 數組? ?方法鏈接

let arry = ['張三',123,true,{age:10},undefined]; // 數組下標是從0開始

let name = arry[0]; ????// 獲取數組值,通過[]張三

arry[3] = {age:200};????// 數組重新賦值之后? ['張三',123,true,{age:200},undefined]

數組常用方法??


C 函數

function demoWay(a,b){

? ? ? ? //? demoWay 實參

? ? ? ? // arguments? 實數

????????console.log('這里是進行打印');

}

命名函數? ?var a = function b (){}

匿名函數(一般常用)? var a = function(){}

8.獲取元素的常用方法

document.getElementsById('wrap');? ? // <div id='wrap'></div>

getElementsByClassName('info');????// 不兼容ie8以下? <div class='info'></div>

?getElementsByTagName('p');? ? ? ? // <p></p>

getElementsByName('main');? ? ? ? // <div name='main'></div>

9. 操作各種樣式

內部樣式

<style id='sty'></style>

let osty = document.getElementsById('sty');

osty.innerHTML = "#wrap{height:200px; width:200px; background:red}";// style也屬于html標簽(很少使用)

行內樣式

<style>

? ? #wrap.main{background:yellow; font-weight:600};

</style>

<div id = 'wrap' myname='alia'></div>

let owrap = document.getElementsById('wrap');

改變屬性值 owrap.屬性值(應為合法的屬性才有效,例 title? id? ? className? ?與保留值class類似)?

owrap.id = 'one-wrap'; // 改變了id值, 對象是不變的,owrap 還有效

改變自定義標簽屬性值

setAttribute('myname','alia2'); // 單個? ?setAttribute({'name1':'n1','name2':'n2'});

getAttribute('myname');? ?removeAttribute('myname');

改變樣式

owrap.style.height='100px'; // 單個行內樣式;

owrap.style.cssText += "height:200px; color:blue"; // += 樣式不會被覆蓋

owrap.className = 'main'; // 通常寫好樣式,改變calss名稱進行改變樣式,樣式不會出現(xiàn)不兼容問題

10 獲取標簽值,改變標簽值

owrap.innerHTML = '<strong>這里是內容</strong><i>附加內容</i> \t哈哈哈';

// 可識別標簽??這里是內容?哈哈哈??? \ 作為轉義符(一般用于特殊符號)?

owrap.innerText = '<strong>這里是內容</strong><i>附加內容</i> \t哈哈哈';

//???<strong>這里是內容</strong>? 不能識別標簽

<input value='我是好人' class='user-name' />

document.getElementsByClassName('user-name').value('我不是好人'); // 賦值? ?取值直接value()

11 運算符與拼接? +? -? ?*? ?/? %

10/3? ? // 3.13333

10%3? // 1? ?% 模 相當于余數

隱式類型轉換?

1+2+'8'; // 38

1+2+'8'+1+2 // 3812? ?字符串后有數字 會先把數組轉為字符串進行累加

1+true? // 2? ? ? 與布爾類型累加,會先轉數字類型再進行累加, true 1? false 0

-? *? ?/? %? ?會把字符串先 Number() 轉之后再進行運算

'20'-'5' = 15;

'20p' - '5' = NaN;

11 自增 自減

a++? ? 先執(zhí)行后自加? ?++a 先自加再執(zhí)行? ?let a = 10; let b = a++; // b: 10? let b = ++a; // b: 11

a--? ? 先執(zhí)行后自減? ?--a 先自減再執(zhí)行???let a = 10; let b = a--; // b: 10? let b = --a; // b: 9

12 運算符

if ( true && false)? ? ? //? false, 只要有一個假為假

if(true || false)? ? ?//? ? true 只要有一個真為真

if( ! true)? ? ? ? ? ? ? ? // false 取反

let a = 1 && 0 &&? 2? // 0? ?一直向后取值,當遇到假停止,并取當前值,如若沒有假值則取最后一位

let a = 1 || 0 || 2 // 1??一直向后取值,當遇到真停止,并取當前值,如若沒有真值則取最后一位

let a = !0? ? // true? ? 去數據相對應的布爾值? (相對應的false值:? ?undefind? null? ?0? ''? Nan? ?false?)

13 運算符優(yōu)先

.? []? ?()? ? ? ? ? ? // 一般用于取值 數組對象

++? --? ?!? ?typeOf()

*? ?/? ?%

+? -??

>=? ?<=? ?>? ? <

&&

||?

,? ? ? ? ? ? // let a = (1,2,3,4);? 結果為4? ?‘,’取最后一位,

例子:

let b = 4

let? ?a =? 10 ||? 8 && (b=5); // a10, b 4? ? 先進行計算 && ,取false,無false值,取b=5,? ?10|| (b=5), || 取 true值,10,不進行執(zhí)行b=5;

let c = !b + 5;? // 5? ?!b = false -> false+5 ->? 0+5 = 5;

let d3 = (2,10 && 0 || 8 && !5); // false? ?->(2, 0 || !5) ->(2,!5) -> (2,false) -> false


12 es 6? 拼接? 反義符

let a = 'zhang';

'<p>

? ? <a>點擊${name}</a>

</p>


7.判斷

var age = 19;

// 三元運算(三目運算)

age>18 ? (a='成年人',b='18歲以上') : (a='未成年人',b='18歲以下');?

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯(lián)系作者
【社區(qū)內容提示】社區(qū)部分內容疑似由AI輔助生成,瀏覽時請結合常識與多方信息審慎甄別。
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發(fā)布,文章內容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務。

相關閱讀更多精彩內容

  • pyspark.sql模塊 模塊上下文 Spark SQL和DataFrames的重要類: pyspark.sql...
    mpro閱讀 9,890評論 0 13
  • 一、Python簡介和環(huán)境搭建以及pip的安裝 4課時實驗課主要內容 【Python簡介】: Python 是一個...
    _小老虎_閱讀 6,311評論 0 10
  • SwiftDay011.MySwiftimport UIKitprintln("Hello Swift!")var...
    smile麗語閱讀 4,078評論 0 6
  • 這是我前段時間學習js的知識點的整理,我把它寫成了一個文件,簡書上不知道怎么上傳唉。。。 然后就放在了githup...
    往前走莫回頭_2cd6閱讀 294評論 0 0
  • 在我聽完第二期“關系之道”嘉賓的分享,作為一位哺乳期的媽媽,我心動了,她經歷過的那些困惑和不安和我心底的困惑好類似...
    小花的星辰大海閱讀 655評論 2 3

友情鏈接更多精彩內容