0、写在前面的话
之前的前端就没怎么学,工作又要用,你说尴尬不尴尬嘛,JS从头学系列就是这样来的。
该系列其实不算正儿八经的博文,因为大部分内容是直接引用自《廖雪峰的JavaScript教程》,然后根据自身情况部分精简和批注后记录在此,更多的目的还是做备忘和查阅使用,并且作为在后期不断丰富JS的知识点时的基本骨架,不断添新和丰满。
之前通过廖雪峰老师的网站学过Git,简洁有力的干货,很nice,现在准备跟着开始学习JS,感谢互联网上有这么多无私奉献的人,感谢感谢。
1、JS的引入
JS可以嵌入在网页的任何地方,包裹在 <script></script> 中,一般我们放在 <head> 中。
或者,将JS代码单独保存为一个 .js 文件,然后在HTML中通过 <script src="..."></script>进行引入。
<script> 有时候会看到 type 属性,如<script type="text/javascript"> 其实没必要,因为默认type就是javascript。
JavaScript严格区分大小写,所以需要注意。
2、基本语法 和 数据类型、变量
2.1 语法概述
语法和Java类似,语句块用 {...} 包裹,以 ; 结束,但是不强制要求 ; ,但是良好的习惯,还是建议使用时每个语句都以 ; 结束。
注意和Java也类似,单行注释以 // 开头,多行注释用 /* ... */ 包裹,这两种注释在网页查看源码时都可以被用户查看到。
2.2 数据类型
- Number
- JS中不区分整数或浮点数,统一用Number表示,四则运算也可以直接使用
- NaN是Number中特殊的值,与所有Number都不相等,包括它自己,通过 isNaN() 判断它的身份
- 字符串
- 单引号 或 双引号括起来的文本
- ES6新增模板字符串,要用 ` ` (不是单引号),可以自动替换变量 //e.g. var name = '小明'; alert(` 你好,${name} ! `);
- 要字符串中表示 ‘ 或 " 使用转义字符
- str.length; --> 获取字符串长度(Java中则是 str.length(),数组才是 arr.length)
- str[0]; --> 类似数组通过下标获取指定字符(字符串不变,通过索引赋值无效,如 str[0] = 's',str原值不变)
- str.toUpperCase(); --> 字符串变大写
- str.toLowerCase(); --> 字符串变小写
- indexOf() --> 搜索字符串出现位置(区分大小写)
- substring(start,stop) --> 返回指定索引间的子串(start包括,stop不包括)
- replace(regexp/substr,replacement) --> repalcement替换匹配的首个子串,(代替所有匹配子串需要带有全局标志g的正则表达式)
- 布尔值
- true、false。也可以用布尔运算计算出来,如 2 > 1 --> true
- 数组
- 和Java不同的是,某个数组可以包含任意数据类型
- 也可以用索引访问元素,起始索引同样为 0
- 可以用 new Array(1, 2, 3) 方式来新建
- 常用 [1, 2, 3.14, 'Hello', null, true] 的方式表示数组
- 对象
- JS中的对象类似于Java中的Map,以键值对组成的无序集合,key都是字符串类型,value可以是任意类型
- 获取对象属性用 对象变量.属性名 方式 e.g. person.name / person.sex
- 其他
- null 和 undefined
- null 表示空值,和 0 以及 "" 是不同的概念
- undefined 表示值未定义,而null表示空值,大多数情况用null,undefined在判断函数参数是否传递情况下比较常用
2.3 运算符
基本和Java类似,这里做个简单的列举吧。
- 算数运算符
- +
- -
- *
- /
- %
- ++
- --
- 比较运算符
- >
- >=
- <
- <=
- == 自动转换类型再比较(很多时候会得到很诡异的结果)
- === 不自动转换数据类型,如果数据类型不一致,则返回false(推荐始终使用 === 进行比较)
- !=
- 逻辑运算符
- && 与
- || 或 注:A||B会判断A布尔值,如果为真直接返回A否则返回B(A、B保持原类型)
- ! 非
- 条件运算符
- ? :
- 赋值运算符
- +=
- -=
- /=
- %=
- 字符串运算符
- +
- =
- +=
2.4 变量
变量的命名和Java类似,大小写英文、数字、$、_、组合,数字不能开头。
变量本身不固定类型,所以不同类型对同个变量赋值是允许的,这在Java中则不可以:
JavaScript --> var a = 123; a = 'abc'; //可行
Java --> int a = 123; a = 'abc'; //不可行,编译不通过
如果变量不使用 var 声明,则该变量自动成为全局变量,所以请在所有变量前都加上 var,避免不必要的错误。
ECMA规范中推出了strict模式,该模式下运行JS,如果未使用var将报错,使用方法在JS第一行加上 'use strict'; 支持该模式的浏览器会开启strict模式运行JS。