當(dāng)前位置：首頁 >

【前端】JavaScript基础

發(fā)布時間：2024/9/5 38 如意码农

生活随笔收集整理的這篇文章主要介紹了【前端】JavaScript基础小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.

1 什么是js

JavaScript是一種運(yùn)行在瀏覽器中的解釋型的編程語言

1.1 js引用

使用<script></script>標(biāo)簽

head中引用
body中引用

1.2 body和head引入的區(qū)別

html代碼從上而下解析，如果在head中引入JS，影響頁面打開的速度，存在風(fēng)險，所以通常放在html body的最下方，這樣頁面內(nèi)容先展示，最后在加載JS。

1.3 注釋與變量

單行注釋通過 // 多行注釋通過 /* */

 name = 'dsx'; // 默認(rèn)全局變量

 function func() {

     var name = 'niulaoshi'; // var 局部變量

 }

2 字符串

 //定義字符串

 var str = '你開心就好！';

 var name = '大師兄';

 // 字符串的拼接

 var name_str = name+str;

 //字符串操作

 str = '大師兄'

 str.charAt(0) 根據(jù)角標(biāo)獲取字符串中的某一個字符  char字符

 str.substring(1,3) 根據(jù)角標(biāo)獲取 字符串子序列 大于等于x小于y

 str.length 獲取字符串長度

 str.concat('牛教授')  拼接字符串

 str.indexOf('大師') 獲取子序列的位置

 str.slice(0,1)  切片 start end start<=取值<end 同python

 str.toLowerCase()  變更為小寫

 str.toUpperCase() 變更大寫

 str.split('師',1) 切片 返回?cái)?shù)組 參數(shù)2為取分割后數(shù)組的前x個元素

 //數(shù)字類型（JavaScript 只有一種數(shù)字類型。數(shù)字可以帶小數(shù)點(diǎn)，也可以不帶）

 var age = 18;

 var score = 89.22;

 number = '18';

 // 字符串轉(zhuǎn)，如是小數(shù)，則會去掉小數(shù)部分

 var n = parseInt(number);

 // 轉(zhuǎn)換成小數(shù)

 f =parseFloat(number);

 //布爾類型（true 或 false）

 var t = true;

 var f = false;

3 數(shù)組（python中的列表）

 // 第一種創(chuàng)建方式 var list = new Array();

 list[0] = '大師兄';

 list[1] = '牛教授'; 

 // 第二種創(chuàng)建方式

 var list2 = new Array('大師兄','牛教授'); 

 // 第三種創(chuàng)建方式

 var list3 = ['大師兄','牛教授']; 

 //數(shù)組操作

 var list3 = ['大師兄','牛教授'];

 list3.length //數(shù)組的長度 

 list3.push('dsx') //尾部追啊參數(shù) 

 list3.shift() //頭部獲取一個元素 并刪除該元素 

 list3.pop() //尾部獲取一個元素 并刪除該元素 

 list3.unshift('dsx') //頭部插入一個數(shù)據(jù) 

 list3.splice(start, deleteCount, value) //插入、刪除或替換數(shù)組的元素 

 list3.splice(n,0,val) //指定位置插入元素 

 list3.splice(n,1,val) //指定位置替換元素 

 list3.splice(n,1) //指定位置刪除元素 

 list3.slice(1,2) //切片;

 list3.reverse() //反轉(zhuǎn) 

 list3.join('-') //將數(shù)組根據(jù)分割符拼接成字符串 

 list3.concat(['abc']) //數(shù)組與數(shù)組拼接 

 list3.sort() //排序

4 對象類型(Python中的字典)

 var dict = {name:'dsx',age:18,sex:'男' };

 var age = dict.age;

 var name = dict['name'];

 delete dict['name'] //刪除

 delete dict.age //刪除

5 條件判斷

javascript當(dāng)中如果是兩個等號，代表不去校驗(yàn)數(shù)據(jù)類型是否相同.三個等號會判斷數(shù)據(jù)類型

