Elvin_Chinn

Elvin_Chinn 查看完整档案

深圳编辑  |  填写毕业院校  |  填写所在公司/组织填写个人主网站
编辑

苟有恒,何必三更眠、五更起。最无益,莫过一日曝、十日寒。

个人动态

Elvin_Chinn 回答了问题 · 12月1日

解决数组转对象问题

如果已经确定两个数组下标对应正确的话:

Object.fromEntries(key.map((k, i) => [k, value[i]]));

关注 1 回答 1

Elvin_Chinn 回答了问题 · 12月1日

解决js中如何创建一个undifined的对象(函数),内含有值。例如 typeof(a) = undifined

这貌似是一个历史遗留问题,尽量用 querySelector、getElementById 之类的代替吧

关注 4 回答 3

Elvin_Chinn 赞了文章 · 12月1日

面试题:JS 获取某月的天数

获取某个月的天数,这个题一般都是在学 switch(){} 一章的案例。

我们一直解题的方案是根据一个顺口溜一三五七八十腊,31天永不差,四六九十一,每月30天,惟有二月二十八,闰年要把日加一。(我搜的,具体怎么背我忘了

这里面还有个闰年的计算规则:四年一闰,百年不闰,四百年再闰。可以被4整除,但是不能被100整除,除非可以被400整除

image.png

是不是被上面的魔性概念征服了?接来下我们来实现一下

面试题:JS 获取某月的天数

先上测试用例

function getMonthCountDay(year, month){
    // year 为年份,month 为月份
}
[[2000,2],[2000,1],[2000,3],[2000,4],[2100,2],[2100,1],[2100,3],[2100,4],[2104,2],[2104,1],[2104,3],[2104,4],[2105,2],[2105,1],[2105,3],[2105,4],].map(v=>`${v} => ${getMonthCountDay.apply(null,v)}天`)

基础版本

根据我们的顺口溜我们来写一下

function getMonthCountDay (year, month) {
  switch (month){
    case 1:
    case 3:
    case 5:
    case 7:
    case 8:
    case 10:
    case 12:
        return 31
    case 4:
    case 6:
    case 9:
    case 11:
        return 30
    case 2:
        return year%400==0?(29):(year%4!=0||year%100==0?28:29)
  }
}

很好写完了,除了代码看上去多了点,没别的毛病。

测试截图

image.png

借助 Date API 处理日期溢出特性(进位)

接下来就开始骚了

function getMonthCountDay (year, month) {
  return 32 - new Date(year, month-1, 32).getDate()
}

是不是想不到,这种方法写的一下就很少了。

image.png

测试截图

image.png

方案原理

js 中 Date 在处理时间的时候会做进位退位操作

image.png

借助 Date API 处理日期溢出特性(退位方案)

刚才是用的进位,然后减去多余的。现在我们改用退位

function getMonthCountDay (year, month) {
  return new Date(year, month, 0).getDate()
}

image.png

测试截图

image.png

方案原理

js 中 Date 在处理时间的时候会做进位退位操作

image.png

利用这个特性还可以做什么?

image.png

获取月初是周几

image.png

获取月末是周几

image.png

查看原文

赞 12 收藏 4 评论 0

Elvin_Chinn 回答了问题 · 11月27日

useEffect离开页面记录当前数据的问题

可以使用 useRef,类似:

const count = useRef(0);

useEffect(() => {
    return {
        localStorage.setItem('count', String(count));
    };
}, [])

// ...

/* 某处更新 count */
count.current += 1;

关注 4 回答 4

Elvin_Chinn 关注了问题 · 11月27日

Vue:Duplicate keys detected This may cause an update error.

我明明设置了不同的key 为什么还是报这个错?

<a-auto-complete
            v-model="query"
            :allowClear="true"
            :backfill="true"
            placeholder="查询曲目/乐谱"
            optionLabelProp="title"
            class="search-box"
            @search="handleSearch"
            @blur="autoComplete = []"
          >
            <a-input>
              <a-button
                slot="suffix"
                class="search-btn"
                type="primary"
                style="margin-right: -12px"
                @click="searchPage"
              >
                <a-icon type="search" />
              </a-button>
            </a-input>
            <template slot="dataSource">
              <a-select-option
                class="option-item"
                v-for="item in autoComplete"
                :value="item.name"
                :key="`${item.name}_${item.id}`" //这里key不同**
                @click="jumpItem(item.id)"
              >
                <span>{{ item.name }}</span>
              </a-select-option>
            </template>
          </a-auto-complete>

把value设置为${item.name}_${item.id}以后不报错了
但是query的值就会变成${item.name}_${item.id}
不是name
我设置了a-select-option一个新属性:name="${item.name}_${item.id}"
以及optionLabelProp="name"
也不能正常回显name

关注 2 回答 0

Elvin_Chinn 回答了问题 · 11月27日

解决求教一个正则匹配规则?

/(?<=default:)[^|]*/

关注 4 回答 3

Elvin_Chinn 回答了问题 · 11月26日

解决请问这个this的指向是怎么回事?

MDN:
image.png
https://developer.mozilla.org...

JavaScript 采用的是 词法作用域,所以对于上述两个例子中的箭头函数来说,它的作用域链应该是:[GlobalContext, 自身的 Context]

所以最后的函数调用:非严格模式下的话 this 会隐式指向全局对象,即 Window。严格模式下为 undefined。

更正:

一:试了一下非 ES6 模块下,不管是否为严格模式,上面两段代码的输出结果均为 Window。查到了一些相关的内容:

  1. Arrow function expressions - MDN 有一节 Relation with strict mode
  2. https://stackoverflow.com/que...
  3. http://www.ecma-international... 中的 9.2 关于 ThisMode 的解释

二:使用 ES6 模块(ES6 的模块自动采用严格模式),顶层的this指向undefined。输出结果都是 undefined。

关注 3 回答 4

Elvin_Chinn 回答了问题 · 11月26日

解决vue中判断两个数组里面的对象的属性值是否一样

第一个数组:A,第二个数组:B。

遍历 A,根据每一项的 area_name 在 B 中查找有没有 chineseName === area_name 的,找到的话就把对应的 icon 值加到当前被遍历的对象中:

A.forEach(item => {
    const matched = B.find(({ chineseName }) => chineseName === item.area_name);
    
    if (matched) {
        Object.assign(item, { icon: matched.icon });
    }
});

也可以把 B 先转成对象的形式:

const _B = Object.fromEntries(B.map(({ chineseName, ...rest }) => [chineseName, rest]));

A.forEach(item => {
    const matched = _B[item.area_name];
    
    if (matched) {
        Object.assign(item, { icon: matched.icon });
    }
});

关注 2 回答 2

Elvin_Chinn 关注了用户 · 11月25日

冴羽 @yayu

JavaScript深入系列 15 篇已完结。

JavaScript专题系列 20 篇已完结。

underscore 系列 8 篇已完结。

ES6 系列 20 篇已完结。

现在写起了各种单篇……

React 系列还在懒惰中……

公众号:冴羽的JavaScript博客

关注 2046

Elvin_Chinn 回答了问题 · 11月25日

解决element的messageBox,beforeClose中的逻辑

不然下次打开还会是 loading 的样式吧。

关注 1 回答 1

认证与成就

  • 获得 39 次点赞
  • 获得 5 枚徽章 获得 0 枚金徽章, 获得 1 枚银徽章, 获得 4 枚铜徽章

擅长技能
编辑

开源项目 & 著作
编辑

(゚∀゚ )
暂时没有

注册于 2019-02-14
个人主页被 534 人浏览