张京

张京 查看完整档案

北京编辑清华大学  |  计算机科学与技术 编辑云客  |  技术副总 编辑 www.fengerzh.com 编辑
编辑

现任北京联云天下科技有限公司技术副总裁。1994年本科毕业于清华大学计算机科学与技术专业;20多年软件开发及项目管理经验;历任亚洲生活网络公司CTO,摩托罗拉软件中心QSE工具经理,融信恒通技术总监,安必信软件公司技术副总裁,微能创投加速器创始人CTO等职。

个人动态

张京 回答了问题 · 4月14日

解决请问什么样的网络资源,响应的头部才有content-length?

http头部的content-lengthcontent-type无关,但与chunked encoding有关,如果你的nginx服务器开启了动态gzip压缩功能,则默认开启了chunked encoding,这时发送的response里就没有content-length了,因为这个尺寸是由nginx动态计算的,无法预知其大小,如果需要的话,你必须开启nginx的静态压缩功能。

该模块与ngx_http_gzip_module模块的不同之处主要在于,该模块使用的是静态压缩,在HTTP响应头部包含Content-Length头域来指明报文体的长度,用于服务器可确定响应数据长度的情况;而后者默认使用Chunked编码的动态压缩,其主要适用于服务器无法确定响应数据长度的情况,比如大文件下载的情形,这时需要实时生成数据长度。

参见nginx的gzip功能

关注 3 回答 1

张京 回答了问题 · 4月12日

解决es6根据数组对象里的指定字段累加并去重

介绍一个库alasql:

const arr = [
    {id:1,typeId:1,num:2},
    {id:2,typeId:1,num:5},
    {id:3,typeId:2,num:2},
    {id:4,typeId:2,num:1},
    {id:5,typeId:3,num:2},
    {id:6,typeId:3,num:2},
    {id:7,typeId:3,num:2},
];
var res = alasql('SELECT typeId, SUM(num) AS b FROM ? GROUP BY typeId', [arr]);

关注 6 回答 6

张京 赞了文章 · 4月9日

2021年要了解的34种JavaScript简写优化技术

开发者的生活总是在学习新的东西,跟上变化不应该比现在更难,我的动机是介绍所有JavaScript的最佳实践,比如简写功能,作为一个前端开发者,我们必须知道,让我们的生活在2021年变得更轻松。

你可能做了很长时间的JavaScript开发,但有时你可能没有更新最新的特性,这些特性可以解决你的问题,而不需要做或编写一些额外的代码。这些技术可以帮助您编写干净和优化的JavaScript代码。此外,这些主题可以帮助你为2021年的JavaScript面试做准备。

1.如果有多个条件

我们可以在数组中存储多个值,并且可以使用数组 include 方法。

//Longhand
if (x === 'abc' || x === 'def' || x === 'ghi' || x ==='jkl') {
  //logic
}

//Shorthand
if (['abc', 'def', 'ghi', 'jkl'].includes(x)) {
  //logic
}

2.如果为真…否则简写

这对于我们有 if-else 条件,里面不包含更大的逻辑时,是一个较大的捷径。我们可以简单的使用三元运算符来实现这个简写。

// Longhand
let test: boolean;
if (x > 100) {
  test = true;
} else {
  test = false;
}

// Shorthand
let test = (x > 10) ? true : false;
//or we can use directly
let test = x > 10;
console.log(test);

当我们有嵌套条件时,我们可以采用这种方式。

let x = 300,
test2 = (x > 100) ? 'greater 100' : (x < 50) ? 'less 50' : 'between 50 and 100';
console.log(test2); // "greater than 100"

3.声明变量

当我们要声明两个具有共同值或共同类型的变量时,可以使用此简写形式。

//Longhand 
let test1;
let test2 = 1;

//Shorthand 
let test1, test2 = 1;

4.Null, Undefined,空检查

当我们创建新的变量时,有时我们想检查我们引用的变量的值是否为空或undefined。JavaScript确实有一个非常好的简写工具来实现这些功能。

