Python-JS (JS介绍~JS的基础数据类型)

目录
一、JS语言介绍:
1、JS概念
2、JS组成

二、JS的三种存在位置(引入方式):
1、行间式:
2、内联式:
3、外联式:

三、JS出现的具体位置:

四、JS语法规范

五、JS中变量的定义
ES5 和ES6
块级作用域与局部作用域
JS中的变量命名规范

六、三种弹出框

七、四种调试方法

八、JS中的基本数据类型
1、值类型
2、引用类型
3、具体的对象类型
4.JS中的数据类型转换
值类型转换总结:

九、运算符
1、算数运算符
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),提供了独立于内容的、可以与浏览器窗口进行互动的对象结构;且由多个对象组成,其中代表浏览器窗口的Window对象是BOM的顶层对象,其他对象都是该对象的子对象。

二、JS的三种存在位置(引入方式):
1、行间式:
行间式的代码块书写在一个全局事件名属性中,没有script这样一个全局属性

在某一个标签的某一个事件属性值中,出现的this代表该标签
该标签对象this可以访问该标签的任意全局属性(eg: style),然后再间接访问具体需要操作的对象(style.color)
This需要注意的点:

行间式案例:

<body id="body" onload="body.style.backgroundColor='#0ff'">
   
</body>
2、内联式:
内联式的代码块存在于页面script标签中
可以通过标签的id(唯一标识),在js代码块中找到该标签(js的选择器)
js代码块中语法采用的是小驼峰体命名法,属性的值都是用字符串形式进行赋值
js属于解释型语言,所以加载顺序会影响执行结果 => 内联式的script标签出现的位置会决定最终效果
内联式js案例:

<body id="body">
   <script type="text/javascript">
body.style.backgroundColor='#0ff'
</script>
</body>
3、外联式:
外联式代码块存在于外部JS文件,通过script标签src属性链接
使用外联的script(拥有src属性)标签,会屏蔽掉标签内部的js代码块
在js任意地方均有this, this对象不指向任何标签时,指向的是window对象
index.js文件
body.style.backgroundColor='#0ff'

index.html文件
<script src="./js/index.js"></script>
三、JS出现的具体位置:
解释型语言特性决定JS代码位置

1.出现在head标签底部:依赖型JS库

该位置一般放置JS库(第三方的js),或者之前已经写好的js

2.出现在body标签底部:功能型JS脚本

一般放在body和html中间,为了保证在body的所有标签下面被解析
一般放置本次对页面做的js操作

四、JS语法规范
注释

// 单行注释
/* 多行注释 */
/**文档注释
*
*/
以分号作为语句结尾(允许省略)

与python的语法规范对比:
python中: 1,以换行标识语句的结束

                2,以同行缩进标识附属关系

JS中:

                1.以分号(;)表示语句的结束

                2,以作用域{}标识附属逻辑

五、JS中变量的定义
我们那python中变量的定义来做对比,方便记忆:
定义变量
py: 变量名 = 变量值
js: 声明关键词 变量名 = 变量值

js中的打印操作是: consol.log()
注: 变量在未定义赋值之前也可以去使用, 值为 undefined

首先需要说明的是:

ES5 和ES6
是ECMAScript两个语法版本, ES6是ES5之后的一个版本, 但是对ES5向下兼容, ES6中支持ES5语法,现在浏览器的主流语法还是ES5, 即使在编写的时候使用ES6的语法,到浏览器中也会被解析成ES5的语法,然后去执行, 在这里提及到ES6是因为后边一些新的框架使用的是ES6来完成的,我们需要了解ES6的相关语法

第二个点是

块级作用域与局部作用域
ES5语法下,只有方法(函数)才能产生局部作用域, 在ES5语法下, 没有定义常量的概念, 且所有定义变量都不具有块级作用域

ES6语法下,块级作用域都可以作为局部作用域

ES6中,块级作用域的范围等价于局部作用域的范围

块级作用域和之前我们介绍过的全局作用域和局部作用域类似:
在JS中,基本上都是和block打交道,所以产生了块级作用域的概念

产生块级作用域的方式
{
    直接书写
}
if语句可以产生
while语句可以产生
for语句也可以产生
 

函数可以产生局部作用域, 除了定义在局部作用域中的全局变量(没有关键字的变量声明), 外界可以访问, 其他定义方式, 外界都不可以访问

块级作用域中的变量在块级作用域外无法访问, 

1、ES5定义变量

在ES5语法下,没有定义常量的概念,且所有定义变量都不具有块级作用域

使用var 定义出来的变量是 无块级作用域的变量  即使定义在块级作用域中,外界也可以访问

var num = 10;  
num = 10;  // 全局变量:在任意位置定义,在任何位置都可以访问到,但是定义全局变量与重新赋值语法相同,容易混淆,不建议使用(省略了关键词)
2、ES6定义变量

在ES6语法下, 定义变量(let)常量(const)都具有块级作用域

在ES6中块级作用域和局部作用域是等价的

let num = 10;  // 局部变量:变量是在程序运行可以改变的量 (有块级作用域)
// let定义的变量具有块级作用域,在块级作用域之外无法访问
const NUM = 10;  // 常量:在程序运行过程中,值不会发生改变
// const定义的常量具有块级作用域,在块级作用域之外无法访问
变量的定义: 变量是在程序运行过程中值可以改变的量
var num = 10;
    console.log(num);

定义常量: 常量是在程序运行过程中,值不会被改变的量
const NUM = 3.14;

JS中区分大小写
    console.log(num, NUM);
NUM是标标准准常量语法, 为只读的值, 不允许修改

