ES6（超详细）2—持续更新中~

Crizz
127 阅读5分钟

持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第4天，[点击查看活动详情]

ES6专题所有文章：

ES6-1（let、const、解构赋值、模板字符串、对象简化写法、箭头函数） ES6-2（函数默认参数、扩展运算符、rest参数、Symbol） ES6-3（迭代器、生成器、Promise、Set、Map） ES6-4（Class、数值扩展、对象方法扩展、模块化）

6. 函数参数默认值

函数的默认参数，也出现在许多后端语言中，顾名思义，就是为函数的参数设置一个默认值，当你调用该函数时，如果传入了参数的值，将会把传入的值赋值给该参数，如果未传入，该参数的值将是你定义的默认值

  1. ES6允许给函数参数赋值初始值
function add(a,b=10){
  return a + b;
}
let result1 = add(1)
let result2 = add(1,2)
console.log(result1)  //11
console.log(result2)  //3
  1. 可以给形参赋初始值，一般位置要靠后
function add(a,b,c=12){
    return a + b + c; 
}
let result = add (1,2);
console.log(result)  // 15

function add1(a,b=12,c){
  return a + b + c;
}
let result1 = add1(1,2)
console.log(result1)  //NaN

由于函数参数的赋值都是按顺序的，所以如果将默认参数放在中间，在传递参数的时候，无论是否有参数默认值，都会对对应位置的参数进行赋值，导致后续的参数轮空，因此c为undefined，导致最终的结果为NaN

  1. 与解构赋值结合
function A({host='127.0.0.1',username,password,port}){
    console.log(host+username+password+port)
}
A({
    username:'ran',
    password:'123456',
    port:3306
})

默认参数与解构赋值的结合，在后续开发中处理后端返回的数据时也经常会使用到，因为后端返回的数据类型通常为一个对象，此时如果需要对其中的一些属性进行存储，则可以使用解构赋值形式的参数传入，同时为了防止某些属性在后端返回的数据中没有，需要设置默认参数

7. 扩展运算符

ES6中新增的另一个亮点就是扩展运算符，能够快速将数组进行解构，转换为逗号分隔的参数序列

const tfboys=['AA','BB','CC']
function chunwan(){
    console.log(arguments);
}
chunwan(...tfboys);  //0:'AA' 1:'BB' 2:'CC'
  • 应用
  1. 数组的合并
const A = ['aa','bb'];
const B = ['cc','dd'];
const C = [...A,...B];
console.log(C)   //[aa,bb,cc,dd]
  1. 数组的克隆
const A = ['a','b','c'];
const B = [...A];
console.log(B)   //[a,b,c]

注意： 这里的克隆是深拷贝（与const B = A区分开）；利用扩展运算符进行克隆相当于将原数组拆开，并将其每个元素单独存入新数组中，不是简单的将数组的地址赋值给B，而是开辟了一个新的内存空间存放新数组

  1. 将伪数组转换为真正的数组
const A = documents.querySelectorAll('div');
const B = [...A];
console.log(B) // [div,div,div]

当我们通过querySelectorAll方法获取到的DOM元素组合时，为了能够更加方便地进行操作，可以利用扩展运算符将其转换为真正的数组（类似地也可以用于函数中的arguments属性）

8. rest参数

ES6引入rest参数，用于获取函数的实参，用来代替arguments，而与arguments不同，rest是一个真正意义上的数组，可以使用数组的各种方法。

  1. rest参数一般用于当参数数量不确定的时候
function A(...args){
    console.log(args);
}
A('aaa','bbb','ccc');

当参数不确定是，可以在定义形参时利用扩展运算符，这样能够在调用函数时将实参收集进一个数组中，从而灵活应对不同数量的参数

  1. rest参数也可以进行解构
function A(...[a,b,c]){
  console.log(a + b + c)
}
A(123,456,789)

利用解构rest可以对传入的参数分别定义变量名，方便在函数内部访问使用

9. Symbol

ES6引入了一种新的原始数据类型 Symbol，表示独一无二的值。它是JavaScript语言的第七种数据类型，是一种类似于字符串的数据类型。

  1. 特点

    • Symbol的值是唯一的，用来解决命名冲突的问题
    • Symbol值不能与其他数据进行运算
    • Symbol定义的对象属性不能使用for…in循环遍历，但是可以使用Reflect.ownKeys来获取对象的所有键名

  2. Symbol的值是唯一的

let s1 = Symbol('aa');
let s2= Symbol('aa');
console.log(s1 === s2)   //false

let s3 = Symbol.for('bb');
let s4 = Symbol.for('bb');
comsole.log(s3 === s4) ///true

这也是Symbol的最主要特点，用于解决命名冲突的问题

即当你拿到一个对象数据或代码时，希望在其中增添一些变量，但是又怕变量名已经被定义过，这时候Symbol将会起到作用

  1. 不能与其他数据进行运算
let result = s + 100  //error
let result = s > 100  //error
let result = s + s  //error

3. 不会在for...in 、 for...of 、 Object.keys() 或Object.getOwnPropertyNames() 中被访问到

let sy = Symbol('a')
let obj = {
  [sy]:123,
  aa:5,
  aaa:6
}
for(let key in obj){
  console.log(key)
}

以上代码的输出结果只会输出aa和aaa，并不能够遍历访问到Symbol类型的key

  1. 但是ES6提供了Object.getOwnPropertySymbols() 和Reflect.ownKeys() 可以访问到Symbol属性
let sy = Symbol('a')
let obj = {
  [sy]:123,
  aa:5,
  aaa:6
}
console.log(Object.getOwnPropertySymbols(obj))
console.log(Reflect.ownKeys(obj))

Object.getOwnPropertySymbols()用于获取一个对象中的Symbol属性

Reflect.ownKeys()则是获取对象中的所有属性，包括Symbol属性

  • 应用
//1. 给对象添加方法方式一：
let obj1 = {
    name : 'xiaoming'
}
let obj2 = {
    a:Symbol(),
    b:Symbol()
}
obj1[obj2.a]=function(){
    console.log('aaa');
}
obj1[obj2.b]=function(){
    console.log('bbb');
}
console.log(obj1)    // 

//2. 给对象添加方法方式二

let person = {
    name: '小明',
    [Symbol('say')]:function(){
        console.log('哈哈哈哈哈')
    }
}
console.log(person)

示例1的输出结果：

示例2的输出结果:

哈喽~ 这里是Crizz的前端之旅

ES6专题持续更新中~

若有收获，就点个赞吧

avatar
文章
阅读
粉丝