ECMAScript 6 学习笔记
https://wildye.cn/posts/19516f1f/
1. 变量声明
常量 const
- ES5
Object.defineProperty(window, 'PI', {
value: 3.1415926,
writable: false
})
console.log(PI); // => 3.1415926
console.log(window.PI); // => 3.1415926
- ES6 :
const PI = 3.1415926;
console.log(PI); // => 3.1415926
变量 let
- 不允许重复声明
- 不存在声明提前（无变量提升）
- 具有块级作用域，包含在
{}中 - ES5 :
(function() {
var a; // 通过闭包模拟
})()
- ES6 :
{
let a;
}
2. 数组扩展
Array.from() 转化数组
Array.from()用于将两类对象转为真正的数组：
– 类数组（伪数组）对象
– 可枚举（可遍历）对象（包括 ES6 新增的数据结构 Set 和Map ）。
// 类数组对象
let arrList = {
'0': 'a',
'1': 'b',
'2': 'c',
length: 3
};
// ES5
console.log([].slice.call(arrList)); // => ["a", "b", "c"]
// ES6
console.log(Array.from(arrList)); // => ["a", "b", "c"]
// arguments对象
function fun() {
var args = Array.from(arguments);
console.log(args); // => ["xm", 18, "book"]
}
fun('xm', 18, 'book');
// 节点对象
let elemList = document.getElementsByTagName('li');
Array.from(elemList) // => 输出如下
Array.from接受第二个参数，用来对每个元素进行处理，将处理后的值放入返回的数组。
var oldArr = [1, 2, 3]
var newArr = Array.from(oldArr, function(n){
return n * 2
});
console.log(newArr) // => [2, 4, 6]
// 花式写法
Array.from(oldArr, n => n * 2);
Array.from(oldArr, (n) => n * 2)
Array.from(oldArr).map(n => n * 2);
Array.of() 非稀疏数组
- 用于将一组值转换为数组
- 避免了使用
new Array()单个参数会构建一个长度为3的稀疏数组问题
let arr1 = new Array(3);
let arr2 = Array.of(3);
let arr3 = Array.of(1, 3, 5);
console.log(arr1, arr2, arr3)
copyWithin() 内部拷贝
- 将数组的一部分元素复制到其他位置 ,会改动原数组
- 语法：
arrObj.copyWithin(replaceIndex, startIndex, endIndex) 不包含结束元素，左闭右开 ，负值代表倒数
let arr = [1, 2, 3, 4, 5];
arr.copyWithin(1, 3, 5);
console.log(arr); // => [1, 4, 5, 4, 5]
find()、findIndex() 查找
- 以回调函数作为参数
- 回调函数的参数依次为元素、索引、数组引用，与ES5数组方法相同
var arr = [1,2,3,4,5,6];
// 返回第一个满足条件的元素
console.log(arr.find(function(item) {
return item > 3;
})) // => 4
// 返回第一个满足条件的索引，若无则返回 -1
console.log(arr.findIndex(function(item) {
return item > 3;
})) // => 3
fill() 填充
- 用于填充数组 ,会修改调用它的数组
- 语法：
arrObj.fill(fillElement, startIndex, endIndex)
var arr1 = [1,'a',undefined];
var arr2 = [...arr1];
console.log(arr1.fill('c')); // => ["c", "c", "c"]
console.log(arr2.fill('d', 1, 3)); // => [ 1 , "d", "d"]
include() 包含
- 用于检测数组是否包含指定元素，可以检测到
NaN - 语法：
arrObj.include(element)
console.log([1,2,NaN].includes(1)); // => true
entries()、keys()、values() 迭代
- 用于迭代数组，返回一个迭代器对象 ，配合for-of循环可以迭代数组
arrObj.entries()默认 遍历键值对
for(let index of arr.entries()) {
console.log(index[0]); // key
console.log(index[1]); // value
}
arrObj.keys()遍历索引
for(let key of arr.keys()) {
console.log(key);
}
arrObj.values()遍历值
for(let val of arr.values()) {
console.log(val);
}
3. Map( ) 对象
- 只能通过构造创建
map对象
var map = new Map();
map.set('like','tomato'); // 设置属性
map.get('like'); // 获取属性
map.delete('like'); // 删除属性
for(let index of map.entries()) {
console.log(index[0]); // key
console.log(index[1]); // value
}
4. 箭头函数 ( ) => { }
- 不存在
arguments属性 this是在定义函数的时候绑定，且无法使用call()、apply()，一般指向window- 形参与返回值唯一的情况下可简写
(a, b) => {
let sum = (a + b) / (a * b);
return sum;
}
// 单条语句可省略{}和return
v => v++;
(a, b) => a + b;
// 当返回对象要用括号（）括起来
v => ({
name: "hannah"
})
// 多条语句不能省略 {} 和 return
v => {
if(v > 0) return true;
return false;
}
5. 对象类 class
继承 extends
- ES5 :
function Person(name,age) {
this.name = name;
this.age = age;
}
Person.prototype.get = function(key) {
return this[key];
}
Person.prototype.set = function(key, value) {
this[key] = value;
}
// 继承
function Student(name, age) {
Person.apply(this, arguments);
}
Student.prototype = new Person();
// 创建实例对象
var xm = new Student('小明', 10);
xm.set('age', 18);
console.log(xm.get('name')); // => 小明
console.log(xm.get('age')); // => 18
- ES6 :
class Person {
// 构造函数
constructor(name, age) {
this.name = name;
this.age = age;
}
get(key) {
return this[key];
}
set(key,value) {
this[key] = value;
}
}
// 继承
class Student extends Person {
review() {
console.log('复习功课')
}
}
// 创建实例对象
let xm = new Student('小明', 16);
console.log(xm.get('name')) // => 小明
xm.review() // => 复习功课
// hasOwnProperty() 检测对象是否含有某属性
console.log(xm.hasOwnProperty('name')) // => true
console.log(xm.hasOwnProperty('sleep')) // => false
6. 代理 proxy
- 目标对象不能直接从外部访问，只能通过代理对象访问目标对象
- 语法
var proxy = new Proxy(target, handler)，target：目标对象、handler：代理方法
// 目标对象 target
var cat = {
name: "tom",
like: "sleep"
}
// 代理、添加方法
var proxyCat = new Proxy(cat, {
get: function(key){
return this.key;
},
set: function(key, value) {
this.key = value;
},
play: function() {
console.log('逗猫球')
}
})
proxyCat.set('like', 'jack');
proxyCat.play(); // => 逗猫球
console.log(proxyCat.get('like')); // => jack
console.log(proxyCat.get('name')); // => tom
7. 解构赋值
- 键值对应
var [a,b,c] = [1,2,3];
var [a,{b,c},[d,e]] = [1,{b:2,c:3},[4,5]]
console.log(a,b,c,d,e) // => 12345
8. 模板字符串（template string）
- 增强版的字符串，用(Esc键下) 的反引号 ``
标识，调用变量${name}`
var a = '皆';
var str = `万物${a}虚，万事${a}允`;
console.log(str); // => 万物皆虚，万事皆允
9. 异步处理 Promise()
- 主要用于获取异步数据
- 语法
new Promise((resolve, reject) => { })
resolve异步成功后的回调函数
reject异步失败后的回调函数 Promise.prototype.then()方法
Promise实例状态（fullfiled、rejected）改变时的执行回调Promise.prototype.catch()方法
是.then(null,rejeaction)的别名，用于指定发生错误时的回调函数。
const promise = new Promise(function(resolve, reject) {
resolve(data); // 异步成功后执行
reject(error); // 失败后执行
});
promise
.then(function(data){
console.log('请求成功，数据：' + data)
},function(error){
console.warn('请求失败，错误信息：' + error)
})
.catch(function(error){
// 处理当前与前一个回调函数运行时发生的错误
console.log(error);
})
10. 数字扩展
##指数(求幂)运算符 **
运算符左操作是基数，右操作数是指数
const power1 = 3 ** 2;
const power2 = power1 **= 2;
console.log(power) // => 9
console.log(power) // => 81
进制标识
二进制 0b / 0B，八进制 0o / 0O
console.log(0b110 === 6) // => true
console.log(0o20 === 10) // => true
// 转十进制
console.log(Number(0b110)) // => 6
console.log(Number(0o20)) // => 10
Number 方法
-
parseInt()、移植到Number对象上面，行为不变 -
parseFloat()，移植到Number对象上面，行为不变 -
Number.isFinite()检查一个数值是否为有限的（finite）
无隐式的Number()类型转换，非数值一律返回false -
Number.isNaN()用来检查一个值是否为NaN
无转换，NaN一律返回false -
Number.isInteger()用来判断一个值是否为整数 -
Number常量
Number.EPSILON为浮点数计算，设置一个可接受误差范围Number.MAX_SAFE_INTEGER范围上限Number.MIN_SAFE_INTEGER范围下限Number.isSafeInteger()判断一个整数是否落在这个范围之内
Math对象新增方法
Math.trunc()去除一个数的小数部分，返回整数部分Math.sign()判断一个数到底是正数、负数、还是零。对于非数值，会先将其转换为数值Math.cbrt()用于计算一个数的立方根Math.clz32()返回一个数的32位无符号整数形式有多少个前导0，JS的整数使用32位二进制形式表示Math.imul()返回两个数以32位带符号整数形式相乘的结果，返回的也是一个32位的带符号整数Math.fround()返回一个数的单精度浮点数形式Math.hypot()返回所有参数的平方和的平方根Math.expm1(x)返回ex - 1，即Math.exp(x) - 1Math.log1p(x)返回1 + x的自然对数，即Math.log(1 + x)。如果x小于-1，返回NaNMath.log10(x)返回以10为底的x的对数。如果x小于0，则返回NaNMath.log2(x)返回以2为底的x的对数。如果x小于0，则返回NaNMath.sinh(x)返回x的双曲正弦（hyperbolic sine）Math.cosh(x)返回x的双曲余弦（hyperbolic cosine）Math.tanh(x)返回x的双曲正切（hyperbolic tangent）Math.asinh(x)返回x的反双曲正弦（inverse hyperbolic sine）Math.acosh(x)返回x的反双曲余弦（inverse hyperbolic cosine）Math.atanh(x)返回x的反双曲正切（inverse hyperbolic tangent）
11. 函数扩展
默认值
- 参数默认值的位置
function fun(x, y = 'hannah') {
console.log(x, y);
}
fun('hi'); // => hi hannah
- 与解构赋值组合使用
只有形参与实参对应时，才会使用解构赋值
function fun({x, y = 'hannah'}) {
console.log(x, y);
}
fun({}); // => undefined jack
fun({x: 'hi'}); // => hi hannah
fun({x: 'hi', y: 'jack'}); // => hi jack
fun(); // TypeError
name 属性
var fn1 = function add() {}
var fn2 = function() {}; // 匿名
var fn3 = new Function(); // 构造
var fn4 = function(){}.bind() // bing 绑定
console.log(fn1.name) // => add
console.log(fn2.name) // => fn2
console.log(fn3.name) // => anonymous
console.log(fn4.name) // => bound
rest 参数 （…variableName）
- 用于获取函数的多余参数，替代
arguments - rest 参数之后不能再有其他参数（作为最后一个形参）
function add(...args) {
let sum
for (var val of args) {
sum += val;
}
return sum;
}
add(1, 3, 5) // => 9
扩展运算符 ...
- 将一个数组转为用逗号分隔的参数序列，主要用于函数调用
- 任何Iterator 接口的对象，都可以用
...转为真正的数组
let map = new Map([
[1, 'one'],
[2, 'two'],
[3, 'three']
]);
console.log([...map.keys()]); // => [1, 2, 3]
- 替代数组的 apply 方法
var arr = ['A', 'B', 'C'];
// ES5
function fun1(){
console.log(arguments[0]); // => A
console.log(arguments[1]); // => B
console.log(arguments[2]); // => C
}
fun1.apply(null, arr)
// ES6
function fun2(...args){
console.log(args[0]); // => A
console.log(args[1]); // => B
console.log(args[2]); // => C
}
fun2(...arr);
- 应用示例
// 计算最大值
let max = Math.max(...[1, 3, 5]);
console.log(max) // => 5
// 合并数组
let arr1 = ['A', 'B', 'C'];
let arr2 = [1, 3, 5];
console.log([...arr1, ...arr2]); // => ["A", "B", "C", 1, 3, 5]
// 拆分字符串
// JavaScript 会将 32 位 Unicode 字符，识别为 2 个字符(length = 2)，采用扩展运算符就没有这个问题
console.log([...'sky']); // => ["s", "k", "y"]
尾调用（Tail Call）、尾递归
- 指某个函数的最后一步是调用另一个函数
- 尾调用优化（Tail call optimization），调用栈只有一层
- 只有不再用到外部变量，才能进行 尾调用优化！
// 递归计算阶乘
function fact(n){
if(n === 1) return 1;
return n * fact(n - 1);
}
// ES6 尾递归优化，相对节省内存
function fact(n,total){
if(n === 1) return total;
return fact(n - 1, n * total);
}
引用资料
es6 扩展运算符 三个点（…）
ES6 类(Class)基本用法和静态属性+方法详解
JS - Promise使用详解2（ES6中的Promise）
ES6数字扩展
ES6–函数扩展
学习笔记：ES6之数组扩展（重要）