// Longhand
if (test1 !== null || test1 !== undefined || test1 !== '') {
    let test2 = test1;
}

// Shorthand
let test2 = test1 || '';

5.null值检查和分配默认值

let test1 = null,
    test2 = test1 || '';

console.log("null check", test2); // output will be ""

6.undefined值检查和分配默认值

let test1 = undefined,
    test2 = test1 || '';

console.log("undefined check", test2); // output will be ""

正常值检查

let test1 = 'test',
    test2 = test1 || '';

console.log(test2); // output: 'test'

7.将值分配给多个变量

当我们处理多个变量并希望将不同的值分配给不同的变量时,此简写技术非常有用。

//Longhand 
let test1, test2, test3;
test1 = 1;
test2 = 2;
test3 = 3;

//Shorthand 
let [test1, test2, test3] = [1, 2, 3];

8.赋值运算符简写

我们在编程中处理很多算术运算符,这是将运算符分配给JavaScript变量的有用技术之一。

// Longhand
test1 = test1 + 1;
test2 = test2 - 1;
test3 = test3 * 20;

// Shorthand
test1++;
test2--;
test3 *= 20;

9.如果存在简写

这是我们大家都在使用的常用简写之一,但仍然值得一提。

// Longhand
if (test1 === true) or if (test1 !== "") or if (test1 !== null)

// Shorthand //it will check empty string,null and undefined too
if (test1)

注意:如果test1有任何值,它将在if循环后进入逻辑,该运算符主要用于 nullundefined 的检查。

10.多个条件的AND(&&)运算符

如果仅在变量为 true 的情况下才调用函数,则可以使用 && 运算符。

//Longhand 
if (test1) {
 callMethod(); 
} 

//Shorthand 
test1 && callMethod();

11.foreach循环简写

这是迭代的常用简写技术之一。

// Longhand
for (var i = 0; i < testData.length; i++)

// Shorthand
for (let i in testData) or  for (let i of testData)

每个变量的数组

function testData(element, index, array) {
  console.log('test[' + index + '] = ' + element);
}

[11, 24, 32].forEach(testData);
// logs: test[0] = 11, test[1] = 24, test[2] = 32

12.return中比较

我们也可以在return语句中使用比较。它将避免我们的5行代码,并将它们减少到1行。

// Longhand
let test;
function checkReturn() {
  if (!(test === undefined)) {
    return test;
  } else {
    return callMe('test');
  }
}
var data = checkReturn();
console.log(data); //output test
function callMe(val) {
    console.log(val);
}

// Shorthand
function checkReturn() {
    return test || callMe('test');
}

13.箭头函数

//Longhand 
function add(a, b) { 
   return a + b; 
} 

//Shorthand 
const add = (a, b) => a + b;

更多示例。

function callMe(name) {
  console.log('Hello', name);
}
callMe = name => console.log('Hello', name);

14.短函数调用

我们可以使用三元运算符来实现这些功能。

// Longhand
function test1() {
  console.log('test1');
};
function test2() {
  console.log('test2');
};
var test3 = 1;
if (test3 == 1) {
  test1();
} else {
  test2();
}

// Shorthand
(test3 === 1? test1:test2)();

15. Switch简写

我们可以将条件保存在键值对象中,并可以根据条件使用。

// Longhand
switch (data) {
  case 1:
    test1();
  break;

  case 2:
    test2();
  break;

  case 3:
    test();
  break;
  // And so on...
}

// Shorthand
var data = {
  1: test1,
  2: test2,
  3: test
};

data[something] && data[something]();

16.隐式返回简写

使用箭头函数,我们可以直接返回值,而不必编写return语句。

//longhand
function calculate(diameter) {
  return Math.PI * diameter
}

//shorthand
calculate = diameter => (
  Math.PI * diameter;
)

17.小数基数指数

