JavaScript快速入门

JavaScript

最流行的脚本语言。

语法跟Java高度相似。

JavaScript中的所有的键都是字符串，值是任意对象。

不像Java那种强类型语言，很多时候写错了都不知道。

1、快速入门

1.1、引入

JavaScript的标签相对于CSS不仅可以写在单独的文件和head里，还可以写在body里面。

script标签：

<script>
	alert('hello,world');
</script>

外部引入：

<script src="js/wb.jd"></script>

不用声明类型，在script标签内就是JavaScript：

<script type="text/javascript"></script>

注意：不要在添加自闭和的script标签

<script src="js/wb.jd"/> 错误写法，script标签必须成对出现

1.2、变量以及语法

JavaScript跟Java的语法几乎一样但没有这么严格，按照Java的规范写JavaScript绝对不会出错，反而会变得简单。

JavaScript所有的变量类型都为 var 不用考虑Java中的各种不同的类型之间需要转换的问题。

var num = 1;
alert(num);
// 建议每一行后面都加空格，否在在打包代码时会去除回车合并为一行时可能会出错。

var score = 70;
if(score > 60 && score < 70){
   
    alert("60~70")
}else if(score > 70 && score <80){
   
    alert("70~80")
}else{
   
    alert("other")
}

1.3、浏览器控制

在浏览器中使用开发人员工具进行调试（快捷键 F12，或者ctrl + shift + i）

elements页面元素

console控制台

alert(score)

console.log(score) 打印变量（相当于System.out.println(); ）

sources源码

​ 可以打断点，刷新网页进行加载。查看堆栈信息。

network网络

​ 查看请求信息

memory内存

application

可以查看本地存储，cookies

security安全性

1.4、数据类型

JavaScript文档API中文手册

变量

不能以数字开头，一般变量以_$命名

只有一种变量类型 var

数字

JavaScript不区分小数和整数

123//整数
12.1//浮点数
1.233e1//科学计数法
-1//负数
NaN // not a number
Infinity // 无限大

字符串

‘abc’ “abc”

布尔值

ture，false

逻辑运算

与或非

&& 与：两个都为真结果为真

|| 或：一个为真结果为真

! 非：取反，真即假，假即真

比较运算符

= 赋值

== 等于，类型不一样值一样也会判断为ture

!== 不等于

=== 绝对等于，类型一样值一样才会为ture

在作比较的时候不要使用这跟Java不一样，要使用=

NaN与所有的数值都不相等，包括自己

判断是否是NaN只能使用：

isNaN(NaN)

浮点数问题

> console.log(1/3) === (1-2 / 3)

< false

尽量避免使用浮点数进行运算，存在精度问题：

> console.log(Math.abs(1/3 - (1-2/3))<0.00000001)

< ture

null和undefined

null 空

under fined 未定义

数组

JavaScript中的数组的数值可以是不同的类型

var arr = [1,2,3,4,5,'hello',null,ture];
new Array(1,12,3,4,5,'hello');

> console.log(arr[0])

< 1

> console.log(arr[6])

< null

> console.log(arr[8])

< underfinde

下标越界提示underfinde

对象

对象使用大括号，数组使用中括号。

每个属性之间使用逗号隔开，最后一个不需要。

var person = {
   
    name:"clover",
    age:3,
    tags:['JavaScript','Java','Web','...']
}

对象的取值：

> person.name
< "clover"
> person.age
< 3

1.5、严格检查模式

直接定义的变量为全局变量，如果需要导入多个js文件那将会出错。

‘use strict’;使用严格检查模式，预防JavaScript的随意性导致产生的问题。

局部变量使用let定义。

必须写在JavaScript的第一行。

<script>
    'use strict';
    let i =1;
</script>

2、数据类型详解

2.1、字符串

使用单引号或者双引号进行包裹。

转义字符：

\'
\n
\t
\u4e2	\u#### Unicode字符
\x41	Ascll字符

多行字符串：

var msg = 
    `hello
    world
    你好`

模板字符串：

let name = 'clover';
let age = 3;
let msg = `你好，${
     name}`

> console.log(msg)
< 你好，clover

字符串长度：

console.log(student.length)

字符串的可变性和不可变性：

> console.log(student[0])
< s
> student[0] = 1
< 1
> console.log(student)
< student

大小写转换：

//调取方法，不是属性
> student.toUpperCase()
> student.toLowerCase()

字符串截取：

能截取到第一个，截取不到最后一个

> student.substring(1)//从第一个字符串截取到最后一个
> student.substring(1，3)

2.2、数组

存储数据（知道如何存取），以下例举常用方法

Array可以包含任意的数据类型

var arr = [1,2,3,4,5,6]

长度：

> arr.length
< 6
> arr.length = 10
< 10
> console.log(arr)
< 10 [0,2,3,4,5,6,emty x 4]

可以通过下标取值，赋值。长度可以改变。

inedxOf() 通过元素获得下标索引

字符串的’1’跟数字1不同

slice() 截取Array的一部分，返回一个新的数组，类似于substring

pusb() ：压入到尾部

pop() ：弹出尾部的一个元素

unshift()：压入到头部

shift()：弹出头部的一个元素

sort()：排序

reverse()：元素反转

concat()：不会修改数组，返回一个新的数组

> arr.concat([1,2,3])
< (4)['a',1,2,3]
> arr
< (1)['a']

连接符join

< (3)[1,2,3]
> arr.join('-')
< "1-2-3"

多维数组：跟Java一样

2.3、对象

若干个键值对。跟Java类似：

'use strict';
var person = {
   
    name:"clover",
    age:3,
    email:"JueMing666@outlook.com",
    score:0
}

多个属性之间使用逗号隔开，最后一个属性无需逗号。

赋值：

> person.name = "name";
< "name";

不存在的对象会提示undefined

动态删除属性：

> delete person.name
< ture
> person
<   age:3
    email:"JueMing666@outlook.com"
    score:0

动态添加属性：

> person.sex = "男"
< "男"
> person
< 	age:3
    email:"JueMing666@outlook.com"
    sex:"男"
    score:0

判断属性值是否在这个对象那个中：xxx in xxx

> age in person
< ture
> 'toString' in person
< ture

判断一个属性是否是这个对象自身拥有的：hasOwnProperty()

> person.hasOwnProperty('toString')
< false
> person.hasOwnProperty('age')
< ture

2.4、流程控制

if判断，前面 数据类型 讲过了，跟Java一样。

'use strice';
var age = 3;
if(age>3){
   
    alert("3");
}else if(age > 0 && age <4){
   
    alert("0~3");
}else{
   
    alert("other");
}

循环：

while(age < 100){
   
    age+=1;
    console.log(age)
}

do{
   
    age+=1;
    console.log(age)
}while(age < 100)

for(let i = 0; i < 100; i++){
   
    console.log(i)
}

foEach循环：在Java里是循环，用来遍历数组。在这里是调用一个方法。

var arr = [1,2,3,4,5,6,7,8,9];
age.foEach(function(value)){
           console.log(value)
           }

for…in（打印下标）

for(var num in arr){
   
    if(age.hasOwnProperty(num)){
   
        console.log("存在")
        console.log(age[num])
    }
}

for…of（打印数组）

for(var num of arr){
   
	console.log(num)
}

2.5、Map 和 Set

ES6新特性

Map：

// 学生的成绩和姓名，如果学生很多就很麻烦
// var names = ["tom","jack","xioam"];
// var score = [100,99,88];

var map = new Map([['tom',100],['jack',99],['xiaom',88]]);
var name = map.get('tom');//通过key获得value
map.set(('admin',123456))