JS大杂烩

记录自己总是记不住的那些函数用法，和使用规则。

数组篇

遍历

for循环遍历

var arr = [1, 2, 3, 4, 5]
for (let i = 0; i < arr.length; i++) {
    console.log(arr[i]);
}

forEach()遍历

forEach回调内接收三个参数，依次为当前元素，当前元素索引，被遍历数组本身

var arr = [1, 2, 3, 4, 5]
arr.forEach((item,index,self)=>{
    console.log(item,index,self);
})

说明：forEach不支持break和continue即使是return也只是结束当前回调并不会结束forEach()

删除

删除指定元素

删除指定元素需要先确定被删除元素位置即调用indexOf()函数或缺被删除元素的位置，然后使用slpice()删除该元素。

splice()函数的作用是向数组指定位置添加一个或多个元素，添加的元素会覆盖原位置的元素，所以当不指定添加元素时可用来删除元素。

var arr = [1, 2, 3, 4, 5]
let index = arr.indexOf(4)
arr.splice(index,1)
console.log(arr);

说明：splice()会改变原数组内容，并且在vue中不会触发ui刷新

过滤

过滤数组元素

过滤使用filter()函数

var arr = [1, 2, 3, 4, 5]
var res = arr.filter(item=>{
    return item>3
})
console.log(res);

排序

数组排序

JS数组排序是按照数组内元素的Unicode码来排序的，排序方法是sort()

var arr=[1,4,2,6,3,6,7]
arr.sort()
console.log(arr);
//result (7) [1, 2, 3, 4, 6, 6, 7]

如果排序元素为对象则调用其toString()方法进行排序。

//首先重写toString()方法以按照我们的意愿进行排序
function Person(name){
    this.name=name
    this.toString=function(){
        return this.name
    }
}
var arr=[new Person("C"),new Person("A"),new Person("B"),new Person("D")]
arr.sort()
console.log(arr);
//result (4) [Person, Person, Person, Person]
//      0: Person {name: "A", toString: ƒ}
//      1: Person {name: "B", toString: ƒ}
//      2: Person {name: "C", toString: ƒ}
//      3: Person {name: "D", toString: ƒ}

sort()函数还可以接收一个函数类型参数作为排序依据。但是返回值并不是true/false而是-1/0/1。

function Person(name) {
    this.name = name
}
var arr = [new Person("C"), new Person("A"), new Person("B"), new Person("D")]
arr.sort((a, b) => {
    if (a.name > b.name) {
        return 1
    } else if (a.name < b.name) {
        return -1
    } else {
        return 0
    }
})
console.log(arr);
//result(4) [Person, Person, Person, Person]
//      0: Person {name: "A"}
//      1: Person {name: "B"}
//      2: Person {name: "C"}
//      3: Person {name: "D"}

原型篇

JS中每个对象都有一个__proto__属性（Object对象的__proto__属性=null），它指向另一个对象，可已从当前对象中直接调用__proto__所指对象的属性和方法。

JS通过原型链来实现面向对象编程思想中的继承关系。还有一个重要概念prototype __proto__和prototype 在某些情况下这两个参数会等于同一对象。通常情况下__proto__针对实例来说，而prototype 针对类来说。

所有显示创建的对象的__proto__都是Object，通过new关键字创建的__proto__是创建该实例的构造函数的prototype（在JS中函数也可是对象）。

var student = {
    name:"wxm",
    age:18
}
function Person(name,age){
    this.name=name
    this.age=age
}
var person = new Person("wxm",18)

//上文说过Object的.__proto__=null,证明显示创建的对象的__proto__为Object
console.log(student.__proto__.__proto__); //result null
//证明通过new关键字创建的实例的__proto__是创建该实例的构造函数的prototype
console.log(person.__proto__ == Person.prototype); //result true

Promise篇

Promise 是一个对象，它代表了一个异步操作的最终完成或者失败。能够解决传统JS异步编程中回调地狱的问题。

创建Promise对象

创建一个Promise对象并为其提供一个函数类型的参数，创建后该函数参数立即执行。

var promise = new Promise((resolve,reject)=>{
    console.log("Promise creating");
})
//result: Promise creating

Promise.then()的使用

Promise创建后调用then([successCallBack],[failCallback])为异步操作设置回调函数，该方法接收两个参数，第一个参数为异步操作成功的回调，第二个为异步操作失败的回调，并且这连个参数都是可选参数。

//异步操作成功演示
var promise = new Promise((resolve, reject) => {
    console.log("Promise creating");
    setTimeout(() => {
        console.log("Already time out");
        resolve()
    }, 3000)
})
promise.then(
    () => {
        console.log("Success function has been executed");
    },
    () => {
        console.log("Fail function has been executed");
    })
//result:   Promise creating
//          Already time out
//          Success function has been executed

//异步操作失败演示
var promise = new Promise((resolve, reject) => {
    console.log("Promise creating");
    setTimeout(() => {
        console.log("Already time out");
        // resolve()
        reject()
    }, 3000)
})
promise.then(
    () => {
        console.log("Success function has been executed");
    },
    () => {
        console.log("Fail function has been executed");
    })
//result:   Promise creating
//          Already time out
//          Fail function has been executed

关于then()中的回调函数的说明

一下内容节选自链接

当一个Promise完成（fulfilled）或者失败（rejected）时，返回函数将被异步调用（由当前的线程循环来调度完成）。具体的返回值依据以下规则返回。如果 then 中的回调函数：

• 返回了一个值，那么 then 返回的 Promise 将会成为接受状态，并且将返回的值作为接受状态的回调函数的参数值。
• 没有返回任何值，那么 then 返回的 Promise 将会成为接受状态，并且该接受状态的回调函数的参数值为 undefined。
• 抛出一个错误，那么 then 返回的 Promise 将会成为拒绝状态，并且将抛出的错误作为拒绝状态的回调函数的参数值。
• 返回一个已经是接受状态的 Promise，那么 then 返回的 Promise 也会成为接受状态，并且将那个 Promise 的接受状态的回调函数的参数值作为该被返回的Promise的接受状态回调函数的参数值。
• 返回一个已经是拒绝状态的 Promise，那么 then 返回的 Promise 也会成为拒绝状态，并且将那个 Promise 的拒绝状态的回调函数的参数值作为该被返回的Promise的拒绝状态回调函数的参数值。
• 返回一个未定状态（pending）的 Promise，那么 then 返回 Promise 的状态也是未定的，并且它的终态与那个 Promise 的终态相同；同时，它变为终态时调用的回调函数参数与那个 Promise 变为终态时的回调函数的参数是相同的。

//针对上文做部分验证。
var promise = new Promise((resolve, reject) => {
    console.log("Promise creating");
    resolve()
})
function firstChain(){
    console.log("链式第一链,running");
    return "第一链"
}
function secondChain(param){
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            console.log("第二链Promise异步执行完成");
            param+="+第二链"
            console.log(param);
            resolve(param)
        }, 1000)
    })
}
function thridChain(param){
    console.log("链式调用最后一链,running");
    param+="+第三链"
    console.log(param);
}
promise
    .then(firstChain)
    .then(secondChain)
    .then(thridChain)
//result:   Promise creating
//          链式第一链,running
//          第二链Promise异步执行完成
//          第一链+第二链
//          链式调用最后一链,running
//          第一链+第二链+第三链

待补充

//----------------------------------

最后

---

大幻梦森罗万象狂气断罪眼\ (•◡•) /