提示:这篇文章是冗长的,涉及到很多知识。

目录

let 和 const

解构赋值

箭头的使用功能

模板字符串

函数的默认参数

扩大运营商

对象字面量 与 class

Promise

数组添加方法

对象添加方法

指中缀形式的函数

---

**let 和 const**

let 和 const 的特点：

1. 不会被提升
2. 重复申报错误
3. 解放全球范围(块级别范围)

临时死区:TDZ） let 和 const 声明的变量不会被提升到顶部的范围。

var value = "global";
// 例子1
(function() {
    console.log(value);
    let value = local;
}());

// 例子2
{
    console.log(value);
    const value = local;
};
// 在这两个例子,结果不会被打印出来 "global",但报告一个错误 Uncaught ReferenceError: value is not defined因为 TDZ 的缘故。

**解构赋值**

解构主义赋值语法Javascript表达式,它允许数据从数组或对象中提取到不同的变量

const person = {
  name: little bear,
  age: 18,
  sex: 男
}
let { name,age,sex } = person
//数组
let nbaStars=[yaoming,kobe,james,paul]
let [chinaStar,...usaStar] = nbaStars
let [,,,myidol] = nbaStars
console.log(usaStar,chinaStar,myidol)
//["kobe", "james", "paul"] "yaoming" "paul"

**箭头的使用功能**

// es5
var fn = function(a, b) {
    return a + b;
}
// es6 箭头函数编写方法,直接当函数return时,函数体中的括号可以省略
const fn = (a, b) => a + b;

// es5
var foo = function() {
    var a = 20；
    var b = 30;
    return a + b;
}
// es6
const foo = () => {
   const a = 20;
   const b = 30;
   return a + b;
}

以下几点需要注意当使用箭头功能:

• 箭头函数可以代替函数表达式,但不能替代函数声明;
• 在箭头功能,没有this。如果你使用箭头功能this，那么该this它必须外层this；
• 在ES6在严格模式将使用默认情况下,this它不会自动指向window对象；
• 箭函数本身不this；
• 无法在箭头功能arguments对象。

**模板字符串**

使用 `` 把整个字符串和使用 ${} 将一个变量或表达式。

// es6
const a = 20;
const b = 30;
const string = ${a}+${b}=${a+b};

// es5
var a = 20;
var b = 30;
var string = a + "+" + b + "=" + (a + b);

**函数的默认参数**

function add(x = 20, y = 30) {
    return x + y;
}
console.log(add());

**扩大运营商**

在ES6中用...代表扩张操作符,它可以扩展数组或对象的方法。

数组扩张:
const arr1 = [1, 2, 3];
const arr2 = [...arr1, 10, 20, 30];
// 这样，arr2 就变成了[1, 2, 3, 10, 20, 30];

对象扩展:
const obj1 = {
  a: 1,
  b: 2,
  c: 3
}
const obj2 = {
  ...obj1,
  d: 4,
  e: 5,
  f: 6
}

// 类似的结果 const obj2 = Object.assign({}, obj1, {d: 4})

**对象字面量 与 class**

1. 当一个变量具有相同名称的属性和价值

   const name = Jane;
   const age = 20
   
   // es6
   const person = {
     name,
     age
   }
   
   // es5
   var person = {
     name: name,
     age: age
   };

2. 除了属性,方法在对象字面符号也可以缩写。

   // es6
   const person = {
     name,
     age,
     getName() { // 只要箭头没有使用函数,this它仍然是我们熟悉的东西this
       return this.name
     }
   }
   
   // es5
   var person = {
     name: name,
     age: age,
     getName: function getName() {
       return this.name;
     }
   };

3. 在对象文字括号可以用作属性表明属性名称也可以是变量。

   const name = Jane;
   const age = 20
   
   const person = {
   }

4. ES6新的语法糖提供用于创建对象Class语法。

   // ES5
   // 构造函数
   function Person(name, age) {
     this.name = name;
     this.age = age;
   }
   
   // 原型方法
   Person.prototype.getName = function() {
     return this.name
   }
   
   // ES6
   class Person {
     constructor(name, age) {  // 构造函数
       this.name = name;
       this.age = age;
     }
   
     getName() {  // 原型方法
       return this.name
     }
   }
   babel会将ES6编译和使用的写作方法Object.defineProperty实现方法,包括get，set等。