‘1’==1為真，而'1'===1為假

 if (條件) {

     執(zhí)行代碼塊

 } else if (條件) {

     執(zhí)行代碼塊

 } else {

     執(zhí)行代碼塊

 };

 if (1 == 1) {

     console.log()

 } else if (1 != 1) {

     console.log()

 } else if (1 === 1) {

     console.log()

 } else if (1 !== 1) {

     console.log()

 } else if (1 == 1 && 2 == 2) { //and

     console.log()

 } else if (1 == 1 || 2 == 2) { //or

     console.log()

 }

 switch (a) {

     case 1:

         console.log(111);

         break;

     case 2:

         console.log(222);

         break;

     default:

         console.log(333)

 }

6 循環(huán)

 //第一種循環(huán)

 //循環(huán)的是角標(biāo)

 //字符串：循環(huán)角標(biāo)、數(shù)組：循環(huán)角標(biāo)、字典：循環(huán)Key

 tmp = ['寶馬', '奔馳', '尼桑'];

 tmp = '寶馬奔馳尼桑';

 tmp = {'寶馬': 'BMW', '奔馳': 'BC'};

 for (var i in tmp) {

     console.log(tmp[i])

 }

 //第二種循環(huán)

 //不支持字典的循環(huán)

 for (var i = 0; i < 10; i++) {

     console.log(tmp[i])

 }

 //第三種循環(huán)

 while (1 == 1) {

     console.log(111)

 }

7 函數(shù)定義

 //1、普通函數(shù)

 function 函數(shù)名(形參, 形參, 形參) {

     執(zhí)行代碼塊

 }

 函數(shù)名(形參, 形參, 形參);

 //2、匿名函數(shù) 匿名函數(shù)沒有名字，無法調(diào)用時找到，將整個函數(shù)當(dāng)做一個參數(shù)傳遞

 setInterval(function () {

     console.log(11)

 }, 5000);

 //3、自執(zhí)行函數(shù)創(chuàng)建函數(shù)并且自動執(zhí)行

 當(dāng)引入多個js文件時，函數(shù)名可能會出現(xiàn)重復(fù)，這時通過自執(zhí)行函數(shù)，保證每一個js文件都會被解析，從而生成獨(dú)立的容器，防止調(diào)用沖突

 (function (name) {

     console.log(name)

 })('dsx');

 //作用域

 //1.Python的作用域是以函數(shù)作為作用域的，其他語言以代碼塊（{}）作為作用域的。

 //JavaScript是以函數(shù)作為作用域

 function tmp() {

     var name = 'dsx';

     console.log(name)

 }

 tmp();

 console.log(name);

 /*

 運(yùn)行結(jié)果：

 dsx

 name is not defined

 */

 //2.函數(shù)作用域在函數(shù)未被調(diào)用之前，已經(jīng)創(chuàng)建

 var name = 'nhy';

 function a() {

     var name='dsx';

     function b() {

         console.log(name);

     }

     return b

 }

 var c = a();

 c();

 /*

 運(yùn)行結(jié)果：

 dsx

 */

由于函數(shù)創(chuàng)建時，作用域已經(jīng)創(chuàng)建，因此最后的作用域結(jié)果入上圖。c=b。因此執(zhí)行b()函數(shù)，當(dāng)然首先查找到本層函數(shù)的變量name='dsx' 。

 //3.函數(shù)的作用域存在作用域鏈（代碼不執(zhí)行時，先生成作用域鏈）

 //當(dāng)函數(shù)嵌套函數(shù)時，每一個函數(shù)為一個作用域，多層就叫做作用域鏈，查找遵循作用域鏈規(guī)則

 function outer() {

     name = 'nn';

     function inner() {

         var name = 'ii'

         console.log('in', name)

     }

     console.log('out', name);

     inner()

 }

 outer();

 /*

 運(yùn)行結(jié)果：

 out nn

 in ii

 */

 //函數(shù)不調(diào)用時，只生成作用域，當(dāng)調(diào)用時遵循作用域鏈執(zhí)行，name已被重置為hhh，如下圖

 function outer() {

     var name = 'nn';

     function inner() {

         console.log('in', name)

     }

     var name = 'hhh';

     console.log('out', name);

     inner()

 }

 outer();

 /*

 運(yùn)行結(jié)果：

 out hh

 in hh

 */

 //4.函數(shù)內(nèi),局部變量提前聲明 JavaScript函數(shù)在運(yùn)行前會找到函數(shù)內(nèi)的所有局部變量執(zhí)行聲明

 var name = 'xxx';

 function func() {

     console.log(name);

     var name = 'dsx';

 }

 func();

 /*

 運(yùn)行結(jié)果：

 undefined

 */

