JavaScript语法基础

注释

和C、Java一样
// 表示单行注释
/* 注释 */ 多行注释,也可以用在语句中

s = "hello" + /*注释*/ " hi"
console.log(s)

常量和变量

标识符
标识符必须是字母、下划线、美元符号$和数字,但必须是字母、下划线、美元符号开头，数字开头不允许。

标识符区分大小写。

声明

关键字	含义
var	声明一个变量。声明可以提升
let	声明一个块作用域中的局部变量
const	声明一个常量，不可以对一个常量重新赋值

另外,js中的变量声明和初始化是可以分开的。

var a  //只是声明, a为undified
let b  //只是声明, b为undified
console.log(1,a,b)

a = 1
b = "string"
console.log(2,a,b)

const c = 100  // 定义了常量不可以修改
console.log(c)

function hello(){
    var a = 100
    b = 200  // 不规范的初始化,在严格模式下会产生异常,在赋值之前不能引用,一旦这样赋值,就是全局作用域
}

console.log(b)

var声明会把变量提升到当前全局或者函数作用域。

常量和变量的选择：
如果明确知道一个标识符定义后不再修改，应该尽量声明成const常量，减少被修改的风险，减少bug。

数据类型

JavaScript拥有动态类型,这意味着相同的变量可以用作不同的类型

名称	说明
Number	数值型,包括整型和浮点型
Boolean	布尔型,true和false
String	字符串
null	只有一个值null
undefined	变量声明未赋值的;对象未定义的属性
symbol	ES6新引入类型
object	是以上基本类型的复合类型,是容器

JavaScript是动态弱类型语言

console.log("string===========")
console.log(a = 3 + 'a', typeof(a))
console.log(a = null + "a", typeof(a))
console.log(a = undefined + 'a', typeof(a))
console.log(a = true + "a", typeof(a))
console.log(a = false + "a", typeof(a))

console.log("number============")
console.log(a = null + 1, typeof(a))
console.log(a = undefined + 1, typeof(a))  //undified无法转换成一个对应的数字
console.log(a = true + 1, typeof(a))
console.log(a = false + 1, typeof(a))

console.log("boolean===========")
console.log(a = null + true, typeof(a))
console.log(a = null + false, typeof(a))
console.log(a = undefined + true, typeof(a))  //undified无法转换成一个对应的数字
console.log(a = undefined + false, typeof(a)) //NaN
console.log(a = null & true, typeof(a))
console.log(a = undefined & true, typeof(a))
console.log(a = undefined | 1, typeof(a))

console.log("短路==============")
console.log(a = null && true, typeof(a))  //null
console.log(a =  false && null, typeof(a))  //false
console.log(a = false && '123', typeof(a))  // false
console.log(a = true && 123, typeof(a))  // 123
console.log(a = true && "", typeof(a))  // 注意""为false
console.log(a = [] && "123")  // []为true
console.log(a = {} && "123")  // {}为true

console.log("null======")
console.log(a = null + undefined, typeof(a))  // NaN
console.log(a = 123 & undefined, typeof(a))  // 0

console.log(a = null - false, typeof(a))  // 0
console.log(a = 2 * "abc", typeof(a))  // NaN

总结:
NaN即Not a Number, 转换数字失败.他和任何值都不等,他自己也不等,只能使用Number.isNaN(NaN)

遇到字符串,加好就是拼接字符串,所有非字符串隐式转换为数字, undified特殊,因为它没有定一只,所以转换数字失败得到一个特殊值NaN

如果运算符是逻辑运算符,短路符,返回就是短路时的类型,没有隐式转换。
注意：除非十分明确，否则不要使用隐式转换，写代码的时候，往往为了程序的健壮，请显式转换

JavaScript对象

JavaScript中的所有事物都是对象:字符串、数值、数组、函数
此外，JavaScript允许自定义对象

对象只是一种特殊的数据，对象拥有属性和方法。

创建JavaScript对象

直接创建对象的实例

person=new Object();
person.firstname="John";
person.lastname="Doe";
person.age=50;
person.eyecolor="blue";

使用构造器创建新的对象实例

首先创建对象构造器

function person(firstname,lastname,age,eyecolor)
{
    this.firstname=firstname;
    this.lastname=lastname;
    this.age=age;
    this.eyecolor=eyecolor;
}

创建新的对象实例

