前端学习之JS

JavaScript简介

JavaScript概述

JavaScript简称JS，是一种具有函数优先的轻量级，解释型或即时编译型的编程语言，它是一门世界上最流行的脚本语言。

JavaScript在1995年由Netscape公司的Brendan Eich，在网景导航者浏览器上首次设计实现而成。因为Netscape与Sun合作，Netscape管理层希望它外观看起来像Java，因此取名为JavaScript。

JavaScript的标准是ECMAScript，截至2012年，所有浏览器都完整地支持ECMAScript5.1。2015年6月17日，ECMA国际组织发布了ECMAScript的第六版，该版本正式成为ECMAScript2015，但通常称其为ECMAScript6或者ES6。

JavaScript由三部分组成：ECMAScript，文档对象模型，浏览器对象模型。

ECMAScript描述了该语言的语法和基本对象。

文档对象模型（DOM），描述处理网页内容的方法和接口。

浏览器对象模型（BOM），描述与浏览器进行交互的方法和接口。

JavaScript特点

JavaScript是一种属于网络的脚本语言，已被广泛用于进行web应用开发。常用来为网页添加各式各样的动态功能，为用户提供更流畅美观的浏览效果。通常JavaScript是通过嵌入在HTML中来实现自身功能。

主要特点有：

• JavaScript是一种解释型脚本语言
• 主要用来向HTML页面添加交互行为
• 可以直接嵌入HTML页面，但写成独立的js文件有利于结构和行为的分离
• 跨平台性
• JavaScript同其他语言一样，有其自身的基本数据类型、表达式和算术运算符以及程序的基本程序框架

入门

JavaScript的引入

在HTML中引入JavaScript有以下两种方式。

• 通过内部标签
• 外部引入

内部标签

<script>
    // js代码
</script>

外部引入：将js文件导入到HTML中，src中是js的路径。

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

基本语法

JavaScript是严格区分大小写的。

我们一般是在浏览器里进行代码的调试。如图：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-zJ7M7s9y-1581070780316)(C:\Users\len\AppData\Roaming\Typora\typora-user-images\1578550932599.png)]

可以使用console.log()在浏览器的控制台打印变量。

数据类型

变量

在JavaScript中，不管是什么类型的变量，都是使用var来定义的。但在ES6之后建议使用let来定义变量。

var a = 123;

number

在JavaScript中不区分小数和整数，都是number。

111   // 整数111
11.23  // 浮点数 11.23
1.11e3  // 科学计数法表示
-22    // 负数
NaN    // not a number
Infinity   // 表示无限大

字符串

字符串可以用单引号包裹，也可以使用双引号包裹。

'hello'
"javascript"

布尔值

布尔值就两个：true和false。

逻辑运算

&&    // 短路与   两个为真，则结果为真
||    // 短路或   一个为真，则结果为真
!     // 非   真即假，假即真

比较运算符

=    // 表示赋值
==   // 等于，类型不一样，值一样，则也会被判断为true
===  // 绝对等于，类型一样，值一样，结才为true

在JavaScript中，进行判断的时候，不要使用==，需要使用===来进行比较。

注意：

• NaN === NaN，NaN与所有的数值都不相等，包括自己。
• 我们只能通过isNaN(NaN)来判断这个数是否是NaN。

浮点数问题：

使用 console.log((1/3) === (1-2/3))，打印出的结果是false。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-cI3GeHLi-1581070780318)(C:\Users\len\AppData\Roaming\Typora\typora-user-images\1578552787586.png)]

这个结果与我们预期的不一样，这是因为浮点数在进行运算的时候，会存在精度的问题。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-UlX0rdG4-1581070780318)(C:\Users\len\AppData\Roaming\Typora\typora-user-images\1578552970162.png)]

所以要尽量避免使用浮点数进行计算。可以使用比较两数相减的绝对值是否小于某个数来解决问题。如

Math.abs((1/3)-(1-2/3))<0.0000000001;

null和undefined

null代表空。

undefined代表未定义。

数组

