②語(yǔ)義類標(biāo)簽與JavaScript數(shù)據(jù)類型

1 語(yǔ)義類標(biāo)簽(CSS部分)

1.1 定義

?如sectionnavpdivspan,特點(diǎn)是視覺(jué)表現(xiàn)上互相都差不多,主要區(qū)別在于表達(dá)語(yǔ)義的不同。

1.2 正確使用語(yǔ)義標(biāo)簽的好處

?1、增強(qiáng)了可讀性,HTML最初的設(shè)計(jì)場(chǎng)景就是“超文本”;
?2、適宜機(jī)器閱讀,搜索引擎爬蟲更好地獲取到更多有效信息;
?3、正確應(yīng)用語(yǔ)義化結(jié)構(gòu)能讓瀏覽器很好地支持“閱讀視圖功能”,還可以讓搜索引擎的命中率提升,同時(shí),它也對(duì)視障用戶的讀屏軟件更友好。

1.2 語(yǔ)義類標(biāo)簽的一些使用

?1、hgrouph1-h6的作用,hgroup是標(biāo)題組,h1是一級(jí)標(biāo)題,h2是二級(jí)標(biāo)題;
?2、aside是導(dǎo)航性質(zhì)的內(nèi)容;
?3、article,文章主體部分;
?4、abbr標(biāo)簽表示縮寫;
?5、hr表示故事走向的轉(zhuǎn)變或者話題的轉(zhuǎn)變,一般的橫線使用CSS的border來(lái)表示;
?6、strong表示黑體,em表示重音;
?7、blockquote表示段落級(jí)引述內(nèi)容,q表示行內(nèi)的引述內(nèi)容,cite表示引述的作品名;

補(bǔ)充

2 JavaScript數(shù)據(jù)類型

2.1 定義

?JavaScript語(yǔ)言中的每個(gè)值都屬于一種數(shù)據(jù)類型,一共有7種數(shù)據(jù)類型,廣泛用于變量、函數(shù)參數(shù)、表達(dá)式、函數(shù)返回值等場(chǎng)合;
?數(shù)據(jù)類型可以分為原始類型以及引用類型(也稱對(duì)象類型)。

?原始類型與引用類型的差異:

var a = 'hello world';
var b = a;
var a = 'hello javascript';
console.log(a); //hello javascript
console.log(b); //hello world
var obj1 = {
    name: 'jack',
    age: 18
}
var obj2 = obj1;
obj1.name = 'rose';
console.log(obj1.name); //rose
console.log(obj2.name); //rose

原始類型(對(duì)象類型):

2.2 Undefined、Null

?Undefined類型表示未定義,值為undefined;任何變量在賦值前都是Undefined類型;又因?yàn)镴avaScript的代碼undefined是一個(gè)變量,為了避免無(wú)意中被篡改,一般我們用void 0void運(yùn)算符對(duì)給定的表達(dá)式進(jìn)行求值,因?yàn)槭?code>0所以返回undefined)代替undefined,用void 0代替undefined還可以節(jié)省3個(gè)字節(jié)。

?Null類型表示“定義了但是為空”,值為nullNullUndefined的區(qū)別:undefined是訪問(wèn)一個(gè)未初始化的變量時(shí)返回的值,而null是訪問(wèn)一個(gè)尚未存在的對(duì)象時(shí)所返回的值,可以把undefined看作是空的變量,而null看作是空的對(duì)象。

2.3 Boolean

?Boolean類型有兩個(gè)值, truefalse

2.4 String

?String類型用于表示文本數(shù)據(jù),String類型有最大長(zhǎng)度是 2^53 - 1,這個(gè)最大長(zhǎng)度是受字符串的編碼長(zhǎng)度影響的,所以String類型的意義并非“字符串”,而是字符串的 UTF16 編碼,我們字符串的操作charAtcharCodeAtlength等方法針對(duì)的都是 UTF16 編碼。

2.5 Number

?Number類型表示我們通常意義上的“數(shù)字”這個(gè)數(shù)字大致對(duì)應(yīng)數(shù)學(xué)中的有理數(shù),有一定的精度限制;Number類型在基本符合 IEEE754-2008 規(guī)定的雙精度浮點(diǎn)數(shù)規(guī)則的情況下,還引入了Infinity(無(wú)窮大)和-Infinity(負(fù)無(wú)窮大)。

?值得注意的是,JavaScript中有+0-00和負(fù)數(shù)進(jìn)行運(yùn)算時(shí),我們就可以得到-0),我們對(duì)1分別除以+0-0時(shí)會(huì)得到Infinity-Infinity,并且它們并不相等,但是在將+0-0做字符串轉(zhuǎn)換時(shí)我們會(huì)得到一樣的結(jié)果,===比較的結(jié)果也為true+0-0的使用——我們有時(shí)會(huì)用符號(hào)位存儲(chǔ)一些信息,比較向量或速度的方向信息,如速度-0,負(fù)號(hào)代表著運(yùn)動(dòng)的方向,保留了負(fù)號(hào)位可以防止這些信息的丟失。

