JS初识之语法规范

一、JS开篇

1、特点

#1、解释执行（浏览器就是解释器）：事先不编译、逐行执行、无需进行严格的变量声明。

#2、简单易用：可以使用任何文本编辑工具编写，只需要浏览器就可以执行程序。

#3、基于对象：内置大量现成对象，编写少量程序可以完成目标 

#4、ECMAScript：JS的语法标准。包括变量、表达式、运算符、函数、if语句、for语句等。

#5、文档对象模型（DOM）：操作网页上的元素的API。比如让盒子移动、变色、轮播图等。

#6、浏览器对象模型（BOM）：操作浏览器部分功能的API。比如让浏览器自动滚动。 

2、引入方式

1、方式一
<script>
	// 书写js代码
</script>

2、方式二
<script src="xxx.js"></script>

3、语法规范

#1、JavaScript对换行、缩进、空格不敏感。

    #  每一条语句末尾要加上分号，虽然分号不是必须加的，但是为了程序今后要压缩，如果不加分号，压缩之后将不能运行。

#2、所有的符号，都是英语的。比如括号、引号、分号。

#3、JavaScript的注释：
单行注释：             // 我是注释

多行注释：
            /*
              多行注释1
              多行注释2
            */

4、变量的声明

// 1、先声明后定义
var name;  // 声明时，无需指定类型，可接受任意类型的值
name="egon";

// 2、声明的同时定义
var age=18;

/*
JavaScript是一种弱类型、动态语言，弱类型具体表现如下

#  一般规律是，约束越强越不容易出错，但编写程序时也越麻烦。在JavaScript中，因为约束比较弱，所以容易出现这种错误：最简单的例子：
 var a =200;


 var b ="1";


 var c= a + b;


你可能期望c是201，但实际上它是"2001"，这个错误在强类型语言中决不会出现。然而正是因为JavaScript没有这些约束，所以可以很方便地拼接数字和字符串类型。

#  再比如下面这个例子：
var a = "11"

a=a-"";
11

a
11
“-”可以是一元运算符（取负），也可以是二元（减法运算）

js是弱类型语言

js是弱类型、动态语言
*/

5、变量命名规范

# 1、由字母、数字、下划线、$ 组成,但是不能数字开头，也不能纯数字

# 2、严格区分大小写

# 3、不能包含关键字和保留字（以后升级版本要用的关键字）。
	如：abstract、boolean、byte、char、class、const、debugger、double、enum、export、extends、final、float、goto、implements、import、int、interface、long、native、package、private、protected、public、short、static、super、synchronized、throws、transient、volatile
# 4、推荐驼峰命名法：有多个有意义的单词组成名称的时候，第一个单词的首字母小写，其余的单词首字母大写

# 5、匈牙利命名：就是根据数据类型单词的的首字符作为前缀

# 6、ES6新增的let
	ES6之前js没有块级作用域，ES6新增了let命令，用于声明变量（声明的变量属于块级作用域），流程控制语句的{}就是块级作用域。其用法类似于var，但是所声明的变量只在let命令所在的代码块内有效。例如：for循环的计数器就很适合使用let命令。
for(let i=1;i<5;i++){
    console.log(i)
}
1
2
3
4
# 7、常量，ES6新增
const PI=3.14;
PI=3  //  TypeError: "PI" is read-only

6、数据类型和内置方法

6、1 数值（Number）

var x = 3;
var y = 1.1;
var z = 1e2;
var n = NaN;	

# 指定位数，四舍五入，结果为string
var num=3.1415
var res = num.toFixed(2)
res
"3.14"
typeof(res)
"string"
num.toFixed(3)
"3.142"

# 字符串类型转成数字：
var n = parseInt("123")
n
123
typeof(n)
"number"

# NaN属性是代表非数字值的特殊值。该属性用于指示某个值不是数字。
var n = parseInt("abc")
n
NaN
typeof(n)
"number"

# 保留字符串开头的数字
console.log(parseInt("18abc"))
18

console.log(parseInt("abc18"))
NaN

# int和float的转换
parseInt(123.123);
123  # 取整
parseFloat(123.123)
123.123

