2017/10/24 10:41

# 初级篇

## 1、三目运算符

const x = 20;
if (x > 10) {
} else {
}

const answer = x > 10 ? 'greater than 10' : 'less than 10';

## 2、循环语句

for (let i = 0; i < allImgs.length; i++)

for (let index of allImgs)

function logArrayElements(element, index, array) {
console.log("a[" + index + "] = " + element);
}
[2, 5, 9].forEach(logArrayElements);
// logs:
// a[0] = 2
// a[1] = 5
// a[2] = 9

## 3、声明变量

let x;
let y;
let z = 3;

let x, y, z=3;

## 4、if 语句

if (likeJavaScript === true)

if (likeJavaScript)

## 5、十进制数

for (let i = 0; i < 10000; i++) { }

for (let i = 0; i < 1e7; i++) { }

## 6、多行字符串

const lorem = 'Lorem ipsum dolor sit amet, consectetur\n\t'
+ 'adipisicing elit, sed do eiusmod tempor incididunt\n\t'
+ 'ut labore et dolore magna aliqua. Ut enim ad minim\n\t'
+ 'veniam, quis nostrud exercitation ullamco laboris\n\t'
+ 'nisi ut aliquip ex ea commodo consequat. Duis aute\n\t'
+ 'irure dolor in reprehenderit in voluptate velit esse.\n\t'

const lorem = Lorem ipsum dolor sit amet, consectetur
adipisicing elit, sed do eiusmod tempor incididunt
ut labore et dolore magna aliqua. Ut enim ad minim
veniam, quis nostrud exercitation ullamco laboris
nisi ut aliquip ex ea commodo consequat. Duis aute
irure dolor in reprehenderit in voluptate velit esse.

# 高级篇

## 1、变量赋值

if (variable1 !== null || variable1 !== undefined || variable1 !== '') {
let variable2 = variable1;
}

const variable2 = variable1  || 'new';

let variable1;
let variable2 = variable1  || '';
console.log(variable2 === ''); // prints true
variable1 = 'foo';
variable2 = variable1  || '';
console.log(variable2); // prints foo

## 2、默认值赋值

let dbHost;
if (process.env.DB_HOST) {
dbHost = process.env.DB_HOST;
} else {
dbHost = 'localhost';
}

const dbHost = process.env.DB_HOST || 'localhost';

## 3、对象属性

ES6 提供了一个很简单的办法，来分配属性的对象。如果属性名与 key 名相同，则可以使用简写。

const obj = { x:x, y:y };

const obj = { x, y };

## 4、箭头函数

function sayHello(name) {
console.log('Hello', name);
}

setTimeout(function() {
}, 2000);

list.forEach(function(item) {
console.log(item);
});

sayHello = name => console.log('Hello', name);
list.forEach(item => console.log(item));

## 5、隐式返回值

function calcCircumference(diameter) {
return Math.PI * diameter
}

calcCircumference = diameter => (
Math.PI * diameter;
)

## 6、默认参数值

function volume(l, w, h) {
if (w === undefined)
w = 3;
if (h === undefined)
h = 4;
return l * w * h;
}

volume = (l, w = 3, h = 4 ) => (l * w * h);
volume(2) //output: 24

## 7、模板字符串

ES6 提供了相应的方法，我们可以使用反引号和 ${ } 将变量合成一个字符串。 const welcome = 'You have logged in as ' + first + ' ' + last + '.' const db = 'http://' + host + ':' + port + '/' + database; 简写为： const welcome = You have logged in as${first} ${last}; const db = http://${host}:${port}/${database};

## 8、解构赋值

const observable = require('mobx/observable');
const action = require('mobx/action');
const runInAction = require('mobx/runInAction');
const store = this.props.store;
const form = this.props.form;
const errors = this.props.errors;
const entity = this.props.entity;

import { observable, action, runInAction } from 'mobx';
const { store, form, loading, errors, entity } = this.props;

const { store, form, loading, errors, entity:contact } = this.props;

## 9、展开运算符

// joining arrays
const odd = [1, 3, 5];
const nums = [2 ,4 , 6].concat(odd);

// cloning arrays
const arr = [1, 2, 3, 4];
const arr2 = arr.slice( )

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

// cloning arrays
const arr = [1, 2, 3, 4];
const arr2 = [...arr];

const odd = [1, 3, 5 ];
const nums = [2, ...odd, 4 , 6];

const { a, b, ...z } = { a: 1, b: 2, c: 3, d: 4 };
console.log(a) // 1
console.log(b) // 2
console.log(z) // { c: 3, d: 4 }

## 10、强制参数

function foo(bar) {
if(bar === undefined) {
throw new Error('Missing parameter!');
}
return bar;
}

mandatory = ( ) => {
throw new Error('Missing parameter!');
}
foo = (bar = mandatory( )) => {
return bar;
}

## 11、Array.find

const pets = [
{ type: 'Dog', name: 'Max'},
{ type: 'Cat', name: 'Karl'},
{ type: 'Dog', name: 'Tommy'},
]
function findDog(name) {
for(let i = 0; i<pets.length; ++i) {
if(pets[i].type === 'Dog' && pets[i].name === name) {
return pets[i];
}
}
}

pet = pets.find(pet => pet.type ==='Dog' && pet.name === 'Tommy');
console.log(pet); // { type: 'Dog', name: 'Tommy' }

## 12、Object [key]

function validate(values) {
if(!values.first)
return false;
if(!values.last)
return false;
return true;
}
console.log(validate({first:'Bruce',last:'Wayne'})); // true

// object validation rules
const schema = {
first: {
required:true
},
last: {
required:true
}
}

// universal validation function
const validate = (schema, values) => {
for(field in schema) {
if(schema[field].required) {
if(!values[field]) {
return false;
}
}
}
return true;
}
console.log(validate(schema, {first:'Bruce'})); // false
console.log(validate(schema, {first:'Bruce',last:'Wayne'})); // true

## 13、双位操作符

Math.floor(4.9) === 4  //true

~~4.9 === 4  //true

# JavaScript 开发工具推荐

SpreadJS 纯前端表格控件是基于 HTML5 的 JavaScript 电子表格和网格功能控件，提供了完备的公式引擎、排序、过滤、输入控件、数据可视化、Excel 导入/导出等功能，适用于 .NET、Java 和移动端等各平台在线编辑类 Excel 功能的表格程序开发。

# 关于葡萄城

15
108 收藏

### 作者的其它热门文章

05/14 17:46

2017/10/28 20:14

2017/10/26 23:22

2017/10/26 01:01

!== 是不是不用 || 关联,&& 这个比较好?
2017/10/24 17:45

2017/10/24 13:33

7 评论
108 收藏
15