# 初级篇

## 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

# 总结

【报表福利大放送】100余套报表模板免费下载

1分钟选好最合适你的JavaScript框架

Top 10 JavaScript编辑器，你在用哪个？

posted @ 2017-10-24 10:40 葡萄城技术团队 阅读(...) 评论(...) 编辑 收藏