# 数字转字符串
var x =10;
var y = '20';
var z = x+y;
z
"1020"
typeof(z)
"string"

var m = 123
var n = String(m)
n
"123"
typeof n
"string"

var a = 123;
var b = a.toString()
b
"123"
typeof b
"string"

6、2 字符串

var a = "hello";
var b = "world";
var c = a + b;
c
"helloworld"
typeof c
"string"

# 常用方法
.length	返回长度
.trim()	移除空白，返回新值
.trimLeft()	移除左边的空白，返回新值
.trimRight()	移除右边的空白，返回新值
.charAt(n)	返回第n个字符
.concat(value, ...)	拼接,拼接字符串通常使用“+”号，返回新值
.indexOf(substring, start)	子序列位置
.substring(from, to)	根据索引获取子序列
.slice(start, end)	切片
.toLowerCase()	小写
.toUpperCase()	大写
.split(delimiter, limit)	分割,limit表示取数组的前几位

var a = "   hello   "
a.length
11

res=a.trim()
"hello"
a
"   hello   "

res.charAt(2)
"l"

res.concat('world')
"helloworld"
res
"hello"

res.indexOf('p')
-1
res.indexOf('l')
2
res.indexOf('lo')
3

res.toUpperCase()
"HELLO"
res
"hello"

res.split('l')
(3) ["he", "", "o"]
0: "he"
1: ""
2: "o"
length: 3
__proto__: Array(0)
res
"hello"
res.split('e')
(2) ["h", "llo"]
res.split('p')
["hello"]

res.split('l', 1)
["he"]
res.split('l', 2)
(2) ["he", ""]
res.split('l', 3)
(3) ["he", "", "o"]
res.split('l', 4)
(3) ["he", "", "o"]

#  slice、substring两者的相同点：
/*如果start等于end，返回空字符串
如果stop参数省略，则取到字符串末
如果某个参数超过string的长度，这个参数会被替换为string的长度

substirng()的特点：
如果 start > stop ，start和stop将被交换
如果参数是负数或者不是数字，将会被0替换

silce()的特点：
如果 start > stop 不会交换两者,取空的字符串
如果start小于0，则切割从字符串末尾往前数的第abs(start)个的字符开始(包括该位置的字符)
如果stop小于0，则切割在从字符串末尾往前数的第abs(stop)个字符结束(不包含该位置字符)*/
res.slice(5,2)
""
res.slice(1,1)
""
res.slice(-5,5)
"hello"
res.slice(-1,5)
"o"
res.slice(0,-4)
"h"
res.slice(0,-1)
"hell"

res.substring(5,2)
"llo"
res.substring(-2,2)
"he"
res.substring(-2,a)
""
res.substring(a,)
"hello"

#  ES6中引入了模板字符串。模板字符串（template string）是增强版的字符串，用反引号（``）标识，它的用途为
#1、完全可以当做普通字符串使用
var msg = `my name is n`

#2、也可以用来定义多行字符串
var info = `
    name:n
    age:18
    sex:male
`

#3、并且可以在字符串中嵌入变量
var msg = `${res} world`
msg
"hello world"
#  注意：如果模板字符串中需要使用反引号，则在其前面要用反斜杠转义。

6、3 布尔值（boolean）

var a = true;
var b = false;

Boolean("")
false
Boolean(0)
false
Boolean(null)
false
Boolean(undefined)
false
Boolean(NaN)
false
Boolean([])
true
Boolean({})
true

#  null和undefined

/*	null表示值是空，一般在需要指定或清空一个变量时才会使用，如 name=null;
	undefined表示当声明一个变量但未初始化时，该变量的默认值是undefined。还有就是函数无明确的返回值时，返回的也是undefined。
	null表示变量的值是空，undefined则表示只声明了变量，但还没有赋值。*/

7、常用内置对象

JavaScript 中的所有事物都是对象：字符串、数值、数组、函数...

此外JavaScript还提供多个内建对象，比如 Array,Date,Math 等等

对象只是带有#属性和方法的特殊数据类型

7、1 数组对象