在Java中数组的中的元素必须是相同类型，但是在JavaScript中数组的元素可以是不同的类型。

var array = [1,2,3,'javascript',true,null];

也可以使用 new 关键字来创建数组。

new Array(1,2,3,"javascript",false);

在JavaScript中一般不会报错，如果数组下标越界则会报 undefined。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-tm4uXZY4-1581070780318)(C:\Users\len\AppData\Roaming\Typora\typora-user-images\1578556486351.png)]

对象

使用大括号，将对象的属性包裹。

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

var person = {
   name: 'xx', age: 10, gender: 'female'};

取对象的值，使用 对象名.属性。

> person.name
< "xx"
>person.age
< 10
> person.gender
< "female"

严格检查格式

在代码的第一行加上 ‘use strict’; 就表示是严格检查模式。这样做的好处是可以预防由于JavaScript的随意性导致的一些问题。

使用严格检查模式的前提是IEDA需要设置支持ES6语法。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-AsNnc4Kx-1581070780319)(C:\Users\len\AppData\Roaming\Typora\typora-user-images\1578574834101.png)]

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

局部变量建议使用let进行定义。

数据类型

字符串

1、正常的字符串一般使用单引号( ‘’ )或者双引号( “” )包裹。

2、转义字符则需要加上 \

\'    // 单引号
\"    // 双引号
\n    // 换行
\t    // 制表符
\u4e2d   // Unicode字符    \uxxxx
\x41     // Ascll字符      

3、多行字符串

// 使用Tab键上面的符号将字符串包裹起来
var str = `
hello
javascript
`

4、模板字符串

在java中，可以使用字符串拼接符进行字符串的拼接。在JavaScript中，可以使用${}进行拼接，此时需要使用Tab键上面的符号将字符串包裹起来。

let name = 'xx';
let age = 5;

let str = `hello,${
     name}`;

5、字符串长度

字符串是有长度的，可以使用 字符串名.length 来得到字符串的长度。

同java，字符串是不可变的。

6、大小写转换

进行字符串的大小写转换时，需要调用方法。需要注意的是字符串本身没改变，调用方法后返回了进行转换后新的字符串。

string.toUpperCase()    // 转为大写
string.toLowerCase()    // 转为小写

7、索引

可以通过 indexOf() 方法得到某个字符的索引。

string.indexOf('x');

8、子字符串

可以通过 substring() 方法截取字符串。

string.substring(0)   // 从第一个字符截取到最后一个字符
string.substring(1,6) // 从下标为1的字符开始，截取到下标为6的字符，但不包含下标为6的字符，即含头不含尾

数组

不同于java，JavaScript中的数组可以存放任意数据类型的元素。

1、数组长度

可以通过 数组名.length 获取数组的长度。

var arr = [1,2,'abc',true];
var len = arr.length;

需要注意的是，可以给 arr.length 赋值，此时数组大小就会发生变化。如果赋的值比原本的数组长度大，那么增加的元素为空；如果赋的值比原本的数组长度小，那么就会产生数组元素丢失的情况。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-TnxNeqlS-1581070780320)(C:\Users\len\AppData\Roaming\Typora\typora-user-images\1578560931732.png)]

2、数组下标索引

可以通过 indexOf() 通过元素获取下标索引。

arr.indexOf(1)

注意：数字1和字符串’1’是不同的。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Y2WeHnYP-1581070780320)(C:\Users\len\AppData\Roaming\Typora\typora-user-images\1578561177698.png)]

3、切片

我们可以通过 slice() 截取数组的一部分，该方法返回一个新的数组，不改变原数组。该方法类似于字符串中的substring() 方法。

arr.slice(2)      // 从下标为2开始截取到最后一个元素
arr.slice(1,3)    // 从下标为1开始截取到下标为3，得到的新数组中包含下标为1的元素，但不包含下标为3的元素，即含头不含尾

4、尾部操作数组 push() pop()

在数组的尾部操作数组，可以使用push()，pop()方法。

push(): 将元素压入到尾部
pop():  弹出尾部的一个元素

