照彦のblog

前端Copy师


  • 首页

  • 关于

  • 整理

  • 标签

  • 归档

  • 404页面

nginx中文url、404的问题

发表于 2019-07-21 | 分类于 nginx , 服务器

一、查看系统语言设置

输入 locale 查看当前语言环境
例如我的 LANG=”en_US.UTF-8 就没有问题如果不是 UTF-8 可能会有问题

二、更改 nginx 设置

在 nginx 配置文件中,找到 sever,在里面添加 charset utf-8;

例如
server{ charset utf-8; root /data/www; }

同时需要将 FTP 和 shell 工具的字符集设置为 UTF-8

以上就是解决 url 中文 404 的方案=,=

初次使用nginx

发表于 2019-05-21 | 分类于 服务器

初次使用 nginx

闲来无事想着腾讯云服务器买着吃灰好久了。。于是便诞生了这篇文章
服务器是 Centos 系统然后服务器选择的 nginx
主要是几个步骤

  • yum install nginx -y
  • nginx
    这时候可以访问 IP 看到测试页了

  • 更改静态文件存储位置

1
vim /etc/nginx/nginx.conf

对啦 vim 我也是现学的编辑 保存退出=。=
把 root 更改为/data/www 后还有一个事情要处理 就是处理默认配置的一条注释掉
nginx.conf 配置文件中有一行是 include /etc/nginx/conf.d/*.conf,把这行代码注释掉,保存退出,因为这行代码会使文件执行默认配置。

  • 检查配置文件是否正确 nginx -t

  • 在 data 目录下创建 www 文件夹 mkdir -p /data/www

  • cd 到 www 文件夹下 创建 index.html 因为默认是访问 index.html
  • 重启 nginx 命令是 nginx -s reload
    对了 有可能发生端口被多个 nginx 占用的情况 这时候请杀掉 nginx 再重新启动

如何扩展 Create React App 的 Webpack 配置

发表于 2019-05-10 | 分类于 javascript , react

如何扩展 Create React App 的 Webpack 配置

Create React App(以下简称 CRA)是创建 React 应用的一个脚手架,它与其他脚手架不同的一个地方就是将一些复杂工具(比如 webpack)的配置封装了起来,让使用者不用关心这些工具的具体配置,从而降低了工具的使用难度。

但是对于一些熟悉 webpack 的开发者来说,他们可能想对 webpack 配置做一些修改,这个时候应该怎么办呢?
其实我们可以通过以下几种方式来修改 webpack 的配置:

  • 项目 eject
  • 替换 react-scripts 包
  • 使用 react-app-rewired
  • scripts 包 + override 组合

项目 eject

使用 CRA 创建完项目以后,项目在 package.json 里面提供了这样一个命令:

1
2
3
4
5
6
7
{
...
"scripts": {
"eject": "react-scripts eject"
},
...
}

执行完这个命令——yarn run eject(或者 npm run eject)后会将封装在 CRA 中的配置全部反编译到当前项目,这样用户就可以完全取得 webpack 文件的控制权,想怎么修改就怎么修改了。

1
2
3
4
5
6
7
8
9
10
config
├── env.js
├── jest
│ ├── cssTransform.js
│ └── fileTransform.js
├── paths.js
├── polyfills.js
├── webpack.config.dev.js // 开发环境配置
├── webpack.config.prod.js // 生产环境配置
└── webpackDevServer.config.js

CRA 与其他脚手架不同的另一个地方,就是可以通过升级其中的 react-scripts 包来升级 CRA 的特性。比如用老版本 CRA 创建了一个项目,这个项目不具备 PWA 功能,但只要项目升级了 react-scripts 包的版本就可以具备 PWA 的功能,项目本身的代码不需要做任何修改。

但如果我们使用了 eject 命令,就再也享受不到 CRA 升级带来的好处了,因为 react-scripts 已经是以文件的形式存在于你的项目,而不是以包的形式,所以无法对其升级。

替换 react-scripts 包

react-scripts 是 CRA 的一个核心包,一些脚本和工具的默认配置都集成在里面,使用 CRA 创建项目默认就是使用这个包,但是 CRA 还提供了另外一种方式来创建 CRA 项目,即使用自定义 scripts 包的方式。

1
2
3
4
5
# 默认方式
$ create-react-app foo
# 自定义 scripts 包方式
$ create-react-app foo --scripts-version 自定义包

自定义包可以是下面几种形式:

  • react-scripts 包的版本号,比如 0.8.2,这种形式可以用来安装低版本的 react-scripts 包。
  • 一个已经发布到 npm 仓库上的包的名字,比如 your-scripts,里面包含了修改过的 webpack 配置。
  • 一个 tgz 格式的压缩文件,比如/your/local/scripts.tgz,通常是未发布到 npm 仓库的自定义 scripts 包,可以用 npm pack 命令生成。
    这种方式相对于之前的 eject 是一种更灵活地修改 webpack 配置的方式,而且可以做到和 CRA 一样,通过升级 scrips 包来升级项目特性。

自定义 scripts 包的结构可以参照 react-scripts 包的结构,只要修改对应的 webpack 配置文件,并安装上所需的 webpack loader 或 plugin 包就可以了。

使用 react-app-rewired

虽然有这两种方式可以扩展 webpack 配置,但是很多开发者还是觉得太麻烦,有没有一种方式可以既不用 eject 项目又不用创建自己的 scripts 包呢?答案是肯定的,react-app-rewired 是 react 社区开源的一个修改 CRA 配置的工具。

在 CRA 创建的项目中安装了 react-app-rewired 后,可以通过创建一个 config-overrides.js 文件来对 webpack 配置进行扩展。

1
2
3
4
5
6
/* config-overrides.js */
module.exports = function override(config, env) {
//do stuff with the webpack config...
return config;
}