// Longhand
for (var i = 0; i < 10000; i++) { ... }

// Shorthand
for (var i = 0; i < 1e4; i++) {

18.默认参数值

//Longhand
function add(test1, test2) {
  if (test1 === undefined)
    test1 = 1;
  if (test2 === undefined)
    test2 = 2;
  return test1 + test2;
}

//shorthand
add = (test1 = 1, test2 = 2) => (test1 + test2);
add() //output: 3

19.扩展运算符简写

//longhand

// joining arrays using concat
const data = [1, 2, 3];
const test = [4 ,5 , 6].concat(data);

//shorthand

// joining arrays
const data = [1, 2, 3];
const test = [4 ,5 , 6, ...data];
console.log(test); // [ 4, 5, 6, 1, 2, 3]

对于克隆,我们也可以使用扩展运算符。

//longhand

// cloning arrays
const test1 = [1, 2, 3];
const test2 = test1.slice()

//shorthand

// cloning arrays
const test1 = [1, 2, 3];
const test2 = [...test1];

20.模板文字

如果您厌倦了在单个字符串中使用 + 来连接多个变量,那么这种简写可以消除您的头痛。

//longhand
const welcome = 'Hi ' + test1 + ' ' + test2 + '.'

//shorthand
const welcome = `Hi ${test1} ${test2}`;

21.多行字符串简写

当我们在代码中处理多行字符串时,可以使用以下功能:

//longhand
const data = 'abc abc abc abc abc abc\n\t'
    + 'test test,test test test test\n\t'

//shorthand
const data = `abc abc abc abc abc abc
         test test,test test test test`

22.对象属性分配

let test1 = 'a'; 
let test2 = 'b';

//Longhand 
let obj = {test1: test1, test2: test2}; 

//Shorthand 
let obj = {test1, test2};

23.将字符串转换成数字

//Longhand 
let test1 = parseInt('123'); 
let test2 = parseFloat('12.3'); 

//Shorthand 
let test1 = +'123'; 
let test2 = +'12.3';

24.用解构简写

//longhand
const test1 = this.data.test1;
const test2 = this.data.test2;
const test2 = this.data.test3;

//shorthand
const { test1, test2, test3 } = this.data;

25.用Array.find简写

当我们确实有一个对象数组并且我们想要根据对象属性查找特定对象时,find方法确实很有用。

const data = [
  {
    type: 'test1',
    name: 'abc'
  },
  {
    type: 'test2',
    name: 'cde'
  },
  {
    type: 'test1',
    name: 'fgh'
  },
]
function findtest1(name) {
  for (let i = 0; i < data.length; ++i) {
    if (data[i].type === 'test1' && data[i].name === name) {
      return data[i];
    }
  }
}

//Shorthand
filteredData = data.find(data => data.type === 'test1' && data.name === 'fgh');
console.log(filteredData); // { type: 'test1', name: 'fgh' }

26.查找条件简写

如果我们有代码来检查类型,根据类型需要调用不同的方法,我们可以选择使用多个else ifs或者switch,但是如果我们有比这更好的简写方法呢?

// Longhand
if (type === 'test1') {
  test1();
}
else if (type === 'test2') {
  test2();
}
else if (type === 'test3') {
  test3();
}
else if (type === 'test4') {
  test4();
} else {
  throw new Error('Invalid value ' + type);
}

// Shorthand
var types = {
  test1: test1,
  test2: test2,
  test3: test3,
  test4: test4
};
 
var func = types[type];
(!func) && throw new Error('Invalid value ' + type); func();

27.按位索引简写

当我们遍历数组以查找特定值时,我们确实使用 indexOf() 方法,如果找到更好的方法该怎么办?让我们看看这个例子。

//longhand
if(arr.indexOf(item) > -1) { // item found 
}
if(arr.indexOf(item) === -1) { // item not found
}

//shorthand
if(~arr.indexOf(item)) { // item found
}
if(!~arr.indexOf(item)) { // item not found
}

按位()运算符将返回除-1以外的任何值的真实值。否定它就像做 ~~ 一样简单。另外,我们也可以使用 include() 函数:

if (arr.includes(item)) { 
    // true if the item found
}

28.Object.entries()

此函数有助于将对象转换为对象数组。

const data = { test1: 'abc', test2: 'cde', test3: 'efg' };
const arr = Object.entries(data);
console.log(arr);
/** Output:
[ [ 'test1', 'abc' ],
  [ 'test2', 'cde' ],
  [ 'test3', 'efg' ]
]
**/

29.Object.values()

这也是ES8中引入的一项新功能,该功能执行与 Object.entries() 类似的功能,但没有关键部分:

const data = { test1: 'abc', test2: 'cde' };
const arr = Object.values(data);
console.log(arr);
/** Output:
[ 'abc', 'cde']
**/

30.双按位简写

双重NOT按位运算符方法仅适用于32位整数)

