重学前端-ES6+新特性总结

重学前端-ES6+新特性总结

技术杂谈小彩虹2021-08-01 5:35:51130A+A-

前言

最近开始重学前端,学习过程中将笔记跟大家分享,希望对大家有所帮助,共同成长,文章中有不对的地方请大家指正。

本文简单列举了ES6+中的一些新特性,部分知识点涉及面过大,本文将一带而过,后面将会另起一篇去做详细介绍,比如:Promise,Generator等。

正文

1. let、const块级作用域以及和var的区别

  • let、const声明的变量,在for,if语句中,会形成块级作用域,块级作用域内的变量,不能被作用域外部使用
  • let、const声明变量不再会有声明提升,在变量声明之前使用运行时会报错
//块级作用域一级块级作用域的使用
if(true) {
    const param = 'param in if block';
    console.log(param);//param in if block
}
console.log(param);//块级作用域外访问内部定义的变量,ReferenceError: param is not defined
  • 块级作用域声明变量,会出现“暂时性死区”,块级作用域声明变量前使用变量,将会报错
// 暂时性死区
const i = 100;
if(i) {
    console.log(i); //ReferenceError: Cannot access 'i' before initialization
    const i = 1000;
}
  • const声明的是一个常量,声明必须初始化
// const常量声明必须初始化
const i;
i = 10;
console.log(i) //SyntaxError: Missing initializer in const declaration
  • 如果const声明的是基本类型常量,初始化之后不能修改;引用类型的常量,可以修改其成员变量;
// 基本类型常量不能修改,引用类型常量能修改属性
const str = 'str';
str = 'str1';//TypeError: Assignment to constant variable.

const arr = [1, 2, 3];
arr[0] = 100;
console.log(arr[0]) //100
  • 和var的区别
声明方式 变量提升 作用域 初始值 重复定义
var 函数级 不需要 允许
let 块级 不需要 不允许
const 块级 必需 不允许

2.解构-快速提取数组/对象中的元素

  • 数组解构

  • 单独解构-根据数组索引,将数组解构成单独的元素

const arr = [1, 2, 3];

const [a, b, c] = arr;
console.log(a, b, c);//1,2,3
const [, , d] = arr;
console.log(d)//3
  • 默认值,解构时可以给变量设置默认值,数组没有这个元素的话
const arr = [1, 2, 3];

const [, , , defaultVal = '4'] = arr;
console.log('设置默认值',defaultVal);
  • 剩余解构-用 "...+变量名" 解构剩余参数到新数组,只能用一次
const arr = [1, 2, 3];

const [e, ...rest] = arr;
console.log(rest)//[2, 3]
  • 实例应用
// 拆分字符串
const str = 'xiaobai/18/200';
const strArr = str.split('/');
const [, age, ] = strArr;
console.log(age)//18
  • 对象解构

  • 单个/多个解构-跟数组解构差不多

 const obj = {name: 'xiaohui', age: 18, height: undefined};
 const {name, age} = obj;
 console.log(name, age) // 'xiaohui', 18
  • 解构+重命名-给解构出来的变量重命名
const obj = {name: 'xiaohui', age: 18, height: undefined};
const {mame: objMame} = obj;
console.log(objMame)
  • 默认值-给解构变量设置默认值
const obj = {name: 'xiaohui', age: 18, height: undefined};
const {mame: objMame} = obj;
console.log(objMame)

3.模板字符串

  • 用法:

  • 使用``将字符串包裹起来

  • 功能:

  • 可以换行、插值、使用标签函数进行字符串操作

  • 示例:

  • 换行/插值

//换行
const str = `fdsjak
fdsa`
console.log(str)

// 插值
const strs = `random: ${Math.random()}`;
console.log(strs)
  • 标签函数-可以对模板字符串的字符串和插值进行处理和过滤等操作
/**
 * 字符串模板函数
 * @param {array} strs 以插值为分隔符组成的字符串数组
 * @param {string} name 插值的value,有多少个就会传入多少个
 */
