JavaScript

目录

• JavaScript
  • 什么是JavaScript
  • JavaScript组成部分
    • 特性
  • JavaScript引入方式
    • Script标签内写代码
    • 引入额外的js文件
  • JavaScript语言规范
    • 注释
    • 结束符
  • JavaScript语言基础
    • 变量声明
    • let变量
    • 常量声明
  • JavaScript数据类型
    • JavaScript拥有动态类型
    • 数值（Number）
    • 字符串（string）
      • 常用方法
    • JavaScript中的嵌入变量
    • 布尔值（Boolean）
      • null和undefined
    • 对象（object）
    • 数组
      • 常用方法：
      • forEach()
      • splicce()
      • map()
    • 运算符
      • 算数运算符
      • 比较运算符
      • 逻辑运算符
      • 赋值运算符
    • 流程运算符
      • if-else
      • if-else if-else
      • switch
      • for循环
      • while
      • 三元运算
    • 函数
      • 函数定义：
      • 函数中的arguments参数
    • 内置对象和方法
      • 自定义对象
    • Date对象
      • JSON对象
      • RegExp对象
      • Math对象

JavaScript

什么是JavaScript

• JavaScript是一种直译式脚本语言，是一种动态类型、弱类型、基于原型的语言，内置支持类型。
• 它的解释器被称为JavaScript引擎，为浏览器的一部分，广泛用于客户端的脚本语言，最早是在HTML（标准通用标记语言下的一个应用）网页上使用，用来给HTML网页增加动态功能。

JavaScript组成部分

• ECMAScript，描述了JavaScript的语法和基本对象
• 文档对象模型(DOM),描述处理网页内容的方法和接口
• 浏览器对象模型(BOM),描述与浏览器进行交互的方法和接口

特性

1. 脚本语言。JavaScript是一种解释型的脚本语言，C、C++语言先编译后执行,而JavaScript是在程序的运行过程中逐行进行解释。
2. 基于对象。JavaScript是一种基于对象的脚本语言,它不仅可以创建对象,也能使用现有的对象。
3. 简单。JavaScript语言中采用的是弱类型的变量类型,对使用的数据类型未做出严格的要求,是基于Java基本语句和控制的脚本语言,其设计简单紧凑。
4. 动态性。JavaScript是一种采用事件驱动的脚本语言,它不需要经过Web服务器就可以对用户的输入做出响应。在访问一个网页时,鼠标在网页中进行鼠标点击或上下移、窗口移动等操作JavaScript都可直接对这些事件给出相应的响应。
5. 跨平台性。JavaScript脚本语言不依赖于操作系统,仅需要浏览器的支持。因此一个JavaScript脚本在编写后可以带到任意机器上使用,前提上机器上的浏览器支 持JavaScript脚本语言,目前JavaScript已被大多数的浏览器所支持。

JavaScript引入方式

Script标签内写代码

<script>
    //在这里写代码
</script>

引入额外的js文件

<script src="js文件名.js"></script>

JavaScript语言规范

注释

//单行注释
/*
多行注释
*/

结束符

JavaScript中的语句要以分号（;）为结束符

JavaScript语言基础

变量声明

1. JavaScript的变量名可以使用_,数字，字母，$组成，不能以数字开头
2. 声明变量使用var 变量名；的格式来惊醒声明

var name="guapi";
var age=19;

PS

• 变量名是区分大小写的
• 推荐使用驼峰式命名规则
• 保留字不能作为变量名

let变量

ES6新增let命令，用法类似与var，但是let只在代码块内有效，类似于其他语言中的全局变量和局部变量

常量声明

ps：ES6新增const来声明常量。一旦声明，值不可更改

const pi = 3.1415;
pi //3.1415
pi=3 //跳错

JavaScript数据类型

JavaScript拥有动态类型

var x;//此时x为undefined
var x=1;//此时是数字
var x="guapi";//此时为字符串

数值（Number）

JavaScript不区分整形和浮点型，就只有一种数字类型

var a=12.34;
var b=20;
var c=123e5; //12300000
var d=123e-5//0.00123

还有一种方法NaN，表示不是一个数字（Not a Number）

常用方法：

parseInt("123") //返回123
parseInt("ABC")//返回NaN，NaN属性是代表非数字值得特殊值。该属性用于指示某个值不是数字。
parseFloat("123.456")//返回123.456

字符串（string）

var a="hello";
var b="world";
var c=a+b;
console.log(c);//得到helloworld

常用方法