var x = ["a", "b", 11, ["c", 22]]
x
(4) ["a", "b", 11, Array(2)]
0: "a"
1: "b"
2: 11
3: (2) ["c", 22]
length: 4
__proto__: Array(0)

console.log(x[3][1])
22


#  常用方法
.length	数组的大小
.push(ele)	尾部追加元素
.pop()	获取尾部的元素
.unshift(ele)	头部插入元素
.shift()	头部移除元素
.slice(start, end)	切片
.reverse()	反转
.join(seq)	将数组元素连接成字符串
.concat(val, ...)	连接数组
.sort()	排序
.forEach()	将数组的每个元素传递给回调函数
.splice()	删除元素，并向数组添加新元素。
.map()	返回一个数组元素调用函数处理后的值的新数组


var x = ["a", "b", 11, ["cc", 22]]
x.length
4
=================================================================================
x.push("33")

x
(5) ["a", "b", 11, Array(2), "33"]
=================================================================================
x.pop()  # 没有参数，只会弹出最后一个
"33"
x
(4) ["a", "b", 11, Array(2)]
=================================================================================
x.unshift(44)

x
(5) [44, "a", "b", 11, Array(2)]

x.shift()  # 没有参数，只会弹出第一个
44
x
(4) ["a", "b", 11, Array(2)]
=================================================================================
x.join("!")  #  注意和Python不同，连接的字符出现在元素的右边，原数组中的数组也没有了
"a!b!11!cc,22"
=================================================================================
x+[11, 22]
"a,b,11,cc,2211,22"
x
(4) ["a", "b", 11, Array(2)]

=================================================================================
x.slice(1,3)
(2) ["b", 11]
=================================================================================
x.reverse()
(4) [Array(2), 11, "b", "a"]
=================================================================================
var res = x.concat([1,2,3,4])

res
(8) [9, 1111, 2222, 1211, 1, 2, 3, 4]

7、1、1 关于sort()的 用法

#  如果调用该方法时没有使用参数，将按字母顺序对数组中的元素进行排序，说得更精确点，是按照字符编码的顺序进行排序。
var x = [123, 9, 1211, 11]

x.sort()
(4) [11, 1211, 123, 9]

#  如果想按照其他标准进行排序，就需要提供比较函数，该函数应该具有两个参数 a 和 b，接收传入的a和b，执行函数体代码，然后返回一个值用于说明a和b的大小
var n = "5";

var m = "6";

var res = m-n

res
1

typeof res
"number"
返回值 < 0 ：代表a小于b

返回值 =0 : 代表a等于b

返回值 > 0 ：代表a大于b


function sortNum(a, b){
    return a-b
};

x.sort(sortNum)
(4) [9, 11, 123, 1211]
x
(4) [9, 11, 123, 1211]

#  遍历数组元素
for (var i=0;i<x.length;i++) {
    console.log(i)
};
    
0
1
2
3

7、1、2 forEach()的用法

#  语法：

forEach(function(currentValue, index, arr), thisValue)
/*currentValue	 必需。当前元素
index			可选。当前元素的索引值。
arr				可选。当前元素所属的数组对象。
thisValue		 可选。传递给函数的值一般用 "this" 值。如果这个参数为空， "undefined" 					会传递给 "this" 值
*/



x.forEach(function(v,i,arr) {
    console.log(v, i, arr);
    console.log(this[0]);
}, 'hello')
9 0 (4) [9, 11, 123, 1211]
h
11 1 (4) [9, 11, 123, 1211]
h
123 2 (4) [9, 11, 123, 1211]
h
1211 3 (4) [9, 11, 123, 1211]
h

7、1、3 splice()的用法

# 语法：

splice(index,howmany,item1,.....,itemX)

# 参数：

index	必需。整数，规定添加/删除项目的位置，使用负数可从数组结尾处规定位置。
howmany	可选。表示要删除的项目数量（index对应的值也算一个）。如果不指定默认值为0，代表不会删除项目。
item1, ..., itemX	可选。向数组添加的新项目。


x
(4) [9, 11, 123, 1211]
x.splice(1,2,1111,2222)  # 删除的起始索引为1，数量2个，从删除位置开始插入1111，2222
(2) [11, 123]  # 作用的值
x
(4) [9, 1111, 2222, 1211]

