JavaScript

JavaScript概述

ECMAScript和JavaScript的关系

ECMAScript和JavaScript的关系是，前者是后者的规格，后者是前者的一种实现。

完整的 JavaScript

1. 核心（ECMAScript）
2. 文档对象模型（DOM） Document object model (整合js，css，html)
3. 浏览器对象模型（BOM） Broswer object model（整合js和浏览器）

JavaScript 是脚本语言

JavaScript是一种轻量级的编程语言。后来出现了node.js，可以作为后端语言来开发项目，js是一个既能做前端又能做后端的语言。

JavaScript 是可插入 HTML 页面的编程代码。

JavaScript 插入 HTML 页面后，可由所有的现代浏览器执行。

JavaScript引入方式

Script标签内写代码

在head标签里面可以写，在body标签里面也可以写

<script>

  // 在这里写你的JS代码

　//console.log('骑士计划！') #f12建打开浏览器的调试窗口，然后在console这个调试台就能看到这个内容了

  //alert('骑士计划！')  #这个是浏览器窗口一打开咱们这个文件，就弹出一个窗口

</script>

引入额外的JS文件

<script src="myscript.js"></script>

JavaScript语言规范

注释（注释是代码之母）

// 这是单行注释

 

/*

这是

多行注释

*/

结束符

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

JavaScript语言基础

变量的声明

变量名可以使用数字，字母，下划线，$组成，不能以数字开头。

声明变量使用var 变量名；      let 变量名；的格式来进行声明。

注：

       let 变量名;    声明变量时，所声明的变量只在let命令所在的代码块内有效。且不可更改

       变量名不能用保留字

例：

var a=123

a

123

let b=123

b

123

var b=123

VM267:1 Uncaught SyntaxError: Identifier 'b' has already been declared #提示不能更改，已经被定义

var a=2   #但是a能被更改

a

2

JavaScript数据类型

数值(Number)

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

var a=1.11

var b=2

var c=10e2

var d=25e-5

console.log(a,b,c,d)

1.11 2 1000 0.00025

console.log(typeof(a),typeof(b),typeof(c),typeof(d))   #类型

number number number number

字符串转数字(parseInt)

parseInt('123')

123

parseInt('12a3')

12

parseInt('12 3')

12

parseInt('a123')      #从上可知当转换时遇到非数字就停止转换，返回当前转换完的值

NaN

字符串(String)

var a='hello'

var b='world'

var c=a+b      #字符串拼接

c

"helloworld"

.常用方法：

方法	说明
.length	返回长度；不加括号时是属性
.trim()	移除两边的空白，得到一个新值，不更改原有的变量
.trimLeft()	移除左边的空白
.trimRight()	移除右边的空白
.charAt(n)	返回索引为n的字符，超过最大值返回空字符串
.concat(value)	拼接
.indexOf(substring,start)	查找某内容在字符串中的索引，start为初始查询位置
.slice(start, end)	切片
.toLowerCase()	全部变小写
.toUpperCase()	全部变大写
.split(delimiter, limit)	分割，limit为返回切割后的元素个数

实例：

var a=' hello world '

 

a.length

13

 

b=a.trim()

"hello world"

a

" hello world "

b

"hello world"

 

c=a.trimLeft()

"hello world "

c

"hello world "

 

a.charAt(2)

"e"

 

a.concat('ok')

" hello world ok"

 

a.indexOf('l',5)

10

 

a.slice(1,5)

"hell"

 

a.toUpperCase()

" HELLO WORLD "

a.toLowerCase()

" hello world "

 

a.split('l')

(4) [" he", "", "o wor", "d "]

布尔值(Boolean)

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

var a = true;

var b = false;

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

null和undefined的区别

　　undefined表示当声明一个变量但未初始化时，该变量的默认值是undefined。还有就是函数无明确的返回值时，返回的也是undefined。

　　null表示变量的值是空，undefined则表示只声明了变量，但还没有赋值。

对象(Object)

对象只是带有属性和方法的特殊数据类型。

数组

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

var a=[123,'ABC'];

a

(2) [123, "ABC"]

a[1]

"ABC"

a[0]

123

常用方法

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

例：

var a=[123,'123','1','2','3']

a

(5) [123, "123", "1", "2", "3"]

 

a.length

5

 

a.push('4')

6

a

