ES6基础
2019-12-19 本文已影响0人
情有千千节
JS基础
JS基本数据类型
- Number
- String
- Boolen
- Null
- Undefined
- Object--引用数据类型
- Symbol
数据集合
- Array
- Object
- Map
- Set
Symbol (属性私有化)
创建Symbol的时候初始化的一个参数主要是描述, 为的是在控制台显示或者转换为字符串的时候容易区分.即使不同的Symbol有相同的描述,也不相同
var Person = (function(){
var n = Symbol('n'); // n为局部变量，外面访问不到
function P(name) {
this.name = name;
this[n] = 10;
}
return P
})();
var p1 = new Person('zhangsan');
console.log(p1)
=>P {name: "zhangsan", Symbol(n): 10}
console.log(p[Symbol('n')])
=> undefined 因为symbol不等，即使是一样的
var let const
| 条件 | var | let | const |
|---|---|---|---|
| 声明预解析(上下文找到定义,不包括赋值) | 支持 | 不支持 | 不支持 |
| 块作用域{} | 不支持 | 支持 | 支持 |
| 重复声明 | 允许 | 不允许(暂存死区) | 不允许(暂存死区) |
| 其他 | 全局 | 局部 | 一旦声明不允许修改,所以必须初始化 |
<!-- 暂时性死区 -->
let a = 10;
function fn() {
a = 2; // 暂时性死区
let a = 3;
}
fn();
===>
"a is not defind"
const 定义的对象等因为是引用类型, 所以可以使用变异方法, 因为地址不会变,如果想要冻结对象可以使用Object.freeze(obj)冻结, 但是对象中嵌套对象无法冻结, 需要递归
解构赋值
按照一定的模式,从数组或者对象中提取值
let {a, , c} = [1,2,3]
let {d, e, f} = 'jack'
=>
a === 1
c === 3
d === "j"
e === "a"
f === "c"
let {a: wo, b: ni} = {a: 123, b: 122}
=>
wo === 123
ni === 122
解构赋值并重新命名
多重解构
let {foo:[a,b]} = {foo:[12,22], lo:qw}
=>
a === 12 b===22
扩展运算符
let arr = ['a', 'b', 'c'];
let obj = {a:10, b:11}
...arr => 'a', 'b', 'c';
...obj=> a:10, b: 11;
属性名表达式
let x = "hello"
let y = "world",
let z = "nihao"
let m = "世界"
let obj = {
[x]: 10,
z: 999
}
obj[y] = 20
obj['m'] = 200
==>
console.log(obj);
{
hello: 10,
world: 20,
z: 999,
m: 200
}
迭代
- 迭代协议
规定了迭代与实现的协议
- 迭代器
具体的迭代实现逻辑
- 迭代对象
可被迭代对象(实现了迭代器的对象) - [Symbol.iterator]方法
- 迭代语句
for...in 以原始插入顺序迭代对象迭代对象的可枚举属性
for...of 根据迭代对象的迭代器具体实现迭代对象数据(实现了迭代器的迭代对象)
Iterator 遍历器的的作用
为各种数据结构提供一个统一的,简便的访问接口
使得数据结构成员能够按照某种次序排列
es6 新增 for...of 循环, 接口主要提供给for...of消费
/**
* Iterator 遍历过程
* 1. 创建一个指针对象, 指向当前数据结构的起始位置,也就是说,遍历器对象本质上就是一个指针对象
* 第一次调用指针对象的next()方法,可以将指针指向数据结构的第一个成员,
* 第二次调用指针对象的next()方法,可以将指针指向数据结构的第二个成员,
* 不断调用next()方法,知道他指向数据结构的结束位置
*
* 每一次调用next()方法, 都会返回数据结构的当前成员信息,具体来说就是返回一个包含value和done两个属性的对象.其中value是当前成员的值,done是一个布尔值,表示遍历是否结束
*
* 2. 凡是具有[Symbol.iterator]属性的数据结构,都具有Iteratot接口
*
* 3.凡是具有Iterator接口的数据结构都具有以下属性
* - 解构赋值
* - 扩展运算符
* */
(<!-- 自己实现一个迭代协议(手写一个iterator接口) -->)
let obj = {
left :100,
top: 100
};
obj[Symbol.iterator] = function() {
let keys = Object.keys(obj)
let len = keys.length
var n = 0
return {
next: function() {
if (n < len) {
return {
value: keys[n++],
done: false
}
} else {
return {
done: true
}
}
}
}
}
for(attr of obj) {
console.log(attr)
}
函数拓展
- 参数默认值
function fn1 (x=0,y=1) {
给形参设置默认值，不传参的话默认
}
- rest剩余参数
function fn(a, ...data) {
// 剩余参数要写在最后
}
箭头函数
(参数列表)=>{函数体}
let fn = x => x + 1; // 只有一个参数 ,函数体只有一个语句的话 可以简写
- 普通函数的this指向是在函数执行期间绑定的（确定的）
- 箭头函数的this是在函数声明的时候绑定的，箭头函数的this指向创建该函数的作用域对象，并且永远不会变
注意点
- 箭头函数不能作为构造函数
- 没有arguments, 可用rest
- 不能作为生成器函数
- 不能使用call apply bind 改变内部this指向
内置对象
- String
- Number
- Array
- Object
- Set
- WeakSet
- Map
- map 中 使用NaN做键 NaN === NaN为true , 后添加覆盖前添加
- 使用{} 做键, {} === {} 为false, 因为对象地址是不同的
- key的顺序按照添加顺序排序
- WeakMap
class
ES5
const M = function(a,b) { // 构造函数
this.a = a;
this.b = b;
return this;
}
M.prototype.print = {
constructor: this,
print:function(){
console.log(this.a+''+this.b);
}
}
const Mv = new M(12,11).print();
ES6 语法糖
class M { // 类
constrator (a, b) { // 构造函数--对象初始化时执行的函数
this.a = a;
this.b = b
}
print () {
return this.a + '' + this.b;
}
}