7、1、3 map()的用法

语法：

map(function(currentValue,index,arr), thisValue)

参数：
currentValue	必须。当前元素的值
index	可选。当期元素的索引值
arr	可选。当期元素属于的数组对象
thisValue	可选。对象作为该执行回调时使用，传递给函数，用作 "this" 的值。
如果省略了 thisValue ，"this" 的值为 "undefined"


forEach vs map：
1、forEach()返回值是undefined，不可以链式调用。
var res=arr.forEach(function(v,i,arr){
    console.log(v,i,arr);
    console.log(this[0]);
    return 123;
},"hello")
res # undefined

2、map()返回一个新数组，原数组不会改变
var res=arr.map(function(v,i,arr){
    v=v + 'SB'
    return v;
},"hello")

res #["aaSB", "bbSB", "ccSB", "ddSB", "eeSB"]


在使用forEach()时候，如果数组在迭代的时候被修改，则其他元素会被跳过
var arr=[11,22,33,44,55]
arr.forEach(function(v){
    console.log(v);
    if (v === 33){
        arr.shift() // 下一次循环应该循环出索引为3的元素，但此时一旦删除第一个元素，那么值55的索引变成了3
    }
})
11
22
33
55

反转字符串
var str = '12345';
Array.prototype.map.call(str, function(x) {   //同时利用了call()方法
  return x;
}).reverse().join('');

二、JS语法

1、Date日起对象

var d1=new Date()

d1
Tue Sep 22 2020 14:53:03 GMT+0800 (中国标准时间)

d1.toLocaleString()
"2020/9/22 下午2:53:03"

var d2=new Date("2020/09/22 11:11:11")

d2
Tue Sep 22 2020 11:11:11 GMT+0800 (中国标准时间)
d2.toLocaleString()
"2020/9/22 上午11:11:11"

var d3=new Date(1111,11,11,11,11,11)

d3.toLocaleString()  #  月份是从0开始的
"1111/12/11 上午11:11:11"


# 时间对象具体方法
var d6 = new Date();
d6.getDate()    获取一个月里的第几天
d6.getDay()		获取星期，0-6
d6.getMonth()		获取月份(0-11)
d6.getFullYear()		获取完整的年份
d6.getHours()			获取小时
d6.getMinutes()		获取分钟
d6.getSeconds()		获取秒
d6.getMilliseconds()  获取毫秒
d6.getTime()					时间戳

2、Math对象

abs(x)      返回数的绝对值。
exp(x)      返回 e 的指数。
floor(x)    对数进行下舍入。
ceil(x)		对数进行上舍入
log(x)      返回数的自然对数（底为e）。
max(x,y)    返回 x 和 y 中的最高值。
min(x,y)    返回 x 和 y 中的最低值。
pow(x,y)    返回 x 的 y 次幂。
round(x)    把数四舍五入为最接近的整数。
sin(x)      返回数的正弦。
sqrt(x)     返回数的平方根。
tan(x)      返回角的正切。
Math.random()	随机数,默认0-1之间的随机数,若想求min~max之间的数，公式为：							min+Math.random()*(max-min)

3、json对象

var s = {"name":"wu","age":18}

var s1 = JSON.stringify(s)  # 序列化

s1
"{"name":"wu","age":18}"

var s2 = JSON.parse(s1)  # 反序列化

s2
{name: "wu", age: 18}

4、RegExp对象

#  匹配模式：常用g(全局匹配;找到所有匹配，而不是在第一个匹配后停止)和i(忽略大小写)

var reg1 = new RegExp('^[a-zA-Z][a-zA-Z0-9]{5,11}$')
undefined
var reg2=/^[a-zA-Z][a-zA-Z0-9]{5,11}$/
undefined
reg1
/^[a-zA-Z][a-zA-Z0-9]{5,11}$/
reg2
/^[a-zA-Z][a-zA-Z0-9]{5,11}$/

    
reg1.test("wuxinb")
true
reg2.test("wuxinb")
true


