Javascript的简单学习

发表于 | | 本文总阅读量 次
字数统计: 3k 字 | 阅读时长 ≈ 12 分钟

这里主要是写javascript的入门笔记….

一说到javascript和java，很多人都说它们的差异就是雷锋和雷峰塔的区别…..

java和js(javaScript)的区别

java是面向对象，跨平台的高级语言，是需要编译才能运行的语言。一般用作网站的的开发(servlet、jsp)，或者Android开发。

而javaScript是基于对象，弱语言，脚本语言，不需要编译，由浏览器解释执行。一般用于HTMl网页的动态功能，为网页增添动感。

两者只是名字有关系而已，下面就开始认识它吧。

js的基本数据类型

类型 说明 说明
number 数字型 包括整型和浮点型
bool 布尔值 true和false
string 字符串 ‘你好’和”你好”，可以用英文的单、双引号表示
null 空值 和其他语言有点不一样，还可以当做空对象或0处理
undefined 未定义 变量没有定义类型，也就是没有任何赋值

js基本数据类型就这5种，但因为js是弱语言，所以在实际使用过程中，并不区别哪种数据类型，你可以把a赋值成number类型，也可以是字符串等其他类型。

js的输入、输出与提示框

类型 说明
prompt() 网页弹出一个输入框
console.log() 内容打印到控制台，给开发人员调试
alert() 网页弹出一个提示框

注意：网页上的输入框大多数都是字符串型的。

下面就简单的代码实验：

我们的关注点应该是<script><script>里的内容。它里面才是js代码。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<!DOCTYPE html>     <!--HTML的声明-->
<html>   

<head>
    <script>	//<script type="text/javascript">在以前的版本这样写的
    			//因为网页的脚本语言也就只有javascript，所以可以省略
    	//var是定义一个变量，不写var也行，但还是有区别的
        var x = 10
        console.log(typeof x)
        x = '你好'
        console.log(typeof x)
        var num = prompt("请输入你喜欢的数")
        console.log(typeof num)
        alert(num)
    </script>
</head>
<body> 
</body>
</html>

写了这个代码，是不是感觉js的随意，没分号？？？js会自动插入分号，但我们应该给每个结束语句添加一个，规范和安全。

接着我们把这代码保存为XX.html，用浏览器打开。首先会弹出一个窗口，那就是js的输入窗口。可以输入任何一个数。这里输入的是2.接着点确定

然后弹出下面这个画面，在点确定

既然是代码，肯定是一行一行的运行，那我们的console.log打印到哪了？

我们可以去控制台查看，谷歌浏览器可以按F12打开，点击 Console,就有了

可以看到，x一开始是number类型，但我们可以把它变为string类型。

而prompt()输入的值，即使输入的是数字，但它的数据类型是字符串。

1
2
3
4
5
6
var a = null;
console.log(a+1);   // 1
var b = false;
console.log(b+1);   // 1
var c = undefined;
console.log(c+1);   // NaN

这次又看到了吗，null和bool都还可以进行加法，那自然也能减法，乘法等，而undefined因为没定义是啥类型，所以进行运算打印是一个数(NaN)。

js的隐式转换

在java中也有隐式转换，比如：

String str = 1+””; 把int型转为String类型，这是很常用的转换。

但java的转换也要注意优先级，其他的语言也要注意：

String str = 1+1+””+1+(1+2); 这里的答案是213字符串，不是11112字符串。

可js不仅有+把数字型转为字符串，还有*、/、-、%把字符串转为数字型。

我们来看看吧。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
var 			//js一般这样定义变量，这为啥不写一行，也算是一种规范吧
    str,
    num,
    ans;
str = 10+'12';
console.log(str);		//1012
str = 10+10+'12'+10+(10+10);
console.log(str);		//20121020
num = '5';
ans = num*2;
console.log(ans);		//10
ans = num / 2;
console.log(ans);		//2.5
ans = num-2;
console.log(ans);		//3
ans = num%2;
console.log(ans);		//1