// Longhand
Math.floor(1.9) === 1 // true

// Shorthand
~~1.9 === 1 // true

31.重复一个字符串多次

要一次又一次地重复相同的字符,我们可以使用for循环并将它们添加到同一循环中,但是如果我们有一个简写方法呢?

//longhand 
let test = ''; 
for(let i = 0; i < 5; i ++) { 
  test += 'test '; 
} 
console.log(str); // test test test test test 

//shorthand 
'test '.repeat(5);

32.在数组中查找最大值和最小值

const arr = [1, 2, 3]; 
Math.max(…arr); // 3
Math.min(…arr); // 1

33.从字符串中获取字符

let str = 'abc';

//Longhand 
str.charAt(2); // c

//Shorthand 
Note: If we know the index of the array then we can directly use index insted of character.If we are not sure about index it can throw undefined
str[2]; // c

34.数学指数幂函数的简写

//longhand
Math.pow(2,3); // 8

//shorthand
2**3 // 8
查看原文

赞 92 收藏 63 评论 19

张京 回答了问题 · 4月8日

标注文本工具

关注 3 回答 1

张京 回答了问题 · 4月7日

解决Python中demjson当数据很大的时候为什么性能非常慢

image.png

5年没有人维护的库你觉得它还活着的可能性有多大?看开源项目一定要注意最后一次维护时间,如果最后一次维护时间超过一年以上,基本上可以断定这个库已经死了,绝对不要用它。

关注 2 回答 1

张京 回答了问题 · 4月7日

解决ant-design-icons,启动icons-react报错

antd版本不兼容导致的。它package.json里安装的antd是4.8.2的,但它的father安装的是3.19.2的,所以只需要把package.json里这一行改成3.19.2就可以了:

"antd": "^3.19.2",

重新yarn安装一下,然后yarn start就可以了。

关注 2 回答 1

张京 赞了回答 · 4月5日

React 数组渲染,key不确定怎么办

map个自增序列

关注 7 回答 5

张京 赞了文章 · 4月2日

webpack 性能提升之DllPlugin

webpack打包优化策略一:
DllPlugin:
运行流程,
1、生成dll文件
新建一个webpack.dll.js 并运行webpack --config webpack.dll.js

const webpack = require('webpack');
const path = require('path');
module.exports = {
    entry: {
        react: ['react', 'react-dom']
    },
    output: {
        filename: 'dll_[name].js',
        library: "[name]_[hash]",
        path: path.resolve(__dirname, 'dist/site')
    },
    plugins: [
        new webpack.DllPlugin({
            context: __dirname,
            path: path.join(__dirname, 'dist/site', '[name]-mainfest.json'),
            name: '[name]_[hash]'
        }),
    ]
}