var s1 = "hello world"
undefined
s1.match(/l/)
["l", index: 2, input: "hello world", groups: undefined]
s1.match(/l/g)
(3) ["l", "l", "l"]
s1.search(/l/)
2
s1.search(/l/g)
2
s1.split(/ /)
(2) ["hello", "world"]


var s1 = "hello worLd"
undefined
s1.replace(/l/ig, "好")
"he好好o wor好d"


#  全局匹配模式有一个lastIndex属性，类似指针，匹配失败时，返回起始位置
var reg3 = /^[a-zA-Z][a-zA-Z0-9]{5,11}$/g
undefined
reg3.test("wuxinb")
true
reg3.lastIndex
6
reg3.test("wuxinb")
false
reg3.lastIndex
0

#  什么都不传，默认传的是undefined
var reg4 = /^[a-zA-Z][a-zA-Z0-9]{5,11}$/
undefined
reg4.test()
true
reg4.test("undefined")
true
var reg5 = /^undefined$/
undefined
reg5.test()
true

5、自定义对象

# 你可以看成是我们python中的字典 但是js中的自定义对象要比python里面的字典操作起来更加的方便
#  方式一
var d1 = {"name": "wu"}
undefined
typeof d1
"object"

#  方式二
var d2 = new Object()
undefined
d2
{}

d1["name"]
"wu"
d1[""]
undefined
d1.name
"wu"
d1.xxx
undefined

d1["age"]=18
18
d1
{name: "wu", age: 18}
d1.age
18

for (let i in d1){
    console.log(i, d1[i])
}
name wu
age 18 # 支持for循环 暴露给外界可以直接获取的也是键

var x = [1,3,4,4,5,6]
for (let a in x){console.log(a,x[a])}
0 1
1 3
2 4
3 4
4 5
5 6

6、运算符

# 算术运算符
var x = 10;
var res1 = x++;
var res2 = ++x;
res1 10
res2 12
++表示自增1 类似于 +=1
加号在前先加后赋值 加号在后先赋值后加

# 比较运算符
1 == '1'  # 弱等于  内部自动转换成相同的数据类型比较了
true  

1 === '1'  # 强等于  内部不做类型转换

1 != '1'
false
1 !== '2'
true

# 逻辑运算符
	# python中 and or not
 	# js中 && || !
5 && '5'
'5'

0 || 1
1

!5 && '5'
false

"""
一定要注意到底什么时候返回的是布尔值 什么是返回的是数据
按照后端逻辑理解吧 js这块看看就行了
"""

# 赋值运算符
= += -= *= ....

7、流程控制

# if判断
var age = 28;
# if(条件){条件成立之后指向的代码块}
if (age>18){
  console.log('来啊 来啊')
}
# if-else
if (age>18){
  console.log('来啊 来啊')
}else{
  console.log('没钱 滚蛋')
}
# if-else if else
if (age<18){
  console.log("培养一下")
}else if(age<24){
  console.log('小姐姐你好 我是你的粉丝')
}else{
  console.log('你是个好人')
}
"""
在js中代码是没有缩进的 只不过我们处于python书写习惯人为的加上了而已
()条件
{}代码块
"""

# switch语法
"""
提前列举好可能出现的条件和解决方式
"""
var num = 2;
switch(num){
  case 0:
  	console.log('喝酒');
  	break;  # 不加break 匹配到一个之后 就一直往下执行
  case 1:
  	console.log('唱歌');
  	break;
  case 2:
  	console.log('洗脚');
  	break;
  default:
  	console.log('条件都没有匹配上 默认走的流程')
}

# for循环
# 打印0-9数字
for(let i=0;i<10;i++){
  console.log(i)
}
# 题目1  循环打印出数组里面的每一个元素
var l1 = [111,222,333,444,555,666]
for(let i=0;i<l1.length;i++){
  console.log(l1[i])
}

# while循环
var i = 0
while(i<100){
  console.log(i)
  i++;
}

# 三元运算符
# python中三元运算符 res = 1 if 1>2 else 3
# JS中三元运算  res = 1>2?1:3 
条件成立取问好后面的1 不成立取冒号后面的3
var res = 2>5?8:10 # 10
var res = 2>5?8:(8>5?666:444)  # 666
"""
三元运算符不要写的过于复杂 
"""

