JavaScript 常用Js -个人收藏

JavaScript 常用 Js

最近查看ES5、ES6、ES7、ES8 区别时，发现一些Js常用的写法，比较便捷。借此收藏一些语句，便于日后使用。

//将两个数组连接合并为一个 
let arrA =[10,20,30]
let arrB = [40,50,60]
let arrC = [...arrA,...arrB]

//数组去掉重复项
let arrD = [30,30,40,40,50,50]
let arrE =[...new Set(arrD)]

//查找索引
[10,20,30].indexOf(20)

//遍历数组
[10,20,30].forEach((value,index)=>{
	console.log(`${value} ${index}`)
})

//映射新数组
let arrF = [10,20,30].map(v=>v*2)

//检验数组中每个元素
[10,20,30].every(v=>v>10)

//是否有元素通过测试
[10,20,30].some(v=>v>10)

//过滤数组
[10,20,30].filter(v=>v>10)

//获取对象的key、value、es6遍历数组
Object.keys({a:1,b:2},{a:3,b:11})
Object.values({a:1,b:2},{a:3,b:11})
Object.entries({a:1,b:2},{a:3,b:11})

//获取对象里元素数量
Object.keys({a:1,b:2},{a:3,b:11}).length

前言

ECMAScript是ECMA组织制定的脚本语言规范，该规范来源于网景的Javascript和微软的Jscript，ECMAScript-262明确的定义了JavaScript。最初，JavaScript由Brendan Eich发明，最先出现在Navigator 2.0浏览器中。ES大会定期整理并发布新的JS版本。

ES版本	发布时间	新增特性
ES5	200911	扩展了Object、Array、Function等的功能
ES6(2015)	201506	类、模块化、剪头函数、函数参数默认值、模版字符串、解构赋值、延展操作符、对象属性简写（对象扩展，还有计算属性）、Promise、let、const（块级作用域）、新数据结构Set、Map、Symbol
ES7(2016)	201603	Array.prototype.includes()、指数操作符
ES8(2017)	201706	async/await、Object.values()、Object.entries()、String padding、函数参数列表结

部分ES6 新增特性说明

新数据结构

• Set（不可重复元素集合）
• Map
• Symbol

类

• JS语言原来实现面向对象是直接通过原型的方式进行，这就让Java、Object-c、C#等面向对象语言的程序员比较难以理解了。随着JS能做的事情增多，因此，才会原生的引入class这个概念。我们来看看下边这段代码，来看看类与继承的代码如何写，此次需要注意的是，继承的时候，super要写在子类构造函数的最顶部。另外，从源码层面可以看出，class、extends、constructor都是prototype的语法糖。

class Animal {
    constructor(name, feature) {
        this.name = name
        this.feature = feature
    }

    toString() {
        console.log('name:' + this.name + ',feature:' + this.feature)
        // return 'Animal done'
    }
}

var animal = new Animal('monky', 'beauty')//实例化
animal.toString()

console.log(animal.hasOwnProperty('name'))//true
console.log(animal.hasOwnProperty('toString'))//false
console.log(animal.__proto__.hasOwnProperty('toString'))//true

//继承

class Cat extends Animal {
    constructor(action) {
        super('cat', 'sex')
        this.action = action
    }

    toString(){
        // console.log(super.toString())
        super.toString()
    }
}

var cat = new Cat('catch')
cat.toString()

console.log(cat instanceof Cat)//true
console.log(cat instanceof Animal)//true

模块化（Module）

ES6实现了模块化，于是告别了基于commonjs的标准，使用require.js的AMD模式和sea.js的CMD模式来实现模块化的古老方式。

模块化主要基于export（导出，还有export default）和import（引用，还有import * as）两个关键字来实现，这就为JS引入了一个相对容易理解的封装的概念（以前是基于函数作用域和闭包，通过底层直接实现，现在可以优雅的通过关键字原生实现）

export定义了对外开放的接口，import定义了引用哪些接口。模块化为js创建了比较容易理解的命名空间，防止函数的命名冲突。

export

export var name = 'Ryan'//导出变量
export const sort = Math.sqrt//导出常量
export {name, sort}//导出对象（模块）
export function aModule(){return 1000}//导出函数

import

import defaultMethod,{otherMethod} from 'aModule'//xxx.js

箭头（Arrow）函数

• => 是function的缩写
• 箭头函数与包围它的代码共享同一个this。这种情况下，就很好的解决了this的指向问题。我在写一个钱包服务器的时候，做过这样一个事情，通过定义var self = this，或者var that = this来引用外围的this，也就是我想用其他function中的this，我就需要想将其复制到一个全局的或者是类的属性上。借助=>，就不需要这种模式了。箭头函数的书写形式如下

()=>100
v=>x+1
(a,b)=>a-b
()=>{var=u}//return undefined
p=>{return 100}

箭头函数与bind的注意事项

箭头函数和bind方法，每次被执行后都会返回一个新的函数引用，因此，如果还需要对函数的引用做些事情的话（例如卸载监听器），那么你还需要保存之前的引用。以bind为例，我们说明一下：

class PauseMenu extends React.Component {
    componentWillMount() {
        AppStateIOS.addEventListener('change', this.onAppPaused.bind(this))
    }
    componentWillUnmount() {
        AppStateIOS.removeEventListener('change', this.onAppPaused.bind(this))
    }
    onAppPaused(event) { }
}

此处，因为bind每次都会调用一个新的函数引用，因此，造成卸载的不是原来的监听，造成卸载失败。此处应该修改为

class PauseMenu extends React.Component {
    constructor(props) {
        super(porps)
        this._onAppPaused = this.onAppPaused.bind(this)
    }
    componentWillMount() {
        AppStateIOS.addEventListener('change', this._onAppPaused)
    }
    componentWillUnmount() {
        AppStateIOS.removeEventListener('change', this._onAppPaused)
    }
    onAppPaused(event) { }
}

那么基于剪头函数，我们还可以使用箭头函数来做，因为箭头函数会共享包围它的this，因此，这样就可以简单明了的处理返回新的函数引用的问题了。

class PauseMenu extends React.Component {
    componentWillMount() {
        AppStateIOS.addEventListener('change', this.onAppPaused)
    }
    componentWillUnmount() {
        AppStateIOS.removeEventListener('change', this.onAppPaused)
    }
    onAppPaused = event => { }
}

函数参数默认值

function foo(height = 50,color = '#fff")

如果不使用函数默认值，就会有个小问题。

function foo (height,color) {
	var height = height||50
	var color = color||'red'
}

如果参数的布尔值是false，例如，foo（0，’’），因为0的布尔值是false，这样height的取值将会是50，color也会取red，因此，函数的默认值不仅能使代码简洁，也帮助规避一些风险

模版字符串

let name = 'name'+first+''+last+''

使用模版字符串，就简洁了很多。从此告别 +号拼接字符串的尴尬，并且还支持多行字符串

let name = `name is ${first} ${last}`

let names = `
xiaohong

zhangzhang

dada

`