ECMAScript 6

ECMAScript6

ECMAScript简称就是ES,你可以把它看成是一套标准,JavaScript就是实施了这套标准的一门语言,现在主流浏览器使用的是ECMAScript5。

http://babeljs.io/repl

1. 作用域变量

作用域就是一个变量的作用范围。也就是你声明一个变量以后,这个变量可以在什么场合下使用
以前的JavaScript只有全局作用域，还有一个函数作用域

1.1 var的问题

  1. var没有块级作用域，定义后在当前闭包中都可以访问，如果变量名重复，就会覆盖前面定义的变量，并且也有可能被其他人更改。

    if (true) {
     var a = "a"; // 期望a是某一个值
 }
console.log(a);

  2. var在for循环标记变量共享，一般在循环中使用的i会被共享，其本质上也是由于没有块级作用域造成的

    for (var i = 0; i < 3; i++) {
     setTimeout(function () {
         alert(i);
     }, 0);
 }

结果
弹窗三次 3

1.2 块级作用域

在用var定义变量的时候，变量是通过闭包进行隔离的，现在用了let，不仅仅可以通过闭包隔离，还增加了一些块级作用域隔离。
块级作用用一组大括号定义一个块,使用 let 定义的变量在大括号的外面是访问不到的

1.2.1 实现块级作用域

if(true){
    let name = 'zxmf';
}
console.log(name);// ReferenceError: name is not defined

1.2.2 不会污染全局对象

if(true){
    let name = 'zxmf';
}
console.log(window.name);

结果 undefined

1.2.3 for循环中也可以使用 i

// 嵌套循环不会相互影响
    for (let i = 0; i < 3; i++) {
        console.log("out", i);
        for (let i = 0; i < 2; i++) {
            console.log("in", i);
        }
    }

结果 out 0 in 0 in 1 out 1 in 0 in 1 out 2 in 0 in 1

1.2.4 重复定义会报错

if(true){
    let a = 1;
    let a = 2; //Identifier 'a' has already been declared
}

1.2.5 不存在变量的预解释

for (let i = 0; i < 2; i ++){
    console.log('inner',i);
    let i = 100;
}

结果 i is not defined

1.2.6 闭包的新写法

以前

;(function () {

})();

现在

{
}

2. 常量

使用const我们可以去声明一个常量，常量一旦赋值就不能再修改了

2.1 常量不能重新赋值

const MY_NAME = 'zxmf';
MY_NAME = 'zxmf';//Assignment to constant variable

2.2 变量值可改变

注意const限制的是不能给变量重新赋值，而变量的值本身是可以改变的,下面的操作是可以的

const names = ['zxmf1'];
names.push('zxmf2');
console.log(names);

2.3 不同的块级作用域可以多次定义

const A = "0";
{
  const A = "A";
  console.log(A)
}
{
  const A = "B";
  console.log(A)
}
console.log(A)

结果 A B 0

3. 解构

3.1 解析数组

解构意思就是分解一个东西的结构,可以用一种类似数组的方式定义N个变量，可以将一个数组中的值按照规则赋值过去。

var [name,age] = ['zxmf',8];
console.log(name,age);

3.2 嵌套赋值

let [x, [y], z] = [1, [2.1, 2.2]];
console.log(x, y, z);

let [x, [y,z]] = [1, [2.1, 2.2]];
console.log(x,y,z);

let [json,arr,num] = [{name:'zxmf'},[1,2],3];
console.log(json,arr,num);

1 2.1 undefined
1 2.1 2.2
{ name: 'zxmf' } [ 1, 2 ] 3

3.3 省略赋值

let [, , x] = [1, 2, 3];
console.log(x);

3.4 解构对象

对象也可以被解构

var obj = {name:'zxmf',age:8};
//对象里的name属性的值会交给name这个变量，age的值会交给age这个变量
var {name,age} = obj;
//对象里的name属性的值会交给myname这个变量，age的值会交给myage这个变量
let {name: myname, age: myage} = obj;
console.log(name,age,myname,myage);

3.5 默认值

在赋值和传参的时候可以使用默认值

let [a = "a", b = "b", c =new Error('C必须指定')] = [1, , 3];
console.log(a, b, c);

function ajax (options) {
    var method = options.method || "get";
    var data = options.data || {};
    //.....
}
function ajax ({method = "get", data}) {
    console.log(arguments);
}
ajax({
    method: "post",
    data: {"name": "zxmf"}
});

4. 字符串

4.1 模板字符串

模板字符串用反引号(数字1左边的那个键)包含，其中的变量用${}括起来

var name = 'zxmf',age = 8;
let desc = `${name} is ${age} old!`;
console.log(desc);

