Es6 学习笔记
Posted S&Lchuck
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Es6 学习笔记相关的知识，希望对你有一定的参考价值。
-
变量
-
let
let用来声明变量，作用和var类似，所声明的变量只在let生命的代码块内有效。
//1.不允许重复声明
let num = 2;
let num = 3; //error
//2.块级作用域
let a = [];
for (let i = 0; i < 10; i++) {
a[i] = function () {
console.log(i);
}
}
a[5](); //5
-
const
const声明一个只读的常量。一旦声明，常量的值就不能改变，因为常量的值不能改变，所以必须在声明常量的时候进行初始化，常量声明的对象所表示的是变量的地址，不是变量的值
//1.必须在声明时定义变量
const num = 5;
const num1; //error
-
字符串
-
模板字符串
模板字符串（template string）是增强版的字符串，用反引号（`）标识。
let str = `
<!DOCTYPE html>
<html lang="en">
<head>
<title>es6</title>
<meta charset="UTF-8">
<script src="./es6.js"></script>
</head>
<body>
</body>
</html>
`
-
扩展函数
let str = `hello world`;
//includes()：返回布尔值，表示是否找到了参数字符串。
console.log(str.includes(‘wo‘)); // true
//startsWith()：返回布尔值，表示参数字符串是否在源字符串的头部。
console.log(str.startsWith(‘he‘)); //true
//endsWith()：返回布尔值，表示参数字符串是否在源字符串的尾部。
console.log(str.endsWith(‘ld‘)); //true
//repeat():方法返回一个新字符串，表示将原字符串重复n次。
console.log(`x`.repeat(3)); // ‘xxx‘
console.log(`x`.repeat(0)); //‘‘
var buffer = new Buffer(‘node‘,‘utf8‘);
var str = buffer.toString(‘utf8‘);
-
数字
-
扩展方法
//Number.isFinite() 用来检查一个数值是否非无穷（infinity）。
Number.isFinite(45); // true
Number.isFinite(‘45‘); //false
//Number.isNaN() 用来检查一个值是否为NaN。
Number.isNaN(45); // true
Number.isNaN(‘45‘); //false
//Number.parseInt() 用来讲一个值转化为整数
Number.parseInt(‘12.45‘); //12
//Number.parseFloat() 用来讲一个值转化为浮点数
Number.parseFloat(‘12.45‘); //12.45
//Number.isInteger() 用来判断一个值是否为整数。
Number.parseFloat(12); //true
Number.parseFloat(12.0); //true
Number.parseFloat(12.1); //false
Number.parseFloat(‘12‘); //false
-
数组
-
扩展方法
//Array.from :方法用于将两类对象转为真正的数组
let arrayLike = {
‘0‘: ‘a‘,
‘1‘: ‘b‘,
‘2‘: ‘c‘,
length: 3
};
let arr = Array.from(arrayLike); // [‘a‘, ‘b‘, ‘c‘]
//Array.of : 方法用于将一组值，转换为数组
Array.of(3, 11, 8) // [3,11,8]
//fill: 方法使用给定值，填充一个数组。
[‘a‘, ‘b‘, ‘c‘].fill(7)
// [7, 7, 7]
//findIndex:返回第一个符合条件的数组成员的位置
[1, 5, 10, 15].findIndex(function(value, index, arr) {
return value > 9;
}) // 2
//find:返回第一个符合条件的数组
[1, 5, 10, 15].find(function(value, index, arr) {
return value > 9;
}) // 10
//includes:返回一个布尔值，表示某个数组是否包含给定的值
[1, 2, 3].includes(2); // true
-
集合
-
Set
成员的值都是唯一的，没有重复的值。
var set = new Set([1, 2, 3, 4, 4]); //[1, 2, 3, 4]
-
Map
是键值对的集合
var m = new Map();
var o = {p: "Hello World"};
m.set(o, "content")
m.get(o) // "content"
m.has(o) // true
m.delete(o) // true
m.has(o) // false
-
函数
// 默认值参数
function test(x = 5, y = 6) {
console.log(x, y);
}
test() // 5 6
test(undefined, null) // 5 null , 传入undefined则参数会去默认值
// rest参数（形式为"...变量名"），用于获取函数的多余参数
function add(...values) {
let sum = 0;
for (var val of values) {
sum += val;
}
return sum;
}
add(2, 5, 3) // 10
//箭头函数，函数体内的this对象，就是定义时所在的对象，而不是使用时所在的对象
var sum = (num1, num2) => num1 + num2;
// 等同于
var sum = function(num1, num2) {
return num1 + num2;
};
-
对象
//Object.is 用来比较两个值是否严格相等，与严格比较运算符（===）的行为基本一致
Object.is(‘foo‘, ‘foo‘) // true
Object.is({}, {}) // false
Object.is(+0, -0) // false
Object.is(NaN, NaN) // true
//Object.assign 用于对象的合并，将源对象（source）的所有可枚举属性，复制到目标对象（target）
var target = { a: 1 };
var source1 = { b: 2 };
var source2 = { c: 3 };
Object.assign(target, source1, source2);
target // {a:1, b:2, c:3}
//for...in 循环遍历对象自身的和继承的可枚举属性（不含Symbol属性）
var target = {a:1, b:2, c:3};
for(let key in target){
console.log(key);
}
//Object.keys 返回一个数组，成员是参数对象自身的（不含继承的）所有可遍历（enumerable）属性的键名
var obj = { foo: "bar", baz: 42 };
Object.keys(obj) // ["foo", "baz"]
//Object.keys 返回一个数组，成员是参数对象自身的（不含继承的）所有可遍历（enumerable）属性的键名
var obj = { foo: "bar", baz: 42 };
Object.values(obj)// ["bar", 42]
//Object.entries 返回一个数组，成员是参数对象自身的（不含继承的）所有可遍历（enumerable）属性的键值对数组
var obj = { foo: ‘bar‘, baz: 42 };
Object.entries(obj) // [ ["foo", "bar"], ["baz", 42] ]
let obj2 = { one: 1, two: 2 };
for (let [k, v] of Object.entries(obj2)) {
console.log(`${JSON.stringify(k)}: ${JSON.stringify(v)}`);
}
// "one": 1
// "two": 2
-
class
//基本语法
class animal {
constructor(name) {
this.name = name;
}
say() {
console.log(this.name);
}
}
// 实例对象
let nimo = new animal(‘nimo‘);
//继承
class dog extends animal {
constructor(name, age) {
super(name); // 调用父类的constructor
this.age = age;
}
say() {
console.log(this.name,this.age); //重写方法
}
}
let ad = new dog(‘nimo‘,2);
//静态方法
class Foo {
static classMethod() {
return ‘hello‘;
}
}
-
异步
-
Generator
Generator函数是一个状态机，封装了多个内部状态。
执行Generator函数会返回一个遍历器对象， Generator函数除了状态机，还是一个遍历器对象生成函数。返回的遍历器对象，可以依次遍历Generator函数内部的每一个状态。
//使用function* 来定义Generator，使用 yield 来作为每次状态的返回值
function* foo(x) {
var y = 2 * (yield (x + 1));
var z = yield (y / 3);
return (x + y + z);
}
//都用next()函数来获取返回值 next函数的参数表示上一次状态的返回值
var a = foo(5);
a.next() // Object{value:6, done:false}
a.next() // Object{value:NaN, done:false} 参数为undefined,上一次状态值为undefined
a.next() // Object{value:NaN, done:true} 参数为undefined,上一次状态值为undefined
var b = foo(5);
b.next() // { value:6, done:false }
b.next(12) // { value:8, done:false } 参数为12,上一次状态值为12,yield(x + 1) = 12,y = 2*12 = 24 则yield (y / 3) = 8
b.next(13) // { value:42, done:true } yield (y / 3)=13,则z=13,x=5,y=2 * (yield (x + 1))=24,和为42
-
Promise
Promise是一个对象，从它可以获取异步操作的消息。Promise提供统一的API，各种异步操作都可以用同样的方法进行处理。
//生产一个Promise实例
var promise = new Promise(function(resolve, reject) {
// ... some code
if (/* 异步操作成功 */){
resolve(value);
} else {
reject(error);
}
});
//执行promise实例
promise.then(function(value) {
// success 成功后调用
}, function(error) {
// failure 失败后调用
});
-
Async
async函数就是Generator函数的语法糖
async函数返回一个Promise对象。
async函数内部return语句返回的值，会成为then方法回调函数的参数。
async函数内部抛出错误，会导致返回的Promise对象变为reject状态。抛出的错误对象会被catch方法回调函数接收到
async函数返回的Promise对象，必须等到内部所有await命令的Promise对象执行完，才会执行then方法指定的回调函数。
async function f() {
return await 123;
}
f().then(v => console.log(v))
// 123
-
模块
模块功能主要由两个命令构成：export和import。export命令用于规定模块的对外接口，import命令用于输入其他模块提供的功能。
//export.js
//导出变量
export let firstName = ‘Michael‘;
//导出方法
export function multiply(x, y) {
return x * y;
};
//导出类
export class animal{
//some code
}
//import.js
//导入变量
import {firstName, multiply, animal} from ‘./export‘;
以上是关于Es6 学习笔记的主要内容，如果未能解决你的问题，请参考以下文章