上面的代碼同下面↓

 var name = 'xxx';

 function func() {

     var name;//js編譯器在執(zhí)行func函數(shù)時，會把它body里面的變量提前到最前面進(jìn)行聲明！

     console.log(name);

     var name = 'dsx';

 }

 func();

8 面向?qū)ο?/h2>

 // 在JavaScript中，方法和類寫法類似，區(qū)別方式為是否有this，如果有就可以當(dāng)做是類來用

 // JavaScript的類默認(rèn)就擁有了Python的構(gòu)造函數(shù)__init__

 function Foo(name) {

     this.name = name;

 }

 // 創(chuàng)建對象時JavaScript需要用到new關(guān)鍵字來創(chuàng)建對象

 var obj = new Foo('dsx');

 console.log(obj.name);

 // 類中定義方法，雖然可以用，但是在多個實(shí)例時存在重復(fù)實(shí)例方法，浪費(fèi)資源。

 // 不同對象的say函數(shù)是兩個不同的函數(shù)，雖然函數(shù)名稱和代碼都是相同的。每次創(chuàng)建對象，都會創(chuàng)建一個say的方法。

 function Foo1(name) {

     this.name = name;

     this.say = function () {

         console.log(this.name)

     }

 }

 var obj1 = new Foo1('dsx_obj1');

 obj1.say();

 // 完善類的定義

 function Foo2(name) {

     this.name = name

 }

 // 類的原型,將共用的的方法抽出來，當(dāng)在實(shí)例化后，只創(chuàng)建了一個叫做Foo2的對象，對象內(nèi)只有name

 //在調(diào)用方法時去現(xiàn)在Foo中找，沒有找到，會在去原型中找

 //是否有該方法。有執(zhí)行，沒有就報(bào)錯

 Foo2.prototype = {

     say: function () {

         console.log(this.name)

     }

 };

 var obj2 = new Foo2('dsx_obj2');

 obj2.say();

9 序列化與反序列化

 //序列化

 var xiaoming = {

     name: '小明',

     age: 14,

     gender: true,

     height: 1.65,

     grade: null,

     'middle-school': '\"W3C\" Middle School',

     skills: ['JavaScript', 'Java', 'Python', 'Lisp']

 };

 var s = JSON.stringify(xiaoming);//列化成JSON格式

 console.log(s);

 //反序列化

 var t = JSON.parse(s)//把JSON格式字符串轉(zhuǎn)換成JavaScript對象

 console.log(t)

 //序列化

 //第三個參數(shù)：要輸出得好看一些，可以加上參數(shù)，按縮進(jìn)輸出：

 JSON.stringify(xiaoming, null, '  ');

 //第二個參數(shù):用于控制如何篩選對象的鍵值，如果我們只想輸出指定的屬性，可以傳入Array：

 JSON.stringify(xiaoming, ['name', 'skills'], '  ');

 //還可以傳入一個函數(shù)，這樣對象的每個鍵值對都會被函數(shù)先處理：

 function convert(key, value) {

     if (typeof value === 'string') {

         return value.toUpperCase();

     }

     return value;

 }

 JSON.stringify(xiaoming, convert, '  ');

 //如果我們還想要精確控制如何序列化小明，可以給xiaoming定義一個toJSON()的方法，直接返回JSON應(yīng)該序列化的數(shù)據(jù)：

 var xiaoming = {

     name: '小明',

     age: 14,

     gender: true,

     height: 1.65,

     grade: null,

     'middle-school': '\"W3C\" Middle School',

     skills: ['JavaScript', 'Java', 'Python', 'Lisp'],

     toJSON: function () {

         return { // 只輸出name和age，并且改變了key：

             'Name': this.name,

             'Age': this.age

         };

     }

 };

 JSON.stringify(xiaoming); // '{"Name":"小明","Age":14}'

10 URI轉(zhuǎn)義

總結(jié)

以上是生活随笔為你收集整理的【前端】JavaScript基础的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。

上一篇：深入理解Linux-hostname
下一篇： JSON的C语言编解码器——cJSON和