const tagFunc = (strs, name, gender) => {
  const [str1, str2, str3] = strs;
  const genderParsed = gender == "1" ? "男" : "女";
  // 可以在此做过滤,字符串处理,多语言等操作
  return str1 + name + str2 + str3 + genderParsed;
};

// 带标签的模板字符串,
const person = {
  name: "xiaohui",
  gender: 1,
};
// 返回值为标签函数的返回值
const result = tagFunc`my name is ${person.name}.gender is ${person.gender}`;
console.log(result);//my name is xiaohui.gender is 男

4. 字符串扩展方法

  • includes-是否包含
  • startsWith-是否以什么开始
  • endsWith-是否以什么结束
 const str = 'abcd';

 console.log(str.includes('e'));//false
 console.log(str.startsWith('a'));//true
 console.log(str.endsWith('a'))//false

5.参数默认值&剩余参数

  • 给函数形参设置默认值
// 带默认参数的形参一般放在后面,减少传参导致的错误几率
const defaultParams = function (name,age = 0) {
  return [age, name]
};
console.log(defaultParams(1))
  • 使用...rest形式设置剩余形参,支持无限参数
// 剩余参数,转化成数组
const restParams = function(...args) {
    console.log(args.toString());//1, 2, 3, 4, 5
}

restParams(1, 2, 3, 4, 5)

6.展开数组

使用...将数组展开

const arr = [1, 2, 3];

console.log(...arr);
// 等价于es5中以下写法
console.log.apply(console, arr)

7.箭头函数

特性&优势:

  • 1、简化了函数的写法
  • 2、没有this机制,this继承自上一个函数的上下文,如果上一层没有函数,则指向window
  • 3、作为异步回调函数时,可解决this指向问题
const inc = n => n + 1;
console.log(inc(100))

const obj = {
    name: 'aa',
    func() {
        setTimeout(() => {
            console.log(this.name);//aa
        }, 0);
        setTimeout(function() {
            console.log(this.name);//undefined
        }, 0);
    }
}
obj.func();

8.对象字面量增强

  • 同名属性可以省略key:value形式,直接key,
  • 函数可以省略key:value形式
  • 可以直接func(),
  • 可以使用计算属性,比如:{[Math.random()]: value}
/**
 * 1、增强了对象字面量:
 * 1,同名属性可以省略key:value形式,直接key,
 * 2,函数可以省略key:value形式
 * 3,可以直接func(),
 * 4,可以使用计算属性,比如:{[Math.random()]: value}
 */
const arr = [1, 2, 3];
 const obj = {
     arr,
     func(){console.log(this.arr)},
     [Math.random()]: arr
 }

 console.log(obj)

9.Object.assign(target1, target2, targetN)-复制/合并对象

/**
 * Object.assign(target1, target2, ...targetn)
 * 后面的属性向前面的属性合并
 * 如果target1是空对象,可以创建一个全新对象,而不是对象引用
 */
const obj1 = {
  a: 1,
  b: 2
};
const obj2 = {
  a: 1,
  b: 2,
};

const obj3 = Object.assign({}, obj1);
obj3.a  = 5;
console.log(obj3, obj2, obj1);

10.Object.is(value1, value2)

作用:

比较两个值是否相等

特性:

  • 没有隐式转换
  • 可以比较+0,-0、NaN
console.log(NaN === NaN) //false
console.log(Object.is(NaN, NaN)) //true
console.log(0 === -0) // true
console.log(Object.is(0, -0))//false
console.log(Object.is(1, 1))//true

11.Proxy(object, handler)

作用:

  • 代理一个对象的所有,包括读写操作和各种操作的监听

用法:

const P = {
  n: "p",
  a: 19,
};

const proxy = new Proxy(P, {
  get(target, property) {
    console.log(target, property);
    return property in target ? target[property] : null;
  },
  defineProperty(target, property, attrs) {
    console.log(target, property, attrs);
    //   throw new Error('不允许修改')
  },
  deleteProperty(target, property) {
    console.log(target, property);
    delete target[property];
  },
  set(target, property, value) {
    target[property] = value;
  },
});