5. 此外,我们还需要特别注意的差异在实际应用的几种写作方法。ES5的意义。

   class Person {
     constructor(name, age) {  // 构造函数
       this.name = name;
       this.age = age;
     }
   
     getName() {   // 这种写作方法是将方法添加到原型
       return this.name
     }
   
     static a = 20;  // 等同于 Person.a = 20
   
     c = 20;   // 代表着一个构造函数添加属性 在相当于在构造函数 this.c = 20
   
   // 箭头代表添加一个函数的编写方法构造函数,相当于this.getAge = function() {}
     getAge = () => this.age   
   }
   
   继承 extends
   相比ES5，ES6继承是简单得多:
   class Person {
     constructor(name, age) {
       this.name = name;
       this.age = age;
     }
   
     getName() {
       return this.name
     }
   }
   
   // Student类继承Person类
   class Student extends Person {
     constructor(name, age, gender, classes) {
       super(name, age);
       this.gender = gender;
       this.classes = classes;
     }
   
     getGender() {
       return this.gender;
     }
   }

6. 我们只需要一个extends关键字、继承可以不需要实现ES5除了担心构造函数原型继承和继承,我们还需要关注一个主题super的方法。

   /* 在继承的在构造函数中，我们必须如上面的例子那么调用一次super方法，
       它代表了继承的构造函数,这是类似的ES5中利用call/apply继承的构造函数是相同的功能。 */
   // 在构造函数中
   // es6
   super(name, age);
   
   // es5
   Person.call(this);

**Promise**

在ajax在其原生实现中,它利用onreadystatechange当事件被触发时,满足一定的条件下,我们只能获得我们想要的数据,然后我们就可以开始处理数据。ajax请求,这个新的一个ajax一个请求的参数必须从上一个ajax请求中,我们必须做到以下几点:

var url = https://hq.tigerbrokers.com/fundamental/finance_calendar/getType/2017-02-26/2017-06-10;
var result;

var XHR = new XMLHttpRequest();
XHR.open(GET, url, true);
XHR.send();

XHR.onreadystatechange = function() {
    if (XHR.readyState == 4 && XHR.status == 200) {
        result = XHR.response;
        console.log(result);

        // 伪代码
        var url2 = http:xxx.yyy.com/zzz?ddd= + result.someParams;
        var XHR2 = new XMLHttpRequest();
        XHR2.open(GET, url, true);
        XHR2.send();
        XHR2.onreadystatechange = function() {
            ...
        }
    }
}

当第三个出现ajax(甚至更多)当我们仍然依赖于之前的要求,我们的代码变成了一场灾难。

所以我们需要一个工具Promise来解决这个问题。

当然,除了调地狱,还有一个非常重要的要求:为了我们的代码更可读和可维护的,我们需要明确区分数据请求和数据处理。

Promise对象有三种状态,这是:

• pending: 等待或进展,表明还没有得到结果
• resolved(Fulfilled): 完成,表明我们已获得所需的结果,可以继续执行

• rejected: 它还表明我们得到结果,但结果不是我们预期,我们拒绝执行它

  new Promise(function(resolve, reject) { if(true) { resolve() }; if(false) { reject() }; })

Promise.all：

Promise.all接收一个Promise组成的一个数组对象作为参数,当所有的Promise对象状态变成了resolved或者rejected它才会打电话then方法。

var url = ...;
var url1 = ...;

function renderAll() {
    return Promise.all([getJSON(url), getJSON(url1)]);
}
renderAll().then(function(value) {
    console.log(value);
})

Promise.race：

与Promise.all同样的,Promise.race都基于一个Promise组成的一个数组对象作为参数,但不同的是,只要其中的一个Promsie状态变成resolved或者rejected你可以叫.then方法了。

function renderRace() {
    return Promise.race([getJSON(url), getJSON(url1)]);
}

renderRace().then(function(value) {
    console.log(value);
})

**数组添加方法**

1. Array.prototype.includes

includes是一个 Array 一个非常有用的功能迅速找到一个数组是否包含一个元素。(包括 NaN，所以和 indexOf 不一样)。

2. 字符串附加