override 方法的第一个参数 config 就是 webpack 的配置,在这个方法里面,我们可以对 config 进行扩展,比如安装其他 loader 或者 plugins,最后再将这个 config 对象返回回去。

最后再修改 package.json 中的脚本命令,修改内容请见这里。

scripts 包 + override 组合

虽然 react-app-rewired 的方式已经可以很方便地修改 webpack 的配置了,但其实我们也可以在自定义的 script 包中实现类似的功能。

在 react-app-rewired 的源码中可以看到它核心的包也叫 react-app-rewired,里面重新覆盖了 react-scripts 中的几个脚本文件,包括 build.js、start.js 和 test.js。

具体过程是怎样的呢?以 build.js 为例:

  • 先获取 webpack 的基本配置,然后再调用 config-overrides.js(就是在根目录中新增的那个文件)中的 override 方法,将原先的 webpack 对象作为参数传入,
  • 再取得经过修改后的 webpack 配置对象
  • 最后再调用 react-scripts 中的 build.js 脚本,传入修改后的 webpack 对象来执行命令,
    具体源码:
1
2
3
4
5
6
7
8
9
10
const overrides = require('../config-overrides');
const webpackConfigPath = paths.scriptVersion + "/config/webpack.config.prod";
// load original config
const webpackConfig = require(webpackConfigPath);
// override config in memory
require.cache[require.resolve(webpackConfigPath)].exports =
overrides.webpack(webpackConfig, process.env.NODE_ENV);
// run original script
require(paths.scriptVersion + '/scripts/build');

知道了原理之后,我们也可以修改自定义 scripts 包的脚本文件,还是以 build.js 为例,在获取基本 webpack 配置对象和使用 webpack 对象之间加入以下代码:

1
2
3
4
// override config
const override = require(paths.configOverrides);
const overrideFn = override || ((config, env) => config);
const overrideConfig = overrideFn(config, process.env.NODE_ENV);

overrideConfig 就是修改后的 webpack 对象,最后修改调用了 webpack 对象的代码,将原来的 webpack 对象替换成修改后的 webpack 对象。

总结

CRA 是一个非常棒的 React 脚手架工具,但你如果不满足于它的 webpack 默认配置,你可以通过上述几种方式来扩展自己项目的 webpack 配置,这几种方式各有优缺点,可以结合具体的使用场景来选择合适自己的方式。

