ES6学习笔记（二）

CherishTheYouth

发布于 2019-07-30 15:34:02

6250

文章被收录于专栏：Vue技术实践Vue技术实践

本篇内容：

1.函数的扩展；

2.数组的扩展；

1.函数的扩展

（1）函数参数的默认值

ES6之前的版本无法为函数的参数指定默认值

ES6之后可以给函数参数指定默认值，用法如下：

function log(x, y = 'World') {
  console.log(x, y);
}

调用结果：

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

注意：

函数参数变量是默认声明的，所以不能用 let 或 const再次声明：

function func(x = 5)
{
     let x = 5; //报错
     const x = 9;     //报错     
}

参数默认值的位置：

设有默认值的参数，必须放在最后一个参数的位置，如：func(x,y,z = 5);

如果带有默认值的参数没有放在最后面，那么会带来一些问题，作为日常使用，我认为我们只需要记住把带有默认值的参数放在最后最后一位，并严格遵守就行，至于放在前面的写法会出现何种问题，大可不必深究。

函数length属性：

指定了默认值之后，函数的length属性将失真，函数的length属性将返回没有指定默认值的参数的个数；

(function (a) {}).length // 1
(function (a = 5) {}).length // 0
(function (a, b, c = 5) {}).length // 2

length 属性的返回值，等于函数的参数个数减去指定了默认值的参数个数;

注意：如果设置了默认值的参数不是尾参数，那么length属性也不再计算后面的参数个数了

(function (a = 0, b, c) {}).length // 0
(function (a, b = 1, c) {}).length // 1

（2）rest参数

ES6引入了 rest 参数，形式为 ...变量名（三个点加变量名），用于获取函数的多余参数，rest 参数搭配的变量是一个数组，该变量将多余的参数放入数组中。

function add(...values) {
  let sum = 0;

  for (var val of values) {
    sum += val;
  }

  return sum;
}

add(2, 5, 3) // 10

（3）name属性

ES6中，函数的name属性，返回该函数的函数名：

function foo() {}
foo.name // "foo"

ES5中，给函数使用name属性，返回空字符串，不会返回函数名

（4）箭头函数

ES6允许使用箭头定义函数，

基本用法：

1>有参数，只有一条返回语句：

var func = x => x;

等价于：

var func = function(x){ return x};

2> 没有参数，只有一条返回语句：

var func = () => 5;

等价于：

var func = function(){ return 5};

3> 有多个参数，只有一条返回语句；

var func = (x,y,z) => x+y+z;

等价于：

var func = function(x,y,x) { return x+y+z};

4>代码块部分有多条语句，则要用大括号把代码块部分括起来，并且，需要用返回语句需要加上 return;

var func = (x,y,z) =>{
    let sum = x + y +z;
    return sum;      
};

等价于：

var func = function(x,y,z){
      let sum = x + y +z;
      return sum;    
}

注意：

由于大括号被解释为代码块，所以如果箭头函数直接返回一个对象，必须在对象外面加上括号，否则会报错；

// 报错
let getTempItem = id => { id: id, name: "Temp" };

// 不报错
let getTempItem = id => ({ id: id, name: "Temp" });

5>箭头函数只有一行，而且不需要返回任何值：

let func = () => void doesNotReturn();

6>箭头函数可以与变量解构结合使用：

const func = ({first,last}) => first +' '+ last;

等价于：

func function(person){
   return person.first + person.last; 
}

7>箭头函数的一个用处是简化回调函数

// 正常函数写法
[1,2,3].map(function (x) {
  return x * x;
});

// 箭头函数写法
[1,2,3].map(x => x * x);

(补习：

array,.map() 方法返回一个新数组，数组中的元素为原始数组元素调用函数处理后的值，

map() 方法按照原始数组元素顺序依次处理元素。

注意： map() 不会对空数组进行检测。

注意： map() 不会改变原始数组。

例子：

var numbers = [4, 9, 16, 25];

var arr = numbers.map(Math.Sqrt); //[2,3,4,5]

)

注意点：

