JavaScript入门学习详解
JavaScript入门（持续更新中）
本文章最好是给有一点基础的人员复习使用
1. 什么是JavaScript
JavaScript是以门弱类型的语言，由ECMAScript，DOM,BOM组成
文件后缀为.js文件
2. 运行环境
在浏览器或者node环境下运行
3. 在html文件引入js文件
-
在文件内部编写
<script> 内容编写区 script>在body部分中的JavaScript会在页面加载的时候被执行，在head部分中的JavaScript会在被调用的时候才执行。
所以一般在body 中使用windows.onload
<script> windows.onload = function(){ // 这里放执行的代码 } script> -
外部引入
<script type="text/javascript" src="hello.js">script>
4. 关键字和保留字
关键字:(在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
- 在JavaScript中区分大小写
- 变量名可以由字母，数字，下划线，$组成，但不能以数字组成
- 不能用关键字作为标识符，命名用驼峰命名法
- 语句后可以省略分号,但最好写上分号
5. 数据类型
定义数据类型 使用 var，let，const
使用var定义的变量会产生变量提升的问题
-
基本数据类型
字符串（String）、数字(Number)、布尔(Boolean)、对空（Null）、未定义（Undefined）、Symbol(ES6新增)
基本数据类型的变量和值都存放在栈中，所以没有深拷贝
-
引用数据类型
对象(Object)、数组(Array)、函数(Function)
引用数据类型的变量中和引用地址存放在栈，值保存在堆区 会有深拷贝和浅拷贝的区别
数组(Array)、函数(Function)都属于对象类型
定义变量时并不需要定义变量的类型，在后序的赋值中会动态分配类型
var str = '123';//字符串类型
var num = 123;//数字类型
var a = flase;//boolean类型
var a = null;//Null类型
var a;//a为undefined
var obj = {
name:'zhangsan',
age:18
};//对象类型
var arr = [1,2,3];//Array类型
function fun(){};//函数类型
1. number类型
var num1 = 34; //不使用小数点来写
var num2 = 010; //8进制
var num3 = 0x10; //16进制
var f1 = 3.1415926; //3.1415926 浮点数
var f2 = 3.125e7; //31250000 科学计数法
var a = 10/ "a"; // a为NaN
判断一个参数是否不是数值，不是则返回true
isNaN(NaN); // true
2. Boolean类型
var x=true;
var y=false;
3.Null类型
var a = null;
4. Undefined类型
var a;//不赋值a就为undefined
var a = undefined;
undefined继承null，所以undefined == null结果为true，但是null表示空对象，undefined表示未定义；
console.log(undefined == null); 返回true
但console.log(undefined===null)返回flase；
5. Object类型
var obj = {
name:'zhangsan',
age:18
}
//使用obj对象 要使用.语法
console.log(obj.name,obj.age)
6. Array类型
var arr = [1,2,3,4];
//获取arr数组中的第一个值
console.log(arr[0])
7. Function类型
function sum(a,b){
return a + b;
}
console.log(sum(1+2))
6. 操作符
1. + - * / % 加减乘除取余
正常的数字加减乘除取余
除了+其余能符号在运算时能将只含数字的字符串转换为number类型
2. 一元运算符
+ 将操作数转换成数字，字符串的拼接
- 将操作数转换成数字，同时变为负数
! 取反
++ 递增
-- 递减
delete 删除数组或对象中特定索引的值
typeof 判断变量的类型
3.逻辑运算符（与或非）
// &&条件都为true才执行
var a = 10;
var b = 5;
if (a > 5 && b < 10) {
console.log("aaa");
}
// ||多个条件有一个条件为true就执行
if (a > 5 || b > 10) {
console.log("bbb");
}
//!取反
console.log(!a)//flase
// 三目运算符
var age = 18
var res = age>18?'成年人':'未成年人';
console.log(res);//若条件为真，返回成年人，否则返回未成年人
4.比较运算符
| 运算符 | 描述 | 比较 | 返回 |
|---|---|---|---|
| == | 等于 | 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 |
7. 类型转换
toString()转换为字符串类型
Number()包装器
Number("123"); //123 如果仅包含数值，转换为对应的数值
Number("234.1"); //234.1 解析为对应的小数
Number("+12.1"); //12.1 首位为符号位，其余为为数值，转换为对应的数值
Number("1+2.3"); // NaN 符号位出现在其他位置，解析为NaN
Number("0xa"); //10 如果仅包含十六进制格式，转为为对应的十进制的值
Number("010"); //10【注意】不会当做八进制被解析，结果为10。
Number(""); // 0 空字符串被转换为0
Number("123ac"); // NaN 包含其他字符： NaN
Number(“ 12 "); //12
parseInt()函数
parseInt("123"); //123；如果仅包含数值，转换为对应的数值
parseInt("234.1"); //234；小数点后面的数值省略
parseInt("+12.1"); //12； 首位为符号位，其余为为数值，转换为整数
parseInt("1+2.7"); //1； 符号位出现在其他位置，保留符号位前面的数值
parseInt("0xa"); //10； 如果仅包含十六进制格式，转为为对应的十进制的值
parseInt("010"); //10； 【注意】不会当做八进制被解析，结果为10
parseInt(""); //NaN；空字符串被转换为NaN
parseInt("1+2.3"); //1;如果首位为数值，依次向后解析，找到连续的数值，直到遇到第一个非数值的，将之前获取的数值转换为Number返回 parseInt("123ac"); //123;
parseFloat()函数
parseFloat("123"); //123；如果仅包含数值，转换为对应的数值
parseFloat("234.1"); //234.1；保留小数点后面的数值
parseFloat("+12.1"); //12.1； 首位为符号位，其余为为数值，转换为整数
parseFloat("1+2.6"); //1；符号位出现在其他位置，保留符号位前的数值
parseFloat("0xa"); //0； 【注意】不会当做十六进制来解析。
parseFloat("010"); //10； 【注意】不会当做八进制被解析，结果为10
parseFloat(""); //NaN；空字符串被转换为NaN
parseFloat("1+2.3"); //1;如果首位为数值，依次向后解析，找到连续的数值，直到遇到第一个非数值的，将之前获取的数值转换为Number返回 parseFloat("123.3ac");//123.3;
8. for/while/do while/switch case/if else
//for循环的使用
for(let i = 0 ;i < = 10 ; i++){
console.log(i)
}
//while的使用
var j= 1;
while(j<=10){
console.log(j);
j++;
}
//do while的使用
var a = 1;
do{
console.log(a);
a++;
}while(a<=10)
//switch case的使用 如果n等于1执行case:1内的代码，n等于2执行case:2内的代码
//break 是执行完后直接跳出switch case代码不能省略break
switch(n){
case 1:
执行代码块 1
break;
case 2:
执行代码块 2
break;
default:
与 case 1 和 case 2 不同时执行的代码
}
//if的使用
if (条件) {
执行内容
} else if (条件) {
执行内容
} else {
执行内容
}
9.字符串方法
length 返回字符串长度
indexOf(“字符”,搜索起始位置) 返回字符串中首次常出现的索引
lastIndexOf(“字符”,搜索起始位置) 返回最后出现的索引从后往前搜索
search(“字符”)返回匹配位置
只填一个参数就到最后才结束
slice(起始，结束)裁剪两个位置的字符
substring()和slice一样但不接受负值
substr(起始位置,长度)提取字符串
replace(“被替换”,“输入”)替换字符串的值返回新的字符串但不改变原字符串一次只替换一个，且大小写敏感
字符串.toUpperCase()改为大写字符串
字符串.toLowerCase()改为小写字符串
字符串1.concat(添加在中间的内容,字符串2)连接字符串
String.trim()删除两端空白符
string.charAt(数字)提取对于字符
string.charCodeAt(数字)返回字符的unicode编码
charAt找不到返回空字符串
str[0]找不到字符返回undefined
split(切割)将字符串转换为数组，切割字符串
10. 对象
1. 对象的创建
-
字面量方式
var obj = { name:'zs', age:18, sayName:function(){ console.log('name'); } } -
函数构造方式
var obj = new Object(); obj.name = "zs"; obj.age = 18; obj.sayName = function(){ console.log("name"); }
2. 对象的访问
-
使用.方式访问
-
使用中括号访问
var obj = { name:'zs', age:18, sayName:function(){ console.log('name'); } } console.log(obj.name)//zs console.log(obj['name'])//zs
3. 对象方法(原型方法和实例方法)
-
遍历对象
var obj = { name:'zs', age:18, sayName:function(){ console.log('name'); } } for(var key in obj){ console.log(obj[key]); }- 删除对象属性
delete obj.name; delete obj['name']- Object检测属性
in 是否拥有该属性
console.log('name' in obj)hasOwnProperty 是否是对象自身属性
console.log(obj.hasOwnProperty('name'))propertyIsEnumerable 在hasOwnProperty基础上其上加是否是能枚举
console.log(obj.propertyIsEnumerable('name'))- 数据属性
修改对象属性的特性defineProperty和defineProperties
Object.defineProperty(obj,'name',{}) Object.defineProperties(obj,{ name:{ configurable:true;//是否可以删除 enumerable:true;//是否可以枚举 writable:true;//是否可以修改 value:'luo' }, age:{} })查看对象属性的特性
Object.getOwnPropertyDescriptor(obj,'name'); Object.getOwnPropertyDescriptors(obj);访问器属性特征 writable和value改为get,set
Object.defineProperty(obj,'year',{ get:function(){ return this._year; }, set:function(newYear){ this.year = newYear; } })- 对象转JSON
JSON.stringify(obj)JSON转对象
JSON.parse(json)- 对象转字符串
String(obj)注意转化规则
显示转换与隐式转换规则类似，当要将对象转换为String时，类似隐式转换中的PreferredType为String
1.先调用对象的toString方法
2.判断该方法的返回值是否为基础数据类型（Number，String，Boolean，Undefined，Null）
3.若返回值为基础数据类型，则转换规则按照相应数据类型的转换规则对其进行转换
4.若返回值不为基础数据类型，则在该返回值的基础上继续调用valueOf方法
5.判断valueOf的返回值是否为基础数据类型
6.判断是否为基础数据类型，若是基础数据类型则进行操作3
7.若仍旧不为基础数据类型则报错
- 对象转Number
Number(obj)显示转换与隐式转换规则类似，当要将对象转换为Number时，类似隐式转换中的PreferredType为Number
1.先调用对象的valueOf方法
2.判断该方法的返回值是否为基础数据类型（Number，String，Boolean，Undefined，Null）
3.若返回值为基础数据类型，则转换规则按照相应数据类型的转换规则对其进行转换
4.若返回值不为基础数据类型，则在该返回值的基础上继续调用toString方法
5.判断toString的返回值是否为基础数据类型
6.判断是否为基础数据类型，若是基础数据类型则进行操作3
7.若仍旧不为基础数据类型则报错
- 对象转Boolean
Boolean(obj)11. 函数
1. 函数声明 //注意函数声明会与var变量声明类似，会变量提升
function 函数名(形参列表){
//函数体
}
2. arguments
arguments为实参组成的一个类数组
function add(a,b,c,d){console.log(arguments)};
add(1,2,3,4)
//arguments为[0: 1,1: 2,2: 3,3: 4]
3. callee
callee是arguments的一个成员初始值为正在执行的function对象
function add(a){
if(a==0){
return 1
}else{
return a + arguments.callee(a-1);
}
}
console.log(add(10));//56
4. this指向
参考 https://blog.csdn.net/fly_home_ysc/article/details/88419975?ops_request_misc=&request_id=&biz_id=102&utm_term=this%E6%8C%87%E5%90%91&utm_medium=distribute.pc_search_result.none-task-blog-2allsobaiduweb~default-5-88419975.nonecase&spm=1018.2226.3001.4187
5. IIFE 立即执行函数
特点： 页面加载完，只执行一次
函数内的变量不会泄露
使用方式 用()将函数包起
(function(形参){
函数体内容
})(实参);
6. 作用域 作用域链
全局作用域：全局变量
函数作用域: 在函数中声明的变量，局部变量在函数外部不能访问
var a = 10;
function foo() {
// 当函数内部有变量a时，会产生局部作用域，外界全局作用域中的a不会对函数内部造成影响
// 如果把函数内部的变量a注释掉是，函数内部的a输出的就是全局作用域中的a
console.log(a); //undefined
var a = 100;
console.log(a); // 100
function fn() {
console.log(a); //undefined
var a = 200;
console.log(a); // 200
}
fn()
}
foo()
作用域链
var a = 100
function F1() {
var b = 200
function F2() {
var c = 300
console.log(a) // 自由变量，顺作用域链向父作用域找 //100
console.log(b) // 自由变量，顺作用域链向父作用域找 //200
console.log(c) // 本作用域的变量 //300
}
F2()
}
F1()
7. call apply bind修改this指向
var obj = {
name: 'zs',
sayName: function () {
console.log(this.name);
}
}
var b = obj.sayName;
console.log(b)//undefined //this指向global
b.call(obj); // zs 指向obj并且立即执行
b.apply(obj); // zs 指向obj并且立即执行
b.bind(obj);//不用立即执行 保存this指向obj
8. 闭包
闭包是一种特殊的对象。它由两部分构成：函数，以及创建该函数的环境。环境由闭包创建时在作用域中的任何局部变量组成。
闭包的生成有三个必要条件
-
函数嵌套函数
-
内部函数引用了外部函数中的数据（属性、函数）
-
参数和变量不会被回收
这样就形成了一个不会销毁的函数空间
-
产生一个闭包
创建闭包最常见方式，就是在一个函数内部创建另一个函数。
function func() {
var a = 1, b = 2;
function closure() {
return a + b;
}
return closure;
}
console.log(func()()); // 3