You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 

160 lines
7.5 KiB

---
title: JS中那些惊艳的操作
titleEN: Those amazing operations in JS
date: 2019-03-19
categories:
- tech
tags:
- nodeJS
---
{% raw %}<span class=".zh">{% endraw %}
教你如何一步步迷上JS.. ╮(╯▽╰)╭
{% raw %}</span>{% endraw %}
{% raw %}<span class=".en">{% endraw %}
Teach you how to fall in love with JS step by step.. ╮(╯▽╰)╭
{% raw %}</span>{% endraw %}
<!--more-->
{% raw %}
<script>
session.onload(function(){
if(page.tran.getLang() == 'en'){
tips.warning({
title: 'Caution',
position: 'topRight',
message: 'This page was translated by Machine!!',
buttons: [['<button>Show Original Page</button>', function (instance, toast) {
page.tran.setLang('zh');
instance.hide({ transitionOut: 'fadeOut' }, toast, 'button');
}, true]]
});
}
});
</script>
{% endraw %}
{% raw %}<span class=".zh">{% endraw %}
好嘀,只是一些总结
## JS中的那些萌点
- `<script>`标签中,合理使用`defer="defer"`(延迟执行),`async="async"`(异步执行)
- 外部JS可以使用其它扩展名(如.php),但必须返回正确MINE类型
- 使用`var obj = preferredObj || backupObj;` 提供后备值 ::aru:surprised::
- 函数中使用`arguements[]`获取参数
- 无函数签名,再见吧重载 ::aru:meditation::
- 函数无引用传参,只要不作死用全局变量,封装就很完美
- 神奇的垃圾收集功能,开发时无需考虑手动释放内存
- 函数传参使用`function hh({})`直接传包含参数的对象,更加灵活
- 数组每一个位置可以存不同类型的数据 ::aru:blood2::
- 数组支持模拟栈操作,如`push()`和`pop()`
- 数组支持模拟队列操作,如`push()`和`shift()`
- 数组支持从相反方向模拟队列,如`unshift()`和`pop()`
- `sort()`可自定义比较函数为参数
- 数组`splice()`可太好用了吧
- 函数是对象,函数名是指针
- 可以像传递参数一样把一个函数传给另一个函数,也可以将一个函数作为另一个函数的结果返回
- 函数中可通过`arguments.callee`获取当前函数名指针
- 使用`arguments.callee.caller`获取调用当前函数的引用
- 使用`function.apply(this/*作用域*/, arguments)`或`function.call(this, arg1, arg2...)`指定作用域运行函数
- 使用函数固有属性`function.length`获取其期待的参数个数
- 通过函数继承属性`toLocaleString()``toString()``valueOf()`返回代码,方便调试
- 使用`indexOf()``lastIndexOf()`查找元素出现位置
- `trim()`删除字符串开头结尾空格
- 支持正则`RegExp`
- 神奇但可怕的`eval("")`可将字符串转译成代码并就地执行
- `encodeURI()/decodeURI()`与`encodeURIComponent()/decodeURICompoent()`处理uri
- 立即调用函数`function(){}();`
- 内置Math对象
- Math中`ceil()``floor()``round()`向上,向下,标准舍入
- `Math.random()`大于零小于一随机数
- 对象中使用`functionName: function(){}`直接定义函数
- ES6中`(x)=>x+1`等价于`function(x){return x+1;}`
- 使用`;(function(name, context, definition){moudle.exports = definition();})('funationName', this, function(){});`封装模块
## 小心得
- 不建议使用`with`语句
- `label`标签少用
- `0.1 + 0.2 != 0.3` 浮点型天坑,与C类似
- `~26 == -27` 利用按位非提高效率
- 标识符查询由内部环境向外部环境进行
- 没有块级作用域,与C++不同
- `var obj2 = obj1;`实际是引用
- 函数传参时传对象,实际传的是指针
- 全局变量用完及时置为null以提性能
- 使用变量属性访问对象只能使用`obj[var]`
- `var sum = function sum(){};`在Safari中会报错
- 不能为基本类型值添加属性和方法
- `new Number("25")`返回对象,而`Number("25")`返回25
- 布尔表达式中对象均为true
{% raw %}</span>{% endraw %}
{% raw %}<span class=".en">{% endraw %}
Okay, just some summary
## Those cute points in JS
- In the `<script>` tag, reasonably use `defer="defer"` (delayed execution) and `async="async"` (asynchronous execution)
- External JS can use other extensions (such as .php), but must return the correct MINE type
- Use `var obj = preferredObj || backupObj;` to provide a backup value ::aru:surprised::
- Use `arguements[]` to get parameters in the function
- No function signature, goodbye overload ::aru:meditation::
- The function has no reference to pass parameters, as long as the global variable is not used for deadly, the encapsulation is perfect
- Magic garbage collection function, no need to consider manually releasing memory during development
- Use `function hh({})` to pass parameters directly to functions, which is more flexible
- Each position of the array can store different types of data ::aru:blood2::
- Array supports simulated stack operations, such as `push()` and `pop()`
- Array supports simulated queue operations, such as `push()` and `shift()`
- Array supports simulating queues from the opposite direction, such as `unshift()` and `pop()`
- `sort()` can customize the comparison function as a parameter
- The array `splice()` is so easy to use, right?
- Functions are objects and function names are pointers
- You can pass a function to another function as parameters, or you can return a function as the result of another function
- In the function, the current function name pointer can be obtained through `arguments.callee`
- Use `arguments.callee.caller` to get a reference to call the current function
- Use `function.apply(this/*scope*/, arguments)` or `function.call(this, arg1, arg2...)` to specify the scope to run the function
- Use the function intrinsic property `function.length` to get the number of expected parameters
- Inherit the property `toLocaleString(), toString(), and valueOf()` return code through the function to facilitate debugging
- Use `indexOf() and lastIndexOf()` to find the element's appearance
- `trim()` delete spaces at the beginning and end of the string
- Support regular `RegExp`
- The magical but terrible `eval("")` can translate the string into code and execute it in place
- `encodeURI()/decodeURI()` and `encodeURIComponent()/decodeURICompoent()` handle uri
- Call the function immediately `function()()();`
- Built-in Math object
- `ceil(), floor(), round()` in Math up, down, standard rounding
- `Math.random()` is a random number greater than zero and less than one
- Use `functionName: function(){}` in the object to directly define the function
- In ES6 `(x)=>x+1` is equivalent to `function(x){return x+1;}`
- Use `;(function(name, context, definition){moudle.exports = definition();})('funationName', this, function()());` to encapsulate the module
## Be careful
- It is not recommended to use `with` statement
- Less use of `label`
- `0.1 + 0.2 != 0.3` floating point tiankeng, similar to C
- `~26 == -27` Use bitwise not to improve efficiency
- Identifier query is carried out from the internal environment to the external environment
- No block-level scope, different from C++
- `var obj2 = obj1;` is actually a reference
- The object is passed when the function is passed, but the pointer is actually passed
- Set global variables to null when used up to improve performance
- Use variable attributes to access objects can only use `obj[var]`
- `var sum = function sum(){};` will report an error in Safari
- You cannot add attributes and methods to basic type values
- `new Number("25")` returns the object, and `Number("25")` returns 25
- All objects in Boolean expressions are true
{% raw %}</span>{% endraw %}