ES6个人学习简单总结（前端小白，长期更新，技术有限，不喜勿喷）

Ping
377 阅读6分钟

前端小白一枚，最近发现自己的前端知识体系比较混乱，没有明确的学习方向，所以打算将一些技术知识重新学习一遍。由于个人能力有限，无法建立完整的总结体系架构，只能简单总结，主要也是作为日后开发中的一个参考。如果有地方写的不对，欢迎大家指出更正。如果您觉得写得勉强能入您法眼，还请点个赞。

学习顺序来自网上各视频教程，本文所有概念及相关用法均来自阮一峰老师的《ECMAScript 6入门》，部分来自廖雪峰老师的《JavaScript》，并会在最后附上来源以供参考。

相关视频教程：

let和const命令（2019-12-07）

let命令

let是es6用来声明变量的命令，用法类似于var,let声明的变量只在其代码块内有效。

{
    var a = 1;
    let b = 2;
}

// a => 1
// b => ReferenceError: a is not defined.

参考原文

const命令

const命令声明一个常量，一旦声明之后，该常量的值就无法改变。

const PI = 3.14;
PI = 4.14;

// Uncaught TypeError: Assignment to constant variable.

参考原文

箭头函数（2019-12-08）

写法 () => {}

箭头函数相当于匿名函数，并且简化了函数定义。

function func(){
    // ...
}
let func = () => {
    // ...
}
let func = a => a*a

跟传统的函数一样，用圆括号将参数括起来，函数内容写在大括号中，不过箭头函数存在特殊情况，如上代码所示第三种写法，当箭头函数只有切必须有一个参数时可省略圆括号，当函数只有一条语句时可省略大括号，甚至return都可以省略。

箭头函数的重点在于其`this`的指向，可自行搜索学习。

参考原文

变量的解构赋值（2019-12-09）

ES6允许按照一定的模式，从数组和对象中提取值，对变量进行赋值，这被称为解构赋值

// 传统定义多个变量
let a = 1;
let b = 2;
let c = 3;

// ES6解构赋值写法
// 数组写法
let [a,b,c] = [1,2,3];
// a => 1, b => 2, c => 3
// 对象写法
let {a, b, c} = {a:1,b:2,c:3};
// a => 1, b => 2, c => 3

// 默认值
let [a, b, c = 3] = [1, 2,];
// a => 1, b => 2, c => 3

如果将一个已经声明的变量用对象的解构赋值要注意： 

let a = 1;
{a} = {a:4} => // SyntaxError: syntax error
// 正确写法
({a} = {a:4});

用途

  • 变量交换值
  • 函数返回多个值
  • 函数参数定义
  • 提取JSON数据
  • 函数参数默认值
  • 遍历map
  • 输入模块的指定方法（这个和函数参数的定义有点相似）

参考原文

字符串的扩展&&新增方法（2019-12-09）

模板字符串

let i = `
hello
the world
you are so beautiful`

// i =>
//hello
//the world
//you are so beautiful

如果需要在字符串中加入变量，需要将变量写在${}中：

let i = 'hello';
let s = `${i} world`;
// s=> hello world

字符串的新增方法