//所有模板字符串的空格和换行，都是被保留的
var str = `<ul>
<li>a</li>
<li>b</li>
</ul>`;
console.log(str);

其中的变量会用变量的值替换掉

function replace(desc){

  return desc.replace(/${(}+)}/g,function(matched,key){

     return eval(key);

  });

}

4.2 带标签的模板字符串

可以在模板字符串的前面添加一个标签，这个标签可以去处理模板字符串
标签其实就是一个函数,函数可以接收两个参数,一个是strings,就是模板字符串里的每个部分的字符
还有一个参数可以使用rest的形式values,这个参数里面是模板字符串里的值

var name = 'zxmf',age = 8;
function desc(strings,...values){
    console.log(strings,values);
}
desc`${name} is ${age} old!`;

4.3 字符串新方法

  • includes()：返回布尔值，表示是否找到了参数字符串。

  • startsWith()：返回布尔值，表示参数字符串是否在源字符串的头部。

  • endsWith()：返回布尔值，表示参数字符串是否在源字符串的尾部。

    var s = 'zxmf';
s.startsWith('z') // true
s.endsWith('x') // true
s.includes('p') // true

第二个参数，表示开始搜索的位置

var s = 'zxmf';
console.log(s.startsWith('p',2)); // true
console.log(s.endsWith('f',2)); // true
console.log(s.includes('f',2)); // false

endsWith的行为与其他两个方法有所不同。它针对前n个字符，而其他两个方法针对从第n个位置直到字符串结束

4.4 repeat

repeat方法返回一个新字符串，表示将原字符串重复n次。

'x'.repeat(3);
'x'.repeat(0);

5. 函数

5.1 默认参数

可以给定义的函数接收的参数设置默认的值

在执行这个函数的时候，如果不指定函数的参数的值，就会使用参数的这些默认的值

function ajax(url,method='GET',dataType="json"){
  console.log(url);
  console.log(method);
  console.log(dataType);
}

5.2 展开操作符

把...放在数组前面可以把一个数组进行展开,可以把一个数组直接传入一个函数而不需要使用apply

//传入参数
let print = function(a,b,c){
    console.log(a,b,c);
}
print([1,2,3]);
print(...[1,2,3]);

// 可以替代apply
var m1 = Math.max.apply(null, [8, 9, 4, 1]);
var m2 = Math.max(...[8, 9, 4, 1]);

// 可以替代concat
var arr1 = [1, 3];
var arr2 = [3, 5];
var arr3 = arr1.concat(arr2);
var arr4 = [...arr1, ...arr2];
console.log(arr3,arr4);

//类数组的转数组
function max(a,b,c) {
    console.log(Math.max(...arguments));
}
max(1, 3, 4);

5.3 剩余操作符

剩余操作符可以把其余的参数的值都放到一个叫b的数组里面

let rest = function(a,...rest){
    console.log(a,rest);
}
rest(1,2,3);

5.4 解构参数

let destruct = function({name,age}){
    console.log(name,age);
}
destruct({name:'zxmf',age:6});

5.5 函数的名字

ECMAScript 6 给函数添加了一个name属性

var desc = function descname(){}
console.log(desc.name);

5.6 箭头函数

箭头函数简化了函数的的定义方式，一般以 "=>" 操作符左边为输入的参数，而右边则是进行的操作以及返回的值inputs => output

[1,2,3].forEach(val => console.log(val)););

输入参数如果多于一个要用()包起来，函数体如果有多条语句需要用{}包起来

箭头函数根本没有自己的this，导致内部的this就是外层代码块的this。
正是因为它没有this，从而避免了this指向的问题。

var person = {
  name:'zxmf',
  getName:function(){
-   setTimeout(function(){console.log(this);},1000); //在浏览器执行的话this指向window
+   setTimeout(() => console.log(this),1000);//在浏览器执行的话this指向person
  }
}
person.getName();

5.7 数组的新方法

5.7.1 from

将一个数组或者类数组变成数组,会复制一份

let newArr = Array.from(oldArr);

5.7.2 Array.of

of 是为了将一组数值,转换为数组

console.log(Array(3), Array(3).length);
console.log(Array.of(3), Array.of(3).length);

5.7.3 copyWithin

Array.prototype.copyWithin(target, start = 0, end = this.length)
覆盖目标的下标 开始的下标 结束的后一个的下标

[1, 2, 3, 4, 5].copyWithin(0, 1, 2);

5.7.4 find

查到对应的元素和索引

let arr = [1, 2 ,3, 3, 4, 5];
let find = arr.find((item, index, arr) =&gt; {
return item === 3;
});
let findIndex = arr.findIndex((item, index, arr) =&gt; {
return item === 3;
});

