四个JS小技巧

一、尽早结束

1
2
3
4
5
6
7
8
9
10
11
12
13
14
function transformData(rawData) {
// check if no data
if (!rawData) {
return [];
}

// check for specific case
if (rawData.length == 1) {
return [];
}

// actual function code goes here
return rawData.map(item => item);
}

阅读全文

数组、对象的深拷贝

数组的深拷贝

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
function copyObjectArray(x) {
return [...JSON.parse(JSON.stringify(x))];
}

// example 1
const test = [
{
name: 'Amy',
age: 18,
},
];
let test1 = copyObjectArray(test);
test1[0].name = 'Jack';
console.log(test, test1);
// test: [ { name: 'Amy', age: 18 } ] test1: [ { name: 'Jack', age: 18 } ]

阅读全文

初始化可伸缩数组

Demo

1
2
3
4
5
6
7
8
9
10
let len = 5;

// method1
let arr = Array(len)
.fill(null)
.map((v, i) => String.fromCharCode(65 + i));
// method2
let arr = Array.apply(null, { length: len }).map((v, i) => String.fromCharCode(65 + i));

console.log(arr); //[ 'A', 'B', 'C', 'D', 'E' ]

阅读全文

对象属性值监听

Demo

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
let data = {
title: 'hello world!',
};

function definePropertyData(obj, prop, value) {
Object.defineProperty(obj, prop, {
get: function() {
console.log(111);
return value;
},
set: function(newValue) {
value = newValue;
},
});
}

definePropertyData(data, 'title', data.title);

console.log(data.title); // 111 hello world!
data.title = 38;
console.log(data.title); // 111 38

阅读全文

代码优化

用 vue 进行前端开发,怎么做到函数式编程呢?

每次做完项目,都会发现自己在代码的解耦,接口的封装方面做的还不够,后期必定会多次进行优化,在优化的过程中,就想到,如何把零散的代码,编程整体性更强的代码,使人一看到就知道手脚在哪里。在这里我的总结是,按功能点进行函数的封装,一个大点是一个函数,这个大点里面又有很多小点,可以把函数赋值给变量,进行使用,这样就不用每次都跳来跳去了,维护起来也更方便快捷。

阅读全文

时间戳转日期

Demo

1
2
3
4
5
6
7
function timeStampFormat(x) {
const date = new Date(+x * 1000);
const [m, d] = [date.getMonth() + 1, date.getDate()];
return `${m}-${d}`;
}
const day = timeStampFormat(1560751917);
console.log(day);

阅读全文

寻找数组中重复元素个数的简洁方法

场景:

有一个数组里面存了一些值 val = [1, 2, 3],另一个数组中存的是选择这些值得集合 answer = [1, 1, 2, 3, 2, 1],求 val 中对应每位元素在 answer 中的重复个数,并输出到对应的数组中。要求不要使用迭代等复杂的写法。

阅读全文

Css3 动画 vs Js 动画

之前被问到过,css3 动画与 js 动画孰优孰劣,脑袋的第一反应就是性能上肯定 css3 动画会好很多,但别人说不对,我就在想,不对?难道还有别的原因吗?答案是肯定的。先来看看二者实现动画的原理吧。

css3 动画原理

css3 动画本质上是一直视觉上的动画,并未去触碰 DOM,换句话说,用 css3 实现的动画,原来的 DOM 的位置是不曾被改变的。

阅读全文

滚动翻页

一、 功能描述

有一个 list,长度不确定,显示区域只能容纳四条数据,往下滚动显示当前四条数据的前四条,往下滚动则显示当前数据的后四条。除了滚动切换数据之外,还能通过上下翻页键切换数据,切换数据的交互需要跟滚动效果一样。

阅读全文

日语学习笔记

一、日语关于介绍的基本句型

  1. n + は + n + です ……是……

阅读全文