tidy-JavaScript
重要知识点
- 事件委托
//ev.target:获取当前操作的目标元素对象 标准的
//ev.srcElement:获取当前操作的目标元素对象 非标准的
oUl.onclick = function(ev) {
var ev = ev || window.event;
var ele = ev.target || ev.srcElement; //获取当前操作的目标元素对象。
if (ele.nodeName === 'LI') {
alert(ele.innerHTML);
}
}
- 数据类型的检测
/*
数据类型的检测
- typeof()
- instanceof()
- constructor
- toString()
*/
//最好的检测数据类型的方法。
console.log(Object.prototype.toString.call(123)); //[object Number]
console.log(Object.prototype.toString.call('hello')); //[object String]
console.log(Object.prototype.toString.call(true)); //[object Boolean]
console.log(Object.prototype.toString.call([])); //[object Array]
console.log(Object.prototype.toString.call({
}).slice(8, -1)); //Object
console.log(Object.prototype.toString.call(function() {
})); //[object Function]
console.log(Object.prototype.toString.call(null)); //[object Null]
console.log(Object.prototype.toString.call(undefined)); //[object Undefined]
console.log(Object.prototype.toString.call(Symbol())); //[object Symbol]
- 数组的扁平化
// 数组的扁平化（将多维数组转换成一维数组）
var arr1 = [1, 2, [3, 4, [5, 6, [7, 8, [9, 10]]]], 11, 12];
/* 1.flat */
// console.log(arr1.flat(Infinity));//[1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]
/* 2.reduce */
function flat(arr, num = 1) {
return num > 0 ? arr.reduce((acc, value) => acc.concat(Array.isArray(value) ? flat(value, num - 1) : value), []) : arr.slice();
};
console.log(flat(arr1, Infinity)); //[1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]
变量
特定的时间保存特定的值，且初始化后可以改变的量
特点：
- 值可以改变
- 可以同时定义多个
- 可以被前置访问
- 会写入内存
- 松散类型
变量的命名：驼峰命名（大驼峰、小驼峰）、匈牙利命名。-- 字母数字下划线$，不能数字开头
运算符
- 数学运算符：+ %
- 复合的赋值运算符 +=、*=
- 比较运算符：== ===
- 逻辑运算符：& || ！
- 一元运算符：++ --
if语句
特点：
- 条件的结果是布尔值
- 将最大的可能给if，执行if可以跳过else
- if嵌套优于多条件
- else可以省略
switch语句
特点：
- 条件与case值为恒等
- 是多条件的
- 可以省略default
- case具有穿透力
三目运算符
- 一般用于简单的条件判断
- 具有返回值
- 可以代替简单的if语句
- 允许嵌套
循环
- while
- do…while
- for
break和continue关键字
常见错误类型
- 引用错误：referenceError 所引用的类型不存在 – 变量未声明
- 语法错误：syntaxError 使用的语法有错误 – 关键字写错
- 范围错误：rangeError 使用的值范围有错误 — 栈溢出
- 类型错误：typeError 使用的类型有错误 – 调用的对象不对 – a（）：a不是一个函数
函数
函数是function类下面的实例，函数也是对象，同时也是对象的构造器。 函数名等同于函数体。函数可以在任何地方任何时候调用
数组
数组的方法
数组和对象的遍历方法
数组的排序 – 冒泡排序
//数组的冒泡排序(升序排列)
function bubbleSort(arr) {
if ((Array.isArray(arr))) {
//传入的是一个数组
for (var i = 0; i < arr.length - 1; i++) {
//只需要比较arr.length-1趟即可，最后一趟无需再比较
for (var j = 0; j < arr.length - i - 1; j++) {
//减i是表示已经排好的数字无需再比较；减1是最后一个数字无需比较，实际比较次数比实际数字要少一次
if (arr[j] > arr[j + 1]) {
var base = arr[j];
arr[j] = arr[j + 1];
arr[j + 1] = base;
}
}
}
return arr;
} else {
//传入的不是一个数组
throw Error('您输入的不是一个数组,请重新输入')
}
}
数组的排序 – 选择排序
//数组的选择排序(升序排列)
//思想：每一轮选出最小的一个数和假定的最小值进行交换
function selectSort(arr) {
if ((Array.isArray(arr))) {
//输入数组
for (var i = 0; i < arr.length - 1; i++) {
//遍历数组
var minIndex = i; //假设最小值的索引为每趟遍历的第一个数索引
var minValue = arr[i]; //假设最小值为每趟遍历的第一个数
for (var j = i + 1; j < arr.length; j++) {
//完成一趟遍历，找到最小的数，以及其索引
if (arr[j] < minValue) {
minIndex = j;
minValue = arr[j];
}
}
if (minIndex != i) {
//只有假设的值不是最小值的时候才交换，否则他就是最小值，没必要交换
var base = arr[i];
arr[i] = arr[minIndex];
arr[minIndex] = base;
}
}
return arr;
} else {
throw Error('您输入的不是数组，请重新输入！');
}
}
数组排序 – 快速排序
//数组的快速排序（升序序列）
function quicklySort(arr) {
if (Array.isArray(arr)) {
if (arr.length <= 1) {
//数组只有一项，返回这个数组
return arr;
} else {
var left = [];
var right = [];
var middleIndex = parseInt(arr.length / 2)
var middleValue = arr.splice(middleIndex, 1)[0];
// var middleValue = arr[parseInt(arr.length / 2)];//不能这样写，因为这样写，元素组根本没有被改变，中间值将会一直存在，发生栈溢出
for (var i = 0; i < arr.length; i++) {
if (arr[i] > middleValue) {
right.push(arr[i]);
} else {
left.push(arr[i]);
}
}
return quicklySort(left).concat(middleValue, quicklySort(right));
}
} else {
throw Error('您输入的不是一个数组！');
}
}
对象
ES5
严格模式
目的：
- 消除Javascript语法的一些不合理、不严谨之处，减少一些怪异行为
- 为未来新版本的Javascript做好铺垫
- 消除代码运行的一些不安全之处，保证代码运行的安全
- 提高编译器效率，增加运行速度
标记：
将"use strict"放在脚本文件的第一行，则整个脚本以"严格模式"运行
将"use strict"放在函数体的第一行，则整个函数以"严格模式"运行。
语法和行为做了一些改变 - 变量声明必须加var，否则报错
- 禁止with语句的使用
- 禁止this关键字指向全局（window）
- 函数的参数不能重名
- 函数内部的arguments不允被赋值
- arguments下面的callee和caller方法被禁止
关于数组新增的方法 - indexOf() 方法从数组的开头开始向后查找，找到返回索引值，第二个参数指定开始查找的位置，第二个参数为负数则从后面开始查找
- lastIndexOf() 方法则从数组的末尾开始向前查找
- 下面一组方法，都有两个参数
- 第一个参数：函数，每一个数组项自定执行这个函数(函数当参数叫回调函数)。此函数会接收三个参数：数组项的值、该项在数组中的位置、数组对象本身
- 第二个参数（可选）：运行该函数的作用域对象（改变回调函数里面 this 的值）
- every()对数组中的每一项运行给定函数，如果该函数对每一项都返回 true ，则返回 true
- some()对数组中的每一项运行给定函数，如果该函数对任意一项返回 true ，则返回 true
- filter()对数组中的每一项运行给定函数，返回该函数结果为 true 的项组成的数组
- map() 对数组中的每一项运行给定函数，返回每次函数调用的结果组成的数组。返回就是数组，不考虑true或者false
- forEach() ：对数组中的每一项运行给定函数。这个方法没有返回值
- 归并方法
- 每一次迭代得到的结果会作为下一次迭代的初始值
- 两个参数
- 第一个参数：函数，每一项上调用的函数，该函数有四个参数(前一个的值，当前值，数组项的索引，数组本身)
- 第二个参数（可选）：归并开始的初始值
- reduce只有一个函数做参数，第二个参数为初始值，可指定
- reduceRight() 方法从数组的最后一项开始，向前遍历到第一项（和reduce相反遍历）
包装对象
当要操作字符串（String）、数字（Number）、布尔值（Boolean）的属性和方法时，JavaScript会在内存中自动创建一个对象，用来对内置类型进行包装，使内置类型暂时拥有普通对象功能，可以存取属性，一旦引用结束，包装对象自动销毁
Math对象
Date对象
点击这里 - Date对象MDN文档
设置日期对象的三种方式：
//1.字符串方式
var date = new Date('2020-10-1 12:12:12');
//2.数组方式
var date = new Date(2020, 10, 1, 12, 12, 12);
//3.日期对象下面的方法
var date = new Date();//先获取当前日期
date.setDate(date.getDate() + 1); //在今天的日期+1天
BOM（Browser Object Model）
bom下面的核心对象window既是通过JavaScript访问浏览器的一个接口，又是ECMA规定的最大的全局对象
window下面的对象：
- location：地址栏地址 - 属性：href （location.href-可获取地址栏）
- location属性 - search截取包括？在内的地址栏后面的信息
- location属性 - reload 刷新页面 - 参数true表示通过缓存刷新
- history对象：记录用户浏览过的页面，可实现页面的前进与后退
- history下的属性：back、forword 参数为数字，不写参数默认为一步
- navigator对象 - 属性 ：useAgent用户代理信息，通过该属性可以获取浏览器及操作系统信息
BOM下面的事件：
- onload：页面内容加载完后执行
- onscroll：滚轮触发，频率很快
- onresize ：窗口大小改变触发
DOM（Document Object Model）
DOM的核心对象是document
创建元素 - document.createElement(标签名)
追加元素 - 父节点.appendChild(元素节点)，元素节点插入到父节点里面最后的位置
删除元素 - 删除子元素 - removeChild()，删除父节点内部的元素
插入元素 - 父节点.insertBefore(新的元素节点,存在元素节点) 在父节点内,把新的元素节点插入到已经存在的元素节点的前面
克隆节点 - 要克隆的元素对象.cloneNode()克隆(复制)obj节点，可以传一个布尔值为参数，如果参数为true，连同obj子元素一起克隆
getAttribute() 获取特定元素节点属性的值obj.getAttribute(属性名)
setAttribute() 设置特定元素节点属性的值
removeAttribute() 移除特定元素节点属性