proxy.c = 100;
console.log('pp',P);

与Object.definePropert对比

优势:
  • 拥有很多defineProperty没有的属性方法,比如:

  • handler.getPrototypeOf() ---Object.getPrototypeOf 方法的监听器
  • handler.setPrototypeOf() ---Object.setPrototypeOf 方法的监听器。
  • handler.isExtensible() ---Object.isExtensible 方法的监听器。
  • handler.preventExtensions() ---Object.preventExtensions 方法的监听器。
  • handler.getOwnPropertyDescriptor() ---Object.getOwnPropertyDescriptor 方法的监听器。
  • handler.defineProperty() ---Object.defineProperty 方法的监听器。
  • handler.has() ---in 操作符的监听器。
  • handler.get() ---属性读取操作的监听器。
  • handler.set() ---属性设置操作的监听器。
  • handler.deleteProperty() ---delete 操作符的监听器
  • handler.ownKeys() ---Object.getOwnPropertyNames 方法和 Object.getOwnPropertySymbols 方法的监听器。
  • handler.apply() ---函数调用操作的监听器。
  • handler.construct() ---new 操作符的监听器。
  • 对数组的监视更方便

  • 以非侵入的访视监管对象的读写

12.Reflect

作用:

集成Object操作的所有方法,统一、方便,具体方法如下:

用于对对象的统一操作,集成Object相关的所有方法

1、apply:类似Function.prototype.apply

2、Reflect.construct()

对构造函数进行 new 操作,相当于执行 new target(...args)。

3、Reflect.defineProperty()

和 Object.defineProperty() 类似。

4、Reflect.deleteProperty()

作为函数的delete操作符,相当于执行 delete target[name]。

5、Reflect.get()

获取对象身上某个属性的值,类似于 target[name]。

6、Reflect.getOwnPropertyDescriptor()

类似于 Object.getOwnPropertyDescriptor()。

7、Reflect.getPrototypeOf()

类似于 Object.getPrototypeOf(), 获取目标对象的原型。

8、Reflect.has()

判断一个对象是否存在某个属性,和 in 运算符 的功能完全相同。

9、Reflect.isExtensible()

类似于 Object.isExtensible().判断对象是否可扩展,可以添加额外属性

Object.seal(封闭对象), Object.freeze(冻结对象)是不可扩展的

10、Reflect.ownKeys()

返回一个包含所有自身属性(不包含继承属性)的数组。(类似于 Object.keys(), 但不会受enumerable影响).

11、Reflect.preventExtensions()

类似于 Object.preventExtensions()。返回一个Boolean。

12、Reflect.set()

将值分配给属性的函数。返回一个Boolean,如果更新成功,则返回true, 反之返回false。

13、Reflect.setPrototypeOf()

类似于 Object.setPrototypeOf()。

示例:

const obj = {
    name: 'reflect'
}
Reflect.preventExtensions(obj);//禁止扩展
console.log(Reflect.set(obj, 'age', 'xiaobai'))//false
console.log(obj)//{ name: 'reflect' }
console.log(Reflect.isExtensible(obj, 'name'))//false
console.log(Reflect.ownKeys(obj))//[ 'name' ]

13.Promise

作用:解决异步编程中回调嵌套过深问题

14.class&静态方法&继承

  • 定义

  • 使用class关键字定义类

class Person{
  constructor(props) {
    this.props = props;
  }
}
  • 方法

  • 实例方法,需要实例化之后才能调用,this指向实例

  • 静态方法,用static修饰符修饰,可以直接通过类名调用,不需要实例化,this不指向实例,而是指向当前类

