前端的核心JavaScript

  JavaScript（通常缩写为JS）是一种高级的、解释型的编程语言。JavaScript是一门基于原型、函数先行的语言，是一门多范式的语言，它支持面向对象编程，命令式编程，以及函数式编程。它提供语法来操控文本、数组、日期以及正则表达式等，不支持I/O，比如网络、存储和图形等，但这些都可以由它的宿主环境提供支持。它已经由ECMA（欧洲电脑制造商协会）通过ECMAScript实现语言的标准化。它被世界上的绝大多数网站所使用，也被世界主流浏览器（Chrome、IE、Firefox、Safari、Opera）支持。

  一般使用JavaScript有3种方式，外部引入<script src=''xxx.js"></script>，内部<script></script>标签和内部元素标签使用，例如：<button οnclick="alert('javascript的使用')">。

一个简单的JavaScript程序:

  <script>window.onload = function () { alert("老陈笔记"); }</script>

# 语法基础

1、变量与常量 在JavaScript中，变量指的是一个可以改变的量。变量类似数学的变量，但用法和语法不同。

• 变量名字需要使用者定义命名来灵活使用。
• 在JavaScript中，给一个变量命名，我们需要遵循以下两个方面的原则。

 （1）变量由字母、下划线、$或数字组成，并且第一个字母必须是“字母、下划线或$”。

 （2）变量不能是系统关键字和保留字。 语法 例如： var 变量名 = 值；

2、数据类型

 在JavaScript中，基本数据类型：字符串（String）、数字(Number)、布尔(Boolean)、空（Null）、未定义（Undefined）、Symbol。

 对象类型：对象(Object)、数组(Array)、函数(Function)，还有两个特殊的对象：正则（RegExp）和日期（Date）。

3、运算符

逻辑运算符:&&“与”运算; || “或”运算; !“非”运算

tips:数字 + 数字 = 数字;   字符串 + 字符串 = 字符串;   字符串 + 数字 = 字符串。

4、表达式与语句

一个表达式包含“操作数”和“操作符”两部分。操作数可以是变量，也可以是常量。操作符指的就是之前学的运算符。每一个表达式都会产生一个值。

例如：var a = 8+9（8+9是一个表达式）而整一句代码var a=8+9 就是一个语句了

5、类型转换

类型转换有2种，隐式类型转换和显式类型转换；隐式类型转换，指的是JavaScript自动进行的类型转换。显式类型转换，指的是需要我们手动用代码强制进行的类型转换。

例如：

字符串转数字，隐式转换：var res = 123+"abc"

显示转换：var res =  Number(" 123 ")

tips: console.log(typeof res)判断res数据类型。

# 流程控制

  流程控制，是任何一门编程语言都有的一个语法，指的是控制程序按照怎样的顺序执行的。

  在JavaScript中，共有3种流程控制方式

1、顺序结构；在JavaScript中，顺序结构是最基本的结构。所谓的顺序结构，说白了，就是代码按照从上到下、从左到右的“顺序”执行。

2、选择结构；在JavaScript中，选择结构指的是根据“条件判断”来决定使用哪一段代码。选择结构有3种：单项选择、双项选择以及多项选择，但是无论是哪一种，JavaScript都只会执行其中的一个分支。

3、循环结构；指的是根据条件来判断是否重复执行某一段程序。若条件为true，则继续循环；若条件为false，则退出循环。

  顺序结构是js默认的执行方式这里就不说了，说一下选择结构和循环结构吧。

选择结构；共有两种方式：一种是if语句；另外一种是switch语句。

• 对于if语句，主要包括以下要点：

（1）单项选择：if…

 语法：

if(条件)
{
……
}

（2）双项选择：if…else…

 语法：

if(条件)
{
    ……
}
else
{
    ……
}

（3）多项选择：if…else if…else…

 语法：

if(条件1)
{
    //当条件1为true时执行的代码
}
else if(条件2)
{
    //当条件2为true时执行的代码
}
else
{
    //当条件1和条件2都为false时执行的代码
}

（4）if语句的嵌套

 语法：