本文章转自此处

el-input监听事件失效

发表于 2017-08-03 | 分类于 javascript , element

在使用vue的时候使用element-ui的el-input组件的时候监听不了keyup.enter回车事件,查了一下原因应该是element-ui自身封装了一层input标签之后,把原来的事件隐藏了,所以如下代码运行是无响应的:

1
<el-input v-model="input" @keyup.enter="add" placeholder="请输入内容" ></el-input>

在@keyup.enter后加.native即可解决 如下所示

1
<el-input v-model="input" @keyup.enter.native="add" placeholder="请输入内容" ></el-input>

实验了之后发现不仅仅是keyup.enter回车事件,其他事件也被隐藏,需要在其后加.native

call()和apply()使用

发表于 2017-06-22 | 分类于 javascript

看到apply()和call()的时候感觉两者很像,所以整理一下用法顺便记录两者的区别

apply()

Function.apply(obj,args)

参数

obj
在 Function 函数运行时指定的 this 值。需要注意的是,指定的 this 值并不一定是该函数执行时真正的 this 值,如果这个函数处于非严格模式下,则指定为 null 或 undefined 时会自动指向全局对象(浏览器中就是window对象),同时值为原始值(数字,字符串,布尔值)的 this 会指向该原始值的自动包装对象。
args
一个数组或者类数组对象,其中的数组元素将作为单独的参数传给 Function 函数。如果该参数的值为null 或 undefined,则表示不需要传入任何参数。从ECMAScript 5 开始可以使用类数组对象。浏览器兼容性请参阅本文底部内容。

call()

Function.call(obj[, arg1[, arg2[, …]]])

参数

obj
在fun函数运行时指定的this值。需要注意的是,指定的this值并不一定是该函数执行时真正的this值,如果这个函数处于非严格模式下,则指定为null和undefined的this值会自动指向全局对象(浏览器中就是window对象),同时值为原始值(数字,字符串,布尔值)的this会指向该原始值的自动包装对象。
arg1, arg2, …
指定的参数列表。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
function Product(name, price) {
this.name = name;
this.price = price;
}
function Food(name, price,category) {
Product.apply(this,arguments);
this.category = category;
}
var student = new Food("qian",21,"一年级");
console.log(student);
//Food {name: "qian", price: 21, category: "一年级"}
function good(name, price,category) {
Product.call(this,name,price);
this.category = category;
}
var li = new good("jingxin",21,"一年级");
console.log(li);
//good {name: "jingxin", price: 21, category: "一年级"}

在一个子构造函数中,你可以通过调用父构造函数的apply/call方法来实现继承,Product.apply(this,arguments); Product.call(this,name,price); 实际他们的作用就是将Product函数中的name,price属性继承到了自身函数中。

两者的区别很明显一个参数的形式是数组,一个指定的参数列表。

apply()的其他用法

可以将一个数组默认的转换为一个参数列表[param1,param2,param3] 转换为 param1,param2,param3

Math.max() 方法可返回指定的数中带有较大的值的那个数。
Math.max([param1,param2])是不支持的

1
2
3
var a = [1,2,3,4];
var b = Math.max.apply(null,a);
// b 4

同理的还有Math.min()

ESLint配置参数

发表于 2017-06-07 | 分类于 javascript

ESLint 主要有以下特点:
默认规则包含所有 JSLint、JSHint 中存在的规则,易迁移;
规则可配置性高:可设置「警告」、「错误」两个 error 等级,或者直接禁用;
包含代码风格检测的规则(可以丢掉 JSCS 了);
支持插件扩展、自定义规则。

配置
可以通过以下三种方式配置 ESLint:
使用 .eslintrc 文件(支持 JSON 和 YAML 两种语法);
在 package.json 中添加 eslintConfig 配置块;
直接在代码文件中定义。