（1）函数体内的this对象，就是定义时所在的对象，而不是使用时所在的对象。

　　this对象的指向是可变的，但是在箭头函数中，它是固定的。

function foo() {
  setTimeout(() => {
    console.log('id:', this.id);
  }, 100);
}

var id = 21;

foo.call({ id: 42 });
// id: 42

上面代码中，setTimeout的参数是一个箭头函数，这个箭头函数的定义生效是在foo函数生成时，而它的真正执行要等到 100 毫秒后。如果是普通函数，执行时this应该指向全局对象window，这时应该输出21。但是，箭头函数导致this总是指向函数定义生效时所在的对象（本例是{id: 42}），所以输出的是42。

（2）不可以当作构造函数，也就是说，不可以使用new命令，否则会抛出一个错误。

（3）不可以使用arguments对象，该对象在函数体内不存在。如果要用，可以用 rest 参数代替。

（4）不可以使用yield命令，因此箭头函数不能用作 Generator 函数。

8>嵌套的箭头函数

箭头函数的内部，还可以使用箭头函数；

下面是一个用ES5普通函数写的函数的嵌套：

function insert(value) {
  return {into: function (array) {
    return {after: function (afterValue) {
      array.splice(array.indexOf(afterValue) + 1, 0, value);
      return array;
    }};
  }};
}

insert(2).into([1, 3]).after(1); //[1, 2, 3]

用箭头函数写为：

let insert = (value) => ({into: (array) => ({after: (afterValue) => {
  array.splice(array.indexOf(afterValue) + 1, 0, value);
  return array;
}})});

insert(2).into([1, 3]).after(1); //[1, 2, 3]

（5）尾调用优化

尾调用：尾调用是函数式编程的一个重要概念，本身非常简单，一句话就能说清楚，就是指某个函数的最后一步是调用另一个函数。

function f(x){
  return g(x);
}

//这就是尾调用

以下三种情况，都不属于尾调用。

// 情况一
function f(x){
  let y = g(x);
  return y;
}

// 情况二
function f(x){
  return g(x) + 1;
}

// 情况三
function f(x){
  g(x);
}
等价于
function f(x){
  g(x);
  return undefined;
}

尾调用不一定要出现在函数的尾部，只要是最后调用即可：

function f(x) {
  if (x > 0) {
    return m(x)
  }
  return n(x);
}

2.数组的扩展

（1）扩展运算符

扩展运算符（spread）是三个点（...）。它好比 rest 参数的逆运算，将一个数组转为用逗号分隔的 参数序列。

console.log(...[1, 2, 3])
// 1 2 3

console.log(1, ...[2, 3, 4], 5)
// 1 2 3 4 5

[...document.querySelectorAll('div')]
// [<div>, <div>, <div>]

该运算符主要用于函数的调用：

function push(array, ...items) {
  array.push(...items);
}

function add(x, y) {
  return x + y;
}

const numbers = [4, 38];
add(...numbers) // 42

扩展运算符的应用：

1>复制数组：

数组是复合的数据类型，直接复制的话，只是复制了指向底层数据结构的指针，而不是克隆一个全新的数组。

const a1 = [1, 2];
const a2 = a1;

a2[0] = 2;
a1 // [2, 2]

面代码中，a2并不是a1的克隆，而是指向同一份数据的另一个指针。修改a2，会直接导致a1的变化。

扩展运算符提供了复制数组的简便写法：

const a1 = [1, 2];
// 写法一
const a2 = [...a1];
// 写法二
const [...a2] = a1;

上面的两种写法，a2都是a1的克隆。

2>合并数组

const arr1 = ['a', 'b'];
const arr2 = ['c'];
const arr3 = ['d', 'e'];

ES5写法：

// ES5 的合并数组
arr1.concat(arr2, arr3);
// [ 'a', 'b', 'c', 'd', 'e' ]

ES6写法：

// ES6 的合并数组
[...arr1, ...arr2, ...arr3]
// [ 'a', 'b', 'c', 'd', 'e' ]

