GithubHelp home page GithubHelp logo

30-days-challenge's People

Contributors

h246802 avatar

Stargazers

avatar avatar avatar avatar

Watchers

avatar

30-days-challenge's Issues

day-29-函数节流

写一个 throttle 函数，可以按照如下方式调用，实现的效果是：当连续滚动窗口的过程中，每100ms至多执行一次 print

function throttle(fn, time) {
  // your code
}
function print() {
  console.log('print')
}
window.addEventListener('scroll', throttle(print, 100))

day-14-dom-this指向

以下代码中出现的所有的``this` 分别指代什么

<!DOCTYPE html>
<html>
<head>
<script src="//code.jquery.com/jquery-1.9.1.min.js"></script>
  <meta charset="utf-8">
  <title>This</title>
</head>
<body>
<div class="father">
  <div class="child"></div>
</div>
  <script>
    $('.child').on('click', function(){
      console.log(this)
    })
    $('.father').on('click', '.child' function(){
      console.log(this)
    })
    $('.child')[0].onclick = function() {
      console.log(this)
    }
    var app = {
      init: function() {
        this.$father = $('.father')
        this.$child = $('.child')
        this.bind()
      },
      bind: function() {
        var _this = this
        this.$father.on('click', this.sayHi)
        this.$child.on('click', function() {
          _this.sayHello()
        })
        this.$child.on('click', this.sayBye.bind(this))
      },
      sayHi: function() {
        console.log(this)
      },
      sayHello: function() {
        console.log(this)
      },
      sayBye: function() {
        console.log(this)
      }
    }
    app.init()
  </script>
</body>
</html>

day-09-对象提取 

const obj = { a: 1, b: 2, c: 3 };
function select(obj, arr) {
  // your code
}
select(obj, ["a", 'c'])
// 输出 { a: 1, c: 3 }

day-08-数组sort排序自定义

写一个 byField 函数，实现数组按姓名、年纪任意字段排序

var users = [
  { name: 'John', age: 20, company: 'Baidu' },
  { name: 'Pete', age: 18, company: 'Alibaba' },
  { name: 'Ann', age: 19, company: 'Tencent' }
];

users.sort(byField('company'))
// 输出
/*
[
  { name: 'Pete', age: 18, company: 'Alibaba' },
  { name: 'John', age: 20, company: 'Baidu' },
  { name: 'Ann', age: 19, company: 'Tencent' }
];
*/
users.sort(byField('name'))
// 输出
/*
[
  { name: 'Ann', age: 19, company: 'Tencent' },
  { name: 'John', age: 20, company: 'Baidu' },
  { name: 'Pete', age: 18, company: 'Alibaba' },
];
*/

day-23-数组去重

写一个方法，给定一个排序数组，在原数组上删除重复出现的元素，使得每个元素只出现一次，返回删除重复元素后的数组的长度

要求：

  • 不要使用额外的数组空间，在原地修改输入数组并在使用 O(1) 额外空间的条件下完成

示例：
给定数组 nums = [1, 1, 2, 3, 2, 5]，函数应该返回新的长度 4，并且原数组 nums 去除了重复出现的数字

var removeDuplicates = function(nums) {
  // your code
}

day-11-高阶函数传参处理

写一个函数 execTimes，用于测试一个函数执行一定次数的时长
如：execTimes(sort, 1000)('hello') 表示执行sort函数1000次，sort的参数是'hello'

function execTimes() {
  // your code
}
function sort(str) {
  return str.split('').sort().join('')
}
// 执行sort1000次，sort的参数是'hello'
execTimes(sort, 1000)('hello')
// 输出：‘执行1000次，耗时43ms’

day-15-实现一个jsonp

封装一个 jsonp 方法，可以使用如下方式调用

jsonp(url[, data][, callbackName])
  • url
  • 类型：String，请求 url
  • data
  • 类型：PlainObject，参数对象
  • callbackName
  • 类型：String，传递给服务端的回调函数的 key
  • 默认是“callback”
  • 返回值
  • Promise 对象
// ?jsoncallback=fn&page=1&cate=recommend
jsonp('http://photo.sina.cn/aj/index',
  {
    page: 1, cate: 'recommend'
  }, 'jsoncallback')
  .then(data => {
    console.log(data)
  })

day-24-自定义eventbus

写一个对象 Bus，提供 on、emit 方法，on 实现监听，emit 实现触发，使用方式如下：

Bus.on('event', function(data) {
  console.log(data)
})

Bus.on('hi', function(data) {
  console.log(data)
})

Bus.emit('event', {name: 'hello'})
Bus.emit('hi', {to: 'hunger'})
Bus.emit('hi', {to: 'valley'})

day-13-this指向

以下代码输出什么？为什么？

var app = {
    fn1: function() {
      console.log(this)  
    },
    fn2: function(){
        return function() {
            console.log(this)
        }
    },
    fn3: function() {
        function fn() {
            console.log(this)
        }
        fn()
    },
    fn4: function() {
        return {
            fn: function() {
                console.log(this)
            }
        }
    },
    fn5() {
        setTimeout(function() {
            console.log(this)
        }, 10)
    },
    fn6() {
        setTimeout(()=> {
            console.log(this)
        }, 20)
    },
    fn7() {
        setTimeout((function(){
            console.log(this)
        }).bind(this), 30)
    },
    fn8: () => {
        setTimeout(() => {
            console.log(this)
        }, 40)
    }
}

app.fn1()
app.fn2()()
app.fn3()
app.fn4().fn()
app.fn5()
app.fn6()
app.fn7()
app.fn8()

day-30-声明提升

以下代码输出的结果是什么？

var a = 1
function fn1 () {
  function fn3 () {
    function fn2 () {
      console.log(a)
    }
    var a
    fn2()
    a = 4
  }
  var a = 2
  return fn3
}
var fn = fn1()
fn() // 输出什么

day-16-部分异步执行代码

以下代码输出什么？为什么？

setTimeout(() => {
  console.log(4)
}, 0)
new Promise(resolve => {
  console.log(1)
  for (var i = 0; i < 10000; i++) {
    i == 9999 && resolve()
  }
  console.log(2)
}).then(() => {
  console.log(5)
  Promise.resolve(7)
  .then(v => console.log(v))
}).then(() => {
  console.log(6)
})
console.log(3)

day-19-数组分块

给定整数 n 和 m，写一个函数 dispatch(n, m)，把 1~n 尽量平均地分成 m 个组

dispatch(6, 3)
// [[1, 2], [3, 4], [5, 6]]
dispatch(9, 2)
// [[1, 2, 3, 4, 5], [6, 7, 8, 9]]

day-12-字符串isMatch

请用 JavaScript 实现一个方法，该方法能够判断两个字符串是否 匹配，如：

function isMatch(str1, str2){
  // your code
}
isMatch('something', 'gnihtemos') // true
isMatch('aaa', 'aa') // false
isMatch('abb', 'baa') // false
isMatch('hello', 'olelh') // true

使用上一章节的 execTimes 方法测试你的方案执行10000次的时长，该方案是否是最优方案？如果不是，请给出最优方法，并说明时间复杂度

day-28-函数防抖

写一个 debounce 函数，可以按照如下方式调用，实现的效果是：当连续滚动窗口时，滚动停下300ms后才执行 print 函数

function debounce(fn, time) {
  // your code
}
function print() {
  console.log('print')
}
window.addEventListener('scroll', debounce(print, 300))

day-02-异步以及定时器

写一个 execTime 函数，要求

  • 参数t:时间毫秒数
  • 参数callback:回调函数
function execTime(t, callback) {
  // some code
}
console.log(1)
execTime(3000, function(){
  console.log(3)
})
console.log(2)

day-22-数组排序

写一个排序函数 sort，满足以下条件：

  • sort 接收一个数组（数组里面只会含有正整数，最大数字约为200）
  • sort 将该数组安从小到大的顺序排列
  • sort 返回排序后的数组
  • 对时间复杂度、空间复杂度均无要求，只要排序不报错
  • 尽量多完成几种方法

day-18-数组深拷贝

写一个深拷贝函数 deepCopyArray，实现数组的深拷贝

要求：

  • 数组可嵌套
  • 数组元素只能是 Number, Boolean, String, Array 类型之一

思考

  • 当存在循环引用时该如何解决
let arr = [1, 2, 3];
arr.push(arr)
let arr2 = deepCopyArray(arr)

day-01-sleep函数

写一个 execTime 函数要求如下
参数：时间毫秒数
作用：什么都不做，但函数执行消耗的时间为参数传递的毫秒数

function execTime(t) {
  // 补全代码
}
console.log(1) // print 1
execTime(3000) // execute cost 3s
console.log(2) // print 2

day-17-异步代码执行顺序+

以下代码输出的顺序是什么？为什么

setTimeout(() => {
  console.log(4)
  Promise.resolve(8).then(v => {
    console.log(v)
  }).then(() => {
    console.log(9)
  })
}, 0)
setTimeout(() => {
  console.log(10)
  Promise.resolve(11).then(v => {
    console.log(v)
  }).then(() => {
    console.log(12)
  })
}, 0)
new Promise(resolve => {
  console.log(1)
  for (var i = 0; i < 10000; i++) {
    i == 9999 && resolve()
  }
  console.log(2)
}).then(() => {
  console.log(5)
  Promise.resolve(7)
  .then(v => console.log(v))
}).then(() => {
  console.log(6)
})
console.log(3)

day-27-自定义vue-computed

简单模拟 Vue 的 computed 功能：

function Vue(options) {
  // your code
}
let app = new Vue({
  data: {
    firstName: 'Frank',
    lastName: 'Fang'
  },
  computed: {
    name() {
      return this.firstName + ' ' + this.lastName
    }
  }
})

console.log(app.name) // 'Frank Fang'
app.firstName = 'Jack'
console.log(app.name) // 'Jack Fang'
// 不要求实现 app.name 的赋值操作

day-26-自定义曝光组件

写一个曝光组件 Expourse，实现当 dom 元素出现在浏览器窗口视野中时，执行回调函数，只执行一次。其中回调函数中的 this 代表 dom 元素

var expourse = new Expourse(node)
expourse.once(function() {
  console.log(this) // this 代表 node
  console.log('world') // node 曝光时执行，且只执行一次
})

day-21-自定义函数once

写出一个 once 函数，满足以下条件

  • once 函数只接受一个参数 fnParam，这个参数必须是一个函数
  • once 函数返回一个函数 fnResult
  • 如果调用一次 fnResult，则执行一次 fnParam
  • 如果调用多次 fnResult，也只会执行一次 fnParam

示例如下

function once(fnParam) {
  // your code
}
let log = once(function() {
  console.log(1)
})

log() // print 1
log() // nothing or undefined
log() // nothing or undefined
log() // nothing or undefined

day-07-promise

小明成绩不好，每次考试都靠瞎。小明的老师对他说：“小明，如果考不到60分你继续考，直到考到60分，我实现你的愿望让你和凯丽坐到一起”

function exam() {
  var score = Math.floor(Math.random() * 101)
  if (score >= 60) {
    console.log('及格，和凯丽坐到一起')
  } else {
    console.log('不及格，继续考试')
    setTimeout(exam, 1000)
  }
}
exam()

对上述代码使用 Promise 改写，能用以下方式调用

exam().then(score => {
  console.log('及格，和凯丽坐到一起', score)
})

day-25-自定义vue-data

简单模拟 Vue 的数据代理功能

function Vue(options) {
  // your code
}
let app = new Vue({
  data: {
    message: 'hi'
  }
})
console.log(app.message) // 'hi'

day-10-异步代码同步响应同时不干扰dom操作

某个应用模块由文本框input，以及按钮A，按钮B组成。点击按钮A，会向地址urlA发出一个ajax请求，并将返回的字符串填充到input中（覆盖掉input中原有的数据），点击按钮B，会向地址urlB发出一个ajax请求，并将返回的字符串填充到input中（覆盖input中原有数据）。
当用户依次点击按钮A、B时，预期的效果是input依次被urlA、urlB返回的数据填充，但是由于urlA的请求返回比较慢，导致urlB返回的数据被urlA的数据覆盖了，与用户预期的顺序不一致。

问：应该如何设计代码，解决这个问题

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.