在Java基础上学习JavaScript

JS的几种书写方式

• 内嵌式，把js写到script标签中
• 行内式，把js写到html元素的内部
• 外部式，把js写到一个单独的.js文件中，在html里面通过script来引入

1.注释

JS：//
HTML：<!-- -->
CSS:/* */

2.字符串

可以使用单引号也可以使用双引号

3.输出

console.log把日志输出到控制台中

4.变量

定义一个变量：

var 变量名 = 初始值;

不管创建的变量是啥类型都是统一使用var这个关键字来表示，至于变量是啥类型取决于初始化的值是什么类型。
使用变量（读取+修改）就和java一样。小问题在于变量修改的时候本来是个数字类型，在赋值的时候可以给他赋值一个数字类型，也可以赋一个字符串类型，可是任意类型，这时候a变量的类型也随之发生改变。

变量的类型在运行过程中，随着赋值而发生改变这种行为称为“动态类型”（包括Python，PHP,Ruby）。
像java这样的语言不支持这种运行时类型发生改变，这种行为称为“静态类型”（包括C,C++,jAVA,Go，Rust）

var num = 10;//创建了一个名字为num的，数字类型的变量
var s = 'hello';//创建了一个名字为s的，字符串类型的变量
var arr = [];//创建了一个名字为ar，数组类型的变量

现在更倾向使用let来代替var，var是旧版本其实是违背直觉。引入let也就有了块级作用域，一个变量在{}内部定义是无法被{}外部访问的。js中var定义而变量{}内部的代码，是可以访问到{}外部的变量的。

5.数据类型

• num：数字，不区分整数和小数
• boolean：true真，false假
• string：字符串类型,很多操作都是和Java类似的，如果字符串里本身就包含了单引号或者双引号，就可以使用单双引号灵活搭配的形式，来避免使用转义字符。js中的转义字符也是支持的。
• undefined：只有唯一的值，表示未定义的值。一个未被初始化的变量就是undefined，这其实是一种非法的情况，不提倡使用。
• null：只有唯一的值null，表示空值，属于合法情况。
• NaN:表示当前的结果不是一个数字，比较常见的操作Not a Number，如果运算得到不是数字的值就会出现NaN

6.求长度

通过length属性，Java里的字符串求长度是length()，谈到长度就得明确长度单位，js此处长度单位是“字符”

let s = "你好";
console.log(s.length);//2

7.字符串拼接

和Java类似，直接使用+来进行拼接

8.布尔类型

在js中布尔类型会被当成1和0来处理，Java不会和数字混淆。

let a = true;
console.log(a+1);//2

这中设定方式为“饮食类型转换”，其实并不科学，如果一个编程语言越支持隐式类型转换，就认为类型越弱（C,JS,PHP认为是弱类型的编程语言），如果一个编程语言越不支持隐式类型转换，认为类型越强（Java，Go，Python认为是强类型的编程语言）。

强类型意味着类型之间的差异更大界限更明确。弱类型意味这类型之间差异不大，界限更模糊。

9.运算符

1）比较操作符

==比较相等（会进行隐式类型转换），只是比较两变量的值，而不比较两个变量的类型，如果两个变量能够通过隐式类型转换，专成来相同的值就认为也是相同的。
！=
===比较相等（不会进行隐式类型转换），即要比较变量的值，也要比较类型，如果类型不相同就直接认为不相同。
！==

比较两个对象有三个维度的比较：

1. 比较身份（是不是同一个对象）
2. 比较值（对象里面存储的数据是否相同）
3. 比较类型（两个对象是否是同一个类型）

2）&&和||

js中的&&和||返回的是其中一个表达式

c = a || b
如果a的值，为真（非0），此时c的值就是表达式a的值
如果a的值，为假（为0），此时c的值就是表达式b的值

c = a && b
如果a的值，为假，此时c的值就是表达式a的值
如果a的值，为真，此时c的值就是表达式b的值

衍生出了js一种习惯用法，判定变量是否为“空值”，则赋予一个默认值

let x = null;
if(!x){
   x = 0;
}

//等价于
x = x || 0;

3）/

js中不区分整数和小数都是number

console.log(1/2);//0.5
console.log(5/2);//2.5
console.log(5%2);//1

10.数组

1）创建

let arr = new Array();//这种写法更像是java中创建了一个对象，很少使用

