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. 放在变量前面，表示前置递增，放在变量后面，表示前置递减
2. 必须和变量配合使用
3. ++在前，先加后返回值；++在后先返回值后自加1
4. 开发中大多数使用后置递增/递减，代码独占一行

比较运算符

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

逻辑运算符

&& || ！

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

赋值运算符

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

运算符优先级

• 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];

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

遍历数组

可以通过循环

数组新增元素

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

函数

声明函数

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的？

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

基本包装类型：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
• 一般简单的数据类型值放在栈中，复杂的是把地址放在栈中，内容是存放在堆中
• 函数的形参也可以看做是一个变量，当我们把引用类型变量传给形参时，实质上是把变量在栈内保存的堆地址复制给了形参，形参和实参保存的是同一个堆地址，因此函数内部对输入的对象进行改变的时候，直接改变了堆中的内容，函数执行完毕后，该对象的内容已经改变