if(条件1)
{
    if(条件2)
    {
        当“条件1”和“条件2”都为true时执行的代码
    }
    else
    {
        当“条件1”为true、“条件2”为false时执行的代码
    }
}
else
{
    if(条件2)
    {
        当“条件1”为false、“条件2”为true时执行的代码
    }
    else
    {
        当“条件1”和“条件2”都为false时执行的代码
    }
}

• 对于switch语句：

 语法：

switch(判断值)
{
    case 取值1:
        语块1;break;
    case 取值2:
        语块2;break;
    ……
    case 取值n:
        语块n;break;
    default:
        语句块n+1;
}

说明：switch是“开关”，case是“情况”，break是“断开”，default是“默认”。switch语句会根据“判断值”来判断，然后来选择使用哪一个case。如果每一个case的取值都不符合，那就执行default的语句。

tips：switch里通常会结合continue/break来使用；continue是跳过本条case，继续执行下一个；而break是执行本case后终止不再执行下一条。

循环结构；共有三种方式：分别是while语句、do…while语句和for语句。

• while语句

 语法：

while(条件)
{
    //当条件为true时，循环执行
}

说明：如果“条件”返回为true，则会执行大括号{}内部的程序。当执行完大括号{}内部的程序后，会再次判断“条件”。 如果条件依旧还是true，则会继续重复执行大括号中的程序……循环执行直到条件为false才结束整个循环，然后再接着执行while语句后面的程序。

• do…while语句

 语法：

do
{
    ……
}while(条件);

说明： do…while语句首先是无条件执行循环体一次，然后再判断是否符合条件。如果符合条件，则重复执行循环体；如果不符合条件，则退出循环。

do…while语句跟while语句是非常相似的，并且任何一个都可以转换成等价的另外一个。

do…while语句结尾处括号后有一个分号（;），该分号一定不能省略，这是初学者最容易忽略的一点。

• for语句

 语法：

for(初始化表达式; 条件表达式; 循环后操作)
{
    ……
}

说明：在for循环中，首先定义一个用于计数的变量i，其中设i的初始值为0。然后定义一个判断条件i<n； 只要i小于n就会执行for循环中的程序。最后定义一个循环后的表达式i++，也就是说，每次循环之后都会进行一次i++。

# 函数

  为了减轻重复编码的负担，JavaScript引入了函数的概念。函数一般是在两种种情况下使用：一种是“重复使用的功能”，另外一种是“特定的功能”。

1、在JavaScript中，如果我们想要使用函数，一般只需要简单的2步；定义函数和调用函数。

（1）定义函数

• 定义没有返回值的函数  语法：

function 函数名(参数1 , 参数2 ,..., 参数n)
{
    ……
}

• 定义有返回值的函数

 语法：

function 函数名(参数1 , 参数2 ,..., 参数n)
{
    ……
    return 返回值;
}

tips：根据作用域，变量可以分为以下2种，全局变量和局部变量。

  全局变量一般在主程序中定义，其有效范围是从定义开始，一直到整个程序结束为止。说白了，全局变量在任何地方都可以用。

  局部变量一般在函数中定义，其有效范围只限于在函数之中，函数执行完了就没了。说白了，局部变量只能在函数中使用，函数之外是不能使用函数之内定义的变量的。

（2）调用函数

• 直接调用

 语法：

函数名(实参1, 实参2, ... , 实参n);

• 在表达式中调用   在表达式中调用，一般用于“有返回值的函数”，然后函数的返回值会参与表达式的计算。

例子：

function addSum(a, b) 
        {
            var sum = a + b;
            return sum;
        }
        //调用函数
        var n = addSum(1, 2) + 100;

• 在超链接中调用   当用户点击超链接时，就会调用该函数。

 语法：

<a href="javascript:函数名"></a>

• 在事件中调用

  鼠标移动是一个事件、鼠标单击也是一个事件，类似的事件很多。当一个事件产生的时候，我们就可以调用某个函数来针对这个事件作出响应。

例子：

 <script>
        function test()
        {
            alert("函数被调用了~");
        }
    </script>
</head>
<body>
    <button onclick= "test()">点击按钮</button>
</body>

2、内置函数