运行命令
webpack --config webpack.dll.js
相关属性解释:
entry: 在这里配置要打包的公共库文件,这里打包的是react和react-dom
output: 文件输出配置,其中filename是文件的打包输出名称,library是打包后库的名称,path是输出的路径。
plugins: webpack插件,这里使用DllPlugin将react和react-dom打包成dll文件,其中,path是dll文件的额映射json,作用是映射库名称和他对应的node_module里的路径,name是库的名称和output.library要保持一致。
思考tips:
为什么DllPlugin中的name要和output.libray保持一致?
因为dllPlugin会生成一个mainfest.json格式的映射文件,output时会跟进libray的值去mainfest.json里找对的name,然后找到对应的node_module的路径,打包输出。

这样一个dll_react.js就会生成了
react-mainfest.json的代码截图如下
image.png
输出的dll_react.js的代码截图如下
image.png
2、使用dll文件
新建webpack.config.js并运行webpack --config webpack.config.js
webapck.config.js

const path = require('path');
const webpack = require('webpack');
var HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
    entry: {
        main: './src/index.js'
    },
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: '[name].js',
    },
    mode: 'development',
    devServer: {
        contentBase: './dist',
        open: true,
        port: 8080,
        hot: true,
        hotOnly: true,
        historyApiFallback: true,
        publicPath: '/'
    },
    module: {
        rules: [
            {
                test: /\.(js|jsx)$/,
                exclude: /(node_modules)/,
                use: {
                loader: 'babel-loader'
                }
            },
            {
                test: /\.css/,
                exclude: /(node_modules)/,
                use: {
                    loader: 'css-loader'
                }
            },
            {
                test: /\.(svg|png|jpg)/,
                use: {
                    loader: 'url-loader'
                }
            }
        ]
    },
    plugins: [
        new HtmlWebpackPlugin({
            title: '测试',
            template: 'src/index.html'
        }),
        new webpack.DllReferencePlugin({
            // 描述 react 动态链接库的文件内容
            manifest: require('./dist/site/react-mainfest.json'),
        })
    ]
}

相关参数解释
entry: 配置入口文件
output:配置输出
mode: 配置生产还是测试环境
devserver配置开发环境
module:配置rule中的相关loader
plugins: 配置webpack的插件,其中DllReferencePlugin会根据之前生成的映射json,放入mainfest参数中
通过引用 dll 的 manifest 文件来把依赖的名称映射到模块的 id 上,之后再在需要的时候通过内置的__webpack_require__函数来require他们

HtmlWebpackPlugin,在这里处理html模板
相关代码如下:

<!DOCTYPE html>
<html>
    <script data-original="./site/dll_react.js"></script>
    <body>
        <div id="root">
            
        </div>
    </body>
</html>

最终生成的html如下:

<!DOCTYPE html>
<html>
    <script data-original="./site/dll_react.js"></script>
    <body>
        <div id="root">
            
        </div>
    <script data-original="main.js"></script></body>
</html>

第一次运行webpack --config webpack.dll.js
之后每次运行webpack --config webpack.config.js就行了

通过一组图片能更直观的感受到
dll文件生成用了2.18s
image.png
业务组件用了3.63s
image.png
不使用dll-plugin的情况下5.75s
image.png

总结:使用dll-plugin,会把公共库打包成一个单独的库文件,每次只需打包业务代码就行了,这样就减少了公共打包的那部分时间,整体速度得到了提升。

查看原文

赞 1 收藏 0 评论 0

张京 赞了文章 · 4月1日

一道前端面试题引发的思考

直接开始题目是

if(a==1 && a==2 && a==3){
    alert('厉害了')
}

说句实话开发中谁写成这样保证会被打死。

不过面试就是面试,有面试官的考量点。

我理解的点有两个

1、隐式类型转换

先说说隐式类型转换有几种情况

先说条件判断 ==
  • String和Number比较:'1' == 1,字符串会调用Number()方法转为数字后再比较。
  • Boolean和Number比较:true == 1, Boolean调用Number()方法转为数字后再比较。
  • 布尔值和字符串比较:true == '1',会将双方调用Number()转换为Number,然后再进行比较。

总结一句话,==两侧非Number都会调用Number()转化后再调用。

