JS基础语法

crainyday

前端 / JS

发布于：2019年3月29日

字数：1.7k字

时长：6分钟

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运算符可以检查变量的类型, 例:

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()函数

One More Thing 👇

//其他类型变量转换为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编码.

<!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>