5、头部操作数组 unshift() shift()

在数组的头部操作数组，可以使用unshift()，shift() 方法。

unshift(): 将元素压入到头部
shift():   弹出头部的一个元素

6、数组排序 sort()

可以使用sort() 方法对数组进行排序。

arr.sort()

7、数组元素反转 reverse()

可以使用reverse()方法对数组元素进行反转。

arr.reverse()

8、数组的拼接

使用concat() 方法进行数组的拼接。该方法并没有修改数组，只是返回一个新的数组。

arr.concat([11,22,33])

9、连接符join

在打印拼接数组的时候，可以使用特定的字符串进行连接

arr.join('-')

10、多维数组

这里以二维数组为例：

arr = [[2,1],['5','6'],[true,false];

对象

对象是由若干个键值对构成的。

var 对象名 = {
   
    属性名1：属性值,
    属性名2：属性值,
    属性名3：属性值
}

举例：

var person = {
   
    name:'zhangsan',
    age:10,
    gender:'male'
}

在JavaScript中，{…}表示一个对象，键值对用于描述属性 xxx : xxx，多个属性之间用逗号隔开，最后一个属性不用加逗号。

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

1、对象赋值

person.name = 'lisi';    // 该语句时对对象中的name属性进行赋值操作

2、使用一个不存在的对象属性，程序不会报错，结果是undefined。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-nSpHn2wN-1581070780320)(C:\Users\len\AppData\Roaming\Typora\typora-user-images\1578570930206.png)]

3、动态删减属性

可以通过delete动态删除对象的属性。若删除成功则返回true，否则返回false。

delete person.age

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-9cemyUu0-1581070780321)(C:\Users\len\AppData\Roaming\Typora\typora-user-images\1578571061023.png)]

4、动态添加属性

直接给新的属性添加值就可以完成动态添加属性的操作。

person.score = 90

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-9l7MDTMM-1581070780321)(C:\Users\len\AppData\Roaming\Typora\typora-user-images\1578571210990.png)]

5、判断属性是否在对象中

使用 in 关键字判断。返回结果为true或false。

// 由于JavaScript中的键都是字符串，所以判断的时候，需要给属性名加上单引号或双引号
'age' in person
'toString' in person   // person对象继承了Object，所以person对象有toString

6、判断一个属性是否是这个对象自身拥有的

使用 hasOwnProperty() 进行判断。

person.hasOwnProperty('toString')   // 结果为false
person.hasOwnProperty('age')        // 结果为true

流程控制

JavaScript中的流程语句的使用和java差不多。

1、if语句

var score = 80;
if (score > 60 && score <75){
   
    alert('及格');
}else if(num >= 75 && num >85){
   
    alert('良好')
}else{
   
    alert('优秀')
}

2、while循环 需要注意的是避免死循环

var i = 1;
while(i < 50){
   
    i = i + 1;
    console.log(i)
}

3、do-while循环

var i = 1;
do {
   
    i = i + 1;
    console.log(i)
}

4、for循环

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

5、foreach循环

var arr = [1,2,3,4,5,6,7,8,9];

arr.forEach(function (value) {
   
    console.log(value)
})

6、for…in

var arr = [1,2,3,4,5,6,7,8,9];

// for(var index in array){}
for (var num in arr){
         // num表示的是下标
    console.log(arr[num])
}

Map和Set

Map 和 Set是ES6的新特性。

1、Map

var map = new Map([['Tom',80],['Jack',90],['Kim',85]]);   // [键,值]
var name = map.get('Tom');   // 通过键获取值
map.set('admin',123)         // 使用set()方法添加新的键值对，或者进行修改
map.delete("Jack")           // 使用delete()方法删除键值对

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-sPtPaXjR-1581070780322)(C:\Users\len\AppData\Roaming\Typora\typora-user-images\1578575205147.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ldoYnyRG-1581070780323)(C:\Users\len\AppData\Roaming\Typora\typora-user-images\1578575235938.png)]

2、Set

Set是无序且不重复的集合

var set = new Set([1,2,3,5,3,2,4