ES6 扩展笔记

1.字符串扩展

　　 新增的方法八百年应该都用不到，主要是处理大于\uFFFF的Unicode字符（即4个字节大小字符）。

　　 模板字符串：反引号(`)替代双引号(");可换行，包含变量 "${}"

　　eg：

var name = "Bob", time = "today";
`Hello ${name}, how are you ${time}?`

　　模板编译：使用<%...%>放置JavaScript代码，使用<%= ... %>输出JavaScript表达式（类似React中JSX语法，不习惯，不好用，js语句多怎么办？要添加很多<%在js语句首尾部位？搞笑！js和html未能清楚分开！）

　　eg：

var template = `
<ul>
  <% for(var i=0; i < data.supplies.length; i++) {%>
    <li><%= data.supplies[i] %></li>
  <% } %>
</ul>
`;

　　

2.正则扩展

　　略

 

3.数值扩展

　　ES5里八进制用0开头容易引起误解，如010可以理解为八进制的8或者二进制的2或者十进制的10，ES6统一开头比较清楚。

　　二进制：0b/0B

　　八进制：0o/0O

　　原有方法移植到Number上，如Number.parseInt()等

　　添加了Math的一些方法

　　指数运算：**

let a = 2;
a **= 2;
// 等同于 a = a * a;

let b = 3;
b **= 3;
// 等同于 b = b * b * b;

　　

4.数组扩展

 Array.from()方法，将类数组对象[函数参数arguments、NodeList等] 和可遍历对象[Iterabel]转换为数组

// NodeList对象
let ps = document.querySelectorAll('p');
Array.from(ps).forEach(function (p) {
  console.log(p);
});

// arguments对象
function foo() {
  var args = Array.from(arguments);
  // ...
}

　　entries(),keys(),values():  for...of循环中，获取键值对，键名，键值

　　实际测试中，values()方法有误，不用该values()方法可直接用for...of循环获取键值

    for (let index of ['a', 'b'].keys()) {
        console.log(index);
    }

    for (let elem of ['a', 'b']) {//不需要使用values()方法
        console.log(elem);
    }

    for (let [index, elem] of ['a', 'b'].entries()) {
        console.log(index);
        console.log(elem);
    }

　　

5.函数扩展

　　默认参数

　　解构赋值默认参数：将形参设为Object，然后Object解构赋值[又是之前Object解构赋值的知识点]

// 写法一：默认值是空对象，但是设置了对象解构赋值的默认值
function m1({x = 0, y = 0} = {}) {
  return [x, y];
}

// 写法二：函数参数的默认值是一个有具体属性的对象，但是没有设置对象解构赋值的默认值。
function m2({x, y} = { x: 0, y: 0 }) {
  return [x, y];
}

　　

6.对象扩展

　　基于对象的赋值解构

    function f(x, y) {
        return {x, y};
    }
    console.log(f(2,3));//{x:2,y:3}
//{x:x,y:y}对象解构赋值

　　对象内function写法

    var o={
    "f":function(){}
    }
//在ES6中缩写为：
    var o={
    f(){}
    }

　　ES6中对象属性名可以用变量，也可以用拼接字符串，用[]包含即可

let propKey = 'foo';

let obj = {
  [propKey]: true,
  ['a' + 'bc']: 123
};

　　Object.assign()方法，合并可遍历的object，后面参数的属性覆盖前面的

　　 var q = { a: 1, b: 1 };
    var w = { b: 2, c: 2 };
    var e = { c: 3 };
    console.log(Object.assign({},q, w, e))//Object {a: 1, b: 2, c: 3}

　　属性的遍历方法

ES6一共有6种方法可以遍历对象的属性。

（1）for...in

for...in循环遍历对象自身的和继承的可枚举属性（不含Symbol属性）。

（2）Object.keys(obj)

Object.keys返回一个数组，包括对象自身的（不含继承的）所有可枚举属性（不含Symbol属性）。

（3）Object.getOwnPropertyNames(obj)

Object.getOwnPropertyNames返回一个数组，包含对象自身的所有属性（不含Symbol属性，但是包括不可枚举属性）。

（4）Object.getOwnPropertySymbols(obj)

Object.getOwnPropertySymbols返回一个数组，包含对象自身的所有Symbol属性。

（5）Reflect.ownKeys(obj)

Reflect.ownKeys返回一个数组，包含对象自身的所有属性，不管是属性名是Symbol或字符串，也不管是否可枚举。

（6）Reflect.enumerate(obj)

Reflect.enumerate返回一个Iterator对象，遍历对象自身的和继承的所有可枚举属性（不含Symbol属性），与for...in循环相同。

以上的6种方法遍历对象的属性，都遵守同样的属性遍历的次序规则。
-首先遍历所有属性名为数值的属性，按照数字排序。
-其次遍历所有属性名为字符串的属性，按照生成时间排序。
-最后遍历所有属性名为Symbol值的属性，按照生成时间排序。