前端开发笔记——JavaScript

JS基础知识

• 变量命名规则

1. 变量的名字必须是数字、字母、下划线和$组成
2. 变量的名字不能以数字开头
3. 变量的名字不能是关键字for while if
4. 建议 变量有意义
5. Js中变量区分大小写
6. 如果变量重名了，后面的会替换前面的
7. 变量的命名尽可能使用驼峰法命名

• 注释

1. //
2. / 无论是什么都不会被运行 /

JS数据类型

• 数值Number、字符串String、布尔Boolean、undefined、null、对象Object（函数、数组）

1. 如果要在字符串中使用引号，请使用转义字符 \'
2. 使用单引号或者双引号引起来的才是字符串
3. 字符串相加与数值运算
4. +既可以作为数学运算使用也可以作为字符串拼接使用
5. 从前往后运算，如果两个变量都是数值型那么加号作为数学运算符
6. 直到遇到一个字符串，此后所有的加号都是字符串拼接

• 类型转换

1. 其他类型转为数值类型：

var a=Number(null) //0
var b=Number(undefined) //NaN
var c=Number("c") ///NaN

var d=parseInt(null) //NaN
var e=parseInt(undefined) //NaN
var f=parseInt('23k') //23
var g=parseInt('k23') //NaN

1. 其他类型转换为布尔类型：

var a=Boolean('0') //true
var b=Boolean(0) //false
var c= Boolean(null) //false
var d=Boolean(undefined) //false
var e=Boolean('') //false
var f=Boolean(' ')//true

JS操作符与运算符

• 操作符在变量前面，先进行自身运算，再进行其他运算
• 操作符在变量的后面，先进行其他运算，再进行自身运算
• 在JS中 ，逻辑运算的结果是决定整个表达式的子表达式

var a=1;
var b=2;
var c=0;

console.log(c && b); //0
console.log(a || c); //1
//运算优先级 先运算&&再运算||
console.log(a||c&&b); //1
console.log(a&&b) //2(b是决定整个表达式的子表达式)
console.log(b&&a) //1

• JS是一种弱类型语言，变量的数据类型存在自动转换

var a='2';
var b=2;
//==只比较值，不比较数据类型
console.log(a==b); //true
//=== 全等比较 既比较值也比较数据类型
console.log(a===b); //false

• 运算符优先级（从高到低）

1. （）优先级最高
2. 一元运算符 ++ -- ！
3. 算数运算符 先* / 后+ -
4. 关系运算符 > < >= <=
5. 相等运算符 == === != !==
6. 逻辑运算符 先&&后||
7. 赋值运算 =

JS语句

• switch case不加break和加break的区别

//不加break未捕获到
var a=10;
switch(a){
    case 1:
        console.log(1);
    case 2:
        console.log(2);
    case 5:
        console.log(5);
    default:
        console.log("ok");
}//ok

//不加break捕获到
var a=2;
switch(a){
    case 1:
        console.log(1);
    case 2:
        console.log(2);
    case 5:
        console.log(5)
    default:
        console.log("ok")
}//2 5 ok

//加break捕获到
var a=2;
switch(a){
    case 1:
        console.log(1);
        break;
    case 2:
        console.log(2);
        break;
    case 5:
        console.log(5);
        break;
    default:
        console.log("ok");
        break;
}//2

• do while循环 先执行一次代码，然后再进行条件判断

JS数组

• 创建数组

var a1=[];//直接定义空数组
var a2=new Array(1,"2",3)//构造函数方式创建数组

JS函数

• 形参和实参

形式参数：是在声明函数时写的，多个形参使用“，”隔开，形参的值是不固定，形参仅仅是一个占位。与实参实际传入的值要一一对应。

实际参数：在调用时，实际传入函数中的值，多个使用“，”隔开，传入后，在函数中使用形参获取具体的值。

• 函数返回值

1. 如果函数中没有return，那么函数调用之后的返回值就是undefined。

function fun(a,b){
    var c=a-b;
}
var res=fun(10,1);
console.log(res) //undefined

1. 如果函数中有return，但return后面没有值，那么函数调用之后的返回值就是undefined。

function fun(a,b){
    var c=a-b;
    return ;
}
var res=fun(10,1);
console.log(res) //undefined

1. 函数return之后，不管后面有什么代码，均不执行，return后函数调用结束。

function fun(a,b){
    var c=a-b;
    return c;
    console.log(a);
}
var res=fun(10,1);
console.log(res) //9

• 匿名函数

作用域在函数当中，防止全局变量的污染，封装一个局部作用。

• 函数当作参数

1. 回调

function f1(s){
    var k=123+s;
    console.log(k);
    s();
}
var f2=function(){
    console.log(123);
}
f1(f2);

1. 闭包

function f1(){
    var a=10;
    var f2=function(){
        alert(12);
    }
    return f2;
}
var res=f1();
res();

• 变量提升：在代码执行之前变量已经在编译阶段被声明

JS代码的运行分为两个阶段

1. 解析（编译）阶段：语法检查，变量及函数进行声明
2. 运行阶段：变量的赋值，代码流程的执行

console.log(a);//undefined
var a=1;
//先声明变量再运行代码

• 代码执行

在变量未赋值的情况下，如果函数与变量同名，那么函数声明会替代变量声明

console.log(a);//f a{console.log("a"); }
function a(){
    console.log("a");
}
var a=1;
console.log(a);//1

• 作用域与作用域链

作用域链：当函数中使用某个变量时，优先在自己的作用域中查找。如果找不到，就会向上一级作用域查找。如果找不到继续往上一层查找，直到全局作用域。如果还找不到直接报错。

// var a=0;
function f1(){
    // var a=1;
    function f2(){
        // var a=2;
        function f3(){
            // var a=3;
            console.log(a);
        }
        f3();
    }
    f2();
}
f1();
//从上到下取消注释
// a is not defined
//0
//1
//2
//3

JS对象

• this指向

1. 在方法中的this指的就是这个方法所在的对象

var obj1={
    name:'fqc',
    age:18,
    fu:function(){
        var a=this.age;
        console.log(a)
    }
}
obj1.fu();

1. 普通函数中的this指向全局对象（window）

function fun(){
    console.log(this)//window
}

1. this运行在哪个对象下，就指向哪个对象

k = '678';
function fun() {
    var k = '89'
    console.log(this.k);
}
var o1 = {
    k:'123',
    f:fun,
}
var o2 = {
    k:'345',
    f:fun,
}
o1.f();//123
o2.f();//345

• 包装对象：原始类型（数值、字符串、布尔）的数据在一定条件下可以自动转为对象。如果包装对象使用完成会立即自动销毁。
• 数字对象：获取n-m之间随机数的值

Math.floor(Math.random()*(m-n)+n);

• 日期对象

JS中获取的时间是计算本地时间，JS中月份的数组是从0开始的。

其它

• localStorage and sessionStorage

HTML5提供了两种在客户端存储数据的新方法：

1. localStorage-没有时间限制的数据存储（5M）
2. sessionStorage-针对一个session的数据存储，当用户关闭当前浏览器窗口，数据会被删除（5M）。

之前，这些都是由cookie完成的。但是cookie（4k）不适合大量数据的存储，因为它们由每个对服务器的请求来传递，这使得cook速度很慢而且效率也不高。

个人博客地址：www.fangqc.xyz