JavaScript入門(二)

了解對象

對象 { key: value }
對象使用兩個大括號包裹洪鸭, 左邊是屬性名,右邊是屬性值仑扑,用逗號隔開
屬性名和屬性值 又稱為 “鍵值對”览爵,以下為對象的增刪改查

// 創(chuàng)建對象
// 1. 直接聲明
var stu = {
    // 左邊就是起個名字,右邊的是它的實際值
    // 后面的值可以使用任何數(shù)據(jù)類型
    name: "小張",
    age: 17,
    address: function(){}
}
// 2. 使用構(gòu)造函數(shù)創(chuàng)建實例夫壁,先了解
var o = new Object();
console.log(stu);
console.log(o);

// 獲取屬性值
// 用. 或者 [] 的方式獲取屬性值
console.log( stu.name );
console.log( stu["age"] );
console.log( stu.address );

// 添加/修改屬性值, 重新賦值即可
// 特點: 屬性名不能重復(fù), 屬性名不能為純數(shù)字  // stu.10
stu.name = "小明";
stu["name"] = "小李";
// 如果我使用的屬性值以前沒有拾枣,那么就會添加
stu.sex = "boy";
console.log(stu);

// 刪除屬性
delete stu.age;
// 先獲取名字的值,然后做字符串拼接,再把得到的值賦值給之前的名字
stu.name = stu.name + "同學(xué)";
console.log(stu);

了解數(shù)組

用中括號包裹梅肤,可以包含很多項司蔬,每一項之間用逗號隔開。
數(shù)組的每一項都有自己的索引姨蝴,從0開始俊啼,到 length-1結(jié)束,length為數(shù)組的長度左医。

var arr = [ 1, "abc", false, {name: "張三"} ];
console.log(arr);

// 數(shù)組的每一項授帕,都可以寫任意數(shù)據(jù)類型
// 獲取數(shù)組某一項的值要用索引  arr索引是  0 1 2 3
console.log( arr[0] );      // 取索引為0的那一項,就是第一項
console.log( arr[1] );
console.log( arr[2] );
console.log( arr[3] );

// 數(shù)組長度: 數(shù)組的長度是一個數(shù)字值
console.log( arr.length );

if else 【選擇結(jié)構(gòu)】

js 代碼的三種基本結(jié)構(gòu): 順序結(jié)構(gòu)浮梢、選擇結(jié)構(gòu)跛十、循環(huán)結(jié)構(gòu)
if、 else if 秕硝、else

// 重復(fù)聲明芥映、后面的會覆蓋前面的
var a = 1;
// var a = -1;
console.log( a );

// 比較符號: ==  === 
// 大于號 > 、  小于號 < 远豺、 大于等于 >= 奈偏、 小于等于 <= 
// 如果和 邏輯符號一起運算,比較符號優(yōu)先

// 小括號里面的是判斷條件躯护,大括號里面的是執(zhí)行語句
if(a < 0){
    // 條件成立時執(zhí)行的代碼
    console.log("a是負數(shù)");
}else{
    // 條件不成立時執(zhí)行的代碼
    console.log("a是正數(shù)或0");
}
// if是“如果”惊来, else是“否則”

// js 代碼的三種基本結(jié)構(gòu): 順序結(jié)構(gòu)、選擇結(jié)構(gòu)棺滞、循環(huán)結(jié)構(gòu)
// if裁蚁、 else if 、else

var a = -1;

if(a > 0){  // 判斷一
    console.log("a是正數(shù)");     // 判斷一成立執(zhí)行語句
}else if(a === 0){  // 判斷二
    console.log("a是0");    // 判斷二成立執(zhí)行語句
}else{
    console.log("a是負數(shù)");     // 以上都不成立執(zhí)行語句
}

if-else 【小練習(xí)】

var arr = ["a", "b", "c"];
arr = [];   // 直接給arr賦值
console.log(arr.length);

if( arr.length > 0 ){
    console.log(arr);
}else{
    console.log("這個數(shù)組為空");
}

var stu = {
    name: "小張",
    age: 18
}

if( stu.age >= 18 ){
    console.log("已成年");
}else{
    console.log("未成年");
}

if(a>0 && b>0){     // false
    console.log("a检眯、b都是正數(shù)");
}else if(a>0 || b>0){   // true
    console.log("a厘擂、b有一個是正數(shù)");
}else{
    console.log("a、b都不是正數(shù)");
}

var c;
// 如果小括號里面有一個值锰瘸,那么就直接判斷它的布爾值,為true時則執(zhí)行
if(c){
    console.log(a);
}

三元運算符【選擇結(jié)構(gòu)】

三元運算符昂灵,也稱三目運算符避凝, 跟if else 語句等價