以下是.eslintrc 文件示例和解释:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
"no-alert": 0,//禁止使用alert confirm prompt
"no-array-constructor": 2,//禁止使用数组构造器
"no-bitwise": 0,//禁止使用按位运算符
"no-caller": 1,//禁止使用arguments.caller或arguments.callee
"no-catch-shadow": 2,//禁止catch子句参数与外部作用域变量同名
"no-class-assign": 2,//禁止给类赋值
"no-cond-assign": 2,//禁止在条件表达式中使用赋值语句
"no-console": 2,//禁止使用console
"no-const-assign": 2,//禁止修改const声明的变量
"no-constant-condition": 2,//禁止在条件中使用常量表达式 if(true) if(1)
"no-continue": 0,//禁止使用continue
"no-control-regex": 2,//禁止在正则表达式中使用控制字符
"no-debugger": 2,//禁止使用debugger
"no-delete-var": 2,//不能对var声明的变量使用delete操作符
"no-div-regex": 1,//不能使用看起来像除法的正则表达式/=foo/
"no-dupe-keys": 2,//在创建对象字面量时不允许键重复 {a:1,a:1}
"no-dupe-args": 2,//函数参数不能重复
"no-duplicate-case": 2,//switch中的case标签不能重复
"no-else-return": 2,//如果if语句里面有return,后面不能跟else语句
"no-empty": 2,//块语句中的内容不能为空
"no-empty-character-class": 2,//正则表达式中的[]内容不能为空
"no-empty-label": 2,//禁止使用空label
"no-eq-null": 2,//禁止对null使用==或!=运算符
"no-eval": 1,//禁止使用eval
"no-ex-assign": 2,//禁止给catch语句中的异常参数赋值
"no-extend-native": 2,//禁止扩展native对象
"no-extra-bind": 2,//禁止不必要的函数绑定
"no-extra-boolean-cast": 2,//禁止不必要的bool转换
"no-extra-parens": 2,//禁止非必要的括号
"no-extra-semi": 2,//禁止多余的冒号
"no-fallthrough": 1,//禁止switch穿透
"no-floating-decimal": 2,//禁止省略浮点数中的0 .5 3.
"no-func-assign": 2,//禁止重复的函数声明
"no-implicit-coercion": 1,//禁止隐式转换
"no-implied-eval": 2,//禁止使用隐式eval
"no-inline-comments": 0,//禁止行内备注
"no-inner-declarations": [2, "functions"],//禁止在块语句中使用声明(变量或函数)
"no-invalid-regexp": 2,//禁止无效的正则表达式
"no-invalid-this": 2,//禁止无效的this,只能用在构造器,类,对象字面量
"no-irregular-whitespace": 2,//不能有不规则的空格
"no-iterator": 2,//禁止使用__iterator__ 属性
"no-label-var": 2,//label名不能与var声明的变量名相同
"no-labels": 2,//禁止标签声明
"no-lone-blocks": 2,//禁止不必要的嵌套块
"no-lonely-if": 2,//禁止else语句内只有if语句
"no-loop-func": 1,//禁止在循环中使用函数(如果没有引用外部变量不形成闭包就可以)
"no-mixed-requires": [0, false],//声明时不能混用声明类型
"no-mixed-spaces-and-tabs": [2, false],//禁止混用tab和空格
"linebreak-style": [0, "windows"],//换行风格
"no-multi-spaces": 1,//不能用多余的空格
"no-multi-str": 2,//字符串不能用\换行
"no-multiple-empty-lines": [1, {"max": 2}],//空行最多不能超过2行
"no-native-reassign": 2,//不能重写native对象
"no-negated-in-lhs": 2,//in 操作符的左边不能有!
"no-nested-ternary": 0,//禁止使用嵌套的三目运算
"no-new": 1,//禁止在使用new构造一个实例后不赋值
"no-new-func": 1,//禁止使用new Function
"no-new-object": 2,//禁止使用new Object()
"no-new-require": 2,//禁止使用new require
"no-new-wrappers": 2,//禁止使用new创建包装实例,new String new Boolean new Number
"no-obj-calls": 2,//不能调用内置的全局对象,比如Math() JSON()
"no-octal": 2,//禁止使用八进制数字
"no-octal-escape": 2,//禁止使用八进制转义序列
"no-param-reassign": 2,//禁止给参数重新赋值
"no-path-concat": 0,//node中不能使用__dirname或__filename做路径拼接
"no-plusplus": 0,//禁止使用++,--
"no-process-env": 0,//禁止使用process.env
"no-process-exit": 0,//禁止使用process.exit()
"no-proto": 2,//禁止使用__proto__属性
"no-redeclare": 2,//禁止重复声明变量
"no-regex-spaces": 2,//禁止在正则表达式字面量中使用多个空格 /foo bar/
"no-restricted-modules": 0,//如果禁用了指定模块,使用就会报错
"no-return-assign": 1,//return 语句中不能有赋值表达式
"no-script-url": 0,//禁止使用javascript:void(0)
"no-self-compare": 2,//不能比较自身
"no-sequences": 0,//禁止使用逗号运算符
"no-shadow": 2,//外部作用域中的变量不能与它所包含的作用域中的变量或参数同名
"no-shadow-restricted-names": 2,//严格模式中规定的限制标识符不能作为声明时的变量名使用
"no-spaced-func": 2,//函数调用时 函数名与()之间不能有空格
"no-sparse-arrays": 2,//禁止稀疏数组, [1,,2]
"no-sync": 0,//nodejs 禁止同步方法
"no-ternary": 0,//禁止使用三目运算符
"no-trailing-spaces": 1,//一行结束后面不要有空格
"no-this-before-super": 0,//在调用super()之前不能使用this或super
"no-throw-literal": 2,//禁止抛出字面量错误 throw "error";
"no-undef": 1,//不能有未定义的变量
"no-undef-init": 2,//变量初始化时不能直接给它赋值为undefined
"no-undefined": 2,//不能使用undefined
"no-unexpected-multiline": 2,//避免多行表达式
"no-underscore-dangle": 1,//标识符不能以_开头或结尾
"no-unneeded-ternary": 2,//禁止不必要的嵌套 var isYes = answer === 1 ? true : false;
"no-unreachable": 2,//不能有无法执行的代码
"no-unused-expressions": 2,//禁止无用的表达式
"no-unused-vars": [2, {"vars": "all", "args": "after-used"}],//不能有声明后未被使用的变量或参数
"no-use-before-define": 2,//未定义前不能使用
"no-useless-call": 2,//禁止不必要的call和apply
"no-void": 2,//禁用void操作符
"no-var": 0,//禁用var,用let和const代替
"no-warning-comments": [1, { "terms": ["todo", "fixme", "xxx"], "location": "start" }],//不能有警告备注
"no-with": 2,//禁用with
"array-bracket-spacing": [2, "never"],//是否允许非空数组里面有多余的空格
"arrow-parens": 0,//箭头函数用小括号括起来
"arrow-spacing": 0,//=>的前/后括号
"accessor-pairs": 0,//在对象中使用getter/setter
"block-scoped-var": 0,//块语句中使用var
"brace-style": [1, "1tbs"],//大括号风格
"callback-return": 1,//避免多次调用回调什么的
"camelcase": 2,//强制驼峰法命名
"comma-dangle": [2, "never"],//对象字面量项尾不能有逗号
"comma-spacing": 0,//逗号前后的空格
"comma-style": [2, "last"],//逗号风格,换行时在行首还是行尾
"complexity": [0, 11],//循环复杂度
"computed-property-spacing": [0, "never"],//是否允许计算后的键名什么的
"consistent-return": 0,//return 后面是否允许省略
"consistent-this": [2, "that"],//this别名
"constructor-super": 0,//非派生类不能调用super,派生类必须调用super
"curly": [2, "all"],//必须使用 if(){} 中的{}
"default-case": 2,//switch语句最后必须有default
"dot-location": 0,//对象访问符的位置,换行的时候在行首还是行尾
"dot-notation": [0, { "allowKeywords": true }],//避免不必要的方括号
"eol-last": 0,//文件以单一的换行符结束
"eqeqeq": 2,//必须使用全等
"func-names": 0,//函数表达式必须有名字
"func-style": [0, "declaration"],//函数风格,规定只能使用函数声明/函数表达式
"generator-star-spacing": 0,//生成器函数*的前后空格
"guard-for-in": 0,//for in循环要用if语句过滤
"handle-callback-err": 0,//nodejs 处理错误
"id-length": 0,//变量名长度
"indent": [2, 4],//缩进风格
"init-declarations": 0,//声明时必须赋初值
"key-spacing": [0, { "beforeColon": false, "afterColon": true }],//对象字面量中冒号的前后空格
"lines-around-comment": 0,//行前/行后备注
"max-depth": [0, 4],//嵌套块深度
"max-len": [0, 80, 4],//字符串最大长度
"max-nested-callbacks": [0, 2],//回调嵌套深度
"max-params": [0, 3],//函数最多只能有3个参数
"max-statements": [0, 10],//函数内最多有几个声明
"new-cap": 2,//函数名首行大写必须使用new方式调用,首行小写必须用不带new方式调用
"new-parens": 2,//new时必须加小括号
"newline-after-var": 2,//变量声明后是否需要空一行
"object-curly-spacing": [0, "never"],//大括号内是否允许不必要的空格
"object-shorthand": 0,//强制对象字面量缩写语法
"one-var": 1,//连续声明
"operator-assignment": [0, "always"],//赋值运算符 += -=什么的
"operator-linebreak": [2, "after"],//换行时运算符在行尾还是行首
"padded-blocks": 0,//块语句内行首行尾是否要空行
"prefer-const": 0,//首选const
"prefer-spread": 0,//首选展开运算
"prefer-reflect": 0,//首选Reflect的方法
"quotes": [1, "single"],//引号类型 `` "" ''
"quote-props":[2, "always"],//对象字面量中的属性名是否强制双引号
"radix": 2,//parseInt必须指定第二个参数
"id-match": 0,//命名检测
"require-yield": 0,//生成器函数必须有yield
"semi": [2, "always"],//语句强制分号结尾
"semi-spacing": [0, {"before": false, "after": true}],//分号前后空格
"sort-vars": 0,//变量声明时排序
"space-after-keywords": [0, "always"],//关键字后面是否要空一格
"space-before-blocks": [0, "always"],//不以新行开始的块{前面要不要有空格
"space-before-function-paren": [0, "always"],//函数定义时括号前面要不要有空格
"space-in-parens": [0, "never"],//小括号里面要不要有空格
"space-infix-ops": 0,//中缀操作符周围要不要有空格
"space-return-throw-case": 2,//return throw case后面要不要加空格
"space-unary-ops": [0, { "words": true, "nonwords": false }],//一元运算符的前/后要不要加空格
"spaced-comment": 0,//注释风格要不要有空格什么的
"strict": 2,//使用严格模式
"use-isnan": 2,//禁止比较时使用NaN,只能用isNaN()
"valid-jsdoc": 0,//jsdoc规则
"valid-typeof": 2,//必须使用合法的typeof的值
"vars-on-top": 2,//var必须放在作用域顶部
"wrap-iife": [2, "inside"],//立即执行函数表达式的小括号风格
"wrap-regex": 0,//正则表达式字面量用小括号包起来
"yoda": [2, "never"]//禁止尤达条件