class Person{
  constructor(props) {
    this.props = props;
  }
  // 实例方法
  eat() {

  }
  // 静态方法
  static run() {

  }
}
// 调用静态方法
Person.run();
const person = new Person('props');
// 调用实例方法
person.eat();
  • 继承:子类使用extends关键字实现继承,可以继承父类所有属性
class Student extends Person {
  constructor(props) {
    super(props);
  }
  printProps() {
    console.log(this.props);
  }
}

const student  = new Student('student');
student.printProps();

15.Set

说明:

Set是一种类似于数组的数据结构

特性:

  • 元素唯一性,不允许重复元素
  • 使用add增加重复元素,将会被忽略

用途:

  • 数组去重
  • 数据存储
 const arr = [1,3,1,1,1]
 const set = new Set(arr);
 set.add(1).add(1);
 console.log(set.size)//2
 const newArr = Array.from(set);
 console.log(newArr)//[ 1, 3 ]

16.Map

说明:

类似Object,以key、value形式存储数据

区别:

Map键不会隐式转换成字符串,而是保持原有类型

实例:

const map = new Map();
map.set(1, 1);
map.set('name', 'map')
map.set(obj, obj)
console.log(map.get(1)) //1
/**
    1 1
    name map
    { '1': 1, true: true, a: 'a' } { '1': 1, true: true, a: 'a' }
 */
map.forEach((val, key) => {console.log(key, val)})

17.Symbol

说明:

JavaScript第六种原始数据类型,用来定义一个唯一的变量

  • 作用:

  • 创建唯一的变量,解决对象键名重复问题

  • 为对象、类、函数等创建私有属性
  • 修改对象的toString标签

  • 为对象添加迭代器属性

  • 如何获取对象的symbol属性?

  • Object.getOwnPropertySymbols(object)

  • 实例
// 对象属性重名问题;
const objSymbol = {
    [Symbol()]: 1,
    [Symbol()]: 2
}
console.log(objSymbol)

// 2、为对象、类、函数等创建私有属性
const name = Symbol();
const obj2 = {
    [name]: 'symbol',
    testPrivate() {
        console.log(this[name]);
    }
}

obj2.testPrivate();
// 定义toString标签;
console.log(obj2.toString());
obj2[Symbol.toStringTag] = 'xx';
console.log(obj2.toString());//[object xx]

18.for...of...

用途:

已统一的方式,遍历所有引用数据类型

特性:

可以随时使用break终止遍历,而forEach不行

实例:

// 基本用法
// 遍历数组
const arr = [1, 2, 3, 4];
for(const item of arr) {
    if(item > 3) {
        break;
    }
    if(item > 2) {
        console.log(item)
    }
}

// 遍历set
const set = new Set();
set.add('foo').add('bar');
for(const item of set) {
    console.log('set for of',item)
}
// 遍历map
const map = new Map();
map.set('foo', 'one').set('bar', 'two');
for(const [key, val] of map) {
    console.log('for of map',key, val)
}
//迭代对象
const obj = {
  name: "xiaohui",
  age: "10",
  store: [1, 2, 3],
  // 实现可迭代的接口
  [Symbol.iterator]: function () {
    const params = [this.name, this.age, this.store]
    let index = 0;
    return {
      next() {
        const ret = {
          value: params[index],
          done: index >= params.length,
        };
        index++;
        return ret;
      },
    };
  },
};

for (const item of obj) {
  console.log("obj for of", item);
}

19. 迭代器模式

/**
* 迭代器模式* 作用:通过Symbol.interator对外提供统一的接口,获取内部的数据
* 外部可以通过for...of...去迭代内部的数据*/
const tods = {
  life: ["eat", "sleep"],
  learn: ["js", "dart"],
  // 增加的任务
  work: ["sale", "customer"],
  [Symbol.iterator]: function () {
    const all = [];
    Object.keys(this).forEach(key => {
        all.push(...this[key])
    })
    let index = 0;
    return {
      next() {
        const ret = {
          value: all[index],
          done: index >= all.length,
        };
        index++;
        return ret;
      },
    };
  },
};