// if else 不跟
var a = -10;

// if(a>0){
//     console.log("正數(shù)");
// }else{
//     console.log("負數(shù)或0");
// }

// 條件判斷 ? 執(zhí)行一 : 執(zhí)行二;
a > 0 ? console.log("正數(shù)") : console.log("負數(shù)或0");


var b = "";
// 先判斷 字符串b的長度, 大于0 就打印b, 否則 就給b 賦值 "a"
b.length > 0 ? console.log(b) : b = "a";

var m = -10;
var n = 20;
// 判斷 m>0 && n>0 
// 判斷結(jié)果是true, 所以執(zhí)行 m+n 眨补。 var sum = m + n
// 如果判斷結(jié)果是false管削, 那么 var sum = null;
var sum =  m>0 && n>0 ? m+n : null;
console.log(sum);


var c = 0;
// 如果小括號里面有一個值,那么就直接判斷它的布爾值撑螺,為true時則執(zhí)行
if(c){
    console.log(c);
}

// 判斷c的布爾值含思, 如果成立執(zhí)行前面的語句, 后面是null,代表沒有執(zhí)行
c ? console.log(c) : null;

switch-case 【選擇結(jié)構(gòu)】

var a = "6";
// 把a和"case" 后面的每一個值做比較含潘,當(dāng)比較的值一致饲做,那么執(zhí)行下面的代碼
switch (a) {
    case "1":
        alert("今天周一");
        break;
    case "2":
        alert("今天周二");
        break;
    case "3":
        alert("今天周三");
        break;
    case "4":
        alert("今天周四");
        break;
    case "5":
        alert("今天周五");
        break;
    default:    // 以上都不成立,則執(zhí)行default
        alert("今天周末");
}
// break 一定要加遏弱,遇到break就跳出盆均,后面的代碼不再執(zhí)行。
// 只要匹配一次漱逸,后面就不比較了
// switch 中的比較是 用 === 來比較的

for循環(huán)【循環(huán)結(jié)構(gòu)】

每一輪的for循環(huán)都有四步:

1.設(shè)置初始值 var i=0
2.是否滿足循環(huán)執(zhí)行條件泪姨, i<5
3.滿足條件,執(zhí)行{循環(huán)體}中的代碼
4.執(zhí)行完后饰抒,再做累加 i++ // i=i+1
做完第四步肮砾,重復(fù)二三四步

注:循環(huán)會做重復(fù)的操作,操作的次數(shù)有限制袋坑。如果操作次數(shù)沒有限制仗处,那么稱“死循環(huán)”

// i執(zhí)行5次, 輸出 0 1 2 3 4
for(var i=0; i<5; i++){
    console.log(i);
}

// 下面是死循環(huán)咒彤, n永遠都大于-1,所以程序就卡死了
// for(var n=0; n>-1; n++){
//     console.log(n);
// }

i++和++i的區(qū)別

都類似于i = i + 1

  1. i++;
    先使用i疆柔, 再累加

  2. ++i;
    先累加, 再使用i

var i = 0;
// i=i+1;      // 把i值加一后镶柱,重新賦值給i
// 兩步: 第一步 累加旷档, 第二步賦值

// 1. 先使用i, 打印0
// 2. 執(zhí)行累加, i = i+1
// 3. 第二次打印 i為  1
console.log(i++);   // 0
console.log(i); // 1

console.log(i++);   // 1
console.log(i); // 2

i++和++i 拆解

var i = 0;
// console(i++);   // 0
// console.log(i); // 1

// 上面的兩步 可以做一個拆解
console.log(i);
i=i+1;
console.log(i);



// 除了 i++歇拆,  還有 ++i
// 先累加鞋屈, 再使用
 i = 0; // 先設(shè)置i為0
//  console.log(++i);  //  1
//  console.log(i);    // 1

// 第一句話,拆解成兩步
i=i+1;
console.log(i);
console.log(i);

for循環(huán)復(fù)習(xí)

核心四步驟: 1.聲明 2.判斷 3.執(zhí)行 4.累加

for(var i=0; i<100; i++){
    // % 是取余操作, 目前找偶數(shù)
    // 如果if判斷的語句只有一行故觅,可以簡寫省略大括號厂庇,放在if判斷后面
    // i + "、"   是字符串拼接

    // 奇數(shù)
    if(i%2 === 1) document.write(i+"输吏、");
    // 偶數(shù)
    // if(i%2===0) document.write(i + "权旷、");
}

// 偶數(shù)多打印一次
for(var n=0; n<5; n++){
    if(n%2===0){
        console.log(n);
    }
    console.log(n);
}

while循環(huán)

我一直執(zhí)行一段代碼, 直到判斷條件不滿足贯溅,則停止

// 定義變量
var i = 0;

