张宇童 - 前沿技术博客

typescript中的类型及定义

2020-10-16 张宇童 学习日志

typescript 是一门静态类型语言

什么静态类型?

也就是说typescript 是一门强类型语言,强类型语言是在声明变量或常量的时候就已经知道变量或常量的类型是什么了

下面我们来看看typescript是如何定义变量的

首先我们知道 typescript的基础类型有

null, symbol, undefind, boolean, void

// 首先定义一个Number类型的变量
let count: number = 12;
// String类型的变量
let name: string = 'xiaozhang'
// 注意这里编辑器会报错, 因为name是typescript保留的关键字

类的定义没有什么区别

class Person {}

定义一个对象类型

const person : {
    name: string
    age: number
} = {
    name: '小张一号',
    age: 18
};

定义一个数组

const numbers: numbers[] = [1,2,3];

定义一个方法

const add: (a: number, b: number) => number = (a, b) => {
    return a + b
}

定义一个对象类型

const xiaozhang: Person = new Person();

这些就是typescript中的主要几个类型定义

为什么typescript有什么优势呢?为什么使用typescript

我们都知道JavaScript是一门弱类型语言, 在构建大型项目的时候,一旦发生逻辑错误,是十分难以排查问题的

如果是一门强类型语言的话,在编译阶段就可以十分轻松的看到ide提示问题所在

比如:

我们在方法声明处声明了形参a为number类型

而我们在调用的时候实参传入了string类型

这样就可以通过编辑器的提示看到问题所在了

标签: javascript ES6 typeScript

评论(1) 浏览(619)

在学javascript

2020-8-27 张宇童 学习日志

买了些JavaScript的书,其实主要为了买红宝书,就顺便买了JavaScript语法简明手册

感觉比较适合初学者.图文并茂可以是读者很好的理解

图书内容并不多 200页左右

刚看了50页和大家分享下今天下午阅读的内容

说JavaScript的基础首先要说的是JavaScript的基础类型

JavaScript的基础类型分为7种

1 number 

2 string 

3 null

4 undefined

5 bigint

6 symbol

7 boolean

以上七种类型

可能大家会觉得没有什么说的

是的没有什么说的

但是那些基础类型有构造函数大家知道吗?

其中4中基础类型有构造的

分别是

1 boolean

2 string

3 bigint

4 number 

关于类型强转 主要说一下

number转boolean 只有在number 为0或者-0时转为boolean的值才为false 其他的值都是true

还有NaN, "", undefined, null取反为true,其他类型或值取反均为false

Symbol类型没有构造函数

所以创建的时候只能Symbol('fun')

但是Symbol('fun') == Symbol('fun') 的求值运算为false

所以借助Symbol 这个特性可以用于作为对象的私有属性

关于全局Symbol的使用语法是Symbol.for('age')

对于Symbol.for('age') == Symbol.for('age') 的求值运算的值为true

标签: javascript ES6

评论(0) 浏览(551)

webpack的代码分割配置代码,异步加载模块配置

2019-12-19 张宇童 webpack

需要在webpack.config.js配置中添加字段 optimization

首先在这里简单提一下

optimization 里面可以配置 tree shaking 

添加usedExports: true即可

下面我们进入正题

只需要在optimization里面添加配置

splitChunks: { chunks: 'all' }

即可 代码分割

配置异步加载

可以在函数里面直接import('xxxx')

$ sudo cnpm i -D babel-plugin-dynamic-import-webpack

options: {
   "presets": [
        "@babel/preset-env",
        "@babel/preset-react",
    ],
    plugins: ['dynamic-import-webpack']
},

标签: javascript

评论(3) 浏览(1261)

ant-design-pro 的入口文件？

2019-12-6 张宇童 学习日志

今天在项目中遇到一个问题

在ant-design-pro中需要加入script标签

于是找了好久没有找到入口文件 没有index.html 也没有index.ejs

最后在src中的docment.ejs

ant-design-pro加入script标签

只需要在docment.ejs中加入即可

标签: javascript ES6

评论(0) 浏览(743)

ant-design下载二进制字节流文件

2019-12-4 张宇童 学习日志

今天在做一个项目的时候遇到了一个问题。

其实下在文件是很简单的一件事情。但是使用到前后分离的这个概念，下载文件就变得稍微有一点点复杂了。

因为用户使用的是前端路由。而不能够直接使用后端的路由

所有任何操作都要通过API来实现

这样的话即使服务器上面有文件也很难下载。

因为链接不能够直达

所有我就用服务器返回我们需要下载文件的二进制字节流格式

然后在前端直接下载即可。但是由于经过前端的一层layer所以最好就是下载小文件。大文件就不必使用这种方法了

首先我们在前端ant-design中新建一个路由

export async function download(id) {
    return request(`/api/testadmin/download_template/${id}`,{
        responseType : 'blob'
    })
}

注意⚠️responseType一定要为blob

然后在模型中写一个方法effect

*_download({ id }, { call }) {
            return yield call(download, id)
        }

然后就可以直接下载保存了

if (window.navigator.msSaveOrOpenBlob) {
                navigator.msSaveBlob(temp_data, '项目必要文件.zip');
            } else {
                const link = document.createElement('a');
                const evt = document.createEvent('MouseEvents');
                link.style.display = 'none';
                link.href = window.URL.createObjectURL(temp_data);
                link.download = '项目必要文件.zip';
                document.body.appendChild(link); // 此写法兼容可火狐浏览器
                evt.initEvent('click', false, false);
                link.dispatchEvent(evt);
                document.body.removeChild(link);
            }

