JavaScript学习总结

JavaScript

javaScript简称JS，是一门运行在客户端浏览器的脚本语言（无法独立运行的程序设计语言）；是一门直译型语言（不需要编译），是一门客户端语言；

Javascript同时也是一门弱类型的程序语句，以及基于事件驱动的语言。

基础语法

JavaScript一般在HTML页面中编写，通常位于一对<script>之间

注意:

<script>标签可以在html的任意位置进行编写，常见的区域主要出现在以下两个位置

• head标签对之间
• body标签结尾处（推荐）

常见引入方式

1. 直接在html页面中使用内联<script>标签编写
2. 引入外部的脚步文件
3. 直接在html元素中使用内嵌的方式使用

数据类型

• 数值型（包含浮点型）
• 字符串型
• 布尔型
• 数组
• 对象
• null
• undefined(未定义的)

运算符

• 算术运算符
• 关系运算
• 布尔逻辑运算
• 位运算
• 三目运算

流程控制

分支语句

• if…else…(if语句的语法与Java基本类似，唯一不同的是Java中的if条件必须是一个布尔类型的表达式，但是js中if中可以编写任意类型的表达式，甚至是一个任何类型的变量，因为js中可以将任何的变量转换为boolean类型)
• swith

循环语句

• for
• while

函数（方法）

函数定义

function 函数名称(参数列表){
    //执行体
}

函数调用

1. 直接调用
2. 通过html相关事件调用

arguments

javascript函数中参数可以有任意多个，并且在调用时，可以传入任意个参数，通过arguments对象可以获取实际调用函数时传入的参数个数。

匿名函数&函数自调用

//将一个匿名函数存储到一个变量中，（将匿名函数改成有名字的函数）
var add = function(a,b){
    console.log(a + b);
}
add(1,2);

//自调用函数
var value =  (function(a,b){
    var r = a > b ? a : b;
    console.log('匿名函数被执行');
    return r;
})(10,20);

console.log(value);

闭包

闭包即在一个函数内部定义的函数，闭包提供了在函数外部对函数内部局部变量的访问能力

let

es6新增，用于防止变量污染存在的一个关键字（let声明任何变量只能在声明区域使用）

事件

​ js是一门基于事件驱动的语言，多数时候的js代码执行不是主动执行，可能是由于html页面中某些元素，或者浏览器的某些动作导致js的执行，而触发这些动作的操作称之为事件，触发动作执行的目标称之为事件源。

事件分类

1. 窗口事件

2. 鼠标事件

3. 键盘事件

4. 文档事件

5. 对象事件（音频，视频等）

事件：

属性	当以下情况发生时，出现此事件	FF	N	IE
onabort	图像加载被中断	1	3	4
onblur	元素失去焦点	1	2	3
onchange	用户改变域的内容	1	2	3
onclick	鼠标点击某个对象	1	2	3
ondblclick	鼠标双击某个对象	1	4	4
onerror	当加载文档或图像时发生某个错误	1	3	4
onfocus	元素获得焦点	1	2	3
onkeydown	某个键盘的键被按下	1	4	3
onkeypress	某个键盘的键被按下或按住	1	4	3
onkeyup	某个键盘的键被松开	1	4	3
onload	某个页面或图像被完成加载	1	2	3
onmousedown	某个鼠标按键被按下	1	4	4
onmousemove	鼠标被移动	1	6	3
onmouseout	鼠标从某元素移开	1	4	4
onmouseover	鼠标被移到某元素之上	1	2	3
onmouseup	某个鼠标按键被松开	1	4	4
onreset	重置按钮被点击	1	3	4
onresize	窗口或框架被调整尺寸	1	4	4
onselect	文本被选定	1	2	3
onsubmit	提交按钮被点击	1	2	3
onunload	用户退出页面	1	2	3

事件绑定

• 直接在html元素中通过事件名称绑定
• 在js中获取元素调用元素的事件名
• 获取元素对象之后使用addEventListener()方法绑定

事件解绑

js中事件既可以通过addEventListener进行绑定，同时也可以通过removeEventListener进行解绑

事件流

1. 以IE为标准的事件冒泡（默认）
2. 以网景为标准的事件捕获

取消事件传播

若需要取消事件的传播，只需要通过调用事件对象的stopPropagation()即可

面向对象

JSON对象

js中有一种固定的对象表达形式，即json对象，json对象是一种以键值对为标准的对象表达形式（类似java中的Map）;并且随着互联网技术的发展，以及前后端分离技术的出现，json已经形成一种特殊的数据格式（基于javascript的json对象改变而来），用于实现前端数据传递。

