JavaScript

JavaScript介绍

• JavaScript一开始是为了处理表单验证
• ECMAScript可以理解为JavaScript的标准
• 2015年发布了ECMAScript2015(ES6)

变量

命名规范

• 见名知意
• 可以由字母、下划线、$，数字组成。不能数字开头
• 驼峰命名（从第二个单词起，首字母大写）
• 不可以与关键字、保留字重复

数据类型

1. 六种数据类型：数值（整数，小数）、字符串（双引号或单引号）、布尔（true;false）、空（null）、未定义（undefined）、对象（{}）

2. typeof 检测类型的

   typeof返回的结果是字符串，例如:typeof(str) 或 typeof str

3. 数据类型转换

   Number()、parseInt()、parseFloat()、String()、toString()、Boolean()

四则运算

• 字符串参与+操作，会变成字符串拼接

• /号运算可以得到小数，而不是取整

函数

函数定义方式：

function fun(){   //函数名为fun
    //函数体
}

var fun = function (){ // 匿名函数
    //函数体
}

函数定义之后要调用才会执行，或者使用立即执行函数

对象

• 万物皆对象

• 对象是属性的集合

• JavaScript 6中数据类型的其中一种

自定义对象

var 对象名 = {
    //属性名：属性值,
    //属性名：属性值,
    方法名：function(){
        //方法体
    }
};

• 两种方法可以获取到对象的属性值：

  1. 对象名.属性名；
  2. 对象名[“属性名”]

• 当对象的属性值是函数，称为这个对象的方法

  调用对象的方法使用：对象名.方法名

this关键字

• 在对象的方法中使用this，可以指向这个对象本身

方法传参

• 给对象的方法传递参数和给函数传递参数是一样的

数组

• 数组是元素的有序集合
• 数组是特殊的对象（内置对象），有自己的属性和方法
• 数组中的元素可以是任意类型的，但一般将数组中的元素设置成相同数据类型

遍历数组

• for循环来遍历数组

  for(var i = 0;i<数组名.length;i++){
      console.log(数组名[i]);     //输出数组中的所有元素
  }
  

• for…in语句遍历数组

  for(var i in 数组名){
      console.log(数组名[i]);
  }
  

数组的常用方法

方法	说明	使用
push()	向数组中追加元素	数组名.push(元素值)
join()	将数组链接成一个字符串,返回字符串	数组名.join()

内置对象

JavaScript提供的内置对象：除了数组还有Math、Date、RegExp…

Math （数学运算）

• 无需创建Math对象

• 常用方法：

  var pi = Math.PI;   //圆周率
  var num1 = Math.floor(pi);  //向下取整
  var num2 = Math.ceil(pi);   //向上取整
  var num3 = Math.round(pi);  //四舍五入
  var num4 = Math.abs(-pi);   //获取绝对值
  var num5 = Math.random();   //获取0~1之间的随机数
  //[min,max]之间的随机数
  var number = Math.random()*(max-min+1) + min;
  //1~10的随机数   取整
  var number = Math.floor(Math.random()*10 + 1);
  

Date（处理日期和时间）

• 需要先实例化new

  //方法1
  var dateNow = new Date();
  
  //方法2
  var dateNow = new Date("2017-5-1 17:30:20"); 
  

• 常用方法：

  var dateNow = new Date();
  var year = dateNow.getFullYear();    //获取年，不能用getYear()方法，此方法已经被废弃
  var month = dateNow.getMonth();      //获取月份 从0开始，一月份返回的值是0
  var date = dateNow.getDate();        //获取日期
  var hours = dateNow.getHours();      //获取小时
  var minutes = dateNow.getMinutes();  //获取分钟
  var seconds = dateNow.getSeconds();  //获取秒
  var day = dateNow.getDay();          //获取星期
  

• getTime方法

  var dateTarget = new Date("2017-5-1 17:30:20");
  // 1970年01月01日00时00分00秒(北京时间1970年01月01日08时00分00秒)起至现在的总毫秒数
  var target = dateTarget.getTime();
  