为附加字符串提供了两个方法 String.prototype.padStart 和 String.prototype.padEnd它方便我们将一个新字符串附加到某个字符串的开始和结束。

someString.padStart(numberOfCharcters [,stringForPadding]);
5.padStart(10) //           5
5.padStart(10, =*) //=*=*=*=*=5
5.padEnd(10) // 5         
5.padEnd(10, =*) //5=*=*=*=*=

Object.entries(cars).map(([name, count]) => {
    console.log(${name.padEnd(20, -)} Count:${count.toString().padStart(3, 0)})
})
/*
?ambulance--------- Count:003
?car--------------- Count:007
?trucks------------ Count:004
*/

3. Array.prototype.flat()  ( ES9 )

Array.prototype.flat() 递归嵌套数组连接到指定的深度。 1如果你想要完整的深度,使用 Infinity 。这种方法不修改原始数组,但创建一个新的数组:

const arr1 = [1, 2, [3, 4]];
arr1.flat();  // [1, 2, 3, 4]
const arr2 = [1, 2, [3, 4, [5, 6]]];
arr2.flat(2);  // [1, 2, 3, 4, 5, 6]

const arr3 = [1, 2, [3, 4, [5, 6, [7, 8]]]];
arr3.flat(Infinity); // [1, 2, 3, 4, 5, 6, 7, 8]
flat() 方法将从数组中删除空项:
const arr4 = [1, 2, , 4, 5];
arr4.flat(); // [1, 2, 4, 5]

4. Array.prototype.flatMap()  (ES9)

flatMap() 方法首先地图每个元素使用映射函数,然后压缩结果到一个新的数组。 Array.prototype.map 和 深度值为 1的 Array.prototype.flat 几乎相同,但是 flatMap 通常情况下,合并成一个方法更高效。

const arr1 = [1, 2, 3];

arr1.map(x => [x * 4]); // [[4], [8], [12]]

arr1.flatMap(x => [x * 4]); // [4, 8, 12]

更好的例子:

const sentence = ["This is a", "regular", "sentence"];

sentence.map(x => x.split(" ")); 
// [["This","is","a"],["regular"],["sentence"]]

sentence.map(item => item.split( )).flat(Infinity)
// ["This","is","a","regular", "sentence"]

sentence.flatMap(x => x.split(" ")); 
// ["This","is","a","regular", "sentence"]

// 可以使用 归纳（reduce） 与 合并（concat)实现相同的功能
sentence.reduce((acc, x) => acc.concat(x.split(" ")), []);

**对象添加方法**

1.Object.values()

Object.values()函数和 Object.keys()非常相似,它返回一个对象中的所有值的属性(继承通过原型链不计数)。

2. Object.entries()

Object.entries()和 Object.keys 相关的,但 entries()函数会将 key 和 value 返回一个数组的形式。 Map 它非常方便。

let obj = { dsds: 2, fsdsg: 3, gththt: 4 }
console.log(Object.entries(obj))
/* 
(3) [Array(2), Array(2), Array(2)]
0: (2) ["dsds", 2]
1: (2) ["fsdsg", 3]
2: (2) ["gththt", 4]
*/

3.Object.fromEntries (ES9)

转换键值对列表 Object 一种新方法。

它与已有 Object.entries() 相反,Object.entries()方法用于将一个对象转换为一个数组时,它返回一个数组的键值对可给定对象本身的属性。

现在您可以使用 Object.fromEntries 返回数组的操作对象。

const obj = { prop1: 2, prop2: 10, prop3: 15 };

// 转换键值对数组:
let array = Object.entries(obj); 
// [["prop1", 2], ["prop2", 10], ["prop3", 15]]
// 广场所有对象属性的值:
array = array.map(([key, value]) => [key, value ** 2]); 
// [["prop1", 4], ["prop2", 100], ["prop3", 225]]

我们将把数组 array 作为一个参数传递 Object.fromEntries ,将数组转换成一个对象:

const newObj = Object.fromEntries(array); 
// {prop1: 4, prop2: 100, prop3: 225}

指 中缀形式的函数

加/我们通常用减法的中缀形式,直观和容易理解。 ECMAScript2016 我们可以使用**来替代 Math.pow。

如果你看到这个,觉得这是对你有所帮助,请像或评论,鼓励我。