部分笔记——ES6
1.let 和 const命令
let
let 命令用于声明变量,声明的变量只在let命令所在的代码块内有效。
let 不允许在相同作用域内,重复声明同一个变量。
对比:
- var: 全局和局部作用域
- let:遇到一个块就是一个域(块级作用域)
for(var i = 1; i <= 5; i++){
console.log("i",i);
}
console.log("i:",i); // 输出 6
for(let d = 1; d <= 5; d++){
console.log("d",d);
}
console.log("d:",d); //输出 d is not defined
var a = [];
for (var i = 0; i < 10; i++) {
a[i] = function () {
console.log(i);
};
}
a[6](); // 变量i是var命令声明的,在全局范围内都有效,所以全局只有一个变量i。
// 每一次循环,变量i的值都会发生改变,而循环内被赋给数组a的函数内部的console.log(i),里面的i指向的就是全局的i。
// 也就是说,所有数组a的成员里面的i,指向的都是同一个i,导致运行时输出的是最后一轮的i的值,也就是 10。
var a = [];
for (let i = 0; i < 10; i++) {
a[i] = function () {
console.log(i);
};
}
a[6](); // 变量i是let声明的,当前的i只在本轮循环有效,所以每一次循环的i其实都是一个新的变量,所以最后输出的是6。
/* for循环还有一个特别之处,就是设置循环变量的那部分是一个父作用域,而循环体内部是一个单独的子作用域。 */
const(constant)
const 定义常量,一旦声明赋值不可以更改,一定要初始值。
const的作用域与let命令相同:只在声明所在的块级作用域内有效。
实质:const实际上保证的,并不是变量的值不得改动,而是变量指向的那个内存地址所保存的数据不得改动。对于简单类型的数据(数值、字符串、布尔值),值就保存在变量指向的那个内存地址,因此等同于常量。但对于复合类型的数据(主要是对象和数组),变量指向的内存地址,保存的只是一个指向实际数据的指针,const只能保证这个指针是固定的(即总是指向另一个固定的地址),至于它指向的数据结构是不是可变的,就完全不能控制了。
2.关于变量提升(ES5、ES6)
(更新链接)
3.解构赋值
ES6 允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为解构(Destructuring)
/********* 基本 *********/
var a = 1, b = 2, c =3;
var [a,b,c] = [1,2,3]
var [a,b,c] = [1,2] //c = undefine d解构不成功,变量的值就等于undefined
var [a,b,c] = [1,2,null] //c = null
var [a,[b,c]] = [1,[2,3]]
var [a,b] = [1,2,3,4] //a=1,b=2
var [a,…c] = [1,2,3] //c=[2,3]
var [a,b,c,d=’default’] = [1,2,3] //d = ‘default’
/********* 对象 *********/
var obj={
a : 1;
b : 2;
}
let {a,b} = obj; //a:a,b:b 在obj中找到a(前一个),赋值给a(后一个)
let {a:A,b} = obj; //a作为键名,A=1,输出a报错
let {c,b} = obj; //c = undefined
let a;
let {a.b} = obj; //报错,不能再次定义
let a = 0;
{a,b} = obj; //js解析器当成代码块,需要修正。如下
let a = 0;
({a,b} = obj); //a = 1;
let {a=1,b=2} = {a:10} //a = 10, b = 2;
let {floor , pow} = Math;
let a = 1.9;
floor(a) // 提出方法, 1
/********* 字符串 *********/
let{length} = ‘yo.’ //length = 3
let{a,b,c} = ‘yo.’ // 输出 y o .
/********* 解构数组 *********/
Var arr = [1,2]
function test([a,b])
{
Console.log(a,b)
}
test(arr) //打印 a,b
/********* 应用 *********/
let res = {
status:200 ;
id:10086;
data:[{name:’AAA’},{name:’BBB’}]
}
let {status, id, data} = res;
4.箭头函数
ES6 允许使用“箭头”(=>)定义函数。
/********* 基本用法 *********/
var f = v => v;
// 等同于
var f = function (v) {
return v;
};
/********* 箭头函数与变量解构结合使用 *********/
const full = ({ first, last }) => first + ' ' + last;
// 等同于
function full(person) {
return person.first + ' ' + person.last;
}
/********* 简化回调函数 *********/
[1,2,3].map(function (x) {
return x * x;
});
// 箭头函数写法
[1,2,3].map(x => x * x);
5.拓展
/********* 字符串 *********/
console.log('yo.'.includes('a'));
console.log('yo.'.startsWith('y'));
console.log('yo.'.endsWith('y'));
console.log('yo.'.repeat(300));
/********* 数组 *********/
[1, 5, 10, 15].find(function(value, index, arr) {
return value > 9;
}) // 10
function f(v){
return v > this.age;
}
let person = {name: 'John', age: 20};
[10, 12, 26, 15].find(f, person); // 26
6.模板字符串
/********* 1 *********/
let person = 'hello';
let year = 5;
let sentence = person + ' is ' + year + ' years old'
let sentence2 = ` ${person} is ${year} years old`
console.log(sentence);
console.log(sentence2.trim());
/********* 2 *********/
let part = `
<div>
<span>hello world</span>
</div>
`
console.log(part)
// <div>
<span>hello world</span>
</div>
7.Symbol
Symbol表示独一无二的值。它是 JavaScript 语言的第七种数据类型,前六种是:undefined、null、布尔值(Boolean)、字符串(String)、数值(Number)、对象(Object)。//console.log(typeof(Array()))————>object
由于 Symbol 值不是对象,所以不能添加属性。基本上,它是一种类似于字符串的数据类型。
Symbol函数可以接受一个字符串作为参数,表示对 Symbol 实例的描述。
/********* 接受一个字符串 *********/
let s1 = Symbol('foo');;
s1 // Symbol(foo)
s1.toString() // "Symbol(foo)"
/********* Symbol表示独一无二的值 *********/
// 没有参数的情况
let s1 = Symbol();
let s2 = Symbol();
s1 === s2 // false
// 有参数的情况
let s1 = Symbol('foo');
let s2 = Symbol('foo');
s1 === s2 // false
/********* 显示转换 *********/
Symbol 值可以显式转为字符串,转为布尔值,但是不能转为数值。
sym.toString();
let sym = Symbol(); Boolean(sym) // true
/********* 作为标识符 *********/
let mySymbol = Symbol();
// 第一种写法
let a = {};
a[mySymbol] = 'Hello!';
// 第二种写法
let a = {
[mySymbol]: 'Hello!'
};
// 以上写法都得到同样结果
a[mySymbol] // "Hello!"
6.Set
Set本身是一个构造函数,用来生成 Set 数据结构。
var s = new Set([1,2,3,3])
s.size
s.add(num)
s.delete(num)
s.has(num)
s.clear()
(后续补充)
7.Proxy
Proxy 可以理解成,在目标对象之前架设一层“拦截”,外界对该对象的访问,都必须先通过这层拦截。
Proxy 这个词的原意是代理,用在这里表示由它来“代理”某些操作,可以译为“代理器”。
/********* get()*********/
var user = new Proxy({},{
get:function(obj,prop){ //类似过滤器
if(prop == 'full_name')
return obj.fname + ' ' + obj.lname;
}
})
8.reflect
(后续待整理)
9.promise
请求:
- 异步:操作之间没关系,同时进行多个操作(代码复杂)
- 同步:操作之间相关,同时进行统一操作(代码简单)
Promise消除异步操作
(后续待整理)
10.async
(后续待整理)