一、JavaScript简述
JavaScript也是一门编程语言,有人将其简称为JS,由创造者Netscape公司1996年将其提交给国际标准化组织ECMA,希望借此成为国际标准!后来ECMA发布第一版,规定了浏览器脚本语言的标准,并将其命名为ECMAScript,这是为了避免商标纠纷!而现在因为Netscape公司早已消散,因此叫JavaScript也没关系了。它虽然有Java开头,但其实跟Java语言一毛钱关系没有,纯粹是当年蹭Java热度而命名!
JavaScript是一门面向对象的轻量级脚本语言,可插入HTML页面,以此实现动态效果,又因其较为易学,因此受到广泛欢迎!
这里顺带提一下学习一门编程语言的套路:
- 变量
- 数据类型
- 流程控制
- 函数
- 对象(不是面向对象则无)
- 内置方法、模块
二、JavaScript引入方式
JS代码引入跟CSS非常相似,可以在HTML页面的指定标签内直接书写代码,也可通过引入外部文件来导入代码!
2.1、script内直接写
这点跟CSS一样,scrip可以放head内也可以是body内,推荐body。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
//在这里直接写JS代码
</script>
<style></style>
</head>
<body>
</body>
</html>
2.2、导入文件
<script src="test.js"></script>
JS代码书写位置或者说调试可以是单独开设js文件,也可以是浏览器比如Chrome的console窗口,此窗口类似terminal,实时交互!
三、JavaScript语法规范
3.1、JS注释
3.1.1、单行注释
// 单行注释
3.1.2、多行注释
/*
多行注释
*/
3.2、JS结束符
Python代码没有结束符一说,但是JS以分号作为语句的结束,你就是不写它也能执行!
3.3、变量声明
Python变量不需要事先声明,而JS是需要事先声明变量名的!
- JavaScript变量名可以是字母、数字、下划线、$组成,但不能以数字开头。
- JavaScript变量名区分大小写,且官方推荐使用驼峰体命名规范。
- 声明变量用关键字var或者let来声明。
其中var声明的变量全局有效,而let是6.0+版本后推出的,它作用于局部,这点跟Python的名称空间查找顺序是一致的!
let name = 'sanxi';
name;
"sanxi"
3.4、常量
Python中没有常量这个概念,墨守成规是纯大写的变量名当作常量来看;而JS在6.0+后推出用const,常量声明就无法更改!
const TELL_NUM = 666;
undefined
TELL_NUM = 777;
VM432:1 Uncaught TypeError: Assignment to constant variable.
at <anonymous>:1:10
四、JavaScript数据类型
查看数据类型使用关键字typeof
4.1、数值类型(number)
Python中数值类型为int,JS中为number!
let age = 18:
typeof age;
"number"
4.1.1、类型转换
取整数
parseInt('3.14159')
3
浮点
parseFloat('3.14159')
3.14159
特殊类型
parseFloat('hello')
NaN
NaN,not a number,它是数值类型,但表示的意思是“不是一个数字”,常用于表示某个值不是数字。
4.2、字符类型(string)
支持单双引号,但不支持三引号。在Python中拼接字符串不推荐使用+,推荐使用join方法,但在JavaScript推荐使用+来拼接!
字符类型常用方法
length
统计长度
let name = 'chrystal';
undefined
name.length
8
trim系列
移除空白字符
//移除空白字符
name1.trim()
"sanxi"
//移除左侧空白字符
name1.trimLeft()
"sanxi "
//移除右侧空白字符
name1.trimRight()
" sanxi"
charAt
返回索引所对应的第N个字符
name
"chrystal"
name.charAt(3)
"y"
indexOf
返回指定字符串所在索引位置
name.indexOf('t');
5
concat
字符串拼接
name.concat(name1);
"chrystal sanxi "
substring
根据索引取值,第一个参数为起始位置,第二个参数为结束位置,跟Python一样顾头不顾尾!
name.substring(5,8)
"tal"
slice
切片
name.slice(3,8)
"ystal"
toLocaleLowerCase
转成小写
let name = 'ChryStal'
undefined
name.toLocaleLowerCase()
"chrystal"
toLocaleUpperCase
转成大写
name.toLocaleUpperCase()
"CHRYSTAL"
拼接字符串补充
以下内容来自博客园:JsonJi,原地址:https://www.cnblogs.com/Dominic-Ji/p/9111021.html
string.slice(start, stop)和string.substring(start, stop):
两者的相同点:
如果start等于end,返回空字符串
如果stop参数省略,则取到字符串末
如果某个参数超过string的长度,这个参数会被替换为string的长度
substirng()的特点:
如果 start > stop ,start和stop将被交换
如果参数是负数或者不是数字,将会被0替换
silce()的特点:
如果 start > stop 不会交换两者
如果start小于0,则切割从字符串末尾往前数的第abs(start)个的字符开始(包括该位置的字符)
如果stop小于0,则切割在从字符串末尾往前数的第abs(stop)个字符结束(不包含该位置字符)
模板字符串
JS6以后,引入了增强版字符串:模板字符串,用``标识。它可以当成普通字符串、可以定义多行文本,还可以跟Python的%s和f''一样实现格式化字符串,需要注意的是里面引用变量跟shell一样要加$!
`${name} go out with ${name1}`
"ChryStal go out with sanxi "
4.3、布尔值(boolean)
在Python中,布尔值是首字母大写的,而在JS中布尔值是全小写的!
false值
- 空字符串
- 0、null
- undefined
- NaN
null与defined
null
表示值为空,一般都是指定或者清空一个变量时使用
name;
"ChryStal"
name = null;
null
undefined
表示声明了一个变量,但是没有做初始化操作,即没有赋值;如果函数没有指定返回值的时候,返回的也是undefined。
4.4、对象
JavaScript与Python一样都是面向对象编程,它允许自定义对象,对象是带有属性和方法的特殊数据类型!JS中数组和自定义对象统一称为object,且不支持负数索引。
4.4.1、数组
数组类似于Python的列表[]
let l1 = [11,22,33];
undefined
typeof(l1);
"object"
JS数组方法 | 作用 | 对应Python列表方法 |
---|---|---|
length | 统计元素个数 | len() |
push | 尾部添加元素 | append() |
pop | 删除指定元素并打印其值 | pop() |
unshift | 头部插入元素 | insert(),指定位置 |
shift | 头部移除元素 | remove |
slice | 切片 | : |
sort | 排序 | sort |
reserve | 反转排序 | reserve |
join | 将数组元素拼接成字符串 | join,只能拼接字符串 |
forEach
将数组的元素回调给函数
let l1 = [11,22,33]
undefined
l1.forEach(function(value,index,arr){console.log(value,index,arr)},l1);
VM155:1 11 0 (3) [11, 22, 33]
VM155:1 22 1 (3) [11, 22, 33]
VM155:1
splice
删除元素并添加新元素,第一个参数为初始索引号,第二个参数为删除元素个数,第三个为可选的新添元素
l3.splice(0,3,666)
(3) [33, 55, 77]
l3
(2) [666, 99]
map
数组中的每个元素都会执行这个函数
l1.map(function(value,index){return value + 1})
(3) [12, 23, 34]
4.4.2、自定义对象
什么是自定义对象?它类似于Python的字典,但是JavaScript的只能用字符串作为键!
创建自定义对象也有两种方式:
直接写键值对
var d1 = {'name':'sanxi','age':18}
new方法
JS取值和赋值都比Python字典方便,也支持for循环。
let var2 = new Object();
undefined
var2.name = 'chrystal'
"chrystal"
4.4.3、date日期对象
let var3 = new Date();
var3.getDate() //获取当前几号
2
var3.getDay(); //获取当前星期几
2
var3.getMonth(); //获取当前月份,注意,JS奇葩,它是从0-11月份算的。
1
var3.getFullYear() //获取完整格式的年份
2021
var3.getYear() //获取短格式年份
121
var3.getHours() //获取当前几点
21
var3.getMinutes() //当前几分
10
var3.getSeconds() //当前几秒
36
var3.getTime() // 当前时间戳
1612271436294
var3.toLocaleString() // 当前本地时间
"2021/2/2下午9:10:36"
4.4.4、JSON对象
在Python中,序列化反序列化用的是dumps、loads方法;而在JS也有类似的方法,一起来看看:
stringify
类似于dumps
let obj = JSON.stringify(var2);
undefined
obj
"{"name":"chrystal","age":18}"
parse
let obj2 = JSON.parse(obj);
undefined
obj2
{name: "chrystal", age: 18}
4.4.5、RegExp(正则)对象
Python中如果需要使用正则,需要借助于re模块;JS需要创建正则对象,它有两种创建对象的方式:
new新对象
let 变量名 = new RegExp('正则表达式')
let reg = new RegExp('^[a-zA-Z][a-zA-Z0-9]{0,10}$')
undefined
reg.test('sanxi666')
true
直接赋值正则
let 变量名 = /正则表达式/
let reg2 = /^[a-zA-Z0-9]{0,10}$/
undefined
reg2.test('chrystal')
truexxxxxxxxxx5 1let reg2 = /^[a-zA-Z0-9]{0,10}$/2undefined3reg2.test('chrystal')4truereg2 = /'^a-zA-Z0-9$'/5/'^a-zA-Z0-9$'/
匹配
烦人的正则,不写了!
五、运算符
5.1、算数运算符
+ - = * / % ++ --
var x=10;
var res1=x++;
var res2=++x;
这里由于的x++和++x在出现赋值运算式,x++会先赋值再进行自增1运算,而++x会先进行自增运算再赋值!
5.2、比较运算符
> >= < <= != == === !==
1 == “1” // true 弱等于
1 === "1" // false 强等于
//JS是一门弱类型语言(会自动转换数据类型),当你用两个等号进行比较时,JS内部会自动先将数值类型的1转换成字符串类型的1再进行比较,所以我们以后写JS涉及到比较时尽量用三等号来强制限制类型,防止判断错误!
5.3、逻辑运算符
&& || !
一定要注意什么时候返回布尔值,什么时候返回的是数据
5.4、赋值运算符
+= -= *=,和Python一样
六、流程控制
6.1、if判断
语法
if (condition) {
} else if { //类似于Python的elif
} else {
}
演示
let age = 18;
undefined
if(age>17 && age<40){console.log('青年人')}else if(age<18){console.log('少年人')}else{console.log('老年人')}
VM91:1 青年人
undefined
在JS中,代码是没有缩进一说的,我们出于Python书写习惯,可以人为加上!JS套路是小括号是条件,大括号是代码块!
6.2、switch判断
这个类似shell的case
语法格式
switch (key) {
case value:
break; //必须要break,不加break,匹配到一个后,就一直往下执行!
default: //类似于if的else
break;
}
演示
switch(day.getDate()){case 0:console.log(false);break;case 2:console.log(true);break;default:console.log('stupied');}
VM446:1 true
undefined
七、循环
7.1、for循环
语法格式
for (let index = 0; index < array.length; index++) {
const element = array[index];
}
演示
打印0-9数字
for (let index = 0; index < 10; index++) {
console.log(index);
}
VM451:2 0
VM451:2 1
VM451:2 2
VM451:2 3
VM451:2 4
VM451:2 5
VM451:2 6
VM451:2 7
VM451:2 8
VM451:2 9
undefined
循环打印出数组里每一个元素:var l1 = [11,22,33,44,55]
for(let index=0;index<l1.length;index++){console.log(l1[index]);}
VM678:1 11
VM678:1 22
VM678:1 33
VM678:1 44
VM678:1 55
undefined
7.2、while循环
语法
//while有的条件循环,for也有,所以我觉得它没价值
while (condition) {
}
八、三元表达式
JS中三元表达式,条件成立取问号后面的值,不成立取冒号后面的值,可以嵌套
var a = 1;
var b = 2;
var c = a > b ? a : b
undefined
c
2
九、函数
在Python中定义函数需要用到关键字def,JS中定义则是function。函数的全局变量与局部变量与Python名称空间顺序一致.
语法格式
function 函数名(形参...){函数体代码}
之前已经演示过了,不再演示,此处说明JS的不严谨:
参数多传没问题,只会处理对应的数据;少传了也行,用undefined顶替。。。。。。
9.1、关键字arguments
能够获取到函数接收到的所有的参数放在一个数组里面,可以配合if和length做传多传少的输出!
9.2、函数返回值
使用的也是return,如果返回多个值,则只取最后一个。
9.3、匿名函数
就是function后面不跟名字而已
9.4、箭头函数
箭头左边是形参,右边是返回值
var/let func1 = v => r;
等同于
var func1 = function(v)