正则表达式

• 用于匹配字符串

• JavaScript中的内置对象RegExp

• RegExp需要实例化new

  //方法1
  var reg = new RegExp();  //创建正则表达式
  
  //方法2
  var reg = /123/;     //创建正则表达式
  

正则表达式语法

• test()方法：test方法可以测试字符串是否成功匹配，匹配返回true，不匹配返回false
• exec()方法：exec方法返回一个数组，数组中包含匹配的内容，如果未匹配，返回null

设定匹配范围

var reg = /[123]/;  //匹配123中的任意一个字符

匹配数字

var reg = /[0-9]/;  //匹配一位数字

匹配字母

var reg = /[a-z]/;  //匹配一位字母

匹配多位

var reg = /[a-z]+/;  //匹配多位字母

匹配指定位数

var reg = /[a-z]{3}/;  //匹配3位字母

ES2015基础语法

变量和常量

变量

• let声明变量
• 块级作用域
• 不存在变量提升
• 不允许重复声明

常量

• const声明常量
• 如果常量存储的是一个对象，可以改变这个对象的属性的

模板字符串

• 用`（反引号）标识，用${}将变量括起来
• 多行字符串(多行显示)
• 字符串中嵌入变量
• 模板字符串调用函数 ( ${fn(x,y)} )

解构赋值

• 数组的结构赋值

  //数组的解构赋值
  let [str1,str2,str3] = ["hello","world","javascript"];
  

• 对象的解构赋值

  let {num1,num2} = {num1:100,num2:10};
  

• 字符串的结构赋值

  let [a,b,c,d,e] = "hello";
  

• 函数参数的结构赋值

  function add([x, y]){
    return x + y;
  }
  
  add([1, 2]); // 3
  

  上面代码中，函数add的参数表面上是一个数组，但在传入参数的那一刻，数组参数就被解构成变量x和y。对于函数内部的代码来说，它们能感受到的参数就是x和y。

函数进阶

立即执行函数

声明之后立刻执行的函数

(function(){
    console.log("hello world");
})()

闭包

定义在函数内部的函数

//add()函数就是闭包
(function(){
    function add(a, b){
        return a + b
    }
    let result = add(10, 20)
    console.log(result)
})()

函数默认值

//es2015+设置默认值
function fun2(x=100,y=200){
    return x + y;
}

箭头函数

1. • ​ =>左侧的括号存放参数
   • ​ =>右侧的花括号存放函数体。

2. 箭头函数简写

   • 只有一个形参，那么可以省略参数外面的括号。
   • 函数体只有一个表达式作为返回值，可以省略花括号和return关键字

   const fun = x=>x*x;
   

3. 箭头函数中的this

   • 箭头函数中的this，指向该箭头函数定义的位置

面向对象

基于原型的面向对象 （es6以前）

• 没有类的概念，但构造函数可以来模拟一个类

  //构造函数函数名首字母大写
  function Cat(name,age){
      this.name = name;
      this.age = age;
  }
  

• 通过原型属性为构造函数添加方法

  function Cat(name, age) {
      this.name = name;
      this.age = age;
  }
  
  Cat.prototype.shout = function(){
      console.log("喵喵喵！")
  }
  

• 继承（了解即可）

  //Cat继承Animal
  function Animal(name) {
      this.name = name;
  }
  
  Animal.prototype.shout = function(){
      console.log(`我的名字${this.name}`)
  }
  
  function Cat(name, age) {
      this.name = name;
  }
  
  Cat.prototype = Animal.prototype;
  

ES2015（es6）中的面向对象

• 用class来定义一个类
• 用extends来继承

DOM基础

获取元素

方法	说明
document.getElementById();	通过id获取元素（了解即可）
document.getElementsByClassName();	通过类名获取元素（了解即可）
document.querySelector();	获取一个元素(返回值是一个DOM对象,若选择器找到多个元素，则返回第一个)
document.querySelectorAll();	获取多个元素（返回值是DOM对象集合）

样式操作

DOM对象的style属性可以设置元素内联样式。

<h1>DOM样式测试</h1>
<script>
    var h1 = document.querySelector("h1");  
    h1.style.color = "red"; 
</script>

绑定事件

事件	说明
onclick()	点击
onmouseover()	鼠标移动
onmouseout()	鼠标移出

操作属性

document.属性名 可获取或修改元素属性

<img src="images/0210_logo.jpg" alt="">
<button>切换图片</button>
<script>
    var img = document.querySelector("img");
    var btn = document.querySelector("button");
    btn.onclick = function(){
        img.src = "images/0210_img.jpg";
    }
</script>

DOM操作

节点的分类

• 元素节点
• 属性节点
• 文本节点

创建并添加文本节点

• 创建 document.createTextNode(“hello world”);
• 添加 document.appendChild(textNode);

<h1>内容：</h1>
<button>添加文本节点</button>
<script>
    let h1 = document.querySelector("h1");
    let btn = document.querySelector("button");
       btn.onclick = function() {
        let textNode = document.createTextNode("hello");
        h1.appendChild(textNode);
    }
</script>

创建和添加元素节点

• 创建 document.createElement(“li”);
• 添加 document.appendChild(Node);

<input type="text" name="" id="">
<button>添加</button>
<ul>
</ul>
<script>
    let inp = document.querySelector("input");
    let ul = document.querySelector("ul");
    let btn = document.querySelector("button");
    btn.onclick = function() {
        let li = document.createElement("li");
        li.innerHTML = inp.value;
        ul.appendChild(li);
    }
</script>

删除元素节点

• 删除 parentNode.removeChild(Node);
• 父级元素 document.parentNode

 <ul>
    <li>1</li>
    <li>12</li>
    <li>14</li>
    <li>17</li>
</ul>
<script>
    let lis = document.querySelectorAll("li");
    for (let i in lis) {
        lis[i].onclick = function() {
    this.parentNode.removeChild(this);
        }
    }
</script>

事件对象

<style>
    div {
        width: 500px;
        height: 500px;
        background-color: pink;
    }
</style>


<body>
    <div></div>
    <script>
        let div = document.querySelector("div");
        div.onclick = function(e) {
            console.log(e.clientX);
            console.log(e.clientY);

        }
    </script>
</body>

代码中的e就是事件对象

事件流

绑定事件

• 使用事件监听器为元素绑定事件

  btn.addEventListener("click",function(){});
  

• 使用addEventLitener可以无限制的为元素绑定事件，而内联事件后面的会覆盖前面的

事件冒泡与事件捕获

• 捕获阶段——从外到内

• 冒泡阶段——从内到外

btn.addEventListener("click",function(){},true);

添加事件方法中第三个参数(默认为flase)

• true 在捕获阶段被触发
• flase 在冒泡阶段被触发

阻止事件冒泡

btn.addEventListener("click",function(e){
    e.stopPropagation();
},true);

阻止事件默认行为

btn.addEventListener("click",function(e){
    e.preventDefault();
},true);

事件委托

• 将子级的事件委托给父级来处理
• event.target可以获取到我们的事件目标

<ul>
    <li>5</li>
    <li>1</li>
    <li>2</li>
    <li>3</li>
</ul>
<script>
    let ul = document.querySelector("ul");
    ul.addEventListener("click", function(e) {
        ul.removeChild(e.target);
    })
</script>

事件类型

1. 鼠标事件

2. 键盘事件 （顺序：onkeydown、onkeypress、onkeyup）

   事件	说明
   onkeydown	键盘按下（不分大小写）
   onkeypress	键盘按下（分大小写）
   onkeyup	键盘按下后松开（不分大小写）

   键盘事件对象 ：

   e.keyCode : 属性返回按键ASCII码值

3. 触屏事件

事件	说明
ontouchstart	开始触屏
ontouchend	结束触屏
ontouchmove	滑动

元素上偏移量：document.offsetTop

计时器

• setTimeout ：在指定时间后单次执行

  clearTimeout : 清除计时器

• setInterval ：每隔指定时间后重复执行

  clearInterval : 清除计时器

let timer = setTimeout(function(){
    //一秒后执行
},1000);
clearTimeout(timer);


timer = setInterval(function(){
    //一秒后执行，并且每隔一秒重复执行
},1000)
clearInterval(t);

location.href = "http://baidu.com"; //location.href可以实现页面跳转

利用闭包，封装防抖算法

// 利用闭包，封装防抖算法
function debounce(fn) {
    let timer = null;
    function evenFun() {
        if (timer != null) {
            clearTimeout(timer);
        }
        timer = setTimeout(() => {
            //业务代码函数
            fn();
            timer = null;
        }, 500)
    }
    return evenFun
}

利用闭包，封装节流算法

// 利用闭包，封装节流算法
function throttle(fn) {
    let mark = true; //标记
    function evenFun() {
        if (mark) {
            setTimeout(() => {
                fn();
                mark = true;
            }, 500)
            mark = false;
        }
    }
    return evenFun
}

BOM概述

弹出框

• alert

  向用户显示一条消息，并等待用户关闭对话框

• prompt

  向用户显示一条消息，但是用户可以通过点击“确定”或“取消”按钮，并返回一个布尔值。

• confirm

  向用户显示一条消息，等待用户输入字符串后，返回这个字符串，如果用户点击取消，则返回null。

History子对象:浏览器历史记录对象

1. length 表示当前页面的历史记录条数
2. back() 返回上一条历史记录页面
3. forward() 进入下一条历史记录页面
4. go() 进入指定的历史记录页面
5. go常用的方法就是go(1) 和go(-1)
6. go(1)相当于forward()函数
7. go(-1)相当于back()函数

location子对象：浏览器位置信息对象

1. href 用于获取或者设置当前页面的完整URL地址

   location.href = “a.html” ===》跳转到a.html页面中

   location.href ====》获取到URL

2. hash 获取URL锚点之后的内容，主要用来获取锚点名

   取到：#之后的所有内容

3. search 获取页面get传参值的字符串

   取到：?之后的所有内容

Navigator子对象：浏览器信息检测对象

1. userAgent 用户代理信息 返回客户端发送给服务器的
2. language 当前浏览器的语言
3. platform 平台信息

Screen子对象 ：屏幕子对象

1. width 当前屏幕分辨率的宽度
2. height 当前屏幕分辨率的高度

原始类型与引用类型

JavaScript有六种数据类型

1. 原始类型（或叫值类型）：数值、字符串、布尔、Null、Undefined
2. 引用类型：对象

区别

1. 赋值
   • 原始类型：两个变量赋值一样，一个变量改变不会影响第二个变量
   • 引用类型：两个变量的引用同时指向一个对象，改变这个对象的时候，两个变量都会有变化。
2. 比较
   • 原始类型：两个变量值内容相同，比较结果true
   • 引用类型：比较的是引用，只有同时指向一个对象才返回true
3. 传参
   • 原始类型：改变形参的时候不会影响实参（副本）
   • 引用类型：形参和实参的对象都指向一个引用，修改形参的值，函数外部变量的值也就跟着变化

检测数据类型

• typeof(值/变量) 返回类型：number、string、boolean、object、Undefined

• 值/变量 instanceof 类型 （引用类型）

  ​ 返回true：该值/变量属于该类型

  ​ 返回false：该值/变量不属于该类型

异步编程

解决异步问题的方法

回调函数

promise对象

// resolve的作用是把异步获取的数据结果传递出来。
let getData = new Promise((resolve) => {
    let data = "string data";
    resolve(data);
})

getData.then((d)=>{
    console.log(d);
})

async函数

// resolve的作用是把异步获取的数据结果传递出来。
let getData = new Promise((resolve) => {
    let data = "string data";
    resolve(data);
})

async function showData(){
    let data = await getData;
    console.log(data)
}

showData();

await关键字必须写在async函数内部。