var myFather=new person("John","Doe",50,"blue");
var myMother=new person("Sally","Rally",48,"green");

JavaScript类

JavaScript是面向对象的语言,但JavaScript不使用类
在JavaScipt中,不会创建类,也不会通过类来创建对象
JavaScript基于prototype,而不是基于类的。

for…in… 循环遍历对象的属性。

var person={fname:"John",lname:"Doe",age:25}; 
 
for (x in person)
{
    txt=txt + person[x];
}

字符串(String)

将一个值使用单引号或者双引号引用起来就是字符串。
ES6提供了反引号定义一个字符串，可以支持多行，还支持插值。

let name = 'ben' // 定义一个字符串
let age = 18  

console.log(`he is ${name}, he is ${age} years old`)  //插值表示,千万注意是{} 大括号,好几次犯错了...

转义字符(特殊字符)

名称	说明
\0	null,空字符
\b	退格符
\f	换页符
\n	换行符
\r	回车符
\t	Tab(制表符)
\v	垂直制表符
’	单引号
"	双引号
\	反斜杠字符
\XXX	由0到377最多三位八进制数XXX表示的Latin-1字符。例如\251是版权符号的八进制序列
\xXX	由从到FF的两位十六进制数字XX表示的Latin-1字符。例如\xA9是版权符号的十六进制序列
\uXXXX	由四位十六进制数字XXXX表示的unicode字符。例如\u00A9是版权符号的unicode序列
\u{XXXXX}	unicode代码点转义字符。例如\u{2F804}相当于unicode转义字符\uD87E\uDC04的简写

字符串属性和方法

字符串属性

属性	描述
constructor	返回创建字符串属性的函数
length	返回字符串的长度
prototype	允许像对象添加属性和方法

字符串方法

方法	描述
charAt(pos:Number)	返回指定索引位置的字符,不支持负索引
charCodeAt(index:Number)	返回指定索引位置的Unicode,不支持负索引
concat(string)	连接两个或多个字符串,返回连接后的字符串
fromCharCode()	将Unicode转换成字符串
indexOf(searchstring[,position])	返回字符串中检索指定字符第一次出现的位置
lastindexOf(searchstring[,position])	返回字符串检索指定字符最后一次出现的位置
localCompare(str1,str2)	用本地特定的顺序来比较两个字符串
match(regex)	找到一个或者多个正则表达式的匹配,只找到第一个匹配的
replace(regex, string)	替换正则表达式匹配的值, 返回替换后的值,不会修改原字符串
repeat(count)	返回字符串的count次拼接结果
search(regex,)	检索与正则表达式匹配的值,全长找
slice(start,stop)	提取字符串的片段,返回被切片的字符串
split()	把字符串分割为字符串数组
substr(start,length)	返回指定位置索引指定长度的字符串
substring(start,stop)	返回指定位置到结束位置的字符串
toLowerCase()	把字符串转换为小写
toUpperCase()	把字符串转换为大写
toString()	转换为字符串对象
trim()	移除字符串收尾空白,不可以指定字符

数值型(Number对象)

在js中,数据均为双精度浮点型范围只能在-(2^53-1)和253-1之间,整型也不例外。
数字类型还有三种符号值

• +Infinity(正无穷)
• -Infinity(负无穷)
• NaN(Not a Number)非数字

进制

• 二进制,例如0b110、0B110
• 八进制,例如0o755,注意,0755认作八进制,但是最好使用0o或者0O前缀表示八进制
• 十六进制,例如0xAA、0XAA

常量属性

var biggestnum = Number.MAX_VALUE;
var smallnum = Number.MIN_VALUE;
var infiniteNum = Number.POSITIVE_INFINITY;
var negInfiniteNum = Number.NEGATIVE_INFINITY;
var notaNaN = Number.NaN;

Math(算数)对象

Math算数对象的作用是:执行普通的算数任务
Math对象提供多种算数值类型和函数,无序在使用这个对象之前对它定义。

算数值

JavaScript提供8种可被Math对象访问的算数值

Math.E
Math.PI
Math.SQRT2
Math.SQRT1_2
Math.LN2
Math.LN10
Math.LOG2E
Math.LOG10E

算数方法

