2018-01-01

1.列举不同的清除浮动的技巧

/* 1.添加新元素 */
<div class="outer">
  <div class="div1"></div>
  <div class="div2"></div>
  <div class="div3"></div>
  <div class="clearfix"></div>
</div>
.clearfix {
  clear: both;
}

/* 2.为父元素增加样式 */
.clearfix {
  overflow: auto;
  zoom: 1; // 处理兼容性
}

/* 3.:after 伪元素方法 (作用于父元素) */
.outer {
  zoom: 1;
  &:after {
    display: block;
    height: 0;
    clear: both;
    content: '.';
    visibillity: hidden;
  }
}

2.移动端一像素边框问题

/* 定义 */
@mixin border-1px ($color) {
    position: relative;
    &:after {
        display: block;
        position: absolute;
        left: 0;
        bottom: 0;
        width: 100%;
        border-top: 1px solid $color;
        context: '';
    }
}

@media (-webkit-min-device-pixel-radio: 1.5), (min-device-pixel-radio: 1.5) {
    border-1px {
        &:after {
            -webkit-transform: scaleY(0.7);
            transform: scaleY(0.7);
        }
    }
}

@media (-webkit-min-device-pixel-radio: 2), (min-device-pixel-radio: 2) {
    border-1px {
        &:after {
            -webkit-transform: scaleY(0.5);
            transform: scaleY(0.5);
        }
    }
}

/* 使用方式 */
@inclue border-1px(rgba(7, 17, 27, .1));

3.左定宽右自适应宽度，并且等高布局(最小高度200px)

/* HTML */
<div class="container">
  <div class="left">Left silder</div>
  <div class="content">Main content</div>
</div>

/* CSS */
.container {
  overflow: hidden;
}

.left {
  float: left；
  width: 200px;
  margin-bottom: -9999px;
  padding-bottom: 9999px;
  background-color: #eee;
}

.content {
  margin-left: 200px;
  margin-bottom: -9999px;
  padding-bottom: 9999px;
  background-color: #ccc;
}

.left, .content {
  min-height: 200px;
  height: auto !important;
}

4.location.replace()与location.assign()区别

location.replace()的url不会出现在history中

5.DOM 操作

// 创建节点
createDocumentFragment()
createElement()
createTextNode()

// 添加 移除 替换 插入
appendChild()
removeChild()
replaceChild()
insertBefore()

// 查找
getElementsByTagName()
getElementsByName()
getElementsByClassName()
getElementById()
querySelector()
querySelectorAll()

6.JS设置css样式的几种方式

/* 1.直接设置style属性 */
element.style.height = '100px';

/* 2.直接设置属性 */
element.setAttribute('height', '100px');

/* 3.使用setAttribute设置style属性 */
element.setAttribute('style', 'height: 100px !important');

/* 4.使用setProperty设置属性，通过第三个参数设置important */
element.style.setProperty('height', '300px', 'important');

/* 5.设置cssText */
element.style.cssText += 'height: 100px !important';

7.阻止默认行为

function stopDefault( e ) {
    // 阻止默认浏览器动作(W3C)
    if ( e && e.preventDefault ) {
        e.preventDefault();
    } else {
        // IE中阻止函数器默认动作的方式
        window.event.returnValue = false;
    }
    return false;
}

8.复制的js题

function Foo() {
    getName = function () { alert(1); }
    return this;
}
Foo.getName = function () { alert(2); }
Foo.prototype.getName = function () { alert(3); }
var getName = function () { alert(4); }
function getName () { alert(5); }

/* 写出输出 */
Foo.getName(); //2
getName(); //4
Foo().getName(); // 1
getName(); //1
new Foo.getName(); // 2
new Foo().getName(); // 3
new new Foo().getName(); //3

9.JS数组深浅拷贝

//浅拷贝
var new_arr = arr.slice();
var new_arr = arr.concat();
// 推荐 浅拷贝
var shallowCopy = function (obj) {
    // 判断是否是数组或者对象
    if (typeof obj !== 'object') {
        return
    }
    var newObj = obj instanceof Array ? [] : {};
    for (var key in obj) {
        if (obj.hasOwnProperty(key)) {
            newObj[key] = obj[key];
        }
    }
    return newObj;
}
//深拷贝
var deepCopy = function (obj) {
    if (typeof obj !== 'object') {
        return
    }
    var newObj = obj instanceof Array ? [] : {};
    for (var key in obj) {
        if (obj.hasOwnProperty(key)) {
            newObj[key] = typeof obj[key] === 'object' ? deepCopy(obj[key]) : obj[key];
        }
    }
    return newObj
}

10.数组去重

//filter + indexOf
function unique1 (arr) {
    var res = arr.filter(function (item, index, array) {
        return array.indexOf(item) === index;
    })
    return res;
}
///filter + sort
function unique2 (arr) {
    return arr.concat().sort().filter(function (item, index, array) {
        return !index || item !== array[index - 1];
    })
}
//es6
function uniqu3 (arr) {
    return [... new Set(arr)];
}

11.找出数组中的最大值

//reduce
var arr = [6, 4, 1, 8, 2, 11, 3];
function max (prev, next) {
    return Math.max(prev, next)
}
console.log(arr.reduce(max));
//apply
console.log(Math.max.apply(null, arr));
//ES6
function max (arr) {
    return Math.max(...arr);
}
console.log(max(arr));

12.数组扁平化

var arr = [1, [2, [3, 4]]];
function flatten(arr) {
    while (arr.some(item => Array.isArray(item))) {
        arr = [].concat(...arr);
    }
    return arr;
}
console.log(flatten(arr))

13.数字格式化 1234567890 -> 1,234,567,890

const priceSubstr = (num = '0', gap = ',') => {
  return num.toString().replace(/(\d)(?=(?:\d{3})+$)/g, `$1${gap}`)
}

14.打乱数组的方法

var arr = [1,2,3,4,5,6]
arr.sort(function () {
    return 0.5 - Math.random();
})

15.柯里化

function add () {
    let sum = 0;
    Array.prototype.forEach.call(arguments, function (item, index){
        if (typeof item !== 'number') {
            return false;
        } else {
            sum += item;
        }
    })
    var tmp = function () {
        Array.prototype.forEach.call(arguments, function (item, index){
            if (typeof item !== 'number') {
                return false;
            } else {
               sum += item;
            }
        })
        return tmp;
    }
    tmp.toString = function () {
        return sum
    }
    return tmp;
}
add(1, 2); // 3
add(1)(2); // 3
add(1, 2, 3)(1, 4)(2, 2)(1) // 16

16.简单的字符串模板

var TemplateEngine = function(tpl, data) {
    var re = /(?:\{)(\w*)(?:\})/g, match;
    while(match = re.exec(tpl)) {
        tpl = tpl.replace(match[0], data[match[1]])
    }
    return tpl;
}

var template = '<p>Hello, my name is {name}. I\'m {age} years old.</p>';
console.log(TemplateEngine(template, {
    name: "Yeaseon",
    age: 24
}));