数组合并

发表于 2017-04-04 | 分类于 javascript

第一种

1
2
var a = [1,2], b = [3,4], c = a.concat(b);
// c [1,2,3,4]

第二种

1
2
3
4
var a = [4,5,6],
var b = [7,8,9];
Array.prototype.push.apply(a, b);
// a [4, 5, 6, 7, 8, 9]

Object.defineProperty()

发表于 2017-03-11 | 分类于 javascript

学习记录

语法

Object.defineProperty(obj, prop, descriptor)

参数

obj
需要被操作的目标对象
prop
目标对象需要定义或修改的属性的名称。
descriptor
将被定义或修改的属性的描述符。

其中descriptor包括数据描述符和存取描述符

数据描述符和存取描述符均具有以下可选键值:

configurable
当且仅当该属性的 configurable 为 true 时,该属性描述符才能够被改变,同时该属性也能从对应的对象上被删除。默认为 false。
enumerable
当且仅当该属性的 enumerable 为 true 时,该属性才能够出现在对象的枚举属性中。默认为 false。
数据描述符同时具有以下可选键值:

value
该属性对应的值。可以是任何有效的 JavaScript 值(数值,对象,函数等)。默认为 undefined。
writable
当且仅当该属性的 writable 为 true 时,该属性才能被赋值运算符改变。默认为 false。
存取描述符同时具有以下可选键值:

