1.由来
网景:
livescript:本地表单验证
整合:
javascript:
增加了用户体验好感度
减轻了服务端压力
减少本地表单验证等待时间
2.组成
核心js:ECMAScript5 (6)(兼容性较佳)
dom:document object model文档对象模型(兼容性相对差)
html:->对象
object:
div
span-->节点对象
面向对象:
编程语言:
人
动物
物品:属性
var color='green';
....
bom:浏览器对象模型(兼容性相对差)
浏览器->对象
3.特点
1>弱类型语言
var a=null;//即将指向堆区
a="hello";//最终指向栈区也可以
java:
int a=10;
a="hello";//报错
2>脚本语言
本身具有逻辑能力和行为能力
3>解释性语言
需要被解析器解析执行
浏览器:内置js解析起
node:谷歌v8
1>repl
node
r:read
e:eval
p:print
l:loop
2>node
cd
ls
node test.js
/opt
/opt/bin
node
4>从上到下按照解析顺序依次执行(代码书写顺序不一定是解析顺序)
conosle.log(a);
var a=10;
解析:
var a;
console.log(a);
a=10;
优先解析函数的声明,然后解析使用var操作符声明的变量
5>大小写敏感
color:
Color:
console.log();
Console.log();
4.语法
1>变量的声明
a>标识符的声明
1.由字母、数字、下划线以及$组成
var 桌子='';
var + =''
2.不能以数字开头
var 2a=''//error
var a2=''//success
3.建议大家使用驼峰式命名 建议语义化命名
var firstnameandlastname='zhangsan';
从第二个单词开始,首字母大写
var firstNameAndLastName=''
4.不能使用关键字和保留字
关键字:在js中具有特殊意义的字符
保留字:未来有可能成为关键字的字符
console.log()
var console=
var var=''
var mytable1
b>变量的声明
es5:
var a;//声明一个a变量,但不赋值
a="hello";//获取a变量并赋值hello
var b="hello";//变量的声明并赋值
c='hello';//变量的声明并赋值
var a=2,b=3,c=4;//同时声明多个变量
es6:
let:
使用let声明的变量,只能声明一次(不能重复声明)
不能进行变量提升
局部变量
const:
一般用来声明常量,一旦声明,不可修改
使用const声明的常量,只能声明一次(不能重复声明)
局部变量
如果常量值为引用数据类型,只要引用地址不变,可以修改内部属性
color='rgb'
const person={//引用地址1001
name:'tom'
age
gender
....
}
test.js:
var a=10;
function say(){
console.log(a);
var b=20;
console.log(b);
}
console.log(b);
2>注释
//:单行注释
//注释内容
/**/:多行注释
/*注释内容*/
3>语句
建议每一行语句结束,使用分号结尾
var a=10;console.log(a);
5.使用
1.嵌入在html标签内部(浏览器)
script标签
2.外部引入脚本(浏览器)
script标签:src属性
创建一个js文件,以.js为文件后缀名
3.node
1>创建一个js文件,以.js为文件后缀名
2>执行 node test.js
注意:
使用了src属性的script标签,内部的代码会被解析器忽略
js代码可以写在html的任意位置,建议写在head中
6.局部变量和全局变量
1.什么是全局和局部?
局部:只能在局部作用域中访问的变量
全局:能在全局范围内任意作用域中访问的变量
function say(){ 解析function
console.log(a) 此时a没有声明所以报错,注释以后不报错
a=10;
console.log(a);
}//报错
say() 当调用say()时,解析此函数
2.如何声明?
局部变量:
let
const
使用了var操作符并声明在函数内部
7.数据类型
共有6种数据类型
typeof (a)
typeof a:
返回值:
undefined
object(null+object)
number
boolean
返回值类型:
string
其中5种基本数据类型(简单数据类型)
undefined:未定义
var a;//声明一个变量而不赋值时
var a=undefined;//直接赋值undefined
既不声明也不赋值的变量,数据类型为undefined
null:
空引用数据类型
即将指向堆区,但是此时没有指向
var a=null;
******undefined派生自null
null==undefined:true
null===undefiend:false
Number:
数值类型
10
10.3
011
0xa
NaN:not a number
infinity:无穷
isNaN(a):
a是不是 不是一个数
当a不是一个数时,返回true:
是的,他不是一个数
当a是一个数时,返回false:
不是,他是一个数
isFinite(a):
a是否为无穷数
false:a是一个无穷数
true:a不是一个无穷数
boolean:
true
false
var a=true;
var b=false;
string:
字符串类型
使用单引号或者双引号包裹的字符
json字符串
字符串拼接:
``
''
""
1种引用数据类型(复杂数据类型)
object
object:
function:
array:
var arr=new Array();
arr.valueOf();
date
...
共有的属性和方法:
constructor:构造者
toString():将当前变量转换为字符串类型
function say(){}->function(){}
[1,2,3,4]-》[1,2,3,4]
.....
valueOf():返回变量的原始值
8.数据类型转换
null和undefined不参与转换
Number:
*->number
1>Number转换函数
1>Number(a);
null:0
undefined:NaN
true:1
false:0
"":0
"hello":NaN
"10":10
"10l":NaN
"+10":10
"10.3":10.3
"a10":NaN
2>parseInt(a):
null:NaN
undefined:undefined
true:NaN
false:NaN
"":NaN
"hello":NaN
"10":10
"10l":10
"+10":10
"10.3":10
"a10":NaN
3>parseFloat(a):
"10.3":10.3
var a=null;
console.log(a);
console.log(typeof a);
console.log(parseFloat(a));
console.log(typeof parseFloat(a));
4>+
5>-(-)
Boolean:
1> Boolean(a):
null:false
undefined:false
0:false
非0:true
"":false
非空:true
2> !!a
String:
*->String
1.String(a)
null:"null"
undefined:"undefined"
false:"false"
直接在变量值之外添加双引号或者单引号
2.toString(num):
null和undefined没有toString()
num:进制数
a.toString(2)
true.toString():"true"
10.toString(8):"10"
9.值传递问题
基本数据类型:
var a=10;
b=a;
b=b+1;
console.log(a);
console.log(b);
引用数据类型:
var obj={
name:'lisi',
age:20,
gender:'men'
}
问题:
var obj1={
name:'lisi',
age:20
}
obj2=obj1;
obj2.name='terry';
console.log(obj1.name);
console.log(obj2.name);
基本数据类型在进行值传递时,传递的是值
引用数据类型在进行值传递时,传递的是引用地址
10.操作符
1.算数操作符:
=:赋值操作符 从右向左赋值
var a=10;
+ +=:
+:
a+b:
1.如果两个变量均为number类型,直接相加
2.如果两个变量均为非number类型,并且均不为string类型,也不为object类型
null undefined boolean
直接转换为number类型进行相加(Number())
3.如果其中一个值为string类型,另一个不为object类型,直接进行字符串拼接
10+"10"=1010
4.如果其中一个值为object类型,另一个值不为string类型:
10+{},默认调用{}的tostring()
另一个值为string类型:"10"+{}=10[object Object]
如果只重写了toString():调用tostring()
如果只重写valueof():调用valueof
如果既有toString()又有valueof():调用valueof()
+=:a+=2 -> a=a+2;
- -=:
-:a-b:
-=:a-=4->a=a-4
* *=:a*=4->a=a*4
/ /=
% %=
2.比较操作符(返回值均为boolean)
>:
a>b:
num:num->直接比较
非number:num->将非number转换为number进行比较
非num:非num->转为number
string:string->比较字符编码
num:obj:
默认情况下调用tostring()
如果只tostring(),调用tostring()
如果只valueof(),调用valueof()
如果既重写了tostring,又重写了valueof,调用valueof()
obj:obj:引用地址
<
>=
<=
==:
a==b
undefined==null:true
null==null
undefiend==undefiend
NaN==NaN
先进行数据类型转换,再进行比较
"10"==10:true
===:
全等操作符
先进行数据类型的比较,数据类型相同,再比较值
如果数据类型不同,直接返回false
null===undefiend:false
"10"===10:false
obj===obj:比较引用地址
3.逻辑操作符
&&:逻辑与
a && b
转为boolean的结论:同真才真,有假则假
1.如果第一个数为false、""、null、undefined、nan能够转换为false的值,则返回第一个数
2.如果第一数不返回false,则返回第二个数
||:逻辑或
结论:有真则真,同假才假
1.如果第一个数为null/undefined/false/“”/nan->返回第二个数
2.如果第一个不为上述值,返回第一个数
!:逻辑非
!null
1.将null转换为boolean
Boolean()
2.取反
结果一定为boolean类型
对一个变量,连用两次逻辑非,相当于将当前变量转换为boolean类型
!!null:false
4.三目运算符
a>b(boolean)?console.log(a):console.log(b)
表达式?成立:不成立
if(a>b){
//成立
}else{
//不成立
}
5.一元运算符
+:
+a:
相当于调用了Number(a)
-:
-a
:-Number(a)
++:
a++:a=a+1
先进行变量操作,再进行++
++a:a=a+1
先进行++操作,再进行变量操作
--:
a--:
a=a-1
--a:
a=a-1
6.位运算
js中32位2进制 ....128 64 32 16 8 4 2 1
原码->反码->补码
正数:
原码=反码=补码
负数:
反码=原码的符号位不变,其他位取反
补码=反码+1
-3+4:
-3:
1000 0011:原码
1111 1100:反码
1
------------
1111 1101:补码
4:
0000 0100:源码=补码
sum:
1111 1101
0000 0100
-----------
补:0000 0001=原
11.条件分支语句
if(表达式boolean){
//true
}
.....
if(a>b){
//true
}else{
//false
}
if(){
}else if(){
}else if(){
}else if(){
}else{
}
switch case
switch(变量/表达式){
case key:
//
break
case key:
//
break
default:
如果写在第一行,一定要+break
}
break:
跳出循环体
continue:
跳出本次循环,继续进行下一次循环
12.循环语句
循环三要素:
初始条件;结束条件;迭代条件
1.前置条件循环语句
for(初始条件;结束条件;迭代条件){
//循环体
}
死循环:
for(;;){}
label语句:
标示循环的名称
初始条件;
while(结束条件){
循环体;
迭代条件;
}
2.后置条件循环语句
循环体至少执行一次
初始条件;
do{
//循环体
//迭代条件
}while(结束条件)
增强for循环:for in循环
主要用来循环对象
var obj={
name:'lisi',
age:20,
gender:'men'
}
for(var key in obj){
key:属性名
obj[key]:属性值
}
with语句:
with(){}
var obj={
name:'lisi',
age:20,
gender:'men'
}
console.log(obj.name);
console.log(obj.age);
console.log(obj.gender);
consol.log(name);
with(obj){
console.log(name);//obj.name
console.log(age);
}
13.对象
Object{}一组属性和方法的集合
1.创建实例对象
1>对象字面量
var obj={//new
name:'lisi',
age:20
}
2>构造函数方式
var obj=new Object();
obj.name='lisi';
obj.age=20;
2.访问属性
1>点操作符
var obj={//new
name:'lisi',
age:20
}
obj.name='terry';
console.log(obj.name);
2>obj["key"]
1.变量
2 obj{
name-first:'lisi'
}
obj['name-first']='lisi'
3.删除属性
delete obj.name
delete obj['name']
4.检测属性
in :
使用方式:"name" in obj
继承属性或者私有属性:true
hasOwnProperty():
obj.has..('name')
私有属性:true
继承属性:false
5.对象序列化
object->json:
JSON.stringify(obj)
json->object
JSON.parse(json)
6.方法
每一个对象都有一个构造者(constructor)
每一个函数都有一个原型对象(prototype)
静态方法:声明在函数内部,只能函数本身调用的方法
assign(obj1,obj2):将对象合并到第一个参数对象中
Object.assign()构造函数调用,首字母大写
keys(obj):获取所有属性名
values(obj):获取所有属性值
defineProperty(obj,'key',{}):定义属性
1>{
value:20,
writable:是否可修改
enumerable:是否可遍历
configurable:是否可删除/配置
}
2>set/get方法
不能和第一种方式同时使用
{
set:function(v){
//设置过程
this._age=v;
},
get:function(){
//获取属性过程
return this._age
}
}
var o={}
o.name='lisi'->set(lisi)
console.log(o.name);-->get
非静态方法:声明在函数的原型对象中,函数原型对象和实力对象均可调用
constructor:
toString()
valueOf()
var obj={}
obj.valueOf()