方法	描述
Math.round()	四舍五入
Math.random()	返回0-1之间的伪随机数
Math.max()	返回最大值
Math.min()	返回最小值
Math.abs()	返回绝对值
Math.sqrt()	返回平方根
Math.log2()	返回以2为底的对数值

根据上下限生成随机数

let max = 40
let min = 20
console.log(Math.round(Math.random()*(max-min))+min)  // 左闭右开

字符串中随机取出字符

characters="abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789"
console.log(characters[Math.round(Math.random()*(characters.length))])

数字方法

方法	描述
Number.pasrserInt()	把字符串参数解析成特定基数对应的整型数字,和全局方法parserInt方法一致
Number.parserFloat()	把字符串解析成浮点数,和全局方法parserFloat方法一致
Number.isFinite()	判断传递的值是否为有限数字
Number.isInteger	判断传递的值是否为整数
Number.isNaN	判断传递的值是否为NaN,NaN唯一的判断方式

数组(Array)

数组对象的作用是:使用单独的变量名来存储一系列的值。

创建一个数组

const newarray = new Array("a","b","c","d")

console.log(newarray)  //[ 'a', 'b', 'c', 'd' ]

数组属性

属性	描述
constructor	返回创建数组的原型函数
length	设置或返回数组元素的个数
prototype	允许逆向数组对象添加属性和方法

数组方法

方法	描述
concat()	连接两个或更多的数组,并返回结果
copyWithin(target[，start][，end])	从数组的指定位置拷贝元素到数组的另一个指定位置，会修改当前数组。ES6新语法
entries()	返回数组的可迭代对象
every(func)	检测数值元素的每个元素是否都符合条件
fill(string[,start][,end])	使用一个固定值来填充数组的指定索引段
filter(func)	检查数值元素,并返回符合条件所有元素的数组
find()	返回符合传入测试函数条件的数组元素
findindex	返回符合测试条件的数组元素索引
forEach()	每个元素执行一次回调函数
from()	通过戈丁的对象中创建一个数组
indexOf()	搜索数组中的元素,并返回它的索引位置
join(string)	将数组的所有元素放入一个字符串,参数string,表示以string连接
keys()	返回数组的可迭代对象,包含原始数组的键
lastindexOf()	搜索数组的元素,并返回它的最后出现的位置
map()	通过制定函数,处理数组的每个元素,并返回处理后的数组
pop()	删除数组的最后一个元素
push()	向数组的末尾添加一个或者更多元素,并返回新的长度
reduce()	将数组元素计算为一个值(从左向右)
redueRight()	将数组元素计算为一个值(从右往左)
reverse()	转数组的元素顺序
shift()	删除并返回数组的第一个元素,相当于leftpop()
slice([start][,end])	选取数组的一部分,并返回一个新数组
some(func)	检测数组中是否有元素符合指定条件
sort()	对数组进行排序,可以指定排序规则
splice()	从数组中添加或删除元素
toString()	将数组转化为字符串,并返回结果
unshift()	向数组的开头添加一个或者更多元素,并返回新的长度
valueOf()	返回数组对象的原始值

Symbols类型

ES6提供Symbol类型,内建原生类型。表示独一无二的值

console.log(Symbol() === Symbol())  //false
console.log(Symbol() == Symbol())  // false
console.log(Symbol(1) == Symbol(1))  //false

Symbol函数栈不能用new命令,因为Symbol是原始数据类型,不是对象。可以接收一个字符串作为参数，为新创建的Symbol提供描述，用来显示在控制台或者作为字符串的时候使用，便于区分。

更多关于Symbol查看阮一峰大神的ECMAScript6 入门—Symbol

运算符

算数运算符

y=5, 下面的表格解释了这些算数运算符

运算符	描述	例子	x运算结果	y运算结果
+	加法	x=y+2	7	5
-	减法	x=y-2	3	5
*	乘法	x=y*2	10	5
/	除法	x=y/2	2.5	5
%	取模	x=y%2	1	5
++	自增	x=y++	5	6
++	自增	x=++y	6	6
–	自减	x=y–	5	4
–	子减	x=–y	4	4

let i = 0
let a = ++i+i+++i+++i  // 1+1+2+3
console.log(a)

取整使用parsetInt函数:

console.log(parseInt(5/2)) //只截取整数部分

赋值运算符

运算符	例子	等同于
=	x=y
+=	x+=y	x=x+y
-=	x-=y	x=x-y
*=	x*=y	x=x*y
=	x=y	x=x\y
%=	x%=y	X=x%y