get
一个给属性提供 getter 的方法,如果没有 getter 则为 undefined。该方法返回值被用作属性值。默认为 undefined。
set
一个给属性提供 setter 的方法,如果没有 setter 则为 undefined。该方法将接受唯一参数,并将该参数的新值分配给该属性。默认为 undefined。
以上摘自MDN

实践

创建属性

如果对象中不存在指定的属性,Object.defineProperty()就创建这个属性。当描述符中省略某些字段时,这些字段将使用它们的默认值。拥有布尔值的字段的默认值都是false。value,get和set字段的默认值为undefined。定义属性时如果没有get/set/value/writable,那它被归类为数据描述符。

1
2
3
4
5
6
7
8
9
10
11
12
13
const log = console.log.bind(console)
function foo(){}
Object.defineProperty(foo.prototype,'z',{get:function(){return 1}})
var obj = new foo()
log(obj.z) //1 obj 无z属性 根据原型链查找foo.prototype的z属性,因为有get方法所以return 1
obj.z = 10 修改obj.z
log(obj.z) //1
因为obj.z虽然无z属性,根据原型链查找的时候 发现有对应的z的get方法或者set方法
尝试赋值的时候是会通过get和set方法来走的。不会变成给当前obj添加一个z属性。
Object.defineProperty(obj,'z',{value:100,configurable:true,writable:true})
log(obj.z) //100 通过Object.defineProperty方式来给obj添加z属性
obj.z = 200
log(obj.z) //200 200是因为writable:true 可以修改属性值

