ES6(ECMAScript 6)笔记8-函数的扩展

函数参数的默认值

允许为函数的参数设置默认值,即直接写在参数定义的后面。

1
2
3
4
5
6
7
function log(x, y = 'World') {
  console.log(x, y);
}

log('Hello') // Hello World
log('Hello', 'China') // Hello China
log('Hello', '') // Hello

可以为一个对象属性设置默认值

1
2
3
fetch(url, { body = '', method = 'GET', headers = {} }){
  console.log(method);
}

甚至可以设置双重默认值,调用函数fetch时,如果不含第二个参数,则默认值为一个空对象;如果包含第二个参数,则它的method属性默认值为GET。

1
2
3
fetch(url, { method = 'GET' } = {}){
  console.log(method);
}

如果传入undefined,将触发该参数等于默认值,null则没有这个效果。

1
2
3
4
5
6
function foo(x = 5, y = 6){
  console.log(x,y);
}

foo(undefined, null)
// 5 null

阅读全文

ES6(ECMAScript 6)笔记7-对象的扩展

属性的简洁表示法

允许直接写入变量和函数作为对象的属性和方法,这样的书写更简洁。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
function f( x, y ) {
  return { x, y };
}

// 等同于

function f( x, y ) {
  return { x: x, y: y };
}

var o = {
  method() {
    return "Hello!";
  }
};

// 等同于

var o = {
  method: function() {
    return "Hello!";
  }
};
install
var Person = {

  name: '张三',

  //等同于birth: birth
  birth,

  // 等同于hello: function ()...
  hello() { console.log('我的名字是', this.name); }

};

阅读全文

ES6(ECMAScript 6)笔记6-数组的扩展

Array.from()

将类数组和可遍历的对象转换为真正的数组。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
let ps = document.querySelectorAll('p');

Array.from(ps).forEach(function (p) {
  console.log(p);
});

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

foo( "a", "b", "c" );

Array.from({ 0: "a", 1: "b", 2: "c", length: 3 });
// [ "a", "b" , "c" ]

同时接受第二个参数,作用类似于map方法,对每个元素进行处理。

阅读全文

ES6(ECMAScript 6)笔记5-数值的扩展

Number.isFinite(), Number.isNaN()

前者用来检查一个数值是否非无穷,后者用来检查是否是NaN。

它们与传统的全局方法isFinite()和isNaN()的区别在于,传统方法先调用Number()
将非数值的值转为数值,再进行判断,而这两个新方法只对数值有效,非数值一律返回false。

Number.parseInt(), Number.parseFloat()

ES6将全局方法parseInt()和parseFloat(),移植到Number对象上面,行为完全保持不变。

阅读全文

ES6(ECMAScript 6)笔记4-正则的扩展

RegExp构造函数

ES5中RegExp构造函数值接受字符串作为参数,而ES6支持真个表达式作为参数。

1
var reg = new RegExp(/xyz/i);

如果使用RegExp构造函数的第二个参数指定修饰符,则返回的表达式会忽略原有的修饰符,使用新指定的。

1
2

y修饰符

y修饰符也叫做 粘连(sticky)修饰符,作用与g类似,也是全局匹配,后一次匹配都从上一次匹配成功的下一个位置开始,不同之处在于,g修饰符只要剩余位置中存在匹配即可,而y修饰符确保匹配必须从剩余的第一个位置开始,也就是 粘连 的含义。

阅读全文

ES6(ECMAScript 6)笔记3-字符串的扩展

includes(), startsWith(), endsWith()

  • includes():返回布尔值,表示是否找到了参数字符串。
  • startsWith():返回布尔值,表示参数字符串是否在源字符串的头部。
  • endsWith():返回布尔值,表示参数字符串是否在源字符串的尾部。
1
2
3
4
5
var s = "Hello world!";

s.startsWith("Hello") // true
s.endsWith("!") // true
s.includes("o") // true

以上都支持第二个参数,表示开始搜索的位置。

1
2
3
4
5
var s = "Hello world!";

s.startsWith("world", 6) // true
s.endsWith("Hello", 5) // true
s.includes("Hello", 6) // false

阅读全文

ES6(ECMAScript 6)笔记2-变量的解构赋值

概念

按照一定的模式,从数组和对象中提取值,对变量进行赋值,这个被成为解构。

数组的解构赋值

下面表示可以从数组中提取值,按照对应的位置对变量赋值。

1
2
3
4
5
6
7
8
9
10
11
let [foo, [[bar], baz]] = [1, [[2], 3]];
foo // 1
bar // 2
baz // 3

let [,,third] = ["foo", "bar", "baz"];
third // "baz"

let [x, , y] = [1, 2, 3];
x // 1
y // 3

阅读全文