51、JavaScript基础

前端基础 / 2021-02-02

一、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)

世间微尘里 独爱茶酒中