// 1. 判斷條件 i<5
// 2. 執(zhí)行大括號內(nèi)的語句 (里面一般有自增運算)
// 重復(fù)2拄氯、3步驟
while(i<5){
    console.log(i);
    i++;
    // i++ 是自增運算, 如果不加它浅,i一直為0译柏,會出現(xiàn)死循環(huán)
}

for循環(huán)和while循環(huán)的轉(zhuǎn)換【練習(xí)】

for(var n=0; n<5; n++){
    if(n%2===0){
        document.write(n);
    }
    document.write(n);
}
// 偶數(shù)多打印一次

document.write("----------");
// 用while循環(huán),對for循環(huán)做改造(寫法不同姐霍,功能一樣)
var i=0;
while(i<5){
    if(i%2 === 0){
        document.write(i);
    }
    document.write(i);
    i++;
}

continue-break【補充】

continue: 跳出本次循環(huán)
break: 跳出當(dāng)前的整個循環(huán)

for(var i=0; i<5; i++){     // 0~4
    if(i === 1){
        // continue;   // 跳出這一次循環(huán)鄙麦,然后繼續(xù)執(zhí)行后面的循環(huán)
        break;  // 跳出整個循環(huán)
    }
    console.log(i);
}
console.log("-----------------------");

// 跳出i為偶數(shù)的循環(huán)
for(var i=0; i<20; i++){
    if(i % 2 === 0){
        continue;
    }
    console.log(i);
}
console.log("-----------------------");

// 跳出i在 10到19之間的循環(huán)
for(var i=0; i<30; i++){
    if(i>=10 && i<=19){
        continue;
    }
    console.log(i);
}

for-in【循環(huán)對象】

var stu = {
    name: "小明",
    age: 18,
    hobby: "游泳"
}

// 對象的【遍歷】典唇, 使用for in, 把對象中的每一個鍵值對 過一遍
// key: value

// var 變量名   in   對象
// 在{}中寫執(zhí)行的代碼   屬性值使用  對象[變量名]胯府,不要用點
for(var key in stu){
    console.log(stu[key]);
    // console.log( stu.key ); // 打印的都是 undefined
}

for(var n in stu){
    console.log(stu[n]);
}

函數(shù)

函數(shù): 是一個功能介衔,一個方法
1)聲明/定義 上面兩種寫法,會把寫的代碼當(dāng)成字符串存儲起來
function 函數(shù)名(){ ...一大堆代碼 }
2)執(zhí)行
函數(shù)名();

// 用變量的方式聲明函數(shù)
var fn1 = function (){
    console.log(1);
}

// 普通函數(shù)聲明盟劫,小括號前是函數(shù)名
function fn2(){
    console.log(2);  //...
}

// 2)執(zhí)行
fn1();
fn2();

console.log(typeof fn1);  // function
console.log(Object.prototype.toString.call(fn2)); // [object Function]

引用數(shù)據(jù)類型【小練習(xí)】

引用數(shù)據(jù)類型夜牡,也稱復(fù)雜數(shù)據(jù)類型
操作的是地址空間

var arr = ["a", "b", "c", "d"]; // 數(shù)組
var obj = { name: "硬件一班" }; // 對象
var fn = function(){}   // 函數(shù)

var arr1 = arr;  // 數(shù)組復(fù)制了一份,但是復(fù)制的是地址空間 比如內(nèi)存地址:xxff11
arr[0] = "aaa";  // 修改了第一項
arr1[1] = "bbb";

console.log(arr1);  // ["aaa", "bbb", "c", "d"]
console.log(arr);   // ["aaa", "bbb", "c", "d"]

// 引用數(shù)據(jù)類型 存儲的是地址空間
// 就像地圖一樣侣签,只要實際的地點變了塘装,所有的地圖都跟著變

var stu = {
    name: "小明",
    age: 17,
    hobby: "游戲"
}

var stu2 = stu1 = stu;
// 一個變了,所有的跟著變影所,因為3個指向的是同一個地址空間
stu.age = 18;
console.log(stu);
console.log(stu1);
console.log(stu2);

獲取dom節(jié)點

html部分

<div id="box">
    <ul class="myUl">
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ul>
</div>

js部分

// 1.通過id獲取dom節(jié)點蹦肴,得到一個元素
var box = document.getElementById("box");
console.log(box);

// 2.通過標簽名獲取, 得到類數(shù)組
var lis = document.getElementsByTagName("li");
console.log(lis);

// 3.通過類名獲取元素, 得到類數(shù)組
var myUl = document.getElementsByClassName("myUl");
console.log(myUl);

