JS-1基本语法

初识JavaScript

JavaScript是一种运行在客户端的脚本语言
脚本语言：不需要编译，运行过程中由js解释器（js引擎）逐行来进行解释并执行
现在也可以基于Node.js技术进行服务器编程

浏览器分为渲染引擎和JS引擎，渲染引擎用来解析HTML和CSS，俗称内核，比如chrome浏览器的blink，老版本的webkit,JS引擎也成js解释器，用来读取网页中的JavaScript代码，对其处理后运行，比如chrome浏览器的V8
JS引擎执行代码时逐行解释每一句原码，然后由计算机取执行，所以归为脚本语言

JS作用

表单动态校验
网页特效
服务端开发(Node.js)
桌面程序（Electron)
App（Cordova）
控制硬件-物联网（Ruff）
游戏开发（cocos2D-js）

JS组成

ECMAScript ：规定了JS的编程语法和基础核心知识，是所有浏览器厂商共同遵守的一套JS语法工业标准
DOM：文档对象模型
BOM：浏览器对象模型，提供了独立于内容的，可以与浏览器窗口互动的对象结构，通过BOM可以操作浏览器窗口，比如弹出框、控制浏览器跳转、获取分辨率等

书写方法

行内式：写在元素内部，JS中推荐用单引号，可读性差，一般特殊情况下使用
内嵌式：
外部JS文件：

注释

单行注释// ctrl+/
多行注释/* */ shift+alt+a

常用输入输出语句

alert(msg) 浏览器弹出警示框
console.log(msg) 浏览器控制台打印输出信息
prompt(info) 浏览器弹出输入框，用户可以接入

变量

声明变量

var age;

赋值

age=18;

变量的初始化

var age=18;

变量更新

多次赋值后会被覆盖

声明多个变量

var age=18,

address='sss',

gz='2000';

命名规范

不能是关键字或者保留字
区分大小写
只能字母数字下划线组成，不能数字开头
首字母小写，后面单词字母需要大写

标识符、关键字、保留字

标识符：开发人员为变量、属性、函数、参数取的名字

关键字：JS已经使用了的字，不能作为变量名、方法名

保留字：预留的关键字

数据类型

JS是一种弱类型或者说动态语言，意味着不用提前声明变量的类型，在程序运行过程中，类型会被自动确定

简单数据类型

number：数字型，JS中八进制前面要加0，十六进制前加0x

数字类型有三个特殊值，infinity、-infinity、NaN（代表非数值）

可以用isNaN判断是否是数字，

boolean：布尔型类型，默认为false
string：字符串类型，默认值为“”

外用单引号，里面用双引号，或者外双内单

可以用length获取字符串长度

str.length

字符串拼接

字符串+任意类型=拼接后的新字符串，拼接前把任意类型转化为字符串

undefined：声明了但是没有给值，默认值为undefined
null：空类型，默认值为null

数据类型的检测

typeof
字面量字面量是源代码中一个固定值的表示法，通俗来说就是字面量表示如何表达这个值

数据类型转换

把一种数据类型的变量转换成另一种数据类型

转换成字符串型：

toString()
String()强制转换
加号拼接字符串，和字符串拼接的结果都是字符串，这种方法也称为隐式转换

转换成数字型（前两个重点）

parseInt(string)：可以把带单位的值变数字120px-120,得到是整数
parseFloat(string)：得到是浮点数
Numer()
js隐式转换，利用算术运算如：'12'-0 '12'*1 '12'/1 加号是转化成字符串

转化成布尔型

Boolean()代表空、否定的值会被转换为false，如'',0,NaN,null,undefined,其余值都会转化为true

解释型语言和编译型语言

编译和解释的区别在于翻译的时间点不同，编译器是代码执行之前进行编译生成机器语言，解释器读到每一行都解释为机器语言并执行，java是编译语言，js是解释型语言

运算符

算术运算符

+-*/% (%是取余，一般用于判断能否被整除)

表达式和返回值

由数字变量运算符等组成的式子

递增运算符和递减运算符

++ --

放在变量前面，表示前置递增，放在变量后面，表示前置递减
必须和变量配合使用
++在前，先加后返回值；++在后先返回值后自加1
开发中大多数使用后置递增/递减，代码独占一行

比较运算符

< > >= <= == !=
=== ！==全等、不全等，要求值和数据类型都一致

逻辑运算符

&& || ！

短路运算（逻辑中断）：当有多个表达式时，左边的表达式值可以确定结果时，就不再继续运算右边的表达式的值

赋值运算符

=
+= -= 加、减一个数后再赋值
*= /= %= 乘、除、取模后赋值

运算符优先级

1 ()
2 ++ -- !
3 先*/%后+-
4 > >= < <=
5 == ！= === ！==
6 先&&后||
7 =
8 ，

流程控制

