前言
在web中,要使用JavaScript实现跨平台、跨浏览器器网页,与用户交互等。
JavaScript是一种运行在浏览器中的解释型的编程语言。是最流行的脚本语言之一。
最早由网景公司推出,叫JavaScript
,其实跟Java
没什么关系,只是因为当时Java
非常火。
ECMA(European Computer Manufacturers Association)组织定制了JavaScript语言的标准,被称为ECMAScript标准。简单说来就是,ECMAScript是一种语言标准,而JavaScript是网景公司对ECMAScript标准的一种实现。
语法格式
JavaScript一般放在<head>
中, 两种方式引入js:
- 通过
<script>...</script>
直接引入代码 - 通过
<script src="xxx.js"></script>
引入这个文件
<html>
<head>
<!--直接引入js代码-->
alert('Hello, world');
<!--通过引入js文件的方式-->
<script src="/static/js/abc.js"></script>
</head>
<body>
...
</body>
</html>
语法跟java比较像,每个语句以;
结束,语句块用{...}
, 注释也跟java相同//一行注释
/*块注释*/
数据类型和变量
变量
JavaScript是动态语言
。定义变量通过关键字var
来定义,变量并不指定类型,只是说当前属于哪一个类型, 后面也可以赋值其他类型。
而且,变量如果不通过var
定义,直接来用,该变量就自动被申明为全局变量。切记,不要这样使用,防止在不同文件下的变量弄混,不好定位问题。为了,避免这种全局变量
, 通过声明严苛模式
避免,在JavaScript代码的第一行写上, 严苛模式也需要浏览器的支持。
use strict
数据类型
JavaScript的数据类型,只有Number、字符串、布尔值、数组、对象等5种,对类型的限制比较弱。跟Java相比,没有整型、浮点型的区分,统一 为Number类型。
注意,变量虽然有类型,但在使用中,都是通过var
来修饰。
下面分别介绍下,各种类型。
Number
不区分整数和浮点数,统一用Number表示。需要注意的是,有NaN(not a number)、Infinity(无限大).
在javaScript中没有异常的问题,例如除0
、求余
等运算,会跟Java不同
通过1*
可以将含有数字的string类型,转化为Number
2 / 0; // Infinity
0 / 0; // NaN
10 % 3; // 1
10.5 % 3; // 1.5
字符串
使用单引号或双引号括起来的文本,例如'abc'
"abc"
都是字符串。
注意:这点跟Java不同,Java字符串只能是双引号
字符串的操作:
- 拼接,使用
+
连接,在ES6中,支持${name}
描述,要用 ` 符号括起来,见下方示例。 - 长度,
message.length
- 转换(字符串是常量,转换只是返回一个新的字符串),
toUpperCase
toLowerCase
indexOf
substring
split
(通过split(’’)将string转换为string数组)
var name = '小明';
var age = 20;
var message = '我叫' + name + ', 年龄'+age; //拼接,使用 +
message = `我叫${name},年龄${age}`; //字符串拼接,es6支持
var length = message.length; //获取长度
var welcome = 'Hello,World';
welcome.toUpperCase(); //转换大写
welcome.toLowerCase(); //转换小写
welcome.indexOf('World'); //返回6(无 则返回-1)
welcome.substring(6); //返回'World'
welcome.substring(0, 5); //返回'Hello'
welcome.split(''); //返回['H', 'e', 'l', 'l', 'o', ',', 'W', 'o', 'r', 'l', 'd']
布尔值
同Java true
false
两种值,也可以是判断语句。
注意:
==
会自动转换数据类型再比较,有时会得到诡异的结果;===
不会自动转换数据类型,如果数据类型不一致,返回false
NaN
跟所有值都不相等(包括它自己),只能通过isNaN()
函数判断- JavaScript把
null
、undefined
、0
、NaN
和空字符串''
视为false,其他值一概视为true,因此上述代码条件判断的结果是true。可以记住,0值、空值为false.
数组
一组数据的集合,跟Java不同,它可以是不同类型。
数组的操作:
- 修改,
arr[2] = 'name'
arr.lenght=3
这些都会直接修改数组。 - 搜索,
arr.indexOf(10)
, 获取元素的位置。 - 截取,
arr.slice(0, 3)
, 数组的前3个元素,返回的是一个新数组。 - 添加删除,
arr.push('A', 'B')
arr.pop()
向尾部添加删除元素。unshift
shift
修改头部。 - 排序,
sort()
也可以自定义排序,后面讲,reverse()
跟sort相反 - 修改的万能方法,
splice()
- 连接,
concat
他会把其他元素,跟数组连接,如果连接对象是数组,会把数组拆分后,并入。 - 格式化,
join()
将数组元素拼接成字符串
var arr = [1, 2, 3.14, 'Hello', null, true];
arr[1] = 'love'; //修改第2个元素
arr.length = 5; //修改长度
arr.indexOf('love'); //返回1
arr.slice(3); //返回新数组['Hello', null]
arr.push('Mi', 'HuaWei'); //尾部添加
arr.pop(); //删除最后一个
arr.splice(2, 1, 'Apple'); //splice替换,第二个参数为个数
arr.splice(2, 0, 'Sumsung'); //splice个数为0时,相当于添加
arr.splice(5, 2); //splice删除,删除第5,6 元素
arr.concat('Oppo', ['Vivo', 'Nokia']); //将这3个元素添加到arr
JavaScript永远不会返回异常,没有数组越界
的情况。如上,arr[8]
值为undefined
对象
JavaScript的对象是一组由键-值组成的无序集合,键值为字符串
类型,值可以为任意类型。
对象的操作:
- 获取属性,
xiaoming.name
获取name属性,属性名不能包含特殊字符,如果包含,需要用单引号包裹也不能使用.
访问,通过xiaoming['middle-school']
访问,所以属性名尽量不要包含特殊字符。 - 添加属性,
xiaoming.school='yongChengGaoZhong'
- 删除属性,
delete xiao.age
- 判断属性是否存在,
'name' in xiaoming
(包含继承来的属性)xiaoming.hasOwnProperty('name')
(判断直接的属性)
var person = {
name: 'Bob',
age: 20,
tags: ['js', 'web', 'mobile'],
city: 'Beijing',
hasCar: true,
zipcode: null
};
person.name; // 'Bob'(读)
person.zipcode; // null
person.scholl; // undefined
person.scholl = 'yongChengGaoZhong'; //添加属性
if('age' in person) {
alert('age='+xiaoming.age);
}
null和undefined
同Java,null
表示一个空值。
undefined
表示未定义,大概相当于Java游离变量(未赋值的变量)。
逻辑语句
条件判断
if ... else ...
同Java.
循环
for
循环,同Java.for (i=0; i<10; i++)
for ... in
循环,对数组
,对象
使用,相当与Java的for each
while
循环,同Java.
//for in 作用于数组
var a = ['A', 'B', 'C'];
for (var i in a) {
console.log(i); // 这里注意是字符串,使用typeof看一看, '0', '1', '2'
console.log(a[i]); // 'A', 'B', 'C'
}
//for in 作用于对象
var o = {
name: 'Jack',
age: 20,
city: 'Beijing'
};
for (var key in o) {
console.log(key); // 'name', 'age', 'city'
}