后端的代码我就不贴了

标签: javascript ES6

评论(0) 浏览(854)

如何自己为Array实现一个flat即扁平化输出

2019-11-26 张宇童 学习日志

let a = [1,2,3,4,5,[6,7, 8, [9,[10,11,[12,[13]]]]]]
console.log(a)
// (6) [1, 2, 3, 4, 5, Array(4)]
console.log(flat(a))
// [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13]

function flat(arr) {
    const temp_arr = [];
    arr.forEach(x => {
        if (x instanceof Array) {
            temp_arr.push(...flat(x))
        }else {
            temp_arr.push(x)
        }
    })
    return temp_arr;
}

标签: javascript ES6

评论(0) 浏览(649)

JavaScript快速将Array转为Object

2019-11-26 张宇童 学习日志

实现数组与对象的快速转换

首先我们来看一下正常情况下访问bar值

arr = [['bar',3],['two',6]]
// 正常访问 bar
console.log(arr[0][0]) // bar

使用新的API访问bar值 Object.fromEntries()

// ES10新的API Object.fromEntries()
const obj = Object.fromEntries(arr)

console.log(obj.bar) // 3

小实例

这个时候我们有一个object类型的数据，我们需要去除key的长度不等于3的元素。我们该怎么样做呢

const obj = {
    abc: '1',
    bcd: '2',
    fjdkls: '3',
}

思路：我们已知数组的API要远远多于object的API，那么我们可以现将obj转为array

const arr = Object.entries(obj)
console.log(arr)
// (3) [Array(2), Array(2), Array(2)]
// 0: (2) ["abc", "1"]
// 1: (2) ["bcd", "2"]
// 2: (2) ["fjdkls", "3"]
// length: 3
// __proto__: Array(0)

这里我使用了Object.entries()将对象转为了数组

这下就可以直接使用filter进行对数组的过滤了

const res = arr.filter(([k,v]) => {
    return k.length === 3;
})

console.log(res)
// (2) [Array(2), Array(2)]
// 0: (2) ["abc", "1"]
// 1: (2) ["bcd", "2"]
// length: 2
// __proto__: Array(0)

过滤完后我们得到了我们想要的结果，但这还不是最终的结果。因为它现在是数组。我们要将它变为对象

const res_obj = Object.fromEntries(res)
console.log(res_obj)
// {abc: "1", bcd: "2"}

处理完成

标签: javascript ES6

评论(0) 浏览(767)

JavaScript提取字符串的几种方式

2019-11-26 张宇童 学习日志

第一种：

str = `"bar" and "foo" and "baz"`;
reg = /\"(.*?)\"/g
// 第一种方式
while (true) {
    let a = reg.exec(str)
    if (a === null) break;
    console.log(a[1])
}
// 成功提取
// index.js:7 bar
// index.js:7 foo
// index.js:7 baz

第二种：

// 第二种方式
console.log(str.match(reg))
// (3) [""bar"", ""foo"", ""baz""]
// 第二种方式有点小遐思 会多双引号

第三种：

// 第三种方式 利用replace
str.replace(reg, function(all, first) {
    console.log(first)
})
// 完美的成功输出了

第四种：

// 第三种方式
for (const i of str.matchAll(reg)) {
    console.log(i)
}
/*
(2) [""bar"", "bar", index: 0, input: ""bar" and "foo" and "baz"", groups: undefined]
(2) [""foo"", "foo", index: 10, input: ""bar" and "foo" and "baz"", groups: undefined]
(2) [""baz"", "baz", index: 20, input: ""bar" and "foo" and "baz"", groups: undefined]
*/

本章要点：

第三种方式是利用replace的高阶用法。replace的第二个参数不仅仅是可以传入需要替换的字符串，还可以传入一个函数，函数的第一个参数是所有匹配，第二个参数是捕获字符串

第四种方式显得更加简单利用matchAll生成可迭代对象然后进行遍历

标签: javascript ES6

评论(0) 浏览(486)

JavaScript去除首尾空格

2019-11-26 张宇童 学习日志

不管在哪种语言中去除字符串首尾空格都是会经常用到的

JavaScript中我们经常用的去除首尾空格方式是替换，比如：

str = '   hello world   '
console.log(str.replace(/^\s+|\s+$/g, '')) // hello world

而如今ES10将会让我们更加方便的去除空格

console.log(str.trimStart())

console.log(str.trimEnd())

JavaScript此外还提供了str.trimStart()的别名 str.trimLeft()

还有str.trimEnd()的别名 str.trimRight()

标签: javascript ES6

评论(0) 浏览(1008)

JavaScript中的扁平化输出

2019-11-26 张宇童 学习日志

arr = [1, [2, [3, [4, 5, [6, [7, [8, [9]]]]]]]]

console.log(arr.flat(10)) // 递归的层数 ，如果指定底层数大于数组实际层数将按照数组最高层数执行

arr = [1,2,3];

console.log(arr.map(x => [x*2])) // 输出的是 [Array(1), Array(1)....]

有没有办法直接输出 2,4,6呢？
之前我们讲过flat，这时候可以在map之后加上flat即可

console.log(arr.map(x => [x*2]).flat()) //输出的是 [2,4,6]

flat还提供一个API
就不需要我们写的这么多了

console.log(arr.flatMap(x => [x*2])) // 同样输出 [2,4,6]

标签: javascript ES6

评论(0) 浏览(474)