飞跃高山与大洋的鱼飞跃高山与大洋的鱼
首页
先看
计算机
  • 数学
  • Linux
  • Arch
  • Manjaro
  • Ubuntu
  • CentOS
  • Kubernetes
  • Web
  • JavaScript
  • TypeScript
  • CSS
  • Canvas
  • Vue
  • Vite
  • NuxtJS
  • Webpack
  • Flutter
  • D3
  • Jest
  • WeApp
  • Utils
  • Nodejs
  • Nestjs
  • Golang
  • Nginx
  • Traefik
  • MySQL
  • MongoDB
  • Redis
  • Docker
算法
  • 像素风
  • Git
  • Github
  • VSCode
  • Chrome
  • Google
  • Bookmark scripts
  • 导航 🎉
  • VuePress 侧边栏插件
  • VuePress 官网
🚇 开往
首页
先看
计算机
  • 数学
  • Linux
  • Arch
  • Manjaro
  • Ubuntu
  • CentOS
  • Kubernetes
  • Web
  • JavaScript
  • TypeScript
  • CSS
  • Canvas
  • Vue
  • Vite
  • NuxtJS
  • Webpack
  • Flutter
  • D3
  • Jest
  • WeApp
  • Utils
  • Nodejs
  • Nestjs
  • Golang
  • Nginx
  • Traefik
  • MySQL
  • MongoDB
  • Redis
  • Docker
算法
  • 像素风
  • Git
  • Github
  • VSCode
  • Chrome
  • Google
  • Bookmark scripts
  • 导航 🎉
  • VuePress 侧边栏插件
  • VuePress 官网
🚇 开往
  • JAVASCRIPT

    • JavaScript
    • 语句和表达式
    • 数组空位
    • 无法访问 undefined、null 的属性
    • currying
    • 装饰器 Decorator
    • ES6 的简单使用
      • 基础语法
        • 1. 从箭头函数开始
      • 数组方法
        • 1. 转化为数组
        • 2. 生成连续值
        • 3. 修改方法
      • 对象方法
      • 字符串方法
        • 1. 字符串补全
        • 2. 获取字符及对应的Unicode
    • Error 类型
    • 事件队列
    • 隐式转换
    • 调用表达式
    • 函数调用
    • 运算符优先级
    • 原型链
    • 正则 exec
    • 作用域与闭包
    • 一步步启用 babel7
    • 什么是 this
    • typeof
    • 全局属性 undefined
    • 自增/减

ES6 的简单使用

作为一个前端,你需要牢记 ES6 的每个 API,尤其是数组、对象、字符串。

基础语法

1. 从箭头函数开始

认识 ES6 便被箭头函数的简洁所惊艳了。

但在使用中也有一些注意事项。

返回对象

const foo = () => ({ bar: 'baz' });

由于语法解析的问题,大括号会被解释为代码块,直接返回对象时需小括号进行包裹。

禁止构造函数

箭头函数都没有自己的 this、arguments、super 和 new.target,你是要搞哪样?

数组方法

1. 转化为数组

字符串转化,其实只要是类数组对象(拥有一个 length 属性和若干索引属性的任意对象)都行:

// 不要对 split 念念不忘了
Array.from('foo');  // ["f", "o", "o"]

2. 生成连续值

const range = (start, stop, step) => Array.from({ length: (stop - start) / step + 1}, (_, i) => start + (i * step));

range(0, 4, 1);
// [0, 1, 2, 3, 4] 

range(1, 10, 2); 
// [1, 3, 5, 7, 9]

range('A'.charCodeAt(0), 'Z'.charCodeAt(0), 1).map(x => String.fromCharCode(x));
// ["A", "B", "C", "D", "E", "F", "G", "H", "I", "J", "K", "L", "M", "N", "O", "P", "Q", "R", "S", "T", "U", "V", "W", "X", "Y", "Z"]

3. 修改方法

需要小心一部分方法会修改原数组对象:

  • Array.prototype.copyWithin
  • Array.prototype.fill
  • Array.prototype.pop
  • Array.prototype.push
  • Array.prototype.shift
  • Array.prototype.unshift
  • Array.prototype.reverse
  • Array.prototype.sort
  • Array.prototype.splice

对象方法

在 ES5 时存在三种:

  1. native object(原生对象),指语义完全由规范定义且不掺杂任何宿主环境定义的对象。
  2. built-in object (内置对象),如 Math、Date 等。
  3. host object (宿主对象),由执行环境提供,如浏览器的 window 和 V8 的 global。

而 ES6 时划分更细,更新为四种:

  1. ordinary object (普通对象),需要具备了对象的所有基本内置方法。
  2. exotic object (外来对象),与“普通对象”相反,所以一个对象不是“普通对象”,就是“外来对象”。
  3. standard object (标准对象),规范定义的对象(?)。
  4. built-in object (内置对象),同 ES5。

字符串方法

1. 字符串补全

补全很简单,使用 padStart 和 padEnd 即可:

'abc'.padStart(10, "foo");  // "foofoofabc"
'abc'.padStart(6,"123465"); // "123abc"
'abc'.padStart(8, "0");     // "00000abc"
'abc'.padStart(1);          // "abc"
'abc'.padStart(4);          // " abc"
'abc'.padStart(10);         // "       abc"

// `padEnd` 在末尾添加

2. 获取字符及对应的Unicode

字符串取值与数组一致,都是根据索引:

const anyString = "Brave new world";

anyString.charAt(); // "B"
anyString.charAt(0); // "B"
anyString.charAt(1); // "r"
anyString.charAt(999); // ""

anyString.charCodeAt(); // 66
anyString.charCodeAt(1); // 114
anyString.charCodeAt(999); // NaN

// 比 charCodeAt 更强
anyString.codePointAt(); // 66
anyString.codePointAt(1); // 114
anyString.codePointAt(999); // undefined
编辑文档!
上次更新:
贡献者: shanyuhai123
Prev
装饰器 Decorator
Next
Error 类型