for (const item of tods) {
  console.log(item);
}

20.Generator生成器

  • Generator
  • 函数前添加*,生成一个生成器
  • 一般配合yield关键字使用
  • 最大特点,惰性执行,调next才会往下执行
  • 主要用来解决异步回调过深的问题
// 生成迭代器方法
//  生成器Generator的应用

function* createIdGenerator() {
  let id = 1;
  while (id<3) yield id++;
}
const createId = createIdGenerator();
console.log(createId.next());//{ value: 1, done: false }
console.log(createId.next());//{ value: 2, done: false }
console.log(createId.next());//{ value: undefined, done: true }

const todos = {
  life: ["eat", "sleep", "baba"],
  learn: ["es5", "es6", "design pattern"],
  work: ["b", "c", "framework"],
  [Symbol.iterator]: function* () {
    const all = [...this.life, ...this.learn, ...this.work];
    for(const i of all) {
        yield i;
    }
  },
};
for(const item of todos) {
    console.log(item)
}

21.includes函数-es2016

判断数组是否包含某个元素,包含NaN,解决indexOf无法查找NaN问题

//  includes函数
const arr = ["foo", "bar", "baz", NaN];
console.log(arr.includes(NaN));//true
console.log(arr.indexOf(NaN));//-1

22.** 运算符-es2016

指数运算

// 指数运算符 **
// es5中2十次方
console.log(Math.pow(2, 10));
// es6中2十次方
console.log(2 ** 10);

23.values函数-es2017

将对象的值以数组的形式返回

const obj = {
  foo: 1,
  bar: 2,
  baz: 3,
};

console.log(Object.values(obj));//[ 1, 2, 3 ]

24.entries函数-es2017

将对象以键值对二维数组返回,使之可以使用for...of...遍历

const obj = {
  foo: 1,
  bar: 2,
  baz: 3,
};
console.log(Object.entries(obj));
const entry = Object.entries(obj);
for (const [key, value] of entry) {
  console.log(key, value);
}

25.Object.getOwnPropertyDescriptors(obj)-es2017

获取对象的描述信息

可以通过获得的描述信息,配合Object.defineProperties来完整复制对象,包含get,set方法

// getOwnPropertyDescriptors

// 普通get方法
const objGet = {
  foo: 1,
  bar: 2,
  get getCount() {
    return this.foo + this.bar;
  },
};
// assign方法会把getCount当做普通属性复制,从而getCount为3,修改bar不管用
const objGet1 = Object.assign({}, objGet);
objGet1.bar = 3;
console.log(objGet1.getCount);//3
// descriptors
const descriptors = Object.getOwnPropertyDescriptors(objGet);
console.log("des", descriptors);
// 通过descriptors来复制对象,可以完整复制对象,包含get,set
const objGet2 = Object.defineProperties({}, descriptors);
objGet2.bar = 3;
console.log(objGet2.getCount);//4

26.padStart, padEnd函数-es2017

在字符串前,或者后面追加指定字符串

参数:

targetLenght: 填充后的目标长度

padString:填充的字符串

规则:

1、填充的字符串超过目标长度,会在规定长度时被截断

2、填充字符串太短会以空格填充

3、padString未传值,以空格填充

作用:

一般用来对齐字符串输出

/**
 *  foo.................|1
    barbar..............|2
    bazbazbaz...........|3
 */
console.log(`${key.padEnd(20, '.')}${value.toString().padStart(2, '|')}`)

点击这里复制本文地址 以上内容由权冠洲的博客整理呈现,请务必在转载分享时注明本文地址!如对内容有疑问,请联系我们,谢谢!

支持Ctrl+Enter提交

联系我们| 本站介绍| 留言建议 | 交换友链 | 域名展示
本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除

权冠洲的博客 © All Rights Reserved.  Copyright quanguanzhou.top All Rights Reserved
苏公网安备 32030302000848号   苏ICP备20033101号-1
本网站由 提供CDN/云存储服务

联系我们