# 数组

  数组，就是将多个元素（通常是同一类型）按一定顺序排列放到一个集合中，那么这个集合我们就称之为数组。

  数组就类似一个储物柜，储物柜有按顺序排好的小储物箱，每个小储物箱都有一个序号，可以放置很多东西，同时我们也可以按照序号取东西出来。

一、创建数组的4种方法：

1、自面量创建 var arr = [ ];

2、构造函数方法创建数组，new一个数组创建 var arr = new Array();

3、也是采用构造函数创建数组对象，不过设置了初始长度：var arr = new Array(5);

4、也是采用构造函数创建数组对象，且在创建的同时给它赋予了初始值“5”： var arr = new Array("5");

二、数组的获取

  想要获取数组某一项的值，我们都是使用“下标”的方式来获取。

注意：数组的下标是从0开始的，而不是从1开始的

例子：

var arr = ["HTML","CSS", "JavaScript"];

arr[0]表示获取第1项的值"HTML"。arr[1]表示获取第2项的值"CSS"，以此类推。

tips:可以使用length属性来获取数组的长度。语法数组名.length。

三、数组方法

   常见的数组方法如下表：

基础方法

1、push 往数组最后一个位置追加元素

 var arr = [1,2,3,4,5,6]
 arr.push(7)
 console.log(arr)

2、unshift 往数组第一个位置追加元素

var arr = [1,2,3,4,5,6]
arr.unshift(0)
console.log(arr)

3、pop移除数组最后一个元素，并返回被移除的元素

var arr = [1,2,3,4,5,6]
var res = arr.pop()
console.log(arr)
console.log(res)

4、shift 移除第一个元素，并返回被移除的元素

var arr = [1, 2, 3, 4, 5, 6]
var res = arr.shift()
console.log(arr)
console.log(res)

5、splice 移除数组某个位置的元素，可以移除多个，并可以加参数3替补元素

 参数1 表示开始删除的索引

 参数2 表示删除的个数

 参数3或4或5等等 表示要替补的元素

var arr = [1,2,3,4,5,6]
arr.splice(1,1,666)
console.log(arr)

6、slice （顾头不顾尾）切割数组，返回新数组，不改变原数组

参数1 表示切割开始的索引

参数2 表示切割结束的索引

注：如果只传一个参数的话，表示从这个索引位置切割到最后一个

var arr = ['a','b','c','d','e','f']
var res = arr.slice(0,5)
console.log(arr)
console.log(res)

7、concat 拼接数组，返回新数组，不改变原数组

var arr = ['a', 'b', 'c', 'd', 'e', 'f']
var res1 = arr.concat(1,2,3)
// 或者
var res2 = arr.concat([1,2,3])
console.log(arr)
console.log(res1)
console.log(res2)

8、reverse 数组反转，返回新数组，会改变原数组

var arr = ['a', 'b', 'c', 'd', 'e', 'f']
var res = arr.reverse()
console.log(arr)
console.log(res)

9、sort 数组排序，返回新数组，会改变原数组

var arr = [5,2,3,7,5,9]
var res = arr.sort()
console.log(arr)
console.log(res)

10、join 把数组用字符串拼接，返回拼接字符串，不影响原数组

var arr = ['a', 'b','c', 'd', 'e', 'f']
var res = arr.join('-')
console.log(arr)
console.log(res)

11、tostring 把数组转出字符串

var arr = ['a', 'b','c', 'd', 'e', 'f']
var res = arr.toString()
console.log(res)

12、indexof 查询某个元素的索引，不存在返回-1（可以利用这个特性判断元素是否存在数组）

var arr = ['a', 'b','c', 'd', 'e', 'f']
var res1 = arr.indexOf('c')
var res2 = arr.indexOf('隔壁老陈')
console.log(res1)
console.log(res2)

13、lastindexof 查询某个元素的最后一个索引位置

var arr = ['a', 'a','b','c', 'd', 'e', 'f']
var res = arr.lastIndexOf('a')
console.log(res)

进阶方法

1、forEach 遍历数组，会遍历数组的每一个元素

var arr = [{
id: 1,
name: '张三',
job: '法外狂徒'
},
{
id: 2,
name: '李四',
job: '电玩小子'
},
{
id: 3,
name: '王五',
job: '隔壁老王'
}]
arr.forEach(item => {console.log(item.job)})