?為什么0.1+0.2不能=0.3?因?yàn)檫@是使用基于IEEE754數(shù)值的浮點(diǎn)計(jì)算的通病,不能精確表示0.10.2這樣的浮點(diǎn)數(shù),使用這種數(shù)值格式的語(yǔ)言計(jì)算時(shí)使用的是帶有舍入誤差的數(shù)(當(dāng)代碼被編譯或解釋后,0.1會(huì)被四舍五入成一個(gè)與之很接近的數(shù)字),但也不是所有的浮點(diǎn)數(shù)都存在舍入誤差,比如0.5就沒(méi)有舍入誤差;我們盡量不要直接比較兩個(gè)浮點(diǎn)的大小,如果真有需要的話,使用JavaScript提供的最小精度值(檢查等式左右兩邊差的絕對(duì)值是否小于最小精度):

console.log( 0.1 + 0.2 == 0.3); // false
console.log( Math.abs(0.1 + 0.2 - 0.3) <= Number.EPSILON); // true

2.6 Symbol

?Symbol是 ES6 中引入的新類型,表示獨(dú)一無(wú)二的值,它是一切非字符串的對(duì)象key(對(duì)應(yīng)value)的集合,這就是說(shuō),對(duì)象的屬性名現(xiàn)在可以有兩種類型,一種是原來(lái)就有的字符串,另一種就是新增的Symbol類型;還有,每個(gè)Symbol實(shí)例都是唯一的,所以當(dāng)你比較兩個(gè)Symbol實(shí)例的時(shí)候,將總會(huì)返回false;一些使用場(chǎng)景(簡(jiǎn)書一斤代碼先生)。

?注意Symbol函數(shù)前不能使用new命令,否則會(huì)報(bào)錯(cuò)。這是因?yàn)樯傻?code>Symbol是一個(gè)原始類型的值,不是對(duì)象。也就是說(shuō),由于Symbol值不是對(duì)象,所以不能添加屬性。基本上,它是一種類似于字符串的數(shù)據(jù)類型。

?Symbol的迭代器(Iterator)應(yīng)用

var o = new Object;
o[Symbol.iterator] = function() {
      var v = 0;
      return {
          next: function() {
          return { value: v++, done: v > 10 }
          }
      }
};
for(var v of o);
console.log(v); // 0 1 2 3 ... 9

?代碼中我們?cè)诙x了iterator之后,用for(var v of o)就可以調(diào)用這個(gè)函數(shù),然后我們可以根據(jù)函數(shù)的行為,產(chǎn)生一個(gè)forof的行為。

引用類型:

2.7 Object

?在 JavaScript 中,對(duì)象類型的定義是“屬性的集合”。對(duì)象類型的屬性分為數(shù)據(jù)屬性和訪問(wèn)器屬性(在第④章詳細(xì)解析)兩種,二者都是key-value(鍵值對(duì)形式存儲(chǔ)屬性)結(jié)構(gòu),key可以是字符串或者 Symbol類型。

?JavaScript中的幾個(gè)原始類型,都在對(duì)象類型中有一個(gè)“親戚”。它們是NumberStringBooleanSymbol

?如string類型(var a = 'abc';)和string對(duì)象(var a = new String('abc');),3new Number(3) ,它們其實(shí)是不一樣的東西(===不成立);JavaScript 中的對(duì)象比較(===)和 Java 中是一樣的,只有引用地址相同才相等。當(dāng)比較兩個(gè)引用值時(shí),比較的是兩個(gè)引用地址,看它們引用的原值是否為同一個(gè)副本,而不是比較它們的原值字節(jié)是否相等。只有stringnumberboolean這些原始類型才是可以直接對(duì)值進(jìn)行比較。

?NumberStringBoolean,三個(gè)對(duì)象類型(函數(shù)構(gòu)造器)是兩用的,當(dāng)跟new搭配時(shí),它們產(chǎn)生對(duì)象,當(dāng)直接調(diào)用時(shí),它們表示強(qiáng)制類型轉(zhuǎn)換;Symbol函數(shù)比較特殊,直接用new調(diào)用它會(huì)拋出錯(cuò)誤,但它仍然是 Symbol對(duì)象的構(gòu)造器。

2.8 類型轉(zhuǎn)換 ★

?大部分運(yùn)算都會(huì)涉及類型轉(zhuǎn)換。其中的 ==運(yùn)算,如果類型不一樣,總是試圖去做類型轉(zhuǎn)化,里面的規(guī)則非常復(fù)雜,很容易造成一些代碼中的判斷失誤,所以不推薦直接使用==運(yùn)算,推薦進(jìn)行顯式的類型轉(zhuǎn)換后,再用===比較;而其它運(yùn)算,如加減乘除大于小于,也都會(huì)涉及類型轉(zhuǎn)換,所幸的是,實(shí)際上大部分類型轉(zhuǎn)換規(guī)則比較簡(jiǎn)單,較為復(fù)雜的部分是NumberString之間的轉(zhuǎn)換,以及對(duì)象跟原始類型之間的轉(zhuǎn)換,如下表所示:

