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" οnlοad="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  bytecase   catch  char   class* constcontinue   debugger   default    delete dodouble else   enum*  eval   export*extends*   false  final  finally    floatfor    function   goto   if implementsimport*    in instanceof int    interfacelet    long   native new    nullpackage    private    protected  public returnshort  static super* switch synchronizedthis   throw  throws transient  truetry    typeof var    void   volatilewhile  with   yield      六、三种弹出框1.普通弹出框alertalert("你丫真帅!!!");

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  6x=n++  5  6-- 自减 x=--n  4  4x=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  03、比较运算符(结果为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   true4、逻辑运算符运算结果通常为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

转载于:https://www.cnblogs.com/du-jun/p/10171014.html

Python-JS (JS介绍~JS的基础数据类型)相关推荐

前端面试 - JS总结（1） - 基础 (数据类型, 事件与函数, 原型链)
你不走出舒适圈,又怎么知道自己多坚强?! 前端面试 - JS总结(1) - 基础 (数据类型, 事件与函数, 原型链) 前端面试 - JS总结(2) - ES6 (let, 箭头函数, this) 前 ...
88是python语言的整数类型_Python基础数据类型题
Python基础数据类型题考试时间:三个小时满分100分(80分以上包含80分及格) 1,简述变量命名规范(3分) 1.必须是字母,数字,下划线的任意组合. 2.不能是数字开头 3.不能是pyt ...
[转载] python tuple类型如何索引_Python基础数据类型——tuple浅析
参考链接: Python tuple() Python中tuple的使用一.什么是元组? 有序列表叫元组:tuple.tuple和list非常类似,但是tuple一旦初始化就不能修改. 二.用法 1 ...
python数据导入一个列表_Python基础数据类型list 列表
列表list [] 列表的格式 lst_l = [1,'123',[1,'www',2],'包青天'] 列表也有索引 print(lst_l[0]) print([-1][0:2])#包青切片#切片 ...
python自学第13天之基础数据类型知识点补充
1.join 将列表转换成字符串,每个元素之间用xx拼接字符串转换成列表: split() 列表转换成字符串:join() 列表转换成字符串 join s = "_".join( ...
OpenCV的数据类型——基础数据类型
OpenCV有很多数据类型,从组织结构的角度来看,OpenCV的基础类型类型主要分为三类.第一类是直接从C++原语中继承的基础数据类型:第二类是辅助对象:第三类是大型数据类型.本文主要介绍OpenCV ...
js基础--数据类型检测的相关知识
欢迎访问我的个人博客:www.xiaolongwu.cn 前言最近工作有点忙,好几天都没更新技术博客了. 周末起床打开有道云笔记,发现自己的博客todolist里躺了一堆只有名字的文件. 话不多说, ...
pythondevp2p_以太坊GO、JAVA、PYTHON、RUBY、JS客户端介绍
原标题:以太坊GO.JAVA.PYTHON.RUBY.JS客户端介绍区块链兄弟社区,区块链技术专业问答先行者,中国区块链技术爱好者聚集地作者:佚名来源:CSDN 原文链接:http://blog ...
JS中的原始数据类型（基础数据类型）和引用数据类型
文章目录一.js的数据类型划分方式为原始数据类型(基础数据类型)和引用数据类型二.两种类型的区别 1.存储位置不同 2.传值方式不同 3.两种数据类型在实参和形参中的区别一.js的数据类型划 ...

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

Python-JS (JS介绍~JS的基础数据类型)相关推荐

最新文章

热门文章