目录
JavaScript:
- 响应用户操作
- 组成部分:
-
ECMAScript,描述了该语言的语法和基本对象,是js核心语言标准。
-
文档对象模型(DOM),描述处理网页内容的方法和接口。
-
浏览器对象模型(BOM),描述与浏览器进行交互的方法和接口。
-
-
js解释器:
-
浏览器厂商:Firefox(js标准)、IE(js)、Google(js)
-
nodejs【网络编程(http模块)/数据库操作(mysql)/IO文件(file)】
-
-
弱类型语言
-
使用:
-
外部JavaScript:
-
新建.js文件,在<head>标签加入<script>元素
-
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script type="text/javascript" src="hello.js"> consle.log(1);//无效,已用作引入js文件 </script> </head> <body> </body> </html>
-
-
内部JavaScript
-
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script type="text/javascript"> alert('hello javascript') </script> </head> <body> </body> </html>
-
-
在body和head中使用JavaScript的区别
-
在body部分中的JavaScript会在页面加载的时候被执行。
-
在head部分中的JavaScript会在被调用的时候才执行。
-
定义一个全局对象,这个对象是页面中的某个按钮时,必须将其放入body中
-
-
-
注释:
-
//
-
/* */
-
-
关键字与保留字
-
关键字:(在js中有特殊功能)
break do try typeof case else new var catch finally return void continue for switch while debugger this function with default if throw instanceof delete in
-
保留字:(将来可能成为关键字)
abstract enum int short boolean export interface static byte extends long super char final native synchronized class float package throws const goto private transient debugger double implements protected volatile import public -
区分大小写
typeof 关键字, typeOf 非关键字
-
标识符
指变量,函数,属性的名字或者函数的参数。标识符是按照以下规则组合起来的一或多个字符:
1.字母,数字,下划线,$组成
2.只能以字母,下划线,$开头。
3.不能将关键字作为标识符。命名采用驼峰式命名
-
变量
- 声明 var message;
- 初始化 message = "hello"
- 声明并初始化 var message = "hello"
- 定义多个变量 var message= "hello",found=false, age = 29
- 变量名的命名规则: 变量名由字母,数字,下划线以及$组成。
- 不要使用下划线或者数字作为变量名的开头
- 变量名应该具有一定的意义,使用小驼峰命名规则 var userAgeTotal = "";
- 不要使用关键字或是保留字
var:
- 注意:
- 使用var声明变量,在方法内部是局部变量,在方法外部是全局变量
- 没有使用var声明的变量,在方法内部或外部都是全局变量,
- 在方法内部声明,在方法外部使用之前需要先调用方法,告知系统声明了全局变量后方可在方法外部使用。
-
变量可以重复声明:var d = 10,e = 20,f,g;
-
使用var变量声明会被提升
-
//变量声明提升 //函数内部能访问到全局变量 //函数外部不能访问到函数里面 //函数执行 函数名() 不执行相当于没有写这个函数 x = 1;//浏览器:window.x node:global.x console.log(x); //1 function y() { //封闭作用域 //var x var声明提前 console.log(x); //undefined x为定义 console.log(this.x);//1,this指向全局 //x = 2 var声明提前 var x = 2;//var声明提前 console.log(x); //2 } y(); console.log(x);//1 //使用var声明的变量才会被提升,直接赋值不会 //函数声明方式会被提升,函数声明表达式不能被提升 //函数声明方式: function foo(){} //函数声明表达式方式: var foo =function foo(){ //函数作用域:局部作用域 封闭作用域 // var 的变量声明提前知会提升到当前作用域的最前面 }
-
数据类型
- JavaScript基本数据类型:
- 值类型(基本类型):字符串(String)、数字(Number)、布尔(Boolean)、空(Null)、未定义(Undefined)、Symbol。
- 引用数据类型:对象(Object)、数组(Array)、函数(Function)。
- 注:Symbol 是 ES6 引入了一种新的原始数据类型,表示独一无二的值。
-
字符串 String
-
用单引号或双引号
-
var a = 'b'; var b = " hello wor 'ld' "
-
可以使用字符字面量,转义字符
-
\n 换行
-
\t 制表
-
\b 退格
-
\r 回车
-
\ 斜杠
-
' 单引号
-
" 双引号
-
-
字符长度可通过length属性获取字符长度
-
var str = "我是字符串"; console.log(str); console.log(str.length); var s4='\n\t\b\r';
-
-
数字 Number
-
只有一种数字类型
-
按照数字精度可以分为整数(int)、单精度(float)、双精度(double )
-
按照数字的表示方法可以分为二进制,八进制,十进制,十六进制
-
表示方法:
-
整数
-
十进制 55 由0~9组成
-
八进制 070 首位为0,其他位有0~7组成
-
十六进制 0x11 首位为0x,其他位为0~9,A~F
-
-
浮点数:必须包含一个小数点,并且小数点后必须至少有一位数字。浮点数值的最高精度是17位小数
-
普通浮点数 3.1415926
-
科学计数法 3.125e7 即31250000
-
-
非数值NaN:一个本来要返回数值的操作数未返回数据的情况
-
isNaN(NaN); // true
-
-
数值范围:
-
Infinity(正无穷)或者-Infinity(负无穷)
-
最大:Number.MAX_VALUE ,最小:Number.MIN_VALUE
-
-
数值范围检测:
var a = isFinite(9/0); // false
-
-
-
布尔 Boolean:true 或 false
-
Null:一个空对象的指针
-
Undefined:变量不含有值,未定义
-
对象Object
-
对象由键值对组成,使用大括号将所有键值对括起来
var dog = { name: 'momo', age: 4 }
-
点语法获取对象的属性
dog.name; //momo
-
-
数组Array
-
一个特殊的对象
-
值与值之间使用逗号分隔开
-
所有的值通过中括号括起来
var classArr = ['web2104','web2105','web2106']
-
通过数组下标获取对应的数据
classArr[0]; // web2104
-
-
函数Function
代码执行单元,用于实现某些特殊的功能-
function sum(a, b) { return a + b; } //执行函数 sum(1,2); // 3
//立即执行函数==>(function 函数名(){函数体}()) var a = 9; (function ab() { alert(a) a = 10 })()
-
-
基本数据类型和引用数据类型在内存中如何存储
-
基本数据类型:维护在栈区,基本数据类型的值保存在栈区。
-
var a = 123; b = a;基本数据类型是在栈内存中存储的,如下图,b = a的时候,b直接把a的值存进去
-
a = 456; 会把a的值改为456,但是对b没有任何影响,所以最后会输出a = 456;b = 123;
-
存在栈,值与值之间独立存在,修改一个值不会影响其他变量
-
-
引用数据类型:
-
引用数据类型的引用地址保存在栈区,值保存在堆区。
var obj = { name: 'zhangsan' } var obj1 = obj; //将对象obj赋值给对象obj1 console.log(obj.name); //zhangsan console.log(obj1.name); //zhangsan // 修改obj的name // 当obj属性name变为"lisi"时,obj1属性name也变为"lisi" obj.name = 'lisi'; console.log(obj.name); //lisi console.log(obj1.name); //lisi
-
当栈存放引用类型时,值为对象的地址,obj与obj1指向同一个地址,所以当obj的name值变为“孙悟空”时,obj1也会发生变化
-
-
深拷贝与浅拷贝:浅拷贝表示仅拷贝引用地址,深拷贝表示对于对象的克隆
- 实现深拷贝的方法
-
通过json对象实现深拷贝(JSON.stringify,JSON.parse)
-
Object.assign()拷贝
-
lodash函数库实现深拷贝
-
递归的方式实现深拷贝
-
等等
-
类型判断
-
- typeof:类型判断
- 语法: typeof 变量名
- 值:
- "undefined" 未定义
- "boolean" 布尔类型
- "string" 字符串
- "number" 数值
- "object" 对象、null、数组
- "function" 函数
var a = 3;
typeof a; // number
if((typeof a) == "string"){}
if(a == "null"){}
if(a == null){}
- isNaN:判断是否是不是一个数字
var a = 10/'a';isNaN(a); //true
-
isFinite:判断是否是一个有效值
var a = 10/0 ;
isFinite(a) // false
操作符
-
算术运算符
-
运算符 描述 例子 结果 + 加法 var num = 1 + 2; 3 - 减法 var num = 4 - 3; 1 * 乘法 var num = 4 * 3; 12 / 除法 var num = 6 / 3; 2 % 取余 var num = 7 % 3; 1 -
进行数据运算时,除'+'外,其他运算符可以自动将数字字符串隐形转成数字
var num1 = '8'; var num2 = '4'; var num3 = a; var num4 = 3; console.log(num3 + num4);//a3,只要有一个字是字符串,同一条表达式先加再拼接,字符串后面都是拼接 console.log(num1 - num2); //4 console.log(num1 / num2); //2 console.log(num1 * num2); //32 console.log(num1 % num2); //0
-
-
一元运算符:8种
8种
运算符 | 描述 |
---|---|
+ | 将操作数转换成数字,字符串的拼接 |
- | 将操作数转换成数字,同时变为负数 |
! | 逻辑取反运算符 |
++ | 递增 |
-- | 递减 |
delete | 删除数组或对象中特定索引的值 |
typeof | 操作数放到typeof的后面,会返回当前操作数的类型,对于数值类型可以准确返回,对于引用类型,Function会返回'function',其他都只会返回'object' |
void | void 运算符对任何值返回 undefined。 |
-
+号
- 数据相加
var sum = num1 + num2; //8
-
放在数据的前面,就是取正数,负负得正
var num = 6; console.log(+num); // 6 var num1 = -6; console.log(+num1); // -6
-
与字符串运算时,就是字符串连接符
var a = 'hello'; var b = 'world'; console.log(a + b); // helloworld
-
将数字字符串或布尔类型等隐式转换成number类型
= '123'; var b = true; console.log(+a, +b); // 123 1
-
-号
-
正、负号可以对数字进行取正或取负,其他运算符不能转换
-
正、负号可以将字符串数字隐式转换成数字
-
-
!号
常被用作条件判断时的取反操作,类型判断等,还可以用'!'将变量转换为Boolean类型
var a; if (!a) {} console.log(!null); //true console.log(!undefined); //true console.log(!''); //true console.log(!100); //false console.log(!'abc'); //false
-
++/--
-
++/--放在前面,并进行赋值:先累加,后赋值
var num = 0; var a = ++num; console.log(a); // 1 console.log(num); // 1 //num先自加1,再赋值给a
-
++/--放在后面,并进行赋值:先赋值,后累加
var num = 0; var a = num++; console.log(a); // 0 console.log(num); // 1 //先把num的值赋值给a,num再自加1
-
-
delete
删除数组或对象中特定索引的值var obj = { name:'zhangsan', age: 17 }; delete obj.name; console.log(obj); // {age: 17} var arr = [1,2,3,4,5]; delete arr[2]; console.log(arr); //[ 1, 2, <1 empty item>, 4, 5 ],数据删除,占位还在
-
typeof
- 数值类型可以准确返回
- 对于引用类型,Function会返回'function',其他都只会返回'object'
var obj = { name:'zhangsan', age: 17 }; var arr = [1,2,3,4,5]; console.log(typeof obj, typeof arr); //object object
-
void
- 丢弃表达式的返回值,而返回undefined
- 使用方式有void 表达式,void (表达式) 两种
JavaScript隐式转换
- 原始类型(基础类型):Undefined、Null、String、Number、Boolean、Symbol(es6新推出的,暂不考虑)
-
加减乘除
var a = 1 + 2 + '3'; console.log(a, typeof a); // '33' string var b = 1 + 2 + 3; console.log(b, typeof b); // 6 number
-
数字减字符串,字符串转成数字。如果字符串不是纯数字就会转成NaN。字符串减数字也一样。两个字符串相减也先转成数字
10 - '20' //-10 10 - 'one' //NaN 10 - '100a' //NaN
-
乘,除,大于,小于跟减的转换也是一样
10*'20' //200 '10'*'20' //200 20/'10' //2 '20'/'10' //2 '20'/'one' //NaN
-
有关==的隐式转换
-
undefined等于null
-
字符串和数字比较时,字符串转数字
-
数字和布尔比较时,布尔转数字
-
字符串和布尔比较时,两者转数字
undefined == null; //true '0' == 0; //true,字符串转数字 0 == false; //true,布尔转数字 '0' == false; //true,两者转数字
-
-
-
对象类型:object
-
隐式转换:
-
将值转为原始值,ToPrimitive()。
-
ToPrimitive(input, PreferredType?), input是要转换的值,PreferredType是可选参数,仅可以是Number或String类型。
-
对于Date求原始值比较特殊,PreferredType是String,其他Object对象均为Number。
-
-
将值转为数字,ToNumber()。
-
将值转为字符串,ToString()。
-
赋值运算符
运算符 | 例子 | 等同于 |
---|---|---|
= 赋值 | x = y | x = y |
+= 加 | x += y | x = x + y |
-= 减 | x -= y | x = x - y |
*= 乘 | x *= y | x = x * y |
/= 除 | x /= y | x = x / y |
%= 取余 | x %= y | x = x % y |
比较运算符
- 在逻辑语句中使用,以判定变量或值是否相等
- 通常用语条件判断语句中
- 优先级低于算术运算符,高于赋值运算符运算结果一般都为boolean
-
运算符 描述 比较 返回 == 等于 x == 8 false x == 5 true x == "5" true === 值相等并且类型相等 x === 5 true x === "5" false != 不相等 x != 8 true !== 值不相等或类型不相等 x !== 5 false x !== "5" true x !== 8 true > 大于 x > 8 false < 小于 x < 8 true >= 大于或等于 x >= 8 false <= 小于或等于 x <= 8 true -
双等(==)和三等(===)的区别
-
==:两边值类型不同的时候,要先进行类型转换为同一类型后,再比较值是否相等。
-
===:不做类型转换,类型不同的结果一定不等。
-
双等表示只要值相等即可为真,而三等则要求不仅值相等,而且也要求类型相同。
-
建议:尽量使用严格运算符 三等。因为"=="不严谨,可能会带来一些违反直觉的后果。
-
对于string,number等基础类型,双等和三等是有区别的
-
对于Array,Object等高级类型,双等和三等是没有区别的
-
基础类型与高级类型,双等和三等是有区别的
-
对于==,将高级转化为基础类型,进行“值”比较
-
因为类型不同,===结果为false
-
!= 和 ==用法类似
-
!== 和 === 用法类似
-
-
-
非数值的情况下使用'>''<''>=''<='
-
对于非数值进行比较时,会先将其转换为数值,然后再进行比较
// true转换为数值是1 false转换为数值是0 console.log(1 > true); // 结果为false console.log(1 >= true); // 结果为true console.log(1 > '0'); // 结果为true console.log(1 > null); // 结果为true //任何值和NaN作比较结果都是false console.log(1 > 'hello'); // 结果为false 任何值和NaN作比较结果都是false
- 如果符号两侧都是字符串,不会将其转换为数值进行比较,而会分别比较字符串中字符的Unicode编码。 注意:所以在比较两个字符串型的数字时,一定要先转型
console.log('134545353' > '5'); // 不转型则返回false console.log('134545353' > +'5');// 这样结果才返回true
- 比较字符编码时,是一位一位进行比较的,如果符号两侧第一位一样,则比较下一位
console.log('1' < '5'); // 结果为true console.log('11' < '5'); // 结果也为true console.log('be' > 'b'); // 结果为true 先比较第一位b的字符编码是一样的,再比较第二位,由于be有e,而b只有一位,所以be>b console.log('be' < 'b'); // 结果为false
-
逻辑运算符
-
&& 有假则假
- [null,NaN,undefined,false,0,""]直接返回该操作数
console.log(''&&123); //'' 空字符串 console.log(0&&null); //0 console.log(123&&345); //345 console.log(123&&undefined); //undefined
- 当第一个表达式为假,整个表达式的结果就可以确定,返回第一个表达式
console.log(false && 'world'); //false
- 当第一个表达式为真,整个表达式的结果取决于第二个表达式,返回第二个表达式
console.log('hello' && 'world'); //world
- 第一个操作数是null,NaN,undefined,false,0,""(空值)可被转换为false的值的时候返回该值
console.log(null && 'world'); //null
- [null,NaN,undefined,false,0,""]直接返回该操作数
-
|| 有真才真
-
-
第一个操作数是真,直接返回第一个操作数
console.log(123||345); //123
-
第一个操作数是null,NaN,undefined,false,0,"" 则返回第二个操作数
console.log(null || 'hello'); //'hello' console.log('hello' || null); //'hello'
-
两个操作数都是null,NaN,undefined,false,0,""可被转换为false的值的时候返回该值
console.log(null || false); //false
-
-
-
!(取反 )
- 条件判断时的取反操作,类型判断等
- 将变量转换为Boolean类型
var a; if (!a) {} var a=0 console.log(!a); //true console.log(!!a); //false console.log(!null); //true console.log(!undefined); //true console.log(!''); //true console.log(!100); //false console.log(!'abc'); //false
三目运算符
基本语法为: expression ? sentence1 : sentence2
当expression的值为真时执行sentence1,否则执行 sentence2
var age = 19;
var result = age > 16 ? "成年人":"未成年人";
// 当age大于16岁时,条件为真,执行sentence1,其次反之