这就是js运算符的特点了，当然js也有-=、++、–，&，|、!、&&、||、?:等等，和java一样的使用。这里就不一一赘述了。

js的分支和循环

js的条件语句和java一样，都是if，if-else，if-else if-else的用法。

js的循环语言也有 while()、for(;;)、do-while使用，但它还有另外两个循环。

1
2
3
4
5
6
7
8
9
10
var a = [4, 5, 6, 7];		//定义一个数组
a.name = '12';
//for...in
for (var i in a) {			//适用于对象
    console.log(i + ':' + a[i]);
}
//for...of
for (var i of a) {			//适用于数组
    console.log(i + ':' + a[i]);
}

这两个的区别，看结果就知道。

用in打印，js把数组当做对象处理，打印的是它们的属性：值。

而of打印，js只把数组处理为数组，打印 i 就是它的值。

js的数组

上面简单使用了数组，那我们在深入了解一下。

在js中，声明数组有两种种方式：

1
2
3
4
5
6
7
8
9
10
11
//第一种：直接赋值
var a = [1, 1.4, 'hi', true, null, undefined];
//第二种：用Array对象
var b = new Array(2);	//如果里面只写一个值，代表数组的容量
b[0] = 1;
b[1] = 'js';
b[5] = true;		//可以动态扩容
var c = new Array(2,'*',null);//多个就是也直接赋值
console.log(a);		//也可以a.toString()打印内容，这里是为了更直观看结果
console.log(b);
console.log(c);

通过上面能看到啥呢，第一，js的数组里可以存任意数据类型的变量；第二，数组的容量会动态分配；第三，js的数组也是类。可以简单理解为java的List。

那么数组既然是类，那么就有相应的方法：

方法挺多了，有些和java里的相同或相似，这里就直接推荐 w3school 教程或 MDN 查找文档学习。

js的函数

在java和方法一样的用法，都是为了方便调用重复性的代码。

这里有四种声明，一起来看看吧。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
//方法一：声明一个函数
function sum1(x, y) {
  return x + y; //可以return，也可以直接console.log(x+y)
}
console.log(sum1(1, 1));

//方法二：匿名函数
var sum2 = function (x, y) {
  return x + y;
}
console.log(sum2(1, 3)); //一定要记住，给sum赋值的是一个函数，所以要打括号

//方法三：lambada表达式
var sum3 = (x, y) => x + y;
console.log(sum3(3, 5))

//方法四：Function构造函数
var sum4 = new Function('x', 'y', 'return x+y');
console.log(sum4(3, 3));

当然，看着眼花缭乱的，我们最主要掌握的是前两个，第三个是ES6新加，版本低的浏览器可能不支持，但最好会使用。第四个好像不推荐使用。

js和其他语言对比一下，可以发现，没有修饰符，没有返回类型，只有方法名、返回值、方法体，甚至方法名和返回值都可以没有。

在js中，函数还可以传入少值或多值，我们来看看结果是什么。

1
2
3
4
5
function sum(x, y) {
  return x + y; 
}
console.log(sum(1)); //NaN
console.log(sum(1, 2, 3)); //3

可以发现，没有报错，值传的少输出了NaN，是因为x=1，而y=undefined，所以打印NaN。值传多的，则抛弃了多余的值。

那怎么处理？使用 arguments 关键字，是函数自带。

1
2
3
4
5
6
7
8
9
function sum() {
  var sum = 0;
  for(var i of arguments){
      sum += i;
  }
  return sum;
}
console.log(sum(1)); //1
console.log(sum(1, 2, 3)); //6

现在就可以不怕出错了，甚至形式参数都可以去掉了。

js的注意坑点

js一开始就是大神10天完成的，所以…..留下了很多坑。其中for…in就是其中一个。把数组当做类，才有了for…of的出现。

全局变量和局部变量

全局变量：就是java的成员变量，也就是一次声明，在任何一个块(函数、循环、分支等)内都可以运行，只有网页关闭才释放内存。