方法	说明
.length()	返回长度
.trim()	移除空白
.trimleft()	移除左边得空白
.trimRight()	移除右边得的空白
.charAt(n)	返回第n个值
.concat(value,...)	拼接
.indexOf(substring,start)	子序列位置
.substring(from,to)	根据索引获取子序列
.slice(start,end)	切片
.toLowerCase()	小写
.toUpperCase()	大写
.split(delimiter,limit)	分割

拼接字符串一般使用“+”

JavaScript中的嵌入变量

ES6中引入了模板字符串。模板字符串是增强版的字符串，用反引号(`）标识。可以作为普通字符串，也可以用来定义多行字符串，或者在字符串中嵌入变量，有点像python中的format

var name="guapi";
`hello ${name}`;

布尔值（Boolean）

区别于Python，true和false都是小写

var a = true;
var b = false;

""(空字符串)、0、null、undefined、NaN都是false。

null和undefined

• null表示值是空，一般是在需要指定或清空一个变量时才会使用，如name=null；
• undefined表示档声明一个变量但未初始化时，该变量的默认值时undefined。还有就是函数无明确的返回值时，返回的也是undefined

null表示变量的值是空（null可以手动清空一个变量的值，使得该变量为object类型，值为null），undefined表示只声明了变量，但还没有赋值。

对象（object）

• JavaScript中得所有事物都是对象：字符串、数值、数组、函数...此外，JavaScript允许自定义对象。
• JavaScript提供多个内建对象，比如String、Date、Array等等
• 对象知识带有属性和方法得特殊数据类型

数组

• 数组对象的作用是：使用单独的变量名来存储一系列的值。类似于python中的列表

var a=[123,"abc"]
console.log(a[1])///"abc"

常用方法：

方法	说明
.length()	数组的大小
.push(ele)	尾部追加元素
.pop()	获取尾部的元素(会删除尾部元素)
.unshift(ele)	头部插入元素
.shift()	头部移除元素
.slice(start,end)	切片
.reverse()	反转
.join(seq)	将数组元素连接成字符串
.concat()	连接数组
.sort()	排序(根据ASSIC)
.forEach()	将数组的每个元素传递给回调函数
.splice()	删除元素，并向数组添加新元素
.map()	返回一个数组元素调用函数处理后的值的新数组

forEach()

语法

• forEach(function(currentValue,index,arr),thisValue)

参数

参数

描述

function(currentValue, index, arr)

必需。 数组中每个元素需要调用的函数。函数参数:

参数	描述
currentValue	必须。当前元素
index	可选。当前元素的索引值
arr	可选。当前元素所属的数组对象

thisValue

可选。传递给函数的值一般用 "this" 值。 如果这个参数为空， "undefined" 会传递给 "this" 值

splicce()

语法

• splice(index,howmany,item1,.....,itemx)

参数

参数	描述
index	必须。规定从何处添加/删除元素。该参数是开始插入和（或）删除的数组元素的下标，必须是数字
howmany	必须。规定应该删除多少元素。必须是数字，但可以是"0".如果没有规定此参数，则删除从index开始到最后的所有元素
item1,...,itemX	可选。要添加到数组的新元素

map()

语法

• map(function(currentValue,index,arr),thisValue)

参数

参数

描述

function(currentValue, index, arr)

必需。 数组中每个元素都会执行这个函数。函数参数:

参数	描述
currentValue	必须。当前元素
index	可选。当前元素的索引值
arr	可选。当前元素所属的数组对象

thisValue

可选。传递给函数的值一般用 "this" 值。 如果这个参数为空， "undefined" 会传递给 "this" 值

运算符

算数运算符

+ - * / % ++ --
x++表示先赋值在进行++运算
++x表示先运算，在赋值

比较运算符

> >= < <= != == === !==

PS:

1=="1"//true弱等于
1==="1"//false强等于
因为js是一门弱语言，所以使用两个等比运算符进行比较时，js会先进行转换，将数字类型的转换为字符串类型的

逻辑运算符

&&  ||  ！
与   或  非

赋值运算符

= += -= *= /=

流程运算符

if-else

var=10;
if (a>5)
    {
        console.log("yse");
    }else{
        console.log("no");
    }

if-else if-else

var a=10
if a>5{
    console.log("a>5");
}
else if(a<5){
    console.log("a<5");
}
else{
    console.log("a=5");
}

switch

var 99;
switch (day/10){
    case 9:
        console.log("优秀")
        break
        d
    case 8 :
        console.log("良好")
    	break:
    default;
        console.log("没有查到你的成绩")
}

如果switch语句一般都会加cas，防止switch继续执行

for循环

for(var i =0;i<10;i++){
    console.log(i);
}

while

while i=0;

三元运算

var a=1;
var b=2;
var c= a>b?:a:b
如果a>b那么把a给c否则把b给c

函数

函数定义：

与其他语言的函数非常类似，就是定义方式有区别

//函数的定义方式
function f1(参数){
    代码块
}

补充：

ES6中允许使用箭头来定义函数（=>）

var f =v=>;//相当于
var f=function(v){
    return v;
}

如果箭头函数不需要参数，就用圆括号代表参数部分：

var f=（）>=5;
//等同于
var f = function(){return 5};

var sum = (num1,num2)>=num1+num2;
//等同于
var sum=function(num1,num2){
    return num1+num2;//这里的return只能返回一个值，如果想返回多个值需要自己手动给他们包一个数组或对象中
}

函数中的arguments参数

function add(a,b){
    console.log(arguments);//相当于把传入的参数全部包含，放在一个列表里面
}

内置对象和方法

类型	内置对象	介绍
数据类型	Number	数字对象
	String	字符串对象
	boolean	布尔对象
组合对象	Array	数组对象
	Math	数学对象
	Date	日期对象
高级对象	Object	自定义对象
	Error	错误对象
	Function	函数对象
	RegExp	正则表达式对象
	Global	全局对象

自定义对象

JavaScript的对象（Object）本质上时键值对的集合（Hash结构），但是只能用字符串作为键

var a={
    "name":"guapi","age":18
      }

获取和遍历对象中的内容

var a={
    "name":"guapi","age":18
      }
//遍历
for (var i in a){
    console.log(i,a[i]);
}
//取值
a["name"]
a.name

Date对象

创建Date对象

//方法1：不指定参数
var d1 = new Date();
console.log(d1.toLocaleString());
//方法2：参数为日期字符串
var d2 = new Date("2004/3/20 11:12");
console.log(d2.toLocaleString());
var d3 = new Date("04/03/20 11:12");
console.log(d3.toLocaleString());
//方法3：参数为毫秒数
var d3 = new Date(5000);
console.log(d3.toLocaleString());
console.log(d3.toUTCString());
//方法4：参数为年月日小时分钟秒毫秒
var d4 = new Date(2004,2,20,11,12,0,300);
console.log(d4.toLocaleString()); //毫秒并不直接显示

Date对象的方法：

var d = new Date();
//getDate() 获取日
//getDay () 获取星期
//getMonth () 获取月（0-11）
//getFullYear () 获取完整年份
//getYear () 获取年
//getHours () 获取小时
//getMinutes () 获取分钟
//getSeconds () 获取秒
//getMilliseconds () 获取毫秒
//getTime () 返回累计毫秒数(从1970/1/1午夜)

JSON对象

var str1 = '{"name": "Alex", "age": 18}';
var obj1 = {"name": "Alex", "age": 18};
// JSON字符串转换成对象
var obj = JSON.parse(str1);
// 对象转换成JSON字符串
var str = JSON.stringify(obj1);

RegExp对象

// 定义正则表达式两种方式
var reg1 = new RegExp("^[a-zA-Z][a-zA-Z0-9]{5,11}");
var reg2 = /^[a-zA-Z][a-zA-Z0-9]{5,9}$/;

// 正则校验数据
reg1.test('jason666')
reg2.test('jason666')

/*第一个注意事项，正则表达式中不能有空格*/ 

// 全局匹配
var s1 = 'egondsb dsb dsb';
s1.match(/s/)
s1.match(/s/g)
var reg2 = /^[a-zA-Z][a-zA-Z0-9]{5,9}$/g
reg2.test('egondsb');
reg2.test('egondsb');
reg2.lastIndex;
/*第二个注意事项，全局匹配时有一个lastIndex属性*/

// 校验时不传参数
var reg2 = /^[a-zA-Z][a-zA-Z0-9]{5,9}$/
reg2.test();
reg2.test(undefined);

var reg3 = /undefined/;
reg3.test();

Math对象

abs(x)      返回数的绝对值。
exp(x)      返回 e 的指数。
floor(x)    对数进行下舍入。
log(x)      返回数的自然对数（底为e）。
max(x,y)    返回 x 和 y 中的最高值。
min(x,y)    返回 x 和 y 中的最低值。
pow(x,y)    返回 x 的 y 次幂。
random()    返回 0 ~ 1 之间的随机数。
round(x)    把数四舍五入为最接近的整数。
sin(x)      返回数的正弦。
sqrt(x)     返回数的平方根。
tan(x)      返回角的正切。