javascript快速学习

发表于 更新于 分类于 阅读次数： 本文字数： 5.8k 阅读时长 ≈ 5 分钟
javascript快速学习,需要至少有一门语言基础。

一、前提

至少有一门编程语言基础

二、js注释

1
2
3
4
//这是单行注释
/*
这是多行注释
*/

三、js输入输出

1
2
3
alert(message);       //浏览器弹出框
console.log(message); //控制台输出
prompt(information)   //浏览器弹出输入框

  • 例子

js输入输出

点击按钮有不同效果

html
1
2
3
<button id="alert">点击出现提示框</button>
<button id="console">点击控制台输出</button>
<button id="prompt">点击弹出输入框</button>
javascript
1
2
3
4
5
6
7
8
9
10
11
12
$(document).ready(function(){
    $('#alert').click(function(){
        alert('这是消息提示框');
    });
    $('#console').click(function(){
        console.log("这是控制台消息");    //按F12唤出浏览器开发者工具
    });
    $("#prompt").click(function(){
        var val = prompt("随便输入点东西:");
        console.log(val);
    })
});
css
1
2
3
button{
    margin: 10px 10px;
}

四、变量

  1. 声明变量

    • var是js关键字，用于声明变量。
    • name为变量名，通过变量名访问值。
    • 变量命名遵循规则与C语言相同
1
var name;  //声明一个name变量

  1. 赋值

    ​ name = 18 为变量赋值18.

五、数据类型

javascript是一种弱类型语言（动态语言）。不必提前声明变量类型，在程序运行中会自动确定，js引擎根据右值判断类型。

简单数据类型

数据类型说明默认值
Number数字型0
Boolean布尔型false
String字符串型“”
Undefined未定义值,如var a;却未赋值undefined
Null空值null

 字符串

  • 字符串嵌套：str='这是一个"这是嵌套的字符串"字符串'或"str=这是一个'这是嵌套的字符串'字符串"。

  • 转义字符与C语言相似。

数据类型转换

  1. 数字转字符串

方法例
toString()方法var num=20;var str = num.toString()
String()强制转换var num=20;var str = String(num)
加号拼接var num = 20;var str = num+""

  2. 字符串转数字

方法例
parseInt(string)parseInt('20');若输入为小数字符串则取整，错误则为NaN
parseFloat(string)parseFloat('20.21');
Number()强制转换Number('88');
js隐式转换'10'-0;

  3.转换布尔型

  • 代表空或者否定的值会转换为false，如'',0,NaN,null,undefined

  • 其他值均为true

六、运算符

前置递增运算符

i++与i--

后置递增运算符

++i与--i

比较运算符

比较运算符

图片来源：https://www.bilibili.com/video/BV1Sy4y1C7ha

逻辑运算符

符号说明
&&逻辑与，两边同时为true时为true。
||逻辑或，两边有一方为true则为true。
!条件为true时为false，条件为false时为true。

 短路运算

语法结果
表达式1 && 表达式2当表达式1为假时，不在计算表达式2，直接返回假。
表达式1 || 表达式2当表达式一为真时，不再计算表达式2，直接返回真。

运算符优先级

逻辑运算符优先级

七、流程控制

（一）、if分支语句

1
2
3
4
5
6
7
if(条件表达式){
    语句;
}else if(条件表达式){
    语句;
}else{
    语句;
}

三元表达式：(条件表达式) : 表达式1 ? 表达式2;

（二）、switch多分支语句

1
2
3
4
5
6
7
8
9
10
switch(表达式){
    case value1: 
        语句;
        break;
    case value2: 
        语句;
        break;
    default:
        语句; 
}

（三）、循环

  1. for循环

1
2
3
for(初始化变量;条件判断;循环一次后的操作){
    循环体;
}

  2. while循环

1
2
3
while(条件表达式){
    循环体;
}

  3. do…while()循环

1
2
3
do{
    循环体;
}while(条件表达式);

continue关键字：跳过本次循环，进入下一次循环。

break关键字：跳出循环，不再执行循环。

八、数组

（一）、创建方式

  • 使用new创建数组。

  • 利用数组字面量创建数组。

（二）、new创建数组

1
var ArrayName = new Array();

（三）、数组字面量创建数组

1
var ArrayName = [1,2,3];  //常用

九、函数

（一）、函数的使用

  1. 声明函数

1
2
3
4
5
6
7
8
function fnName(){
    语句;
}
-------------------------;
var fn = function(){
    语句;      //匿名函数      
}
fn();    //fn为变量名，不是函数名

  2. 调用函数