console.log(find, findIndex);

5.7.5 fill

就是填充数组的意思 会更改原数组 Array.prototype.fill(value, start, end = this.length);

 let arr = [1, 2, 3, 4, 5, 6];
 arr.fill('a', 1, 2);
 console.log(arr);

5.7.5 map

5.7.6 reduce

5.7.7 filter

5.7.8 forEach

6. 对象

6.1 对象字面量

如果你想在对象里添加跟变量名一样的属性，并且属性的值就是变量表示的值就可以直接在对象里加上这些属性

let name = 'zxmf';
let age = 8;
let getName = function(){
    console.log(this.name);
}
let person = {
    name,
    age,
    getName
}
person.getName();

6.2 Object.is

对比两个值是否相等

console.log(Object.is(NaN,NaN));

6.3 Object.assign

把多个对象的属性复制到一个对象中,第一个参数是复制的对象,从第二个参数开始往后,都是复制的源对象

var nameObj = {name:'zxmf'};
var ageObj = {age:8};
var obj = {};
Object.assign(obj,nameObj,ageObj);
console.log(obj);

//克隆对象
function clone (obj) {
  return Object.assign({}, obj);
}

6.4 Object.setPrototypeOf

将一个指定的对象的原型设置为另一个对象或者null

var obj1  = {name:'zxmf1'};
var obj2 =  {name:'zxmf2'};
var obj = {};
Object.setPrototypeOf(obj,obj1);
console.log(obj.name);
console.log(Object.getPrototypeOf(obj));
Object.setPrototypeOf(obj,obj2);
console.log(obj.name);
console.log(Object.getPrototypeOf(obj));

6.5 proto

直接在对象表达式中设置prototype

var obj1  = {name:'zxmf1'};
var obj3 = {
    __proto__:obj1
}
console.log(obj3.name);
console.log(Object.getPrototypeOf(obj3));

6.6 super

通过super可以调用prototype上的属性或方法

let person ={
    eat(){
        return 'milk';
    }
}
let student = {
    __proto__:person,
    eat(){
        return super.eat()+' bread'
    }
}
console.log(student.eat());

7. 类

7.1 class

使用class这个关键词定义一个类,基于这个类创建实例以后会自动执行constructor方法,此方法可以用来初始化

class Person {
    constructor(name){
        this.name = name;
    }
    getName(){
        console.log(this.name);
    }
}
let person = new Person('zxmf');
person.getName();

7.2 get与set

getter可以用来得获取属性，setter可以去设置属性

class Person {
    constructor(){
        this.hobbies = [];
    }
    set hobby(hobby){
        this.hobbies.push(hobby);
    }
    get hobby(){
        return this.hobbies;
    }
}
let person = new Person();
person.hobby = 'basketball';
person.hobby = 'football';
console.log(person.hobby);

7.3 静态方法-static

在类里面添加静态的方法可以使用static这个关键词，静态方法就是不需要实例化类就能使用的方法

class Person {
   static add(a,b){
       return a+b;
   }
}
console.log(Person.add(1,2));

7.4 继承extends

一个类可以去继承其它的类里的东西

class Person {
   constructor(name){
     this.name = name;
   }
}
class Teacher extends Person{
    constructor(name,age){
        super(name);
        this.age = age;
    }
}
var teacher = new Teacher('zxmf',8);
console.log(teacher.name,teacher.age);

8.生成器(Generator)与迭代器(Iterator)

Generator是一个特殊的函数，执行它会返回一个Iterator对象。
通过遍历迭代器，
Generator函数运行后会返回一个遍历器对象，而不是普通函数的返回值。

8.1 Iterators模拟

迭代器有一个next方法，每次执行的时候会返回一个对象
对象里面有两个属性，一个是value表示返回的值，还有就是布尔值done,表示是否迭代完成

function buy(books) {
    let i = 0;
    return {
        next(){
            let done = i == books.length;
            let value = !done ? books[i++] : undefined;
            return {
                value: value,
                done: done
            }
        }
    }
}

let iterators = buy(['js', 'html']);
var curr;
do {
    curr = iterators.next();
    console.log(curr);
} while (!curr.done);

8.2 Generators

生成器用于创建迭代器

function* buy(books){
    for(var i=0;i<books.length;i++){
        yield books[i];
    }
}
let buying = buy(['js','html']);
var curr;
do {
    curr = buying.next();
    console.log(curr);
} while (!curr.done);

9.集合

9.1 Set

一个Set是一堆东西的集合,Set有点像数组,不过跟数组不一样的是，Set里面不能有重复的内容