查找属性标签

1
2
3
4
Object.getOwnPropertyDescriptor({a:true},'a')
// {value: true, writable: true, enumerable: true, configurable: true}
Object.getOwnPropertyDescriptor({b:true},'a') //undefined 对象里无a属性

顺便上一张图


摘自imooc

ES6关于数组实例的一些方法

发表于 2017-03-10 | 分类于 javascript

Array.from()

将两类对象转为真正的数组

Array.from方法用于将两类对象转为真正的数组:类似数组的对象(array-like object)和可遍历(iterable)的对象(包括ES6新增的数据结构Set和Map)。

一个转换类数组对象到数组的一个示例:

1
2
3
4
5
let list = document.querySelectorAll('ul.fancy li');
Array.from(list).forEach(function (li) {
document.write(li);
});

上面代码中,querySelectorAll方法返回的是一个类似数组的对象,只有将这个对象转为真正的数组,才能使用forEach方法。
任何有length属性的对象,都可以通过Array.from方法转为数组。

1
2
let array = Array.from({ 0: "a", 1: "b", 2: "c", length: 3 });
document.write(array); // [ "a", "b" , "c" ]

Array.from()还可以接受第二个参数,作用类似于数组的map方法,用来对每个元素进行处理。

1
2
3
4
5
let array = [0,1,2,3,4];
let arrNew = Array.from(array, x => x * x);
console.log(arrNew);
// 等同于
let arrNew = Array.from(array).map(x => x * x);

Array.of()

将值转换为数组

Array.of方法用于将一组值,转换为数组。

1
2
3
Array.of(3, 11, 8) // [3,11,8]
Array.of(3) // [3]
Array.of(3).length // 1

这个方法的主要目的,是弥补数组构造函数Array()的不足。因为参数个数的不同,会导致Array()的行为有差异。