相互轉(zhuǎn)換

2.8.1 StringToNumber

?字符串到數(shù)字的類型轉(zhuǎn)換,有三種方法:Number()parseInt()parseFloat();類型轉(zhuǎn)換支持十進(jìn)制(30)、二進(jìn)制(0b111)、八進(jìn)制(0o13)、十六進(jìn)制(0xFF)、正負(fù)號(hào)科學(xué)計(jì)數(shù)法(1e3或-1e-2),其中Number()可以用于任何數(shù)據(jù)類型轉(zhuǎn)換成數(shù)值,parseInt()處理整數(shù)時(shí)更常用,parseFloat()專門用于把字符串轉(zhuǎn)換成數(shù)值。

?parseInt()在不傳入第二個(gè)參數(shù)的情況下,只支持16進(jìn)制前綴 “0x” ,而且會(huì)忽略非數(shù)字字符,也不支持科學(xué)計(jì)數(shù)法,所以建議使用時(shí)傳入parseInt()的第二個(gè)參數(shù)(如:parseInt("10",16)//按十六進(jìn)制解析;parseInt("10",8)//按八進(jìn)制解析);parseFloat()則直接把原字符串作為十進(jìn)制來(lái)解析,它不會(huì)引入任何的其他進(jìn)制,一些例子如下:

var num1 = Number("Hello World"); //NaN
var num2 = Number(""); //0
var num3 = Number("000011"); //11
var num4 = Number(true); //1

var num1 = parseInt("He was 40"); //NaN
var num2 = parseInt("40 years"); //40
var num3 = parseInt("34 45 66"); //34
var num4 = parseInt("10", 10); //10

var num5 = parseInt("10", 8); //8
var num6 = parseInt("10"); //10
var num7 = parseInt("010"); //10

var num1 = parseFloat("1234blue"); //1234
var num2 = parseFloat("0xA"); //0
var num3 = parseFloat("0908.5"); //908.5
var num4 = parseFloat("3.125e7"); //31250000

?總的來(lái)講,Number()parseInt()parseFloat()更常用。

2.8.2 裝箱轉(zhuǎn)換與拆箱轉(zhuǎn)換(對(duì)象類型)

2.8.2.1 拆箱轉(zhuǎn)換

?定義:把對(duì)象類型轉(zhuǎn)換為原始類型稱為拆箱。

?方法:toPrimitive(input,preferedType),該方法有兩個(gè)參數(shù),input(輸入對(duì)象) 和 preferedTypeString或者Number,默認(rèn)為Number);在preferedType為默認(rèn)的情況下,如果 input 輸入的是對(duì)象或者String類型,則會(huì)嘗試調(diào)用valueOf,如果是原始值則直接返回,不是則使用 toString(如果不是原始值,調(diào)用input.toString()方法,如果是原始值直接返回)來(lái)獲得拆箱后的原始類型。如果valueOftoString都不存在(方法被覆蓋),或者沒(méi)有返回原始類型,則會(huì)產(chǎn)生類型錯(cuò)誤;如果 preferedType值為String,而且輸入的是String類型,會(huì)優(yōu)先調(diào)用toString,再到valueOf

?在 ES6 之后,還允許對(duì)象通過(guò)顯式指定@@toPrimitive Symbol來(lái)覆蓋方法原有的行為(valueOftoString)。

o[Symbol.toPrimitive] = () => {console.log("toPrimitive"); return "hello"}

2.8.2.1 裝箱轉(zhuǎn)換

?定義:把原始類型轉(zhuǎn)換為對(duì)應(yīng)的對(duì)象類型的操作稱為裝箱。

?原理:每一種原始類型NumberStringBoolean在對(duì)象中都有相應(yīng)的類。

?方法:.toString()方法;例如

1 .toString() => '1';

?注意1后面有個(gè)空格,無(wú)則報(bào)錯(cuò);調(diào)用過(guò)程把1進(jìn)行裝箱操作轉(zhuǎn)換成Number()的臨時(shí)對(duì)象。

2.8.2.3 typeof運(yùn)算

?typeof方法的運(yùn)算結(jié)果和運(yùn)行時(shí)(runtime)所表示出的類型:

?總結(jié)如下:

?1、typeof不能區(qū)分對(duì)象、數(shù)組、正則,對(duì)它們操作都返回object

?2、String/Number/Boolean/Undefined/Object/function返回的字符串形式分別為:string/number/boolean/undefined/object/function

?3、特殊情況:

typeof 1/0; // NaN(這個(gè)NaN不是字符串類型,是數(shù)值類型)
typeof typeof 1/0; // NaN(這個(gè)NaN不是字符串類型,是數(shù)值類型)
typeof (1/0); // " number"
typeof typeof (1/0); // " string"
typeof (typeof1/0); // " number"
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。