var books = new Set();
books.add('js');
books.add('js');//添加重复元素集合的元素个数不会改变
books.add('html');
books.forEach(function(book){//循环集合
    console.log(book);
})
console.log(books.size);//集合中元数的个数
console.log(books.has('js'));//判断集合中是否有此元素
books.delete('js');//从集合中删除此元素
console.log(books.size);
console.log(books.has('js'));
books.clear();//清空 set
console.log(books.size);

9.2 Map

可以使用 Map 来组织这种名值对的数据

var books = new Map();
books.set('js',{name:'js'});//向map中添加元素
books.set('html',{name:'html'});
console.log(books.size);//查看集合中的元素
console.log(books.get('js'));//通过key获取值
books.delete('js');//执照key删除元素
console.log(books.has('js'));//判断map中有没有key
books.forEach((value, key) => { //forEach可以迭代map
    console.log( key + ' = ' + value);
});
books.clear();//清空map

10.模块

可以根据应用的需求把代码分成不同的模块
每个模块里可以导出它需要让其它模块使用的东西
在其它模块里面可以导入这些模块导出的东西

10.1 模块

在浏览器中使用模块需要借助

导出

export var name = 'zxmf';
export var age = 8;

导入

//import {name,age} from './school.js';
import * as school from './school.js';
console.log(school.name,school.age);

在页面中引用

<script src="https://google.github.io/traceur-compiler/bin/traceur.js"></script>
<script src="https://google.github.io/traceur-compiler/bin/BrowserSystem.js"></script>
<script src="https://google.github.io/traceur-compiler/src/bootstrap.js"></script>
<script type="module" src="index.js"></script>

10.2 重命名

导出时重命名

function say(){
    console.log('say');
}
export {say as say2};

导入时重命名

import {say2 as say3} from './school.js';

10.3 默认导出

每个模块都可以有一个默认要导出的东西
导出

export default function say(){
    console.log('say');
}

导入

import say from './school.js';

11 深度克隆

var parent = {
  age: 5,
  hobby: [1, 2, 3],
  home: {city: '北京'},
};

var child = extendDeep(parent);
child.age = 6;
child.hobby.push('4');
child.home.city = '广东';
console.log('child ', child); //[1, 2, 3, 4]
console.log('parent ', parent);
function extend(parent) {
  let child;
  if (Object.prototype.toString.call(parent) == '[object Object]') {
child = {};
for (let key in parent) {
  child[key] = extend(parent[key])
}
  } else if (Object.prototype.toString.call(parent) == '[object Array]') {
child = parent.map(item =&gt; extend(item));
  } else {
return parent;
  }
  return child;
}

function extendDeep(parent, child) {
  child = child || {};
  for (var key in parent) {
if (typeof parent[key] === "object") {
  child[key] = (Object.prototype.toString.call(parent[key]) === "[object Array]") ? [] : {};
  extendDeep(parent[key], child[key]);
} else {
  child[key] = parent[key];
}
  }
  return child;
}
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 204,793评论 6赞 478
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 87,567评论 2赞 381
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 151,342评论 0赞 338
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 54,825评论 1赞 277
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 63,814评论 5赞 368
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 48,680评论 1赞 281
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 38,033评论 3赞 399
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 36,687评论 0赞 258
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 42,175评论 1赞 300
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,668评论 2赞 321
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,775评论 1赞 332
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 33,419评论 4赞 321
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 39,020评论 3赞 307
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,978评论 0赞 19
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,206评论 1赞 260
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 45,092评论 2赞 351
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 42,510评论 2赞 343

推荐阅读更多精彩内容

  • JavaScript程序
    第2章 基本语法 2.1 概述 基本句法和变量 语句 JavaScript程序的执行单位为行（line），也就是一...
    悟名先生阅读 4,114评论 0赞 13
  • JavaScript高级程序设计-笔记
    第3章 基本概念 3.1 语法 3.2 关键字和保留字 3.3 变量 3.4 数据类型 5种简单数据类型：Unde...
    RickCole阅读 5,096评论 0赞 21
  • 第5章 引用类型
    第5章 引用类型(返回首页) 本章内容 使用对象 创建并操作数组 理解基本的JavaScript类型 使用基本类型...
    大学一百阅读 3,211评论 0赞 4
  • 现实的两性关系（深度好文）
    有一个男的，没考上大学，父母就给他找了个老婆结婚了，结婚后就在本村的小学教书。 由于没有经验，不到一周就被学生轰下...
    小蜗牛有梦想阅读 14,235评论 0赞 0
  • 大鱼海棠
    哭的稀里哗啦，心疼湫，无法理解椿为了报恩无视一切的样子~
    妙笔0阅读 225评论 0赞 0