js 开发过程当中经验及总结记录

 

//注意：

浏览器的 , console 里面执行的是标准的js语法 ，只能识别：

function abc(){……} 或者 let abc=function(){……}   

不能识别react和vue里面的相似java的写法 abc(){……}

和 =>函数

const chatReducer = (state = defaultState, action = {}) => {……}

 

 

 

一   let 和 var 做用域

   1  普通用法

    for (var i = 0; i < 5; i++) {

      console.log(i);

    }

    console.log(i); //---结果是 5 ，由于var做用域不单单是当前模块。

 

    for (let i = 0; i < 5; i++) {

      console.log(i);

    }

   console.log(i); //---结果是i is not defined,由于let的做用只是当前模块。

   

    结果都是: 0,1,2,3,4 ，由于是直接同步输出。

    

    ps: 能够试试，吧一样的代码放到定时器setTimeout(()=>{……})；或 异步promise() 里面。

    

 

 

 

    2  箭头函数(()=>{})里面使用

   1  var

   var a=6;

 

  for(var a=0;a<4;a++){//var是全局的，同名的变量后面的会覆盖前面的。

  console.log(a); //正常的输出0，1，2，3

 

  setTimeout (()=>{//箭头函数自己没有this的引用，里面用的变量和方法都是指向外层的。

  console.log(a); //直接写外层附近定义的变量便可，不要用this. 因为var是全局的,箭头函数里面引用都是同一个a,输出的结果都是同样的 4 。

  console.log(this.a);//  this. 表示windows的对象， windows里面根本没有a. , 因此 这里输出 undefined. 

  },0);

  }

  console.log(a); // 箭头函数外使用变量也是 直接使用便可，不用this.  因为var同名的变量后面的会覆盖前面的，这里输出 4 。

  console.log(this.a); // this. 表示windows的对象， windows里面根本没有a. , 因此 这里输出 undefined. ; 只有顶部data:{}下定义的字段，用的时候能够this.data.字段。

 

 

2  let 

let b=6;

 

for(let b=0;b<4;b++){//let做用域是当前块级, 同名定义的不会相互影响覆盖

console.log(b); //正常的输出0，1，2，3

 

setTimeout (()=>{//箭头函数自己没有this的引用，里面用的变量和方法都是指向外层的。

console.log(b);  //直接写外层附近定义的变量便可，不要用this. 因为let是当前块的,箭头函数里面引用都是不一样的b ,输出结果会是 0,1,2,3 

console.log(this.b); //this. 表示windows的对象， windows里面根本没有b. , 因此 这里输出 undefined. 

},0);

}

console.log(b);//箭头函数外使用变量也是 直接使用便可，不用this.   因为是let定义，因此不会覆盖。 输出最外层的6 

console.log(this.b);// this. 表示windows的对象， windows里面根本没有b. , 因此 这里输出 undefined. ; 只有顶部data:{}下定义的字段，用的时候能够this.data.字段。

 

 

 

 

二   引用关系

var a=[0],b=a;
b[0]=2;
console.log(a+b); //22

a=[0], b=a, b=[1];
console.log(a+b); //01

分析 1 考引用关系 2 原则 数据 = 相等实际上是合并2个素组的元素，而后 2个数组 都是合并以后的。
若是有对某个 数组 某索引元素 修改 value ,对应的另一个也会修改。

 

 

三   闭包

function test(){
var a=0;
var node=document.getElementById('test');
node.onclick=function(){
b=0;
console.log(a++ + ++b); //子函书中 会保存a ++以后的值，b么次都回清零。
}

for(var i=0;i<10;i++){ //调用子函书
node.onclick();
}
}
test();

 

这个会输出从1到10，因为闭包缘由，a的值会一直保留，而b每次都会被重置为0

////注意 1 特色是函数套函数,字函数能够是function也能够是 onclick.
2 子函数没法 调用父函数 ，例如 直接在onclick里面 test();
3 子函数 能够调父函数的 变量 ， 可是 父函数的变量 是会保存状态值的 ，
3 可是能够在 父函书中，直接调用 子函书 例 node.onclick

 

 

 

总结处理{}的方法：？？？？？？？

1 Object.keys(); object.values();

 /** 通用处理 默认值 为0

    item--表示传入的某条记录对象{}

    MapKey--表示要处理 默认值 为0 的字段集合

    MapKeyDefault---默认处理成0

    通常用于处理 一层层级的数据记录{}; 更深的层级须要本身单独提出来处理，建立新字段（平级）

    */

    dealItemVal(item = {}, MapKey = [], MapKeyDefault = 0) {

 

        let obj = {}

 

        //转成数组 --字段名称和值 -------object方法在andorid里面没法执行！！！

        let ks = Object.keys(item),

            vs = Object.values(item);

 

        //遍历key--map

        ks.forEach((value, index) => {

 

            let huo = "";

 

            //须要把默认值处理成0的 字段；其余的字段若false 默认值是“”

            MapKey.includes(value) && (huo = MapKeyDefault)

 

            //有字段非false 不然显示huo默认值！

            obj[value] = vs[index] || huo;

 

        })

 

        return obj;

    },

 

使用：：：：

 //精简通用处理方式。。。

        // let to0 = [

        //     "courseCount",

        //     "examCount",

        //     "finishCourseNum",

        //     "finishExamNum",

        //     "percent"

        // ];

        // let dealValue = tools.dealItemVal(item, to0); 

 

        // let newItem = {

        //     ...other,

        //     stu_lastLearnCourseId,

        //     stu_assign,

 

        //     ...dealValue

        // };

 

        return newItem;

 

 

 

##补充文章 语句：

object方法在andorid里面没法执行(是由于wkwebview的内核偏低致使)！！！

 

 

 

方法2：

Const { 字段1 ，字段2，字段3，字段4……}=item;

 

 

????

3: 方法传递解构函数 和  默认参数值 。。。。。

????

 

???？补充es6语法

Assign 合并对象，every循环能够中断，push pop unshit shit不能变量接收，foreach不能变量接收，for of返回item, for in返回index ,

Search !=-1 判断有没有，splice截取替换集合，contect合并数据，，，， 空{} []都是true, 1 和 -1都是true ,0是false…

？？？

 

 

 

 

2 判断空{}空[]

能够for in 

 

也可经过json.StringFy()转成字符串比对==‘{}’

 

 

5.区分是集合{}仍是对象[]?  没法判断是空[] 仍是空{}

Object.prototype.toString.call(loginRes.serverInfo) === "[object Object]")

第二个大写。。。

 

 

3  扩展属性方法prototype

  //声明----若是有此自定义 contains 直接用最好

    // Array.prototype.contains = function (needle) {

    //     for (i in this) {

    //         if (this[i] == needle) return true;

    //     }

    //     return false;

    // }

 

    // //直接使用

    // var x = Array();

    // if(x.contains('foo')) {

    //     // do something special

    // }