注意：以上两种方法都是浅拷贝，即它们的成员都是对原数组成员的引用，如果修改了原数组的成员，会同步反映到新数组。

3>字符串

扩展运算符还可以将字符串转化成真正的数组：

[...'hello']
// [ "h", "e", "l", "l", "o" ]

（2）Array.from()

Array.from()用于将以下两类对象转化为真正的数组：

1>类似数组的对象;

2>可遍历的的对象；

（3）Array.from()

Array.Of()用于将一组值转化为数组；

Array.of(3, 11, 8) // [3,11,8]
Array.of(3) // [3]
Array.of(3).length // 1

（4）数组实例的copyWithin()

数组实例的copyWithin方法，在当前数组内部，将指定位置的成员复制到其他位置（会覆盖原有成员），然后返回当前数组。也就是说，使用这个方法，会修改当前数组。

它接受三个参数。

target（必需）：从该位置开始替换数据。如果为负值，表示倒数。
start（可选）：从该位置开始读取数据，默认为 0。如果为负值，表示倒数。
end（可选）：到该位置前停止读取数据，默认等于数组长度。如果为负值，表示倒数

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

上面代码表示将从 3 号位直到数组结束的成员（4 和 5），复制到从 0 号位开始的位置，结果覆盖了原来的 1 和 2。

（5）数组实例的find()和findIndex()

find()：找出第一个符合条件的数组成员，返回该成员，没有符合条件的，则返回undefinded；

findIndex();返回第一个符合条件的成员的位置，如果没有符合条件的，则返回 -1 ；

（6）数组实例的 fill()

fill():fill使用给定值填充一个数组；

['a', 'b', 'c'].fill(7)
// [7, 7, 7]

new Array(3).fill(7)
// [7, 7, 7]

fill()还有第二个和第三个参数，用于指定填充的起始位置和结束位置；

（7）数组实例的entries(),keys()和values()

遍历数组，返回一个遍历器对象，可以用for ..... of ....循环进行遍历

entries():，是对键值对的遍历；

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

keys():是对键名的遍历;

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

values():是对键值的遍历；

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

（8）数组实例 includes()

Array.prototype.includes()方法返回一个布尔值，表示某个数组是否包含给定的值，与字符串的includes()方法类似。

[1, 2, 3].includes(2)     // true
[1, 2, 3].includes(4)     // false
[1, 2, NaN].includes(NaN) // true

该方法的第二个参数表示搜索的起始位置，默认为0。如果第二个参数为负数，则表示倒数的位置，如果这时它大于数组长度（比如第二个参数为-4，但数组长度为3），则会重置为从0开始。

使用indexOf()的缺点:

1>不够语义化，它的含义是找到参数值的第一个出现位置，所以要去比较是否不等于-1，表达起来不够直观;

2>它内部使用严格相等运算符（===）进行判断，这会导致对 NaN 的误判;

（9）数组实例的flat(),flatMap()

flat():数组的成员有时还是数组，Array.prototype.flat()用于将嵌套的数组“拉平”，变成一维的数组。该方法返回一个新数组，对原数据没有影响。

[1, 2, [3, 4]].flat()
// [1, 2, 3, 4]

默认只会“拉平”一层，如果想要“拉平”多层的嵌套数组，可以将 flat()方法的参数写成一个整数，表示想要拉平的层数，默认为1。

[1, 2, [3, [4, 5]]].flat()
// [1, 2, 3, [4, 5]]

[1, 2, [3, [4, 5]]].flat(2)
// [1, 2, 3, 4, 5]

flatMap(): 该方法执行分为两步：1.对数组的每一个元素执行一个处理函数。得到新元素 2.将新元素组成的数组进行 “拉平” 处理，这个方法只能拉平一层；

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2019-05-28 ，如有侵权请联系 cloudcommunity@tencent.com 删除

编程算法

ecmascript

本文分享自作者个人站点/博客前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体同步曝光计划，欢迎热爱写作的你一起参与！

编程算法

ecmascript

登录后参与评论

0 条评论

热度