//JSON对象
var hero = {
    img:new Image(),
    x:100,
    y:200,
    w:90,
    h:60,
    speed:10,
    draw:function(){
        let that = this;
        that.img.src = 'hero.png';
        that.img.onload=function(){
            //设置图片样式
            this.style.position='absolute';
            this.style.left=`${that.x}px`;
            this.style.top=`${that.y}px`;
            //设置图片大小
            this.width = that.w;
            this.height = that.h;
            document.getElementById('box').appendChild(this);
        }
    },
    moveTo:function(x,y){  //移动
        this.x = x;
        this.y = y;
        //重绘
        this.draw();
    }
}
//绘制飞机
hero.draw();

JSON字符串从js中的JSON对象发展而来，主要用于实现服务端和客户端之间的数据通信

构造器创建对象

//构造器
function User(id,name,pwd,show){
    this.id = id;
    this.name = name;
    this.pwd = pwd;
    this.getName=function(){
        return name;
    }
    this.setName=function(n){
        this.name = n;
    }
    this.show=show;
}

var u1 = new User(1,"softeem","123");
console.log(u1.getName());

var u2 = new User(2,"admin","123456",function(){
    console.log("hello");
})
u2.show();

全局函数

javascript提供了一些常见的全局函数，大多数用实现数据转换的功能：

• parseInt():将string类型转换为number类型（只会取整数）
• parseFloat():将string类型转换为number类型（会保留小数点）
• eval():可以将字符串作为js代码进行执行
• encodeURI():将string类型数据转码为url编码
• decodeURI():将url编码的字符串解码为原始字符串值
• Number():将任意类型转换为number
• String():将任意类型转换为string

常见内置函数

Number

var i = 3.1415926;
//保留指定number类型的小数点后2位
console.log(i.toFixed(2))
//最多截取小数点后三位并转换为string
console.log(typeof i.toLocaleString(i));

String

//使用指定的html标签对字符串内容包裹
console.log(s.big()); // <big>softeem</big>
console.log(s.bold()); // <b>softeem</b>
console.log(s.link("http://www.softeem.top"));//<a href="http://www.softeem.top">softeem</a>

//es6特性
s = `hasdfasdfa
sdfasdfasd
fasdfas
dfaasdf`;

console.log("13267890532".match(/1[3578]\d{9}/));//使用字符串匹配对应的正则表达式，匹配结果为数组对象

console.log(/1[3578]\d{9}/.test('13567089876'));//使用指定的正则表达式判断是否匹配给定的字符串

Array

var arr = [6,7,4,3,5,2,1,9,8,10];

//向数组中添加元素（末尾）
arr.push(8);

//箭头函数（lammda表达式:ES6）
arr.forEach((item,index)=>{
    console.log(item,index);
})

/**
     * item: 当前遍历到的元素对象
     * index：当前元素的索引
     * array：目标数组对象
     */
arr.forEach(function(item,index,array){
    console.log(item,index,array);
})

//排序:自己实现排序规则，等同java中集合排序中Comparator比较器
arr.sort((a,b)=>b-a);
console.log(arr); // [10, 9, 8, 8, 7, 6, 5, 4, 3, 2, 1]

//数组反转
arr.reverse();
console.log(arr);//[1, 2, 3, 4, 5, 6, 7, 8, 8, 9, 10]
//弹出数组的末尾元素，并从数组中移除
console.log(arr.pop());//10
console.log(arr);//[1, 2, 3, 4, 5, 6, 7, 8, 8, 9]

//向数组头部插入元素
arr.unshift('100');
console.log(arr); // ["100", 1, 2, 3, 4, 5, 6, 7, 8, 8, 9]

//取出数组头部的元素
console.log(arr.shift());
console.log(arr);// [1, 2, 3, 4, 5, 6, 7, 8, 8, 9]

//获取指定元素的索引
let index = arr.indexOf(7);
console.log(index)// 6

//删除指定索引的元素 参数一:索引  参数二：删除的元素个数
arr.splice(index,1);
console.log(arr);//[1, 2, 3, 4, 5, 6, 8, 8, 9]

//使用指定的符号对数组中的元素进行拼接，转换成string
let s = arr.join(",");
console.log(s);// 1,2,3,4,5,6,8,8,9

/*
        有数组 ["jackson","rose","tom","lily","adom","bob","chrise"]
        要求按照英文字母顺序排序输出
     */