1
2
3
Array() // []
Array(3) // [undefined, undefined, undefined]
Array(3,11,8) // [3, 11, 8]

上面代码说明,只有当参数个数不少于2个,Array()才会返回由参数组成的新数组。

find()和findIndex()

找出第一个符合条件的数组成员和位置

find()

数组实例的find方法,用于找出第一个符合条件的数组成员。它的参数是一个回调函数,所有数组成员依次执行该回调函数,直到找出第一个返回值为true的成员,然后返回该成员。如果没有符合条件的成员,则返回undefined。

1
2
let array = [1, 4, -5, 10].find((n) => n < 0);
document.write("array:", array);

上面代码找出数组中第一个小于0的成员。

1
2
3
4
let array = [1, 5, 10, 15].find(function(value, index, arr) {
return value > 9;
})
document.write(array); // 10

上面代码中,find方法的回调函数可以接受三个参数,依次为当前的值、当前的位置和原数组。

findIndex()

数组实例的findIndex方法,用法与find方法非常类似,返回第一个符合条件的数组成员的位置,如果所有成员都不符合条件,则返回-1。

1
2
3
4
let index = [1, 5, 10, 15].findIndex(function(value, index, arr) {
return value > 9;
})
document.write(index); // 2

这两个方法都可以接受第二个参数,用来绑定回调函数的this对象。

另外,这两个方法都可以发现NaN,弥补了数组的IndexOf方法的不足。

1
2
3
4
5
[NaN].indexOf(NaN)
// -1
[NaN].findIndex(y => Object.is(NaN, y))
// 0

上面代码中,indexOf方法无法识别数组的NaN成员,但是findIndex方法可以借助Object.is方法做到。

fill()

fill()使用给定值,填充一个数组。

1
2
3
4
5
let arr = ['a', 'b', 'c'].fill(7)
document.write(arr); // [7, 7, 7]
let newArr = new Array(3).fill(7)
document.write(newArr); // [7, 7, 7]

上面代码表明,fill方法用于空数组的初始化非常方便。数组中已有的元素,会被全部抹去。

fill()还可以接受第二个和第三个参数,用于指定填充的起始位置和结束位置。

1
2
let newArr = ['a', 'b', 'c'].fill(7, 1, 2)
document.write(newArr); // ['a', 7, 'c']

三个新的方法

ES6提供三个新的方法:

·entries()
·keys()
·values()
用于遍历数组。它们都返回一个遍历器,可以用for…of循环进行遍历,唯一的区别是keys()是对键名的遍历、values()是对键值的遍历,entries()是对键值对的遍历。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
for (let index of ['a', 'b'].keys()) {
document.write(index);
}
// 0
// 1
for (let elem of ['a', 'b'].values()) {
document.write(elem);
}
// 'a'
// 'b'
for (let [index, elem] of ['a', 'b'].entries()) {
document.write(index, elem);
}
// 0 "a"
// 1 "b"

String()与 .toString()的区别

发表于 2017-02-15 | 分类于 javascript

String()与 .toString()都是可以转换为字符串类型,但是两者还是有区别的

.toString()可以将所有的的数据都转换为字符串,但是要排除null 和 undefined,.toString() 括号中的可以写一个数字,代表进制,对应进制字符串

二进制:.toString(2);

八进制:.toString(8);

十进制:.toString(10);

十六进制:.toString(16);

1
2
3
4
5
6
7
8
9
10
var str = false.toString();
console.log(str, typeof str);
// false,string
var str = null.toString();
console.log(str, typeof str);
// 报错
var str = undefined.toString();
console.log(str, typeof str);
// 报错

String()可以将null和undefined转换为字符串,但是没法转进制字符串

1
2
3
4
5
6
7
var str = String(null);
console.log(str, typeof str);
// null string
var str = String(undefined);
console.log(str, typeof str);
// undefined string
12
照彦

照彦

这里是懒人的小屋

19 日志
10 分类
10 标签
GitHub 知乎
粤ICP备16123805号-2
© 2016 - 2019 照彦
由 Hexo 强力驱动
主题 - NexT.Pisces