let arr1 = [];
let arr2 = [1,2,3,4];
let arr3 = [1, 'hello', null, undefined, true];//里面的元素可以是不同的类型

这里的和java差别很大，java定义数组的时候使用int[]类型，针对数组初始化的时候使用的是{}，而js使用[]，这个就叫做数组。在java中int[]整形数组，String[]字符串数组。而在js中就只有一种数组，就叫数组。

2）打印

js中直接通过console.log()就可以打印数组内容

3）获取数组元素

通过下标来获取元素，下标也是从0开始计算的。

重点区别：
1）在js中超出数组下标范围0->length-1，当访问问超出范围的下标的时候得到的结果是undefined，不会抛出异常。
2）在js中超出数组下标范围0->length-1，增加一个元素也不会抛出异常，例如一个数组元素包含1,2,3,4。当在下标为100增加元素10，会出现中间空属性*96，中间元素认识undefined。

3）在js中在不合法的下标位置增加一个元素也不会抛出异常。

此时的-1与其说是一个下表不如说是一个属性，并没有印象到数组的长度。
4）在js中的数组还可以接map的活。

这里说数组是一个map，更准确地说是一个对象。arr[‘hello’]就是在给arr这个对象新增了一个属性，属性名字是hello，属性的值是10。

arr['hello'] = 10;
console.log(arr);
console.log(arr['hello']);
console.log(arr.hello);

4）获取数组长度
通过.length就能获取到，js里length属性是可以改的，像-1，'hello’都没办法作为下标的数组长度

5）新增元素
最常见的插入操作，push方法能够给数组末尾追加一个元素。（java arraylist里面的add操作）

6）删除元素
splice，针对数组中的摸个区间进行替换，可以用于删除，也可以用于插入元素

let arr = [1,2,3,4,5,6];
arr.splice(2, 3, 100, 200, 300, 400);//从2好位置开始删除3位，插入100,200,300,400
console.log(arr);

11.函数

1）不需要指定参数类型

function add(x,y){
    return x+y;
}

let result = add(10, 20);
console.log(result);//30

result = add('hello', 'world');
console.log(result);//helloworld

result = add('hello', 10);
console.log(result);//hello10

2）函数参数的个数，实参和形参个数不一样也是可以的

像上面的add方法，如果想实现任意个数字相加可以不必那么多版本

如果想让奶妈既支持数字相加，有支持字符串相加就少不了判定了，判定第一个参数是字符串还是数字（js，typeof），通过第一个参数类型来决定后续参数的默认值是0，还是""。如果实参比形参多，那么多出来的形参实际上就没有了。

3）函数->普通变量

函数就像一个普通的变量，可以被赋值给其他的变量，也可以作为另一个函数的参数，还可以作为另一个函数的返回值（函数和普通的变量并没有本质区别，但是函数这样的变量相比于普通变量多了个功能可调用），所谓的函数表达式其实就是把函数赋值给另一个变量了。

let f = function hello(x, y){
    console.log(x + y);
}
f(10, 20);
hello(10, 20);//err not defined

上述没有名字的函数也成称为匿名函数，还有另一个名字，lambda表达式。定义了一个没有名字的函数，并且把这个函数赋值给了f这个变量，后面就可以基于f来调用这个函数。

12.作用域链

13.对象

属性和方法的集合，在java中先有类在有对象，类可以视为一种自定义的类型。在js中对象是不依托于类的，在js中所有的对象都是一个类型object。在js中直接通过{}的方式就可以创建对象。

let student = {
    name: 'xxx',
    age: 20,
    height: 180,

    sing: function(){
        console.log("sing");
    },

    dance: function(){
        console.log("dance");
   }
};

console.log(student.name);
console.log(student.age);
student.sing();

每个属性和方法都是通过“键值对”这样的方式来表达的，{}表示这是一个对象。键值对之间通过，来分割。键和值之间通过：来分割。}后面跟；。后续就可以根据student。属性名的方式来进行访问了。js中的对象有哪些成员也是可以动态改变的。

var student = new Object();//和创建数组类似
student.name = "xxx";
student.height = 175;
student['weight'] = 170;
student.sing = function(){
    console.log('sing');
}

当前我们所说的构造函数，其实是一种特殊的函数，为了批量的创建出一组类似的对象.当看到函数内部通过this.这样的方式来创建对象的时候，此时这个函数大概率就是构造函数了。

var obj = new 构造函数名(实参)//new后面的名字，是构造函数的名字，不是“类”的名字