includes()、startsWith()、endsWith()

  • `includes()：返回布尔值，表示找到了参数字符串
  • startsWith()：返回布尔值，表示字符串以参数字符串开头
  • endsWith()：返回布尔值，表示字符串以参数字符串结尾

repeat()

返回一个字符串，表示将原字符串重复n次;

let i = '啊';
i.repeat(3);
// => '啊啊啊'

padStart()、padEnd()

  • padStart()：用于字符串头部补全
  • padEnd()：用于字符串尾部补全
let i = 'hello';
i.padStart(10,'a');
// => aaaaahello
i.padEnd(10,'b');
// => hellobbbbb

trimStart()、trimEnd()

和trim()的用法一样：

  • trimStart()：消除字符串头部的空格
  • trimEnd()：消除字符串尾部的空格
let i = "  hello  ";
i.trimStart();
// => "hello  "
i.trimEnd();
// => "  hello"

参考原文：字符串的扩展 字符串的新增方法

数值的扩展（2018-12-10）

二进制和八进制表示法

二进制用前缀0b（或0B）表示，八进制用前缀0o（或0O）表示：

let a = 0B0101;
// a => 5
let b = 0O0101;
// b => 65

Number.isFinite()、Number.isNaN()方法

检查一个数是否为有限的或者是否为NaN：

// Number.isFinite() 如果不是数值类型一律返回false
Number.isFinite(2); // => true
Number.isFinite(true); // => false
Number.isFinite('15'); // => false

// Number.isNan() 如果不是NaN，一律返回false
Number.isNaN(NaN); // => true
Number.isNaN(222); // => false
Number.isNaN('222'); // => false

Number.parseInt()、Number.parseFloat()方法

行为已parseInt()、parseFloat()完全一致

// ES5写法
parseInt("12.34"); // => 12
parseFloat("12.35*"); // => 12.35

// ES6写法
Number.parseInt("12.34"); // => 12
Number.parseFloat("12.35*"); // => 12.35

Number.isInteger()方法

判断一个数是否为整数：

Number.isInteger(12) // => true
Number.isInteger(12.0) // => true
// 如果不是数值，一律返回false
Number.isInteger(true); // => false
Number.isInteger('12'); // => false

Math对象的扩展

Math.trunc()方法

用于去除一个数的小数部分，返回整数部分

Math.trunc(12.34); // => 12
// 非数值会先调用Number方法转换成数值
Math.trunc('12.34'); // => 12

Math.sign()方法

判断一个数是正数、负数还是0。

Math.sign(-5); // -1
Math.sign(0); // +0
Math.sign(-0); // -0
Math.sign(NaN); // NaN
Math.sign('5'); // +1
Math.sign('a'); // NaN

参考原文

函数的扩展（2019-12-10）

函数参数的默认值

function a(x,y=4){
    console.log(x,y)
}
a(2); // => 2,4
a(2,3); // => 2,3

函数默认值与结构赋值结合使用 

function a({x=0,y=0}){
    console.log(x,y)
}
a();              // Cannot read property 'x' of undefined  
a({});            // => 0,0
a({x:4,y:5});     // => 4,5

上面代码使用了对象的结构赋值默认值，只有函数的参数是对象时才有用，如果没提供参数就会报错，提供函数参数的默认值可以避免这种情况：

function a({x=0,y=0} = {}){
    console.log(x,y)
}
a();            // => 0,0
a({x:4,y:5});    // => 4,5

rest参数

ES6引入rest参数，写法为 (...arg)，用于获取多余参数并放入一个对象中：

function a(...arg){
    console.log(arg)
}
a(1,2,3);   // => [1,2,3]

数组的扩展（2019-12-11）

扩展运算符

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

console.log(...[1,2,3]);
// => 1, 2, 3
function a(...arg){
    console.log(...arg)
}
a(1,2,3); // => 1, 2, 3

替代apply方法

let arr = [2, 4, 1, 8];
Math.max.apply(null,arr); // => 8
Math.max(...arr); // => 9

复制数组

let arr = [1, 2, 3];
let arr1 = arr.concat(); // => [1, 2, 3]
let arr2 = [...arr1]; // => [1,2,3]

合并数组

let arr1 = [1, 2, 3];
let arr2 = [4, 5, 6];
arr1.concat(arr2); // => [1, 2, 3, 4, 5, 6]
[...arr1,...arr2]; // => [1, 2, 3, 4, 5, 6]

Array.from()

Array.from方法用于将两类对象转为真正的数组：类似数组对象（array-like object）和可遍历（iterable）的对象：

let obj = {
    '0': 'h',
    '1': 'e',
    '2': 'l',
    '3': 'l',
    '4': 'o',
    length: 5
};
let arr = Array.from(obj); // => ['h','e','l','l','o']

Array.of()

Array.of()用于将一组值转换为数组：

Array.of(1, 2, 3); // => [1, 2, 3]

find()和findIndex()

find方法找出第一个符合条件的数组成员，返回该成员，findIndex方法找出第一个符合条件的数组成员，返回改成员位置：

let arr = [1, 2, 3, 4, 5];
arr.find(item => item > 3); // => 4
arr.findIndex(item => item > 3); // => 3

参考原文

avatar
文章
阅读
粉丝