CRainyDay

JS基础语法

一.JS注释

  • 和其他高级语言差不多, 分为:
  • 多行注释: /**/
  • 单行注释: //
  • 注释中的代码不会被执行, 只能在源码中看见注释的内容

二.JS的变量与字面量

变量的作用是给某一个值或对象标注名称, 方便复用, 变量也用来保存字面量

字面量: 可以直接使用, 不能更改其值, 像: 123、”Hello”、1.23等

  • 变量的声明: 使用var关键字声明一个变量, 例: var a;
  • 变量的赋值: 使用=为变量赋值, 例: a=123;
  • 声明和赋值同时进行, 例, var a = 123;

三.JS标识符

所谓标识符, 就是指变量、函数、属性的名字, 或函数的参数.要求:

  • 第一个字符必须是一个字母、下划线_或一个美元符号$.
  • 不能以数字开头, 不能是关键字或保留字
  • 其他字符可以是字母、下划线、美元符号或数字.
  • 标识符一般采用驼峰命名法(规范): 首字母小写, 每个单词首字母大写其他字母小写, 例: xxxYyyZzz

JS底层保存标识符是用Unicode编码的

命名时, 尽量见名知意, 遵守它的规则和行业规范.

四.数据类型

  • String(字符串型), 例: “Hello World”或’Hello World’
  • Number(数值型), 例: 123、1.23
  • Boolean(布尔型), 只有 true false两个取值
  • Null(null型), 只有一个取值: null, 用来表示一个对象为空; 用 typeof null;会返回object
  • Undefined(undefined型), 未定义, 当声明了一个变量而没赋值时, 变量的值就是undefined
  • 上述五种基本类型之外的类型: Object

String: 使用单或双引号括起来的整体, 但是单双引号不能嵌套. 了解一些常见的转义字符

Number: 正无穷(Infinity), 负无穷(-Infinity); Nut a Number(NaN)

尽量避免用JS做一些高精度的计算问题

用typeof运算符可以检查变量的类型, 例:

1
2
3
4
5
6
7
8
9
10
var a = 123;
console.log(typeof a);//输出结果为:number
var b = Number.MAX_VALUE + 1;
console.log(b);//输出结果为:Infinity
var c = Number.MIN_VALUE;//JS能表示的大于零的最小值
//Number有它能表示的最大值, 为Number.MAX_VALUE;
//当计算结果超过它时, 输出结果为:Infinity(number型)即正无穷
var str = "123" * "123";
//当计算结果非数字时, 会返回一个NaN(number型)
console.log(typeof str);//结果为:NaN

五.强制类型转换

  • 其他类型变量转换为String, 调用变量的toString()方法, 或调用String()函数
  • 其他类型变量转换为Number, 调用Number()函数, 对于字符串还可调用parseInt()或parseFloat()函数
  • 其他类型变量转换为Boolean, 调用Boolean()函数
点击显/隐内容
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
//其他类型变量转换为String
var a = 123;//注意:当a = null;或a = undefined;时, 不能调用a.toString()方法
a = a.toString();//toString()方法, 无参数, 将a的内容变为string后返回
var b = null;
b = String(b);//String()函数, 将要转换的变量作为参数传递给函数, 后函数将结果返回
console.log("a = " + a);
console.log(typeof a);//输出:string
console.log("b = " + b);
console.log(typeof b);

//其他类型变量转换为Number
var str = "123";//若字符串内容有非数字和空格, Number()函数会将内容转换为NaN
str = Number(str);
console.log("str = " + str);
console.log(typeof str);
var bool = true;//true==>1 false==>0 null==>0 undefined==>NaN
bool = Number(bool);
console.log("bool = " + bool);
console.log(typeof bool);

var px = "123px";
px = parseInt(px);//从第一个字符开始转换, 直到遇到非空和非数字.parseFolat()函数类似
console.log("px = " + px);
console.log(typeof px);
//JS中数字的进制, 0x开头表示16进制, 0开头表示8进制
px = "070";
px = parseInt(px,10);//第二个参数, 表示以几进制进行解析
console.log("px = " + px);
console.log(typeof px);

//其他类型变量转换为Boolean
var num = 123;//数字只有0和NaN转换为false, 字符串只有空串转换为false
num = Boolean(num);//null和undefined转换为false, 对象都转换为true
console.log("num = " + num);
console.log(typeof num);

//这里说一个isNaN()函数, 判断一个数字是不是NaN, 若是返回true, 不是返回false
console.log(isNaN(num));

六.运算符

  • 算术运算符 + - * / ++(前置和后置) –(前置和后置) +(符号不变) -(符合取反) %(取模)
  • 逻辑运算符 && || ! & |
  • 关系运算符 > < >= <= == != === !==
  • 赋值运算符 = += -= *= /= %=
  • 条件运算符 ?:, 格式: 条件表达式?表达式1:表达式2; 若条件表达式为true, 整个表达式值为表达式1的值, 否则为表达式2的值.
  • 位运算符 ^ & | ! (用于数值类型的操作)
  • typeof运算符 判断类型并以字符串形式返回

A.算术运算符:

+的特殊性, 可以用来拼接字符串, 例:

1
2
var a = 1 + 2 + "3";//33
var b = "1" + 2 + 3;//123

其他算数运算符在进行运算时, 会将操作数先转换为Number类型, 再进行运算, 并将结果以数值类型返回

前++: 先对原变量加1, 在使用该变量的值;后++: 先使用给变量的值, 再给变量加1;–类似

B.逻辑运算符

与 或 非, 运算时将其他类型转换为Boolean型, 再运算;

注意短路与(&&)和短路或(||):

短路与: 若第一个值为true, 则返回第二个值; 若第一个值为false, 则返回第一个值;

短路或: 若第一个值为true, 则返回第一个值; 若第一个值为false, 则返回第二个值;

C.关系元算符

比较两个字符串时, 比较的是字符串的字符编码(按位比较); 其他类型转换为数值类型比较; 比较结果为true或false, 以字符串形式返回比较的结果.

注意==判等时会做隐式类型转换, ===表示全等; != 与 !==一样

D.赋值运算符

将运算符左边的表达式的值做一个操作, 然后将操作后的值赋值给右边的变量.

七.Unicode编码表

在JS的字符串中, 使用转义字符\u+四位16进制的编码表示Unicode编码

在HTML中, 使用 “&#10进制编码;” 表示Unicode编码.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>JS基础</title>
<script type="text/javascript">
var str = "\u2620";
console.log(str);
</script>
</head>
<body>
<h1>&#9760;</h1>
</body>
</html>

注意:

  • JS中严格区分大小写(HTML中不区分)
  • JS中一个分号代表一条命令的结束
  • JS会忽略多个空格与换行符, 因此我们可以用来格式化自己的代码
  • JS代码是一条条以;结尾的语句, 可用{}将语句分组, 一个{}也叫一个代码块

 上一页

JS

 评论



本博客所有文章除特别声明外,均采用[(CC BY-NC-SA 4.0)]许可协议。转载请注明出处!

本站使用 Material X 作为主题 , 总访问量为 次 。
Copyright © 2019 CRainyDay's Blog 版权所有