分为顺序结构、分支结构、循环结构三种，会按照代码的先后顺序依次执行

分支结构

if(条件表达式) {

//

}

else if (){

}

else {

}

//三元表达式

num>5?'11':'22'

//switch

switch(表达式) {

	case value1:

		执行语句1;

		break;

	case value2:

		执行语句2;

		break;

	default:

		执行语句

循环

//for循环

for(初始化变量；条件表达式；操作表达式){

 //循环体

 }

//while

while(条件表达式) {

    //循环体

}

// do while 先执行一次循环体，如果条件表达式为真，则继续执行循环体

do {

    //循环体

}while(条件表达式)

continue;

break;

数组

var arr= [1,2,3,4];

利用new创建数组

var 数组名=new Array();

var arr=new Array();

利用数组字面量创建数组

var 数组名=[];

var 数组名=[1,2,3];

数组里可以存放数字、字符串、布尔型等

遍历数组

可以通过循环

数组新增元素

修改length长度
直接增加索引号，追加数组元素

函数

声明函数

function 函数名(形参) {

    //函数体

}

var 变量名=function(){

    //匿名函数，fun是变量名，不是函数名，但是调用的时候可以fun()

}

调用函数

函数名(实参);

形参实参不匹配

个数相等，正常输出
实参个数大于形参个数，得到形参个数
实参个数小于形参个数，多的形参值视为undefined，相加结果为NaN

函数返回

return

return后面的语句不会再被执行
return只能返回一个值，如果返回多个，返回的结果是最后一个
函数没有return则返回undefined

Arguements的使用

当不确定有多少个参数传递的时候，可以用arguments来获取，在JS中，arguments实际上是当前函数的一个内置对象，所有函数都内置了一个arguments对象，arguments对象存储了传递的所有实参

是一个伪数组
没有真正数组的一些方法
按照索引的方式存储的

JS作用域

作用域就是代码名字在某个范围内起效果，目的是在某个范围内起作用和效果，目的是提高程序的可靠性，重要的是减少命名冲突
es6之前，js的作用域分为全局作用域和局部作用域
全局作用域：整个script标签或者一个单独的js文件
局部作用域：在函数内部就是局部作用域，这个代码的名字只在函数内部起效果和作用
全局变量只有在浏览器关闭的时候才会销毁，局部变量只要在程序执行完毕就会销毁，比较节约内存资源

JS没有块级作用域（es6会新增）

块级作用域{}，即只能在大括号里使用的变量

作用域链

函数嵌套函数时，就会嵌套一个新的作用域；

根据内部函数可以访问外部函数变量的机制，就用链式查找的方式，决定哪些数据能被内部函数访问（取哪个值），就称为作用域链，类似就近原则

JS预解析

JS解析器在运行代码的时候，分为预解析和代码执行两步，预解析时，js会先将js里面所有var还有function提升到当前作用域的最前面

预解析分为变量预解析（变量提升）和函数预解析（函数提升）

（1）变量提升：把所有的变量声明提升到当前的作用域最前面，不提供赋值操作

（2）函数提升：把所有的函数声明提升到当前的作用域最前面，不提供调用操作

JS对象

对象：一个具体的事物，可以是一个数据库，一个网页，一个远程服务器的连接

对象是由属性和方法组成的

属性：事物的特征，在对象中用属性来表示（常用名词
方法：事物的行为，在对象中用方法来表示（常用动词

为什么需要对象

数组很难保存一个人的完整信息，可以使用对象实现

var arr={'你好'，'男',128,154};

创建对象

字面量方法：

属性或者方法采用键值对的形式，多个属性之间用逗号隔开，方法冒号后面跟的是一个匿名函数

//字面量创建对象

var obj= {

    usname: '张三',

    age :18,

    say: function() {

        console.log('hi');

    }

};

console.log(obj.uname);//调用属性

console.log(obj['age']);//调用属性的第二种方法

obj.say();//调用对象的方法

利用new object创建对象

var obj =new Object();

obj.usename='张三';

obj.age=18;

obj.say=function(){

}

利用构造函数创建对象

前面两个创建对象的方式只能一次创建一个对象，可以利用构造函数批量构造，这种函数称为构造函数,这种函数封装的不是普通代码，而是对象

定义：把对象里一些相同的属性和方法抽象出来封装到函数里

构造函数的语法格式

function 构造函数名() {

    this.属性=值；

    this.方法=function() {}

}

new 构造函数名()

-------

function Star(uname,age,sex) {

    this.name=uname;

    this.age=age;

    this.sex=sex;

}

new Star('张三',18,'男');

构造函数名字首字母要大写
构造函数不需要return就可以返回结果
新建构造函数必须用new
只要new Star() 调用函数就创建一个对象
属性和方法前必须加this

遍历对象

for (变量 in 对象)

for (var k in obj) {//一般喜欢用k或key

    console.log(k);//得到属性名

    console.log(obj[k]);//得到属性值

}

方法也会被遍历出来

JS内置对象

JS中对象分为自定义对象、内置对象、浏览器对象
前两种是ECMAScript，第三个是JS独有的
内置对象是JS中自带的一些对象，提供了最常用和基本的功能，帮助我们快速开发
内置对象包括Math、Date、Array、String等

MDN

Mozilla开发者网络（MDN）提供了有关开放网络技术的信息，包括HTML、CSS和万维网及HTML5应用的API

Math对象

是一个内置对象，不是构造函数，不需要通过new调用

Math.PI Math.max(非数值型返回NaN，无参数返回-infinite)

Math.abs() 取绝对值Math.ceil()向上取整 Math.floor()向下取整 Math.round() 四舍五入

随机数方法

Math.random():返回一个随机小数，0<=x<1,浮点数

日期对象

date是个构造函数,必须使用new调用
如果没有输入参数，则返回当前系统的当前时间

var today=new Date();

var date1=new Date(2019,10,1);//月份要小一个月，是从0-11的月

var date2=new Date('2019-10-1 8:8:8');

日期格式化

date.getFullYear() 返回年
date.getMonth()+1 返回月份
date.getDate() 返回几号
date.getHours()
date.getMinutes()
date.getSeconds()

获得Date总的毫秒数，是距离1970年1月1日过了多少毫秒数

var date=new Date()

console.log(date.valueOf());

console.log(date.getTime());

var date1=+new Date();//最常用的写法

console.log(date1);

console.log(Date.now());//H5新增的获得总的毫秒数

数组对象

检测是否为数组

console.log(arr instanceof Array);//（1）用instanceof检测

console.log(Array.isArray(arr));//(2)优先于instanceof，H5新增，IE9以上版本支持

增加数组元素

arr.push(1)//在arr数组中添加1,返回的结果是新数组的长度

arr.unshift('red'，‘green');//在arr数组前添加'red','green',返回新数组的长度

删除数组元素

arr.pop()//删除数组的最后一个元素，返回值是删除掉的元素

arr.shift()//删除数组的第一个元素，shift完毕后，返回第一个元素的值

数组排序

arr.reverse(); //翻转数组

arr.sort();//数组排序，比较的是字符串，数字排序要用以下方法

arr.sort(function(a,b)){

    return a-b;//升序排列，b-a是降序

});

数组索引方法

arr.indexOf('blue')//返回该数组元素的索引号

//只返回第一个满足条件的索引号，如果在该数组中找不到元素，则返回-1

arr.lastIndexOf('blue')//倒序查找

数组转化为字符串

arr.toString()//

arr.join()//默认逗号分隔

arr.join('-')；//用-分隔

arr.join('&')；//表单常用分隔符

其他

arr.concat()  //拼接两个或多个数组，不影响原数组，返回一个新数组

arr.slice()  //数组截取，返回被截取项目的新数组slice(begin,end)

arr.splice()  //数组删除splice（第几个开始，要删除个数）  返回被删除项目的新数组，会影响原数组

字符串对象

字符串如何调用length的？

把简单数据类型包含为复杂数据类型
把临时变量的值给str
销毁这个临时变量

基本包装类型：String、Number、Boolean，，就是把简单数据类型包装成复杂数据类型，这样基本数据类型就就有了属性和方法

字符串的不可变性

只字符串里面的值没有变，只是指向了新的地址，看起来像变了，因此不应该大量拼接字符串

根据字符返回位置

str.indexOf('要查找的字符',[起始的位置])//可以实现从第几位开始查找，查找不到返回的结果是-1

根据位置返回字符

str.charAt(index)//返回第index个字符，从0开始

str.charCodeAt(index)//返回相应索引号的字符ASCII值  目的：判断用户按下了哪个键

str[index]//H5新增

字符串操作方法

str.concat('a')//相当于str+'a'

substr(截取的起始位置，截取几个字符)

slice

str.replace('a','b')//把str中的'a'替换成'b',只会替换第一个

str.split(',')//字符串转化为数组，用','分割，可以改为其他分隔符

toUpperCase()//转换大写

toLowerCase()//转换小写

数据类型总结

简单数据类型/值类型：string、number、boolean、underfined、null

复杂类型/引用类型：在存储时变量中存储的仅仅是地址（引用），因此叫做引用数据类型，是通过new创建的类型

一般有个变量打算以后放对象，可以先让他等于none
一般简单的数据类型值放在栈中，复杂的是把地址放在栈中，内容是存放在堆中
函数的形参也可以看做是一个变量，当我们把引用类型变量传给形参时，实质上是把变量在栈内保存的堆地址复制给了形参，形参和实参保存的是同一个堆地址，因此函数内部对输入的对象进行改变的时候，直接改变了堆中的内容，函数执行完毕后，该对象的内容已经改变