8、函数

# 在python定义函数需要用到关键字def
# 在js中定义函数需要用到关键字function

# 格式
function 函数名(形参1,形参2,形参3...){函数体代码}

# 无参函数
function func1(){
  console.log('hello world')
}
func1()  # 调用 加括调用 跟python是一样的
hello world

# 有参函数
function func2(a,b){
  console.log(a,b)
}
func2(1,2)
1 2
func2(1,2,3,4,5,6,7,8,9)  # 多了没关系 只要对应的数据
1 2
undefined

func2(1)  # 少了也没关系
1 undefined
  
# 关键字arguments
function func2(a,b){
  console.log(arguments)  # 能够获取到函数接受到的所有的参数
  console.log(a,b)
}

function func2(a,b){
  if(arguments.length<2){
    console.log('传少了')
  }else if (arguments.length>2){
    console.log('传多了')
  }else{
    console.log('正常执行')
  }
}


# 函数的返回值  使用的也是关键字return
function index(){
  return 666
}
function index(){
  return 666,777,888,999
}
res = index();
999
res
999  # 只能拿到最后一个

function index(){
  return [666,777,888,999]  # 需要放到数组中，可以返回多个值
}
# js不支持解压赋值


# 匿名函数  就是没有名字
function(){
  console.log('哈哈哈')
}
var res = function(){
  console.log('哈哈哈')
}  #  这样无意义
(function (){
  console.log("你好")
})()  #  立即执行匿名函数

# 箭头函数(要了解一下)  主要用来处理简单的业务逻辑 类似于python中的匿名函数
var func1 = v => v;  """箭头左边的是形参 右边的是返回值"""
等价于
var func1 = function(v){
  return v
}

var func2 = (arg1,arg2) => arg1+arg2
等价于
var func1 = function(arg1,arg2){
  return arg1+arg2
}

var func1 = x=>x**2
undefined

var  res = func1(3)
undefined
res
9

9、函数的名称空间与作用域

# 跟python查找变量的顺序一致
var city = "BeiJing";
function f() {
  var city = "ShangHai";
  function inner(){
    var city = "ShenZhen";
    console.log(city);
  }
  inner();
}

f();  //输出结果是？
ShenZhen
=================================================================================
var city = "BeiJing";
function Bar() {
  console.log(city);
}
function f() {
  var city = "ShangHai";
  return Bar;
}
var ret = f();
ret();  // 打印结果是？
BeiJing
=================================================================================
var city = "BeiJing";
function f(){
    var city = "ShangHai";
    function inner(){
        console.log(city);
    }
    return inner;
}
var ret = f();
ret();  // 打印结果是？
ShangHai

10、变量和函数的提升

#  那么变量提升就是变量声明会被提升到作用域的最顶上去，也就是该变量不管是在作用域的哪个地方声明的，都会提升到作作用域的最顶上去
console.log(v);
var v = "hello";
console.log(v);
VM7721:1 undefined
VM7721:3 hello
undefined


#  注意必须连在一起写
fn();
console.log(fn);
function fn(){
    console.log("你好")
};
fn();
你好
ƒ fn(){
    console.log("你好")
}
你好
undefined

# 注意:函数声明式，会将函数的声明和定义一起提升到作用域的最顶上去。

# 如果是这种写法:函数表达式声明的函数
console.log(fn);
var fn=function(){
    console.log("你好")
};
console.log(fn);
VM7640:1 ƒ fn(){
    console.log("你好")
}
VM7640:5 ƒ (){
    console.log("你好")
}
undefined

#  使用同一个变量名时，函数的优先级高
console.log(fn);
function fn(){};
var fn="你好";
console.log(fn);
VM7690:1 ƒ fn(){}
VM7690:4 你好
undefined


#1:所有的声明都会提升到作用域的最顶上去。

#2:同一个变量只会声明一次，其他的会被忽略掉。

#3:函数声明的优先级高于变量申明的优先级，并且函数声明和函数定义的部分一起被提升。