// 4.h5提供的querySelector來獲取 id、類名猴娩、標簽名都可以阴幌。只獲取一個
// querySelectorAll獲取所有
// var dom = document.querySelector("#box");
// var dom = document.querySelector(".myUl");
var dom = document.querySelector("li");
// var dom = document.querySelectorAll("li");
console.log(dom);
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市卷中,隨后出現(xiàn)的幾起案子矛双,更是在濱河造成了極大的恐慌,老刑警劉巖蟆豫,帶你破解...
    沈念sama閱讀 222,681評論 6 517
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件议忽,死亡現(xiàn)場離奇詭異,居然都是意外死亡十减,警方通過查閱死者的電腦和手機栈幸,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 95,205評論 3 399
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來帮辟,“玉大人速址,你說我怎么就攤上這事∮删裕” “怎么了芍锚?”我有些...
    開封第一講書人閱讀 169,421評論 0 362
  • 文/不壞的土叔 我叫張陵,是天一觀的道長蔓榄。 經(jīng)常有香客問我闹炉,道長,這世上最難降的妖魔是什么润樱? 我笑而不...
    開封第一講書人閱讀 60,114評論 1 300
  • 正文 為了忘掉前任,我火速辦了婚禮羡棵,結(jié)果婚禮上壹若,老公的妹妹穿的比我還像新娘。我一直安慰自己,他們只是感情好店展,可當(dāng)我...
    茶點故事閱讀 69,116評論 6 398
  • 文/花漫 我一把揭開白布养篓。 她就那樣靜靜地躺著,像睡著了一般赂蕴。 火紅的嫁衣襯著肌膚如雪柳弄。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 52,713評論 1 312
  • 那天概说,我揣著相機與錄音碧注,去河邊找鬼。 笑死糖赔,一個胖子當(dāng)著我的面吹牛萍丐,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播放典,決...
    沈念sama閱讀 41,170評論 3 422
  • 文/蒼蘭香墨 我猛地睜開眼逝变,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了奋构?” 一聲冷哼從身側(cè)響起壳影,我...
    開封第一講書人閱讀 40,116評論 0 277
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎弥臼,沒想到半個月后宴咧,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 46,651評論 1 320
  • 正文 獨居荒郊野嶺守林人離奇死亡醋火,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 38,714評論 3 342
  • 正文 我和宋清朗相戀三年悠汽,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片芥驳。...
    茶點故事閱讀 40,865評論 1 353
  • 序言:一個原本活蹦亂跳的男人離奇死亡柿冲,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出兆旬,到底是詐尸還是另有隱情假抄,我是刑警寧澤,帶...
    沈念sama閱讀 36,527評論 5 351
  • 正文 年R本政府宣布丽猬,位于F島的核電站宿饱,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏脚祟。R本人自食惡果不足惜谬以,卻給世界環(huán)境...
    茶點故事閱讀 42,211評論 3 336
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望由桌。 院中可真熱鬧为黎,春花似錦邮丰、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,699評論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至炕檩,卻和暖如春斗蒋,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背笛质。 一陣腳步聲響...
    開封第一講書人閱讀 33,814評論 1 274
  • 我被黑心中介騙來泰國打工泉沾, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人经瓷。 一個月前我還...
    沈念sama閱讀 49,299評論 3 379
  • 正文 我出身青樓爆哑,卻偏偏與公主長得像,于是被迫代替她去往敵國和親舆吮。 傳聞我的和親對象是個殘疾皇子揭朝,可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 45,870評論 2 361

推薦閱讀更多精彩內(nèi)容

  • 2.1 案例介紹 萬年歷的實現(xiàn)。萬年歷是可以按照相應(yīng)的規(guī)則來顯示每一天的屬性色冀,為我們生活提供服務(wù)的一種工具潭袱。 2....
    杰奎琳子閱讀 458評論 0 2
  • 條件分支語句 條件分支語句,也叫作條件判斷語句锋恬,就是根據(jù)某種條件執(zhí)行某些語句屯换,不執(zhí)行某些語句。JS中有三種語法是可...
    王裕杰閱讀 202評論 0 0
  • * 基礎(chǔ)知識 * js的輸出方式 * js的組成 * js的命名規(guī)范 * 數(shù)據(jù)類型 * number數(shù)據(jù)類型 * ...
    web前端ling閱讀 1,010評論 0 2
  • 第一部分:快速入門JS學(xué)習(xí)中的一些注意點:2018.8.16基礎(chǔ)知識: 入門JavaScript是世界上最流行的腳...
    天山雪蓮_38324閱讀 544評論 0 1
  • JavaScript發(fā)展歷程——標準化的重要性 web發(fā)展 -> 網(wǎng)站的概念 -> 網(wǎng)站實體 ->展示數(shù)據(jù) H...
    蓓蓓的萬能男友閱讀 337評論 0 0