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"

.常用方法：

实例：

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

常用方法

例：

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中，对象是拥有属性和方法的数据。

自定义对象

自定义对象时，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);