(6) [123, "123", "1", "2", "3", "4"]

 

a.pop()

"4"

a

(5) [123, "123", "1", "2", "3"]

 

a.unshift('234')

6

a

(6) ["234", 123, "123", "1", "2", "3"]

 

a.shift()

"234"

a

(5) [123, "123", "1", "2", "3"]

 

a.slice(0,4)

(4) [123, "123", "1", "2"]

a

(5) [123, "123", "1", "2", "3"]

 

a.reverse()

(5) ["3", "2", "1", "123", 123]

a

(5) ["3", "2", "1", "123", 123]

 

a.join('+')

"3+2+1+123+123"

 

a.concat([222])

(6) ["3", "2", "1", "123", 123, 222]

a

(5) ["3", "2", "1", "123", 123]

关于sort()的注意

　　如果调用该方法时没有使用参数，将按字母顺序对数组中的元素进行排序，即是按照字符编码的顺序进行排序。

　　如果想按照其他标准进行排序，就需要提供比较函数，也就是自己提供一个函数提供排序规则，该函数要比较两个值，然后返回一个用于说明这两个值的相对顺序的数字。比较函数应该具有两个参数 a 和 b，其返回值如下：

　　若 a 小于 b，在排序后的数组中 a 应该出现在 b 之前，则返回一个小于 0 的值。

　　若 a 等于 b，则返回 0。

　　若 a 大于 b，则返回一个大于 0 的值。

function sortNumber(a,b){

    return a - b

}

var arr1 = [11, 100, 22, 55, 33, 44]

arr1.sort(sortNumber)

内置对象和方法

JavaScript中的所有事物都是对象：字符串、数字、数组、日期，等等。在JavaScript中，对象是拥有属性和方法的数据。

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

自定义对象

       自定义对象时，key可以不用加引号，取值方式有两种：

1. 1.      [‘key’]    这种方式时，key要加引号
2. 2.      .key 通过点取值

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

var a = {"name": "Alex", "age": 18};

console.log(a.name);

console.log(a["age"]);

或

var a={

name:'alex',age:18

};

运算符

算数运算符

+ - * /	正常的加减乘除
++ --	自加 自减

注意：

       i++：先执行逻辑，再自加1

       ++i：先自加1，再执行逻辑

比较运算符

>=  <  <=  !=  !==	正常的大小于
==  ===	弱等于    强等于

注意：

1 == “1”  // true  #弱等于，将1转换为字符串'1',在=号两个数据类型不同的时候，自动转为同一类型。

1 === "1"  // false #强等于，连同数据类型一起对比。

逻辑运算符

&&  ||  !  #and，or，非（取反）!null返回true

赋值运算符

= += -= *= /=  #n += 1其实就是n = n + 1

流程控制

if-else

if (a>5){

console.log('yes');

}else {

console.log('no');

}

yes

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 切换

switch (a){

    case 5:console.log('5');break;

    case 10:console.log('10');

    case 15:console.log('15');

}

10

15

切记要加break，不然自动执行之后的代码，不管条件满足与否。

switch (a){

    case 5:console.log('5');break;

    case 10:console.log('10');break;

    case 15:console.log('15');

}

10

for

for (var i=0;i<10;i++) {

  console.log(i);

}

while

var i = 0;

while (i < 10) {

  console.log(i);

  i++;

}

三元运算

var a = 1;

var b = 2;

var c = a > b ? a : b

函数

创建函数

定义函数：

function sum(a, b){

  return a + b;

}

sum(1, 2);

函数自动执行：

(function(a, b){

  return a + b;

})(1, 2);

匿名函数：

var f = v => v;

函数的全局变量和局部变量

变量生存周期

　　　　　　JavaScript变量的生命期从它们被声明的时间开始。

　　　　　　局部变量会在函数运行以后被删除。

　　　　　　全局变量会在页面关闭后被删除。

创建对象

创建对象时，命名的首字母要大写，实例化的时候使用new关键字进行实例化。

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");  #月/日/年(可以写成04/03/2020)

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());  //毫秒并不直接显示

JSON对象

var str1 = '{"name": "chao", "age": 18}';

var obj1 = {"name": "chao", "age": 18};

JSON字符串转换成对象

var obj = JSON.parse(str1);

对象转换成JSON字符串

var str = JSON.stringify(obj1);