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