知识点、日常开发bug及解决方案记录

说明：谨以此文章记录自己在日常开发中总结的知识点、bug及解决方案，供自己和有需要的网友学习，后续会持续更新。若有错误，欢迎指正！

数组操作方法splice小结
splice(startP, delNum, addData): 参数含义依次为，开始删除的位置，删除的长度，插入的数据（可多项插入也可不插入）。返回包含删除的项的数组。ps:注意返回的数组与原数组的区别
举例：

var colors = ['red', 'green', 'blue'];
var removed = colors.splice(0,1,'yellow');
console.log(colors);  // green, yellow, blue
console.log(removed); // red

注意此处的colors.splice(0,1,'yellow') !== [green, yellow, blue]

this的取值，分为四种情况：
(1). 函数作为构造函数（用来new对象的函数），那么其中的this代表它即将new出来的对象

function Fn() {
    this.name='玉米';
    this.sex='女';
    
    console.log(this); // Fn {name: "玉米", sex: "女"}
}

var f1 = new Fn();
console.log(f1.name);  // 玉米
console.log(f1.sex);   // 女

ps:以上仅限new Fn()的情况，即Fn函数作为构造函数的情况。如果直接调用Fn函数，而不是new Fn()，情况就大不一样了

function Fn() {
    this.name='玉米';
    this.sex='女';
    console.log(this); // Window {postMessage:f,....}
}
Fn();

(2).函数作为对象的一个属性，并且作为对象的一个属性被调用时，函数中的this指向该对象

var obj = {
    x: 10,
    fn: function () {
        console.log(this);   // Object {x: 10, fn: function}
        console.log(this.x);  //10
    }
}

obj.fn();

ps: fn函数不作为obj的一个属性被调用,情况则不同

var obj = {
    x: 10,
    fn: function () {
        console.log(this); // Window {...}
        console.log(this.x);  //undefined
    }
}

var fn1 = obj.fn;
fn1();

(3). 函数用call、apply调用或者使用bind处理函数，this的值就取传入对象的值

var obj = {
    x: 10
};
window.x = 20;

function fn() {
    console.log(this.x)
}

fn();  // 20
fn.call(obj);   // 10
fn.apply(obj); // 10
fn.bind(obj)(); // 10

var fn1 = fn.bind(obj);
fn1();  // 10

ps: call、apply：在特定作用域中调用函数；bind:创建函数实例，调用bind()的函数不会立马执行，其中this值会绑定到传给bind()函数的值。
(4).全局、调用普通函数：
在全局环境下，this永远指向 Window
普通函数在调用时，this也指向window

window.x = 10;
function fn() {
    console.log(this);  
    console.log(this.x); 
}
fn();  // Window {...}   10
---------------------------------------
function fn1() {
    var x = 20;
    function fn2() {
        console.log(this.x);
    }
    fn2();
}

fn1();  // 10

--------------------------------------------
window.x = 20;
var obj={
    x: 10,
    fun: function() {
        function fn1() {
            console.log(this.x);
        }
        fn1();
    }
}
// 函数fn1虽然定义在obj.fun内部，但仍然是一个普通函数，this仍然指向window
obj.fun();  // 20

3.自由变量：在A作用域中使用变量x，但是却没在A作用域中申明，对于A作用域来说，x就是自由变量。

4.require 命令的基本功能是，读入并执行一个 JavaScript 文件，然后返回该模块的 exports 对象。如果没有发现指定模块，会报错。

解析：Function.prototype.call.apply(log,[console,arguments]);

先将Function.prototype.call看作一个整体：FunctionCall;
=>FunctionCall.apply(log,[console,arguments]);
=>log.FunctionCall(console,arguments);
=>console.log(arguments)

for...in循环读取键名，for...of循环读取键值。for...of循环调用遍历器接口，数组的遍历器接口只返回具有数字索引的属性。这一点跟for...in循环也不一样。(js各种遍历方式的差异及优缺点可参考阮一峰的ES6教程的16节末尾)

let arr = [3, 5, 7];
arr.foo = 'hello';

for (let i in arr) {
  console.log(i); // "0", "1", "2", "foo"
}

for (let i of arr) {
  console.log(i); //  "3", "5", "7"
}

7.Reflect.ownKeys方法用于返回对象的所有属性，基本等同于Object.getOwnPropertyNames与Object.getOwnPropertySymbols之和.

var myObject = {
  foo: 1,
  bar: 2,
  [Symbol.for('baz')]: 3,
  [Symbol.for('bing')]: 4,
};

// 旧写法
Object.getOwnPropertyNames(myObject)
// ['foo', 'bar']

Object.getOwnPropertySymbols(myObject)
//[Symbol(baz), Symbol(bing)]

// 新写法
Reflect.ownKeys(myObject)
// ['foo', 'bar', Symbol(baz), Symbol(bing)]

webpack-merge包中merge方法用于对象、或者数组的合并。例如：

console.log(merge({name:'小红', age:13}, {name: '小兰', sex: '女'}))
// {name: '小兰', age: 13, sex: '女'}

9.js 替换字符串中所有指定子字符串

string.replace(/reallyDo/g, replaceWith);
string.replace(new RegExp(reallyDo, 'g'), replaceWith);

string：字符串表达式包含要替代的子字符串。
reallyDo：被搜索的子字符串。
replaceWith：用于替换的子字符串。

在VUE中使用h5的video 和audio，动态绑定src不播放bug解决方案。
给audio绑定个ref值


<audio ref='audio' controls>
    您的浏览器不支持 audio 元素。
</audio>

//在需要动态绑定的方法里用$refs动态设置src
this.$refs.audio.src = res.data.audio_url

React 组件传props的两种常用方式：

// 第一种：key=value的形式
<TestComponent name="小明" age="12"></TestComponent>

// 第二种：拓展运算符的形式  效果等同第一种
var props = {  
  name: '小明',  
  age: '12'  
};
<TestComponent {...props}></TestComponent>

this.props对象的属性与组件的属性一一对应，但是有一个例外，就是this.props.children属性，它代表组件的所有子节点。值得注意的是：如果当前组件没有子节点，它就是 undefined ;如果有一个子节点，数据类型是 object ；如果有多个子节点，数据类型就是 array 。
块级作用域有哪些？

for(){} 括号和大括号内是两个不同的作用域
if(){} 大括号内是一个作用域
函数内部(下面有两个块级作用域，if代码块内、if代码块外部函数代码块内部)

function(){
  let n = 5;
  if (true) {let n = 10}
  console.log(n);   // 5
}

暂时性死区：代码块内，使用let/const声明变量之前，该变量都是不可用的。
本地调试vue项目，跨域，无法获取cookie：在前端配置文件中设置代理。