1
fnName();

  3. 函数的参数

1
2
3
4
5
6
7
8
9
function fnName(parameter1,parameter2){
    语句;
}
fnName(1,2);
--------------------;
var fn = function(arguments){
    语句;     
}
fn(1);

  4. 函数的返回值

1
2
3
4
function getSum(num1,num2){
    return num1+num2;
}
getSum(2,3);

  5.arguments的使用

  • 不确定实参个数时，使用arguments获取所有参数

1
2
3
4
function fn(){
    console.log(arguments);
}
fn(1,2,3); //返回arguments伪数组

arguments并不是真正意义上的数组：

  1. 具有length

  2. 以索引进行存储

  3. 没有pop()与push()等数组方法

十、作用域

  • javascript作用域分为全局作用域与局部作用域

（一）、全局作用域

  • 整个script标签可用,或单独的js文件可用

1
2
3
4
5
6
<script>
    var num = 10;
    function fn(){
        console.log(num); //可在函数中使用
    }
</script>

（二）、局部作用域

  • 仅在函数内部起作用

1
2
3
4
5
6
7
<script>
    function fn(){
        var num = 10;
        console.log(num);
    }
    console.log(num); //num is not defined
</script>

在函数内部未经声明，直接赋值的变量也是全局变量

1
2
3
4
5
6
<script>
    function fn(){
        num = 10;
    }
    console.log(num); // 10
</script>

（三）、变量的销毁

  • 全局变量：浏览器关闭时才会销毁。

  • 局部变量：代码块结束后，就会被销毁。

（四）、作用域链

当函数中嵌套了函数，作用域链就产生了。

1
2
3
4
5
6
7
var num = 10;
function fn1(){
    var num = 20;
    function fn2(){
        console.log(num); //20
    }
}

十一、js运行步骤

  • javascript解析器在运行javascript语句时分两步：预解析和代码执行。

（一）、预解析

  • 预解析分为变量预解析（变量提升）和函数预解析（函数提升）。

  • js解析器会将所有的var与function提升到当前作用域的最前面。

1. 变量预解析

不提升赋值操作

1
2
3
4
5
6
console.log(num);
var num = 10;
//相当于以下代码
var num;
console.log(num); //undefined
num = 10;

2. 函数预解析

1
2
3
4
5
6
7
8
9
10
fn();
var fn = function(){
    console.log(123);
}
//相当于以下代码
var fn;
fn();
fn = function(){
    console.log(123);
}

（二）、代码执行

  • 代码按照书写顺序，由上到下依次执行

十二、new的执行过程

  1. 在内存中创建空对象。

  2. this指向空对象。

  3. 执行构造函数，并添加属性和方法。

  4. 返回新对象。

十三、js对象

（一）、内置对象

内置对象是指JS语言自带的对象，提供了一些常用的的或最基本而且必要的方法，能帮助开发者快速开发，如：Math,Date,Array,String等。

更多内置方法详见MDN

  Array数组的一些方法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
var arr = new Array(3);    //创建含有三个空元素的数组
var arr1 = new Array(2,3); //等价于var arr1 = [2,3];
-------------------------------------------;
arr instanceof Array;      //第一种方式判断arr是否为数组
Array.isArray(arr);        //第二种方式判断arr是否是数组，优先于instanceof
-------------------------------------------;
var arr = [4,5,6,7,8,9];
arr.push(1);               //追加新元素在最后
arr.unshift(2);            //在数组最前面追加元素
-------------------------------------------;
arr.pop();                 //删除并返回最后一个元素
arr.shift();               //删除并返回最前面一个函数
-------------------------------------------;
arr.reverse();             //反转数组
arr.sort();                //对数组排序
-------------------------------------------;
arr.indexOf(1);            //查找给定元素的第一个索引
arr.lastIndexOf(1);        //查找给的元素的最后一个索引
-------------------------------------------;
arr.toString();            //数组转化为字符串-> 4,5,6,7,8,9
arr.join(分隔符);           //不加分隔符与toString()相同，arr.join('-'); 输出 4-5-6-7-8-9;
-------------------------------------------;
arr.concat(arr1,arr2);     //连接两个或多个数组,返回新数组
arr.slice(begin,end);      //截取数组从begin到end，返回新数组(从0开始);
arr.splice(begin,num);     //删除从begin开始的num个数，返回新数组，影响原数组
arr.splice(begin,num,item1...) //在begin位置删除num个数并插入item
//eg. arr.splice(2,1,1,2,3); 输出 4,5,1,2,3,7,8,9;