Python-JS (JS介绍~JS的基础数据类型)
生活随笔
收集整理的這篇文章主要介紹了
Python-JS (JS介绍~JS的基础数据类型)
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
目錄
一、JS語言介紹:
1、JS概念
2、JS組成
二、JS的三種存在位置(引入方式):
1、行間式：
2、內(nèi)聯(lián)式：
3、外聯(lián)式：
三、JS出現(xiàn)的具體位置:
四、JS語法規(guī)范
五、JS中變量的定義
ES5 和ES6
塊級作用域與局部作用域
JS中的變量命名規(guī)范
六、三種彈出框
七、四種調(diào)試方法
八、JS中的基本數(shù)據(jù)類型
1、值類型
2、引用類型
3、具體的對象類型
4.JS中的數(shù)據(jù)類型轉換
值類型轉換總結:
九、運算符
1、算數(shù)運算符
2、賦值運算符
3、比較運算符(結果為boolean類型)
4、邏輯運算符
5、三目運算符
6、ES6語法解構賦值
?
一、JS語言介紹:
1、JS概念
瀏覽器腳本語言
什么是腳本: 一段功能代碼塊,可以嵌套在其他語言中使用,完成一些額外的功能
可以編寫運行在瀏覽器上的代碼程序
屬于解釋型、弱語言類型編程語言
2、JS組成
ES語法：ECMAScript、主要版本ES5和ES6
DOM：文檔對象模型(Document Object Model)，是W3C組織推薦的處理可擴展標志語言的標準編程接口。
BOM：瀏覽器對象模型(Browser Object Model)，提供了獨立于內(nèi)容的、可以與瀏覽器窗口進行互動的對象結構；且由多個對象組成，其中代表瀏覽器窗口的Window對象是BOM的頂層對象，其他對象都是該對象的子對象。
二、JS的三種存在位置(引入方式):
1、行間式：
行間式的代碼塊書寫在一個全局事件名屬性中,沒有script這樣一個全局屬性
在某一個標簽的某一個事件屬性值中，出現(xiàn)的this代表該標簽
該標簽對象this可以訪問該標簽的任意全局屬性(eg: style),然后再間接訪問具體需要操作的對象(style.color)
This需要注意的點:
行間式案例:
<body id="body" οnlοad="body.style.backgroundColor='#0ff'">
? ?
</body>
2、內(nèi)聯(lián)式：
內(nèi)聯(lián)式的代碼塊存在于頁面script標簽中
可以通過標簽的id(唯一標識),在js代碼塊中找到該標簽(js的選擇器)
js代碼塊中語法采用的是小駝峰體命名法,屬性的值都是用字符串形式進行賦值
js屬于解釋型語言,所以加載順序會影響執(zhí)行結果 => 內(nèi)聯(lián)式的script標簽出現(xiàn)的位置會決定最終效果
內(nèi)聯(lián)式js案例:
<body id="body">
? ?<script type="text/javascript">
body.style.backgroundColor='#0ff'
</script>
</body>
3、外聯(lián)式：
外聯(lián)式代碼塊存在于外部JS文件，通過script標簽src屬性鏈接
使用外聯(lián)的script(擁有src屬性)標簽,會屏蔽掉標簽內(nèi)部的js代碼塊
在js任意地方均有this, this對象不指向任何標簽時,指向的是window對象
index.js文件
body.style.backgroundColor='#0ff'
?
index.html文件
<script src="./js/index.js"></script>
三、JS出現(xiàn)的具體位置:
解釋型語言特性決定JS代碼位置
1.出現(xiàn)在head標簽底部：依賴型JS庫
該位置一般放置JS庫(第三方的js),或者之前已經(jīng)寫好的js
2.出現(xiàn)在body標簽底部：功能型JS腳本
一般放在body和html中間,為了保證在body的所有標簽下面被解析
一般放置本次對頁面做的js操作
四、JS語法規(guī)范
注釋
// 單行注釋
/* 多行注釋 */
/**文檔注釋
*
*/
以分號作為語句結尾（允許省略）
與python的語法規(guī)范對比:
python中: 1,以換行標識語句的結束
? ? ? ? ? ? ? ? 2,以同行縮進標識附屬關系
JS中:
? ? ? ? ? ? ? ? 1.以分號(;)表示語句的結束
? ? ? ? ? ? ? ? 2,以作用域{}標識附屬邏輯
五、JS中變量的定義
我們那python中變量的定義來做對比,方便記憶:
定義變量
py: 變量名 = 變量值
js: 聲明關鍵詞 變量名 = 變量值
js中的打印操作是: consol.log()
注: 變量在未定義賦值之前也可以去使用, 值為 undefined
首先需要說明的是:
ES5 和ES6
是ECMAScript兩個語法版本, ES6是ES5之后的一個版本, 但是對ES5向下兼容, ES6中支持ES5語法,現(xiàn)在瀏覽器的主流語法還是ES5, 即使在編寫的時候使用ES6的語法,到瀏覽器中也會被解析成ES5的語法,然后去執(zhí)行, 在這里提及到ES6是因為后邊一些新的框架使用的是ES6來完成的,我們需要了解ES6的相關語法
第二個點是
塊級作用域與局部作用域
ES5語法下,只有方法(函數(shù))才能產(chǎn)生局部作用域, 在ES5語法下, 沒有定義常量的概念, 且所有定義變量都不具有塊級作用域
ES6語法下,塊級作用域都可以作為局部作用域
ES6中,塊級作用域的范圍等價于局部作用域的范圍
塊級作用域和之前我們介紹過的全局作用域和局部作用域類似:
在JS中,基本上都是和block打交道,所以產(chǎn)生了塊級作用域的概念
產(chǎn)生塊級作用域的方式
{
? ? 直接書寫
}
if語句可以產(chǎn)生
while語句可以產(chǎn)生
for語句也可以產(chǎn)生
?
函數(shù)可以產(chǎn)生局部作用域, 除了定義在局部作用域中的全局變量(沒有關鍵字的變量聲明), 外界可以訪問, 其他定義方式, 外界都不可以訪問
塊級作用域中的變量在塊級作用域外無法訪問,?
1、ES5定義變量
在ES5語法下,沒有定義常量的概念,且所有定義變量都不具有塊級作用域
使用var 定義出來的變量是?無塊級作用域的變量? 即使定義在塊級作用域中,外界也可以訪問
var num = 10; ?
num = 10; ?// 全局變量:在任意位置定義,在任何位置都可以訪問到,但是定義全局變量與重新賦值語法相同,容易混淆,不建議使用(省略了關鍵詞)
2、ES6定義變量
在ES6語法下, 定義變量(let)常量(const)都具有塊級作用域
在ES6中塊級作用域和局部作用域是等價的
let num = 10; ?// 局部變量:變量是在程序運行可以改變的量 (有塊級作用域)
// let定義的變量具有塊級作用域,在塊級作用域之外無法訪問
const NUM = 10; ?// 常量:在程序運行過程中,值不會發(fā)生改變
// const定義的常量具有塊級作用域,在塊級作用域之外無法訪問
變量的定義: 變量是在程序運行過程中值可以改變的量
var num = 10;
? ? console.log(num);
定義常量: 常量是在程序運行過程中,值不會被改變的量
const NUM = 3.14;
JS中區(qū)分大小寫
? ? console.log(num, NUM);
NUM是標標準準常量語法, 為只讀的值, 不允許修改
JS中的變量命名規(guī)范
由字母，數(shù)字，_，$組成，不能以數(shù)字開頭（可以包含中文字符,但是中文字符一般不建議使用）
區(qū)分大小寫
NUM是標標準準常量語法,為只讀的值,不允許修改
不能出現(xiàn)關鍵字及保留字
提倡使用小駝峰體命名規(guī)范, 支持 _ 連接語法
小駝峰體是第一個單詞的首字母不大寫,后邊的單詞首字母都大寫
常用的關鍵字:
? ? ? ?
abstract arguments boolean break byte
case catch char class* const
continue debugger default delete do
double else enum* eval export*
extends* false final finally float
for function goto if implements
import* in instanceof int interface
let long native new null
package private protected public return
short static super* switch synchronized
this throw throws transient true
try typeof var void volatile
while with yield ? ?
六、三種彈出框
1.普通彈出框alert
alert("你丫真帥!!!");
2.輸入框: 以字符串形式接收用戶輸入內(nèi)容
var info = prompt("請輸入內(nèi)容:");
console.log(info)
3.確認框: 根據(jù)用戶選擇確認或取消, 得到 true | false 兩個布爾結果
var res = confirm("你是豬嗎?");
console.log(res)
七、四種調(diào)試方法
四種調(diào)試方法,我們直接使用案例進行介紹:
一、在pycharm中進行調(diào)試的時候:
1.打斷點(只能在js邏輯中打斷點)之后使用debug運行
2.step Over: 表示不管是不是方法的調(diào)用,都將該句作為一條執(zhí)行語句執(zhí)行
? ?Force Step into:? 表示進入方法中,下一步下一步
? ?step Into: 如果是函數(shù)或者方法,進入調(diào)用體之內(nèi)一步一步走
? ?step-out: 退出調(diào)用體
二、在chorm瀏覽器中進行調(diào)試:
1.在檢查頁面中的Sources頁面中,打開我們要調(diào)試的文件,在需要調(diào)試的位置打上斷點(任何地方都可以打斷點, 一般只在邏輯部分使用)
2. Resume script execution : 跳到下一個斷點, 如果后面沒有斷點 ,就運行結束
? ? Step over next function call:? 下一步,下一步
四種調(diào)試方法使用最多的是consol.log()和斷點調(diào)試
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>調(diào)試方式</title>
</head>
<body>
調(diào)試方法
</body>
<script>
var a = 100;
var b = a;
var c = b;
// 第一種方式,使用打印操作來驗證
// console.log(a, b, c);
//第二種是,使用彈出框?qū)⒆兞康闹祻棾鰜?由于彈出框一次只能彈出一個值(彈多個值時只彈最后一個),所以需要彈出三次才能將三個值彈完
// alert(a)
// alert(b)
// alert(c)
//第三種是使用文檔的寫入操作,將變量的值寫入到頁面中,但是這樣做會影響到頁面原有布局
// document.write(a, b, c)
// debug 斷點
</script>
</html>
八、JS中的基本數(shù)據(jù)類型
一般基本數(shù)據(jù)類型有7種(有的不將null當基本數(shù)據(jù),類型,我們這里是將努力作為基本數(shù)據(jù)類型的)
1、值類型
number：數(shù)字類型
var a = 10;
console.log(a, typeof a)
// 判斷方式
console.log(typeof a == 'number')
console.log(typeof(a), a)
string：字符串類型
var a = '10';
console.log(a, typeof a)
// 判斷方式
console.log(typeof a == 'string')
boolean：布爾類型
var a = true;
console.log(a, typeof a)
// 判斷方式
console.log(typeof a == 'boolean')
undefined：未定義類型
var a = undefined;
console.log(a, typeof a)
// 判斷方式
console.log(typeof a == 'undefined')
console.log(a == undefined)
2、引用類型
function：函數(shù)類型
var a = function(){};
console.log(a, typeof a)
// 判斷方式
console.log(typeof a == 'function')
object：對象類型(類字典方式來使用)
var a = {};
console.log(a, typeof a)
// 判斷方式
console.log(typeof a == 'object')
console.log(a instanceof Object)
3、具體的對象類型
null：空對象
var a = null;
console.log(a, typeof a)
// 判斷方式
console.log(typeof a == 'object')
console.log(a == null)
Array：數(shù)組對象(可變類型)
var a = new Array(1, 2, 3, 4, 5);
console.log(a, typeof a)
// 判斷方式
console.log(typeof a == 'object')
console.log(a instanceof Object)
console.log(a instanceof Array)
//排序
a.sort()
//數(shù)組與字符串之間的轉換
b = a.join('@') //數(shù)組方法
c = b.split('@') //字符串方法
Date：時間對象
var a = new Date();
console.log(a, typeof a)
// 判斷方式
console.log(typeof a == 'object')
console.log(a instanceof Object)
console.log(a instanceof Date)
RegExp：正則對象
JS中的正則表達式和python中是相同的,只是有不同的使用方法: consol.log('abc'.mach)
var a = new RegExp();
console.log(a, typeof a)
// 判斷方式
console.log(typeof a == 'object')
console.log(a instanceof Object)
console.log(a instanceof RegExp)
3.JS中的數(shù)據(jù)類型轉換
數(shù)字|布爾 轉換為 字符串
var a = 10 or true
?
String(a)
?
a..toString()
第一個點表示小數(shù)點 ?第二個點表示點語法
布爾|字符串 轉換為 數(shù)字
var a = true or '10'
?
Number(a)
?
+ a
?
parseFloat()
parseInt()
字符串|數(shù)字 轉換為 布爾
var a = 10 or '10'
Boolean(a)
自動轉換
5 + null ?// 5
"5" + null ?// "5null"
"5" + 1 ?// "51"
"5" - 1 ?// 4
+"5" + 1 ?// 8
特殊產(chǎn)物
NaN: 非數(shù)字類型
NaN與NaN不相等(因為不是數(shù)值類型的有很多種,不能確定是哪種)
不與任何數(shù)相等，包含自己
利用isNaN()進行判斷
值類型轉換總結:
1.通過類型聲明轉換
Number() | String() | Boolean()
2.方法(函數(shù))
parseInt('10') | parseFloat('3.14')
123..toString()
3.隱式轉換
+'10' => 10
'' + 10 => '10'
九、運算符
1、算數(shù)運算符
前提：n = 5
運算符 描述 例子 x結果 n結果
+ 加法 x=n+2 7 5
- 減法 x=n-2 3 5
* 乘法 x=n*2 10 5
/ 除法 x=n/2 2.5 5
% 取模(余數(shù)) x=n/2 1 5
++ 自增 x=++n 6 6
x=n++ 5 6
-- 自減 x=--n 4 4
x=n-- 5 4
?
任何一個自然數(shù)對n取余,結果為[0,n-1]
++在變量后(num++),先將變量的值拿去使用,再自身增1,( ++在后的時候++的優(yōu)先級會變得很低,打印語句都比它高 )
++在變量前(++num),先將變量自身增1,再將結果拿去使用,( ++在前的時候,優(yōu)先級會很高 )
總結: 不管++在前在后,運算結束后, 變量自身值一定自增1
2、賦值運算符
前提：x=5，y=5
運算符 例子 等同于
(運算方式從右至左,將x和y的運算結果重新賦值給x) 運算結果
= x=y ? 5
+= x+=y x=x+y 10
-= x-=y x=x-y 0
*= x*=y x=x*y 25
/= x/=y x=x/y 1
%= x%=y x=x%y 0
3、比較運算符(結果為boolean類型)
前提：x=5
運算符 描述 比較 結果
== 等于? ? ? ? ? ? ? (只做值比較) x=="5" true
=== 絕對等于? ? ? ?(比較值及其類型) x==="5" false
!= 不等于? ? ? ? ? ?(只做值比較) x!="5" fales
!== 不絕對等于? ? (比較值及其類型) x!=="5" true
> 大于? ? ? ? ? ? ? ? x>5 false
< 小于 x<5 false
>= 大于等于 x>=5 true
<= 小于等于 x<=5 true
4、邏輯運算符
運算結果通常為boolean類型(也可以不是)
前提：n=5
運算符 描述 例子 結果
&& 與 x=n>10&&++n x=false,n=5（短路）
|| 或 x=n<10||n-- x=true,n=5（短路）
! 非 x=!n x=false,x=5
總結&&: 全真為真, 有假則假
總結||:? ? 全假則假, 有真則真
總結!:? ? ?真則假, 假則真
邏輯運算符的結果本質(zhì)上為表達式值
表達式: 由數(shù)字,變量,運算符組成的合法式子
在邏輯運算符中,特別需要注意的點:(短路現(xiàn)象)
針對 && | ||
// 疑問: 邏輯運算符結果可能為邏輯運算符之前表達式的值,也可能是之后表達式的值
// 當邏輯運算符出現(xiàn) 短路現(xiàn)象 , 就是之前表達式的值, 否則(正常情形下), 就是之后表達式的值
// &&, 前一個表達式為假時, 整個式子的結果已經(jīng)確定為假, 后表達式不會被執(zhí)行, 就是被短路了
var num = 10;
res = false && num++;
console.log(res, num); // null, 10
res = null && ++num;
console.log(res, num); // null, 10
// ||, 前一個表達式為真時, 整個式子的結果已經(jīng)確定為真, 后表達式不會被執(zhí)行, 就是被短路了
res = -10 || ++num;
console.log(res, num); // -10, 10
// 特殊小技巧 => 類似于if分支來使用 ***
/* if a > b:
print(a)
*/
var a = 100;
a > b && console.log("大值a:", a);
5、三目運算符
三目運算符的語法:??語法 條件表達式 ? 表達式1 : 表達式2;
// 語法 條件表達式 ? 表達式1 : 表達式2;
?
// eg:
var tq = prompt("天氣(晴|雨)")
var res = tq == '晴' ? "今天天氣挺好" : "請假回家收衣服";
console.log(res);
三條目類似于if...else...:
?a < b ? console.log("表達式結果為true") : console.log("表達式結果為false")
6、ES6語法解構賦值
在ES6語法下,有變量的重復定義規(guī)則,不允許在同一作用域下,出現(xiàn)變量的重復定義
如果重復定義一個變量, 在編輯器中不會報錯,但是到瀏覽器中瀏覽器解析的時候會報錯
在不同的作用域中是可以編譯通過的
? ? let abc = 10;
? ? // let abc = 20; ?// 在es6語法下,有變量的重復定義規(guī)則, 不允許在同一作用域下,出現(xiàn)變量的重復定義
? ? {
? ? ? ? let abc = 20; ?// 可以編譯運行通過
? ? }
下面是ES6中新的賦值方法:
數(shù)組的解構賦值
let [a, b, c] = [1, 2, 3]
// a=1,b=2,c=3
let [a, ...b] = [1, 2, 3]
// a=1,b=[2,3]
對象的解構賦值
let {key: a} = {key: 10}
// a=10
字符串解構賦值
let [a,b,c] = 'xyz'
// a='x',b='y',c='z'
---------------------
原文：https://blog.csdn.net/Onion_cy/article/details/85045685
轉載于:https://www.cnblogs.com/du-jun/p/10171014.html
閱讀世界，共赴山海423全民讀書節(jié)，邀你共讀
總結
以上是生活随笔為你收集整理的Python-JS (JS介绍~JS的基础数据类型)的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Calendar Game POJ -
- 下一篇： A Greeting from Qinh