西安制作网站公司哪家好/seo关键词优化要多少钱
概述
作为一名软件工程师，不管你是不是前端开发的岗位，工作中或多或少都会用到一点JavaScript。JavaScript是大家所了解的语言名称，但是这个语言名称是Oracle公司注册的商标。JavaScript的正式名称是ECMAScript。1996年11月，JavaScript的创造者网景公司将JS提交给国际化标准组织ECMA（欧洲计算机制造联合会），希望这种语言能够成为国际标准。随后，ECMA发布了规定浏览器脚本语言的标准，即ECMAScript，这也有利于这门语言的开放和中立。
ES6，全称ECMAScript 6.0，正式名称为ECMAScript 2015，是JavaScript的下一个版本标准，于2015年6月17日发布。
下面我们了解下ECMAScript的发展历程。
1997年，ECMAScript 1.0诞生。
1998年6月，ECMAScript 2.0诞生，包含一些小的更改，用于同步独立的ISO国际标准。
1999年12月，ECMAScript 3.0诞生，在业界得到了广泛的支持，它奠定了JS的基本语法。
2000年的ECMAScript 4.0是ES6的前身，但由于这个版本太过激烈，所以暂时被“和谐”了。
2009年12月，ECMAScript 5.0版正式发布。ECMA专家组预计ECMAScript的第五个版本会在2013年中期到2018年作为主流的开发标准。2011年6月，ES 5.1版发布，并且成为ISO国际标准。
2013年，ES6草案被冻结，不再添加新的功能，新的功能将被放到ES7中。
2015年6月，ES6正式通过，成为国际标准。
JavaScript ES6提出了很多新的特性，它的目标是使得JavaScript语言可以用来编写复杂的大型应用程序，成为企业级开发语言。
let关键字
let用来声明局部变量，是块级作用域。函数内部使用let定义后，对函数外部无影响，而且有暂时性死区的约束。
{ let i = 9;
}
// 提示找不到i的错误
console.log(i);let a = 99;
f();
// 输出：99
console.log(a);
function f() {// 提示找不到i的错误 console.log(a); let a = 10;// 输出：10console.log(a);
}const关键字
const用来声明常量，用它定义的变量不可以修改，而且必须初始化。常量的值不能通过重新赋值来改变，并且不能重新声明。
const foo = {};foo.prop = 123;
// 其属性可以修改，正常输出：123
console.log(foo.prop)// 报错，const变量自身不可修改
foo = {};export/import
1、export default向外暴露的成员可以使用任意的变量来接收。在一个模块中，只能使用export default向外暴露一次。
2、使用export向外暴露的成员只能使用 {} 接收，这种情况叫按需导出。一个模块中可以同时使用多个 export。如果想在引用时改变名称，可以通过as。
// test.js
export default {name: 'zs',age: 10
};export var title = "小星星";//main.js
import m1, { title } from './test'// test2.js
export var title = "小星星";
export var content = '哈哈哈';// main2.js
import { title, content } from './test2'
import { title as title123, content } from './test2'
import * as test from './test2'箭头函数
箭头函数相当于匿名函数，并且简化了函数定义。箭头函数有两种格式：第一种只包含一个表达式，连{ ... }和return都省略掉了；第二种可以包含多条语句，这时候就不能省略{ ... }和return。
() => 3.14
var double = num => num * 2
(x, y) => x * x + y * y和一般的函数不同，箭头函数不会绑定this，或者说箭头函数不会改变this本来的绑定。箭头函数内部的this是词法作用域，由上下文确定。
var obj = {birth: 1990,getAge: function () {var b = this.birth; // 1990var fn = () => new Date().getFullYear() - this.birth;return fn();}
};模板字符串
模版字符串，用`（反引号）标识，用${}将变量括起来。模板字符串中可以引入变量、反引号自身、js表达式，还能调用函数。如果使用模版字符串表示多行字符串，所有的空格和缩进都会被保存在输出中。
`He is <b>${person.name}</b>and we wish to know his${person.age}.that is all`console.log( `No matter\` what you do,I trust you.`);var x=88;
var y=100;
console.log(`x=${++x},y=${x+y}`);function test() { return “I like ES6"; }
console.log(`hello, ${test()}`);默认参数函数
默认参数函数，支持为函数的参数提供默认值，默认参数必须在所有参数的最后面。
function greet(name = 'Student', greeting = 'Welcome') {return `${greeting} ${name}!`;
}greet();
greet('James');
greet('Richard', 'Howdy');解构
解构，用于从数组和对象中提取值并赋值给独特的变量。
const point = [10, 25, -34];
const [x, y, z] = point;
console.log(x, y, z);const gemstone = {type: 'quartz',color: 'rose',karat: 21.29
};
const {type, color, karat} = gemstone;
const {type2, color2, karat2} = gemstone;
console.log(type, color, karat);...展开运算符
...，用于将数组序列化，成为逗号隔开的序列。
// 1、获取数组最大的值。
Math.max(...[1, 2, 3])// 2、调用方法
function sum(a, b){console.log(a+b)
}
sum(...[2, 3])// 3、连接数组
var arr1 = [0, 1, 2];
var arr2 = [3, 4, 5];
arr1.push(...arr2); // 4、连接数组
var arr1 = ['a', 'b'];
var arr2 = ['c'];
[...arr1, ...arr2] // 5、字符串转为真正的数组
[...'hello'] // [ "h", "e", "l", "l", "o" ] // 6、扩展运算法
let map = new Map([ [1, 'one'], [2, 'two'] ]);
let arr = [...map.keys()];...剩余参数/可变参数
剩余参数，也用三个连续的点( ... )表示，可以将多个不定数量的元素绑定到一个数组中。
可变参数，用于参数不固定的函数，ES6之前使用参数对象(arguments)处理。
// 剩余参数
const order = [20.17, 18.67, 1.50, "cheese", "eggs", "milk", "bread"];
const [total, subtotal, tax, ...items] = order;
console.log(total, subtotal, tax, items);// 可变参数
function sum(...nums) {let total = 0; for(const num of nums) {total += num;}return total;
}更简单的对象字面量
ES6使得声明对象字面量更加简单，提供了属性简写和方法简写功能，属性名计算的新特性。
function getInfo(name, age, weight) {return {name, age, weight,['over' + weight]: true,desc() {console.log(name, age, weight);}};
}let person = getInfo('Kia', 27, 400);
console.log(person); // {name: "Kia", age: 27, weight: 400, over400: true, desc: ƒ}for of
for of支持终止循环，也不会遍历非数字属性。
const fruits = ['apple','coconut','mango'];
fruits.fav = 'my favorite fruit';for(let index in fruits){console.log(fruits[index]);
}for(let fruit of fruits){if(fruit === 'mango' ){break;}console.log(fruit);
}Map
javascript的Object本身就是键值对的数据结构，但实际上属性和值构成的是”字符串-值“对，属性只能是字符串。Map提供了”值-值“对的数据结构，键名不仅可以是字符串，也可以是对象。它是一个更完善的Hash结构。
const map1 = new Map();
const objkey = {p1: 'v1'};
map1.set(objkey, 'hello');
console.log(map1.get(objkey));
console.log('%s', map1.size);const map2 = new Map();
map2.set('a', 4);
console.log('map2: %s', map2.has('a'));
map2.delete('a');
map2.clear();for (let key of map2.keys()) {console.log(key);
}
for (let value of map2.values()) {console.log(value);
}
for (let item of map2.entries()) {console.log(item[0], item[1]);
}
for (let [key, value] of map2.entries()) {console.log(key, value);
}类
ES6中的类，与C++、Java中的类有点类似。
1、声明一个类，首先编写class关键字，紧跟着是类的名字，其他部分的语法类似于对象字面量方法的简写形式，但是不需要在子类的各元素之间使用逗号分隔。
2、constructor方法是构造方法，在实例化一个类的时候被调用。constructor方法是必须的，也是唯一的，一个类不能含有多个constructor方法，我们可以在该方法里面自定义一些对象的属性。
3、在类中可以定义类的实例方法，实例化后对象可以调用此方法。
4、静态方法的定义需要使用static关键字来标识，而实例方法不需要。静态方法通过类名来调用，而实例方法通过实例对象来调用。
5、静态属性写在类定义外面（ ES7有新的写法，直接用static写在类定义里面即可）。
6、必须使用new创建字来创建类的实例对象。
7、必须先声明定义类，再创建实例，否则会报错。
class Animal {constructor(name){this.name = name;}getName(){return 'This is a '+this.name;}static friends(a1,a2){return `${a1.name} and ${a2.name} are friends`;}
}let dog = new Animal('dog');
console.log(dog.name);
console.log(dog.getName());let cat = new Animal('cat');Animal.friends(dog, cat);继承
1、使用extends关键字来实现子类（派生类）继承父类（基类）。派生类中的方法总会覆盖基类中的同名方法。
2、关键字super，相当于是父类中的this。可以使用super来引用父类，访问父类的方法。
3、子类必须在constructor方法中调用super方法。
4、子类的构造函数中，必须先调用super方法，才可以使用this，否则报错。
5、在子类的普通函数（非构造函数）中访问父类的函数，可以使用this，也可以使用super。
6、在子类中访问父类的属性，只能使用this，不能使用super。
7、支持内建对象的继承。
class Animal {constructor(name){this.name = name;}say(){return `This is a animal`;}
}class Dog extends Animal {constructor(name, color){super(name);this.color = color;}getDesc(){return `${super.say()},name：${this.name},color:${this.color}`;}
}let dog = new Dog("dog", "black");dog.getDesc();Web Worker
Web Worker的意义在于可以将一些耗时的数据处理操作从主线程中剥离，使主线程更加专注于页面渲染和用户交互。
// main.js
let worker = new Worker('work.js');worker.postMessage('Hello World');
worker.postMessage({method: 'echo', args: ['Work']});worker.onmessage = function (event) {console.log('Recv msg ' + event.data);
}worker.terminate();// work.js
importScripts('script1.js');self.onmessage = function (event) {console.log('You said: ' + event.data);
}self.close();Promise
根据Promise/A规范，promise是一个对象，只需要then这一个方法。then方法带有如下三个参数：成功回调、失败回调、前进回调（规范没有要求包括前进回调的实现，但是很多都实现了）。
一个全新的promise对象从每个then的调用中返回。
Promise对象代表一个异步操作，其不受外界影响，有三种状态：Pending（进行中、未完成的）、Resolved（已完成，又称Fulfilled）、Rejected（已失败）。
function getNumber(){var p = new Promise(function(resolve, reject){setTimeout(function(){var num = Math.ceil(Math.random()*10);if(num<=5){resolve(num);}else{reject('数字太大了');}}, 2000);});return p;
}getNumber()
.then(function(data){console.log('resolved');console.log(somedata);
}, function(reason, data){console.log('rejected');
})
.catch(function(reason){console.log('rejected');
});async/await
1、async/await是ES7提出的语法，可通过babel在项目中使用。
2、async/await是一个用同步思维解决异步问题的方案（等结果出来之后，代码才会继续往下执行）。
3、async/await更加语义化，async 是“异步”的简写，async function用于申明一个function是异步的；await，可以认为是async wait的简写，用于等待一个异步方法执行完成。
4、可以通过多层async function的同步写法代替传统的callback嵌套。
5、async自动将常规函数转换成Promise，返回值也是一个Promise对象。
6、只有async函数内部的异步操作执行完，才会执行then方法指定的回调函数。
7、只有async函数内部才可以使用await，在普通函数内使用会报错。
function timeout(ms) {return new Promise((resolve, reject) => {setTimeout(() => {reject('error')}, ms);});
}async function asyncPrint(ms) {try {console.log('start');await timeout(ms);console.log('end');} catch(err) {console.log(err);}
}asyncPrint(1000);async function asyncPrint2(ms) {console.log('start');await timeout(ms)console.log('end');
}asyncPrint2(1000).catch(err => {console.log(err)；
});