var names = ["jackson","rose","tom","lily","adom","bob","chrise"];
// names.sort((a,b)=>a.localeCompare(b));
names.sort();
console.log(names);

Math

//从传入的参数中返回最大的一个元素
console.log(Math.max(10,20,40,50,33,22,12,9));

//返回从0.0~1.0之间的随机浮点数
console.log(Math.random());

//返回5~10之间的整数？
var n = parseInt(Math.random() * 6) + 5;
console.log(n);

//四舍五入取整
console.log(Math.round(4.46))

//输出指定数的n次幂
console.log(Math.pow(3,3));

//向下取整
console.log(Math.floor(3.999));

//向下取整
console.log(Math.ceil(3.00001));

Date

let date = new Date();
console.log(typeof date);//object

//获取日期对象的毫秒数表示方式
let time = Date.now();
console.log(typeof time);//number

console.log(DateFormater(date));
//yyyy-MM-dd HH:mm:ss

//日期格式化函数
function DateFormater(date){
    let y = date.getFullYear();
    let m = date.getMonth() + 1;
    m = m > 10 ? m : `0${m}`;
    let d = date.getDate();
    d = d > 10 ? d : `0${d}`;
    let h = date.getHours();
    h = h > 10 ? h : `0${h}`;
    let min = date.getMinutes();
    min = min > 10 ? min : `0${min}`;
    let s = date.getSeconds();
    s = s > 10 ? s : `0${s}`;
    return  `${y}年${m}月${d}日 ${h}:${min}:${s}`;
}

RegExp（正则表达式）

js中正则表达式对象的创建方式主要包含以下三种:

1. 使用构造器创建

   var regex = new RegExp("\\d{3,5}");
   

2. 使用正则表达式常量表示形式

   var regex = /\d{3,5}/;
   

3. 使用静态工厂创建

   var regex =  ("\\d{3,5}");
   

基本使用：

var num = "56432123123";

var regex = new RegExp("\\d{3,5}");
// regex = /\d{3,5}/;
//判断给定的字符串是否匹配给定的表达式
console.log(regex.test(num));
//执行匹配，并取出符合条件的字符串
console.log(regex.exec(num)[0]);

var phone = "1adfadsf135231123987fsdfsdf12138324234234sfsdf";
var regex = /1[3578]\d{9}/g;
var arr;
// Matcher ->group()
while((arr = regex.exec(phone)) !== null){
    //取出匹配到的字符串
    console.log(arr[0]);
}

var s = "HelloWorldSofteem";
regex = /world/i;
console.log(regex.test(s));

DOM（文档对象模型）

获取DOM几种方式

1. 获取文档中的所有元素

   var all = document.all; // 返回一个包含了文档中所有节点的数组对象
   

2. 根据标签获取元素

   //获取页面中的所有h1元素 (返回数组对象)
   let titles = document.getElementsByTagName("h1");
   console.log(titles);
   

3. 根据元素的class名称获取元素（存在兼容性问题，慎用）

   //返回所有class名称为row的元素(返回数组对象)
   let rows = document.getElementsByClassName("row");
   console.log(rows);
   

4. 根据元素的name属性获取元素集合（一般只有表单元素才有name属性）

   let langs = document.getElementsByName("lang"); //返回数组
   

5. 根据元素的id获取元素(因为id在页面中具备唯一性，因此以下代码只能获取一个元素)

   let selectAll = document.getElementById("selectAll");//返回单个元素对象
   

以上都是一些比较常规的获取dom的方式，另外javascript还提供了两种更为全面的获取dom对象的方式：

1. document.querySelector()：根据css的选择器获取匹配的单个元素

2. document.querySelectAll()：根据提供的css选择器获取匹配的多个元素

插入DOM

js-dom中向指定节点插入元素的方法主要包含以下几类：

1. appendChild(node)：向当前节点中插入子元素（子元素必须是一个dom对象）
2. insertBefore(newNode,refNode)：向当前节点中的refNode之前插入newNode
3. innerHTML：向当前节点插入html代码（覆盖原有的内容）

修改DOM

• innerText：将文本内容插入到指定节点
• innerHTML：将html代码插入到指定节点

删除DOM

• removeChild(childNode)：删除当前节点下指定的子节点
• remove()：删除当前节点对象

DOM补充

• children: dom元素通过该属性可以获取当前节点下的所有的子节点（集合）
• parentNode：dom元素通过该属性可以获取当前节点的父节点(唯一)