2、filter 过滤数组，根据条件进行过滤，返回一个新数组，不影响原数组

var arr = [{
id: 1,
name: '张三',
job: '法外狂徒'
},
{
id: 2,
name: '李四',
job: '电玩小子'
},
{
id: 3,
name: '王五',
job: '隔壁老王'
}]
var res = arr.filter(item => {
return item.name === '张三'
})
console.log(res)

3、map 根据原数组，返回一个新数组，此数组结构发生改变

var arr = [{
id: 1,
name: '张三',
job: '法外狂徒'
},
{
id: 2,
name: '李四',
job: '电玩小子'
},
{
id: 3,
name: '王五',
job: '隔壁老王'
}]
var res = arr.map(item => {
return item.name
})

4、some 用户查询数组中是否符合条件的元素，如果有返回true，没有返回false

var arr = [{
id: 1,
name: '张三',
job: '法外狂徒'
},
{
id: 2,
name: '李四',
job: '电玩小子'
},
{
id: 3,
name: '王五',
job: '隔壁老王'
}]
var res1 = arr.some(item => {
return item.id===2
})
var res2 = arr.some(item => {
return item.id===11
})
console.log(res1)
console.log(res2)

5、find 查找符合条件的某个元素，返回该元素对象

var arr = [{
id: 1,
name: '张三',
job: '法外狂徒'
},
{
id: 2,
name: '李四',
job: '电玩小子'
},
{
id: 3,
name: '王五',
job: '隔壁老王'
}]
var res = arr.find( item =>{
return item.name = '张三'
})
console.log(res)

# 内置对象

 JavaScript中，常用的内置对象有3种；

分别是字符串对象：String、日期对象：Date和数值对象：Math。

# （1）字符串对象：String

1、使用length属性来获取字符串的长度。

 语法：

字符串名.length

2、 使用toLowerCase()方法将大写字符串转化为小写字符串，

也可以使用toUpperCase()方法将小写字符串转化为大写字符串。

 语法：

字符串名.toLowerCase()
字符串名.toUpperCase()

3、使用charAt()方法来获取字符串中的某一个字符。

 语法：

字符串名.charAt(n)

说明：字符串下标是从零开始的，用n来表示， n是整数，表示字符串中第n+1个字符。

4、使用substring()方法来截取字符串的某一部分。

 语法：

字符串名.substring(start, end)

说明：start表示开始位置，end表示结束位置。start和end都是整数，一般都是从0开始，其中end大于start。

5、使用replace()方法来用一个字符串替换另外一个字符串的某一部分。

 语法：

字符串名.replace(原字符串, 替换字符串)
字符串名.replace(正则表达式, 替换字符串)

6、使用split()方法把一个字符串分割成一个数组，这个数组存放的是原来字符串的所有字符片段。有多少个片段，数组元素个数就是多少。

 语法：

字符串名.split("分割符")

7、使用indexOf()方法来找出“某个指定字符串”在字符串中首次出现的下标位置，也可以使用lastIndexOf()来找出“某个指定字符串”在字符串中最后出现的下标位置。

 语法：

字符串名.indexOf(指定字符串)
字符串名.lastIndexOf(指定字符串)

说明：如果字符串中包含“指定字符串”，indexOf()就会返回指定字符串首次出现的下标，

而lastIndexOf()就会返回指定字符串最后出现的下标；

如果字符串中不包含“指定字符串”，indexOf()或lastIndexOf()就会返回-1。

# （2）日期对象：Date

  在JavaScript中，我们可以使用时间对象Date来处理时间。

 语法：

var 日期对象名 = new Date();

  创建一个日期对象，必须使用new关键字。其中Date对象的方法有很多，主要分为两大类：getXxx()和setXxx()。getXxx()用于获取时间，setXxx()用于设置时间。

用于获取时间的getXxx()

tips：getMonth()方法返回值是0（一月）到11（十二月）之间的整数，所以必须加上1，这样月份才正确。 获取当前的“日”，不是使用getDay()，而是使用getDate();getDay()是获取星期的。