比较运算符

、<、>=、<=、
!=、==, 宽松比较,进行类型转换
!==、===, 严格比较,不进行类型转换

console.log("200" == 200) // true  
console.log("200" === 200)  // false  

使用宽松比较的时候,尽可能确保比较的类型相同,否则会引起隐式转化,而且隐式转换的规则很复杂不好把控。
如果不知道类型是否一致，但是要求一定要相等，那么请使用===和!==
建议使用的时候一律使用===和!==

逻辑运算符

&&、||、！
与、或、非
这些运算符和其他高级语言一样,支持短路

位运算

&、|、^、~、<<、>>
分别对应位与、位或、异或、取反、左移、右移
和python意义一样

三元运算符

条件表达式?真值:假值

等价于简单的if...else...结构

if (条件表达式){
    真值
}
else {
    假值
}


console.log((true)? "真" :"假")

逗号操作符

js运行多个表达式写在一起

let a = 4+5, b=true, c = a>20?'t':"f"

console.log(a)  // 9
console.log(c)  // f

function test() {
    return 3, a+b, c = a++
}

console.log(test())  // 9
console.log(c)  // 9

运算符优先级

运算符由高到低,顺序如下"

. []
() new
! ~ - + ++ -- typeof void delete
* / %
+ -
<< >> >>>
< <= > >= in instanceof 
== != === !==
&
^
|
&&
||
?:
= += -= *= /= %= <<= >>= >>>= &= ^= |=
,

其他

名称	描述
instanceOf	判断是否属于指定类型
typeod	返回类型字符串
delete	delete操作符,删除一个对象或一个对象的属性或者一个数组中某一个键值
in	如果指定的属性在对象内,则返回true

instanceof和typeof

console.log(2 instanceof Number, typeof 2)  // false, number
console.log("2" instanceof String, typeof "2")  //false, string
console.log(2 instanceof Object)  // false

var d = new Number(2)
var e = new String("abc")
console.log(d instanceof Number, typeof d)  //true, object
console.log(d instanceof Object)  //true

instanceof要求必须明确使用类型定义变量,就是对象必须是new关键字创建的。他可以用于继承关系的判断。
typeof就是返回对象的类型字符串。

delete
本质上,delete删除的是对象的属性,而不是对象，直接用delete删除不了变量。
更多关于delete请参考javascript中的delete使用详解

m = 42
var n = 43
let p = 44

var x = new Number(2)
x.h = 100
x.v = 111
console.log(x)  // { [Number: 2] h: 100, v: 111 }

console.log(delete m)  //true
console.log(delete n)  //false
console.log(delete p)  //false
console.log(delete Math.PI)  //false
console.log(delete x)  //false
console.log(delete x.h)  //true


var tree = new Array("A","B",'C',"D")

delete tree[1]
console.log(tree)  //[ 'A', <1 empty item>, 'C', 'D' ]
console.log(tree[1])  //undefined
for (let i=0; i<tree.length; i++)
    console.log(tree[i])  // A,undefined, C, D


delete tree  //false
console.log(tree)  //[ 'A', <1 empty item>, 'C', 'D' ]

in判断属性是否在对象内

let a = new Array("a", 'b','c','d')

console.log(2 in a)  //true
console.log("a" in a)  //false

let b = {
    "a":1,
    "b":2,
    "c":3
}
console.log(2 in b);  //false
console.log("a" in b);  //true

表达式

基本表达式,和python差不多

解析式也和Python的相似,但在ES6中非标准不推荐使用
生成器推荐生成器函数,ES6开始支持

const a = function * () {   // function关键字后面一定要有 *
    count = 0;
    while (count < 4){
        yield ++count;
    }
    return count
}
let b = a();
console.log(b.next())  //{ value: 1, done: false };
console.log(b.next())  //{ value: 2, done: false };
console.log(b.next())  //{ value: 3, done: false };
console.log(b.next())  //{ value: 4, done: false };
console.log(b.next())  //{ value: 4, done: true };

每次调用next()方法都返回一个对象,这个对象包含两个属性,value和done,value属性表示本次yield表达式的返回值,done属性为布尔类型。done是false表示后续还有yield语句执行，如果执行完或者return后，done为true句执行，如果执行完或者return后，done为true