再说说 + - * /运算符

它们四个可以分两类,+和其它,我们都知道+既可以做运算符也可以做字符串链接。

1+1 = 2
1+"1" = "11"
2-'1' = 1
2*'1' = 2
2-/'1' = 2

除了+号运算符,其它运算符两侧如果有字符串数字的话也是会调用Number转换再运算。

聊到这里你发现这和题目没毛关系啊!过来人告诉你 冷静!往下看

2、valueOf / toString等原生api的掌握程度

针对对象的valueOf / toString等原生api,我们看数字和对象的比较/数字和对象的运算

以上我们总结单纯的隐式类型转换没办法解决问题

js里除了空字符串、数字0、null、undefined、false、NaN为假 其它均为真。

JavaScript调用valueOf方法将对象转换为原始值。你很少需要自己调用valueOf方法;当遇到要预期的原始值的对象时,JavaScript会自动调用它。官方是这么说的。

1 == {
    valueOf:()=>{
        return 1
    }
}

//true

从结果看 对象会自动调用valueOf方法

这样我们就可以改成:

a = {
      value :0,
      valueOf :function(){
            this.value++
            return this.value
      }
}

1==a //true
2==a //true
3==a //true
//结果为true,每次隐式类型转换的过程都会自动调用valueOf。

//接下来说toString

//都有valueOf了 还说toString干嘛,的确默认都会调用,只不过有优先级。
//我只能说js作者很牛逼。

//如果同时有包含它们两个(valueOf和toString会怎么样

a = {
      value :0,
      valueOf :function(){
            this.value++
            return this.value+'aa'
      },
      toString:function(){
           this.value+=2
           return this.value
      }
}

image.png

规则就是这样,当valueOf返回不为基本类型的时候,回去调用toString方法。

调用了三次结果变为6

还有一个很骚的方法,是从一个小姐姐博客看到的,https://juejin.im/post/5d124a12f265da1b9163a28d
文章第六题:我聊的这个就是这个题,不过感觉小姐姐聊得更专业点。

let arr=[1,2,3]
arr.join = arr.shift
arr ==1
arr ==2
arr ==3

结果完美,不过小姐姐的意思是数组的toString方法会自动触发数组的join。
这个真是厉害了!
查看原文

赞 18 收藏 11 评论 4

张京 赞了回答 · 3月31日

前端能够实现md5吗?

crypto-js

密码学里
加密叫 encrypt
解密叫 decrypt
摘要叫 digest

md5 是摘要算法,不是 加解密算法
摘要算法不可逆,比如一个 1 GB 文件,你 md5完了才 128个bit,你觉得能复原回原来的1GB文件的内容么?

凡是MD5称为加密算法的,都是有点问题的

关注 4 回答 3

认证与成就

  • SegmentFault 讲师
  • 获得 2044 次点赞
  • 获得 39 枚徽章 获得 3 枚金徽章, 获得 9 枚银徽章, 获得 27 枚铜徽章

擅长技能
编辑

开源项目 & 著作
编辑

  • Java程序员生存手册

    无论是初次涉足Java开发的毕业生还是经验丰富的Java程序员,都会在求职过程和职场生涯中面对各种考验。《Java程序员生存手册:为自己赢得一份IT名企职位》详细分析了软件工程师求职过程中的常见问题,深入解析了各大IT公司考查求职者的面试真题,告诉读者用人单位需要什么样的技术人才,考查什么样的技术知识,如何甄别人才。

  • 日新亭模板

    我的个人博客的模板,采用PWA技术,欢迎选用。

  • Wecan Tv Frontend

    用React和Redux开发的Wecan TV前端代码库。

  • Chinese date time formatter

    这是我的第一个npm项目,尝试解决Javascript中经常会用到的格式化日期和时间的功能,引用了一个英文控件,同时增加了对中文的支持。

注册于 2015-01-26
个人主页被 15.3k 人浏览