用于设置时间的setXxx()

tips： getFullYear()只能获取年，但setFullYear()却可以同时设置年、月、日。同理，setMonth()和setDate()也有这个特点。

# （3）数学对象：Math

  Math对象跟其他对象不一样，我们不需要使用new关键字来创造，而是直接使用它的属性和方法就行。

 语法：

Math.属性
Math.方法

常见Math对象的属性如下表：

例子：

120*Math.PI/180   //120°

常用Math对象的方法如下表：

常见例子：

1、生成0~m之间的随机数

Math.random()*m

2、生成0到m之间的随机整数

Math.floor(Math.random()*(m+1))

3、生成n到m之间的随机整数（包括n和m）

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

# DOM篇

  DOM，全称“Document Object Model（文档对象模型）”，它是由W3C定义的一个标准。简单总结就是：DOM操作，可以简单理解成“元素操作”。

  DOM节点共有12种类型，常见的只有3种：

（1）元素节点

（2）属性节点

（3）文本节点

 我们可以使用nodeType属性来判断一个节点的类型。例如：元素节点的nodeType为1,属性节点的nodeType为2, 文本节点的nodeType为3。

tips: （1）一个元素就是一个节点，这个节点称之为“元素节点”。 （2）属性节点和文本节点看起来像是元素节点的一部分，但实际上，它们是独立的节点，并不属于元素节点。 （3）只有元素节点才可以拥有子节点，属性节点和文本节点都无法拥有子节点。

一、DOM主要元素操作有：获取元素，创建元素、插入元素、删除元素、复制元素和替换元素。

1、获取元素；准确来说，就是获取“元素节点。

常用的获取方式如下：

2、创建元素

  在JavaScript中，我们使用createElement()来创建一个元素节点，也可以使用createTextNode()来创建一个文本节点，然后可以将元素节点与文本节点“组装”成为我们平常所看到的“有文本内容的元素”。

 语法：

var e1 = document.createElement("元素名");      //创建元素节点
var txt = document.createTextNode("文本内容");   //创建文本节点
e1.appendChild(txt);                          //把文本节点插入元素节点中
e2.appendChild(e1);                          //把组装好的元素插入已存在的元素中

步骤：

① 创建元素节点：createElement()

② 创建文本节点：createTextNode()

③ 把文本节点插入元素节点：appendChild()

④ 把组装好的元素插入到已有元素中：appendChild()

元素插入方式：

3、 删除元素； 使用removeChild()方法来删除父元素下的某个子元素。

 语法：

var e1 = document.getElementById("id名");
document.body.removeChild(e1)

4、复制元素；使用cloneNode()方法来实现复制元素。

 语法：

ele.cloneNode()//参数ele表示被复制的元素

5、替换元素；使用replaceChild()方法来实现替换元素。

 语法：

f.replaceChild(new,old);//f表示父元素，new表示新子元素，old表示旧子元素。

二、DOM主要属性操作（对象方法）有：

1、getAttribute()方法来获取元素的某个属性的值。

 语法：

ele.getAttribute("attr")//ele是元素名，attr是属性名

tips :ele.attr也可以获取到attr的值，等价于ele.getAttribute("attr")，但针对自定义的属性，就无法通过ele.attr获取，只能通过ele.getAttribute("attr")。

 例子：

<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <script>
        window.onload = function () 
        {
            var oBtn = document.getElementById("btn");
            oBtn.onclick = function () 
            {
                //alert(oBtn.data);//undefined
                alert(oBtn.getAttribute("data"));//JavaScript
            };
        }
    </script>
</head>
<body>
    <input id="btn" type="button" value="获取" data="JavaScript"/>
</body>
</html>

2、setAttribute()方法来设置元素的某个属性的值。

 语法：

ele.setAttribute("attr","值")//ele是元素名，attr是属性名

3、removeAttribute()方法来删除元素的某个属性。

 语法：

ele.removeAttribute("attr")

4、hasAttribute()方法来判断元素是否含有某个属性。

 语法：

ele.hasAttribute("attr")

tips：hasAttribute()方法返回一个布尔值，如果包含该属性，则返回true。