JS中的变量命名规范
由字母,数字,_,$组成,不能以数字开头(可以包含中文字符,但是中文字符一般不建议使用)

区分大小写

NUM是标标准准常量语法,为只读的值,不允许修改

不能出现关键字及保留字

提倡使用小驼峰体命名规范, 支持 _ 连接语法

小驼峰体是第一个单词的首字母不大写,后边的单词首字母都大写

常用的关键字:

       
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.输入框: 以字符串形式接收用户输入内容
var info = prompt("请输入内容:");
console.log(info)

3.确认框: 根据用户选择确认或取消, 得到 true | false 两个布尔结果
var res = confirm("你是猪吗?");
console.log(res)

七、四种调试方法
四种调试方法,我们直接使用案例进行介绍:
一、在pycharm中进行调试的时候:
1.打断点(只能在js逻辑中打断点)之后使用debug运行

2.step Over: 表示不管是不是方法的调用,都将该句作为一条执行语句执行
   Force Step into:  表示进入方法中,下一步下一步
   step Into: 如果是函数或者方法,进入调用体之内一步一步走
   step-out: 退出调用体

二、在chorm浏览器中进行调试:

1.在检查页面中的Sources页面中,打开我们要调试的文件,在需要调试的位置打上断点(任何地方都可以打断点, 一般只在逻辑部分使用)

2. Resume script execution : 跳到下一个断点, 如果后面没有断点 ,就运行结束
    Step over next function call:  下一步,下一步

四种调试方法使用最多的是consol.log()和断点调试

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>调试方式</title>
</head>
<body>
调试方法
</body>
<script>
var a = 100;
var b = a;
var c = b;
// 第一种方式,使用打印操作来验证
// console.log(a, b, c);

//第二种是,使用弹出框将变量的值弹出来,由于弹出框一次只能弹出一个值(弹多个值时只弹最后一个),所以需要弹出三次才能将三个值弹完
// alert(a)
// alert(b)
// alert(c)

//第三种是使用文档的写入操作,将变量的值写入到页面中,但是这样做会影响到页面原有布局
// document.write(a, b, c)
// debug 断点
</script>
</html>
八、JS中的基本数据类型
一般基本数据类型有7种(有的不将null当基本数据,类型,我们这里是将努力作为基本数据类型的)

1、值类型
number:数字类型

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:函数类型

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:数组对象(可变类型)

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()

//数组与字符串之间的转换
b = a.join('@') //数组方法
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中的数据类型转换
数字|布尔 转换为 字符串

var a = 10 or true

String(a)

a..toString()
第一个点表示小数点  第二个点表示点语法
布尔|字符串 转换为 数字

var a = true or '10'

Number(a)

+ a

parseFloat()
parseInt()
字符串|数字 转换为 布尔

var a = 10 or '10'
Boolean(a)
自动转换

5 + null  // 5
"5" + null  // "5null"
"5" + 1  // "51"
"5" - 1  // 4
+"5" + 1  // 8
特殊产物

NaN: 非数字类型
NaN与NaN不相等(因为不是数值类型的有很多种,不能确定是哪种)
不与任何数相等,包含自己
利用isNaN()进行判断
值类型转换总结:
1.通过类型声明转换
Number() | String() | Boolean()

2.方法(函数)
parseInt('10') | parseFloat('3.14')
123..toString()

3.隐式转换
+'10' => 10
'' + 10 => '10'

九、运算符
1、算数运算符
前提: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
% 取模(余数) x=n/2 1 5
++ 自增 x=++n 6 6
x=n++ 5 6
-- 自减 x=--n 4 4
x=n-- 5 4


任何一个自然数对n取余,结果为[0,n-1]

++在变量后(num++),先将变量的值拿去使用,再自身增1,( ++在后的时候++的优先级会变得很低,打印语句都比它高 )

++在变量前(++num),先将变量自身增1,再将结果拿去使用,( ++在前的时候,优先级会很高 )

总结: 不管++在前在后,运算结束后, 变量自身值一定自增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
总结&&: 全真为真, 有假则假
总结||:    全假则假, 有真则真
总结!:     真则假, 假则真

逻辑运算符的结果本质上为表达式值
表达式: 由数字,变量,运算符组成的合法式子

在逻辑运算符中,特别需要注意的点:(短路现象)

针对 && | ||
// 疑问: 逻辑运算符结果可能为逻辑运算符之前表达式的值,也可能是之后表达式的值
// 当逻辑运算符出现 短路现象 , 就是之前表达式的值, 否则(正常情形下), 就是之后表达式的值

// &&, 前一个表达式为假时, 整个式子的结果已经确定为假, 后表达式不会被执行, 就是被短路了
var num = 10;
res = false && num++;
console.log(res, num); // null, 10
res = null && ++num;
console.log(res, num); // null, 10

// ||, 前一个表达式为真时, 整个式子的结果已经确定为真, 后表达式不会被执行, 就是被短路了
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语法下,有变量的重复定义规则,不允许在同一作用域下,出现变量的重复定义
如果重复定义一个变量, 在编辑器中不会报错,但是到浏览器中浏览器解析的时候会报错
在不同的作用域中是可以编译通过的

    let abc = 10;
    // let abc = 20;  // 在es6语法下,有变量的重复定义规则, 不允许在同一作用域下,出现变量的重复定义
    {
        let abc = 20;  // 可以编译运行通过
    }


下面是ES6中新的赋值方法:

数组的解构赋值

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
posted @ 2018-12-24 21:13  逐梦~前行  阅读(1586)  评论(0编辑  收藏  举报