Giter VIP home page Giter VIP logo

some-issues-'s People

Stargazers

 avatar

Watchers

 avatar  avatar

some-issues-'s Issues

JS异步执行过程

首先给俩概念:

  • (macro)task主要包含:script(整体代码)、setTimeout、setInterval、I/O、UI交互事件、postMessage、MessageChannel、setImmediate(Node.js 环境)
  • microtask主要包含:Promise.then、MutaionObserver、process.nextTick(Node.js 环境)
    一个event loop:macrotask -> microtask -> ui render

总结:

js本身时同步执行的,也可以是说时单线程的,会先执行macro
遇到await ,如果await中是同步代码,则会立即执行,如果await中是异步代码,则会将此部分的异步代码添加到 microtask/macrotask 等待队列,跳出await 继续执行
如果遇到setTimeout 会添加到microtask,等待下一个loop,下一个loop会先执行setTimeout

nextTick

就此来说明下 VUE的nextTick,Vue 异步执行 DOM 更新的,如果数据更新触发了多次watcher,就会创建一个执行队列(不会总去触发修改,会一次性修改完了再去更新dom),
我们的需求是dom更新之后去拿dom的数据,但是我们又不知道队列什么时候执行完,这就利用到了js的异步执行机制,我们把nextTick放在微人堆队列中,重点:nextTick内部有监听机制,会监听什么时候dom更新哦,一旦dom更新,就执行nextTick参数中传入的回调

页面图片加载

转成base64

弊端

1 图片一旦更新就需要同步更新CSS里Data URL的值。
2 Base64编码后数据大小会变大。虽然CSS可以gzip压缩,而图片不能压缩。
3 旧版本的IE6/7不支持。

适用场景:

图片大小比较小,不经常改动

雪碧图

弊端

CSS Sprites的缺点主要是后期维护困难,一旦图片要发生变动,很容易导致CSS里位置重新计算偏移量

适用场景:

图片比较小,页面图片量较大 ,一些通用的图片

数组的方法 - map、reduce、filter、sort

数组的方法 - map、reduce、filter、sort
map、reduce、filter、sort方法的共同之处就是方法的参数是一个函数,通过对这个"函数参数"内部作相应处理来改变当前数组以得到想要的数组。
1.map (that's speak in Chinese is '映射')
var arr = [1, 3, 5, 7, 9];

//简单的转换
var arr2 = arr.map(function() {
    return 1;
});
console.log(arr);    //[1, 3, 5, 7, 9]
console.log(arr2);    //[1,1, 1, 1, 1]

//复杂转换
var arr3 = arr.map(function(x, y, z) {
    //在转换之前先搞清楚函数参数对应参数的意义
    console.log(this);    //this ==> window
    console.log(x);    //1 3 5 7 9 ==> 数组的value值
    console.log(y);    //0 1 2 3 4 ==> 数组的index值
    console.log(z);    //[1, 3, 5, 7, 9] ==> 数组本身

    return x*x;
})    
console.log(arr3);    //[1, 9, 25, 49, 81]

其实map方法有两个参数map(callbackFn, thisArg); thisArg参数指的是将callbackFn里的this指向thisArg。
2.reduce
var arr = [2, 4, 6, 8, 10];

//reduce不同于map方法,方法返回的是一个值而不是一个数组了。(毕竟不再是映射了嘛!)
var value1 = arr.reduce(function() {
    return 1;
});
console.log(value1 );    //1

//那我们就让它的"函数参数"做点什么吧 - 数组内元素累加
var value2 = arr.reduce(function(firstValue, nextValue, currentIndex, array) {
    console.log(firstValue);
    console.log(nextValue);
    console.log(currentIndex);
    console.log(array);
    return firstValue + nextValue;
});
console.log(arr);    //[2, 4, 6, 8, 10]
console.log(value2);    // 30

注意事项:

1.arr.reduce(callbackFn, [initialValue]) - 同样reduce方法也是有第二个参数的

initialValue 可选项,其值用于第一次调用callbackFn的第一个参数。
第一次调用callbackFn的第二个参数就是数组的第一个元素。

若没有,则第一次调用callbackFn的第一个参数是数组的第一个元素。
第一次调用callbackFn的第二个参数就是数组的第二个元素。
var arr = ['a', 'b', 'c'];
var value = arr.reduce(function(x, y) {
return x + y;
});
console.log(value); //'abc'
var value2 = arr.reduce(function(x, y) {
return x + y;
}, 'A');
console.log(value2); //'Aabc'
2.如果数组为空并且没有提供initialValue,会抛出TypeError。如果数组仅有一个元素(无论位置如何)并且没有提供initialValue,或者有提供initialValue,但数组为空,那么此唯一值将被返回并且callbackFn不会被执行。

var arr = [];
arr.reduce(function() {
       return 1;
});
//Uncaught TypeError: Reduce of empty array with no initial value

arr.push('A');
var value = arr.reduce(function() {
    return 1;
});
console.log(value);    //'A' callbackFn未执行

arr.pop();
var value2 = arr.reduce(function() {
    return 1;
}, 'A');
console.log(value2);    //'A' callbackFn未执行

3.filter ( 过滤 )
filter的参数和map方法的参数一致,"函数参数"的参数也一致,就不啰嗦了。

//过滤 - 符合条件的留下,不符合的走人。
var arr = [{name: '小明', grade: 2},{name: '小红', grade: 99},{name: '小李', grade: 60}];

//boss不高兴,想要进行裁员,要求对业绩分不及格(包括60)的炒鱿鱼。
var arr2 = arr.filter(function(x) {
    if (x.grade >60) {
        console.log(x.name + '可以留下。');
        return true;
    } else {
        console.log(x.name + '可以走了。');
        return false;
    }
});
console.log(arr2);    //[Object] Object ==> {name: '小红', grade: 99};
console.log(arr);   // [Object, Object, Object] 原数组未发生变化

小红说:‘老板,我辞职...’

4.sort ( 排序 )
var arr = [10, 20, 1, 2];
arr.sort();
console.log(arr); //[1, 10, 2, 20]

/*
    造成以上排序结果的原因:
    默认情况下,对字符串排序,是按照ASCII的大小比较的。
    Array的sort方法默认把所有元素先转换为String再排序,jieguo'10'排在了'2'的前面,因为字符'1'比字符'2'的ASCII码小。
*/

//想要对数字进行由小到大排序
arr.sort(function(x, y) {
       if (x < y) {
            return -1;
       } else if (x > y) {
            return 1;
       }
       return 0;
});
console.log(arr);    //[1, 2, 10, 20]

//想要对数字进行由大到小排序
arr.sort(function(x, y) {
    if (x < y) {
        return 1;
    } else if(x > y) {
        return -1;
    } 
    return 0;
});
console.log(arr);    //[20, 10, 2, 1]

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.