三、设置CSS（style）属性值

  使用style对象来设置一个CSS属性的值，其实就是在元素的style属性来添加样式，这个设置的是“行内样式”。

 语法：

DOM对象.style.css属性名 = "值";

说明：DOM对象指通过document获取的对象，例如： var test = document.getElementById("id名");

css属性名，如：width、height、background-color.....等等。

四、DOM遍历

  DOM遍历，可以简单理解为“查找元素”。举个例子，如果你使用getElementById()等方法获取一个元素，然后又想得到该元素的父元素、子元素，甚至是下一个兄弟元素，这就是DOM遍历。

对于DOM遍历，可以分为以下3种情况:

五、 innerHTML和innerText

  innerHTML获取的是元素内部所有的内容，而innerText获取的仅仅是文本内容。

 语法：

DOM对象.innerHTML=新的HTML;
DOM对象.innerHTML="新文本";
DOM对象.innerText="新文本";

# BOM篇

  BOM 全称：Browser Object Model, 浏览器对象模型。

BOM主要如下：

1、window对象

（1）window对象下的子对象

（2）window对象常用方法（一般会省略window）

2、frames

  在 frames 集合中，可以通过数值索引（从0开始，从左至右，从上到下）或者框架名称来访问相应的 window 对象。

例子：

每个 window 对象都有一个 name 属性，其中包含框架的名称。

<frameset>

    <frame src="frame.htm" name="topFrame">

    <frameset cols="50%,50%">

        <frame src="a" name="leftFrame">

        <frame src="b" name="rightFrame">

    </frameset>

</frameset>

说明：可以通过 window.frames[0] 或者 window.frames["topFrame"] 来引用上方的框架。

3、location对象

4、screen对象

5、navigator对象

6、history对象

# 事件处理

  事件一般是用户对页面的一些“小动作”引起的，例如按下鼠标、移动鼠标等，这些都会触发相应的一个事件。

一、JavaScript常见的事件共有以下5种。

（1）鼠标事件

（2）键盘事件

（3）表单事件

（4）编辑事件

（5）页面事件

tips:页面时间是通过windo来调用的，例如： window.onload = function (){.....}

在JavaScript中，调用事件的方式有两种:

1、在script标签中调用

 语法：

DOM对象.事件名 = function()
{
    ……
};

2、在元素中调用

 例子：

 <input type="button" onclick="alert('隔壁老陈')" value="弹窗" />

二、事件监听器【addEventListener()】

1、绑定事件

 通过addEventListener()方法来为一个元素添加事件，称之为“绑定事件”。

 语法：

DOM对象.addEventListener(type , fn , false)

说明：  type是一个字符串，指的是事件类型。例如单击事件用click，鼠标移入用mouseover等。一定要注意，这个事件类型是不需要加上“on”前缀的。  fn是一个函数名，或者一个匿名函数。  false表示事件冒泡阶段调用。

例子：

DOM对象.addEventListener("click", function () {.....}, false);

2、event对；每一个事件，都有一个对应的event对象

例如：

DOM对象.addEventListener("click", function (event)
 {alert(event.type);}, false);

event对象的属性:

# this指向

  this指向;简单来说:哪个DOM对象（元素节点）调用了this所在的函数，那么this指向的就是哪个DOM对象。

1、在函数体中，非显式或隐式地简单调用函数时，在严格模式下，函数内的 this 会被绑定到 undefined 上，在非严格模式下则会被绑定到全局对象 window/global 上 。

2、一般使用 new 方法调用构造函数时，构造函数内的 this 会被绑定到新创建的对象上 。

3、一般通过 call/apply/bind 方法显式调用函数时，函数体内的this会被绑定到指定参数的对象 上 。

4、一般通过上下文对象调用函数时，函数体内的this会被绑定到该对象上 。

5、在箭头函数中， this 的指向是由外层（函数或全局）作用域来决定的 。

# 拓展建议

  ES6是 JavaScript 语言的下一代标准; 非常重要，前端必学。

ES6重点简单概括：

箭头函数()=>{}、拓展运算符...、模板字符串`${}`、结构赋值、promise...等等

• ES6教程 (opens new window)
• Vue教程 (opens new window)
• React教程 (opens new window)