局部变量：只在函数声明有效，出了函数就不能使用，函数运行完成则释放内存。这里的局部变量是不是就太局限性了？

所以我们来看看吧。

1
2
3
4
5
6
7
8
9
10
11
12
while (true) {
  var a = 10;
  console.log(a); //10
  break;
}
console.log(a); //10
function printB() {
  var b = 5;
  console.log(b);
}
console.log(printB()); //5
console.log(b); //报错 b is not defined

js的局部变量只限于函数，其他的地方声明的都是全局变量。所以为了解决这个问题，ES6引入了let。

1
2
3
4
5
6
while (true) {
  let a = 10;   //注意var变为了let
  console.log(a); //10
  break;
}
console.log(a); //报错a is not defined

变量声明问题

最开始也说，变量可以不加var这个修饰符，那会怎么样。

1
2
3
4
5
6
function printA() {
  a = 10;
  console.log(a);
}
printA();
console.log(a);

是不是惊了！明明在函数定义的a，出了函数也能起作用。

因为，在js中，有作用域链，函数里有a，但不知道是哪来的，js就向上寻找，一层一层往外找，如果没有，就自动生成一个全局变量。所以一定要注意规范。

所以ES6添加了 ‘use strict’; 确保我们写的代码严格执行。

1
2
3
'use strict';
a = 10;
console.log(a);	//报错 a is not defined

现在这里就会报错，因为我们没有定义a这个变量。

变量提升

在其他语言中，一定都是先声明变量并赋值，在参与运算，否在编译器自动就报错了，但js有一个作用域提升，我们来看看。

1
2
3
4
console.log(b);   //undefined
var b = 10;
console.log(b);   //10
console.log(a);   //报错  a is not defined

我们先打印b，在给他赋值，但是并没有报错，而是打印undefined未定义。因为js在运行时，先找到变量，在运行代码，就像下面这样。

1
2
3
4
var b;
console.log(b); //undefined
b = 10;
console.log(b); //10

虽然变量提升想法挺好，但是，真的不建议这样做，先给变量赋值在参与运算在哪都行的通。

写代码一定要规范，尤其像js这样的弱语言，有时候看着没错，一运行，很可能就不是想要的结果。

js的对象

js是基于对象的语言，也就是把任何事物都当做对象处理，自然也有对象。

下面是它的两种声明方法。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
//方法一：直接={}
var o = {
  name: 'KEKEXI',
  age: 18,
  job: '码农',
  '爱好': '敲代码', //不建议用''定义属性
  sayHi: function () {
    console.log('你好，我是' + o.name); //可以用.来使用属性
  }
}
//也可以在外面声明属性
o.home = '中国';
o.hobby = function () {
  console.log(o['爱好']) //''的属性只能用[]来使用
}
console.log(o['name']); //当然一般的属性也可以用[]
o.sayHi();

//方法二：new Object()      其他的使用和上面的一样
var o2 = new Object();
o2.name = 'KEKEXI';

上面声明的只是一次类，如何还有相同的类，只能在copy，就会造成代码的冗余，所以下面使用的构造函数。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
function Obj(name, age, job) {
  this.name = name;
  this.age = age;
  this.job = job;
  this.hobby = function () {
    console.log('敲代码');
  }
}

var kex = new Obj('KEKEXI',18, '码农');
kex.sayHi = function () {
  return ('你好，我是' + kex.name);
}
console.log(kex.name);
console.log(kex['job']);
kex.hobby();

所以在js中，函数也是对象，但要区别普通函数和构造函数，普通函数我们可以直接调用，但构造函数，我们要new出来。

当然，我们js也有内置对象，想Array，Date，String，Math等。

也有像Java的Integer，这样的包装类，比如new Number()等等 。

这里就不在阐述了，总之，这是js基础，也许看起来和其他语言的区别不大，后面还有js的面向对象编程和JQuery库…你才知道js的强大。

谢谢您对我的支持
0%