JavaScript进阶学习

闭包

闭包(closure)是指有权访问另一个函数作用域中变量的函数。作用：延伸了变量的作用范围。立即执行函数也被称为小闭包。

// fn就是一个闭包
function fn() {
	var num = 20;
	function fn1() {
		console.log(num);
	}
	fn1();
}
fn();

function fn() {
	var num = 20;
	function fn1() {
		console.log(num);
	}
	return fn1;
}
var f = fn();
f();
// 或者 返回一个匿名函数
function fn() {
	var num = 20;
	return function(){
		console.log(num);
	}
}
var f = fn();
f();

正则表达式

正则测试工具
正则测试工具
正则表达式速查表
正则表达式速查表

var regexp = new RegExp(/133/);   // 关键字创建
var rg = /123/;                   // 字面量创建
// 测试正则表达式
regexobj.test(str);  // 检测str是否符合regexobj的规则

ES6

ES的全称是ECMAScript，它是由ECMA国际标准化组织制定的一项脚本语言的标准化规范

let - ES6中新增的用于声明变量的关键字。

• let声明的变量只在所处于的块级有效（块级作用域，{}）
• 不存在变量提升
• 具有暂时性死区

// let声明的变量只在所处于的块级有效（块级作用域，{}）
if(true) {
	let num = 10;
}
console.log(num)  // num is not defined

// 具有暂时性死区
var tmp = 123;
if (true) {
	tmp = 'abc'; 
	let tmp;      //let会使tmp具有暂时性死区特性 tmp is not defined
}

const - ES6中新增的用于声明常量的关键字。

• const声明的变量只在所处于的块级有效（块级作用域，{}）
• 必须赋初始值
• 值不能更改

// const声明的变量只在所处于的块级有效（块级作用域，{}）
if(true) {
	const num = 10;
}
console.log(num)  // num is not defined

解构赋值

ES6中允许从数组中提取值，按照对应位置，对变量赋值，对象也可以实现解构。

• 数组解构

// []放等号左边代表解构
let [a,b,c] = [1,2,3];
console.log(a);
console.log(b);
console.log(c);
let ary = [4,5,6];
let [e,f,g] = ary;

• 对象解构

// {}放等号左边代表解构,属性匹配成功的被赋值
let person = {name: 'zhangsan', age: 18};
let {name, age} = person;
console.log(name);
console.log(age);
// 或
let {name: myName, age: myAge} = person;
console.log(myName);
console.log(myAge);

箭头函数

() => {}

const fn = () => {}

函数体中只有一句话，且代码的执行结果就是返回值，可以省略大括号。

function sum(num1,num2) {
	return num1 + num2;
}
// 箭头函数的省略之后
const sum = (num1, num2) => num1 + num2;

如果形参只有一个，可以省略小括号

function fn(v) {
	return v;
}
// 箭头函数的省略之后
const fn = v => console.log(v);

箭头函数不绑定this 箭头函数没有自己的this关键字，如果在箭头函数中使用this，this关键字将指向箭头函数定义位置中的this

function fn() {

}

const obj = {name: 'Pianpianluoye'};
fn.call(obj);

剩余参数

剩余参数语法允许我们将一个不定数量的参数表示为一个数组

const sum = (...args) => {
    let total = 0;
    args.forEach(item => {
        total += item;
    })
    return total;
}
console.log(sum(10, 20));
console.log(sum(10, 20, 30, 40));

剩余参数和解构配合使用

let students = ['zhangsan', 'lisi', 'wangwu'];
let [s1, ...s2] = students;
console.log(s1);   // 'zhangsan'
console.log(s2);   // ['lisi','wangwu']

扩展运算符（展开语法）

扩展运算符可以将数组或者对象转为用逗号分隔的参数序列。

let ary = ['a', 'b', 'c'];
console.log(...ary);  // 'a', 'b', 'c'
// 等价
console.log('a', 'b', 'c');

合并数组

// 方法一
let ary1 = ['a', 'b', 'c'];
let ary2 = ['e', 'f', 'g'];
let ary3 = [...ary1,...ary2];
// 方法二
ary1.push(...ary2);

将伪数组转化成真正的数组

// 方法一
ary = [...ary]

// 方法二
let arrayLike = {
	'0': 'a',
	'1': 'b',
	'2': 'c',
	length: 3
};            // 伪数组
let arr2 = Array.from(arrayLike);

let arrayLike1 = {
	'0': '1',
	'1': '2',
	'2': '3',
	length: 3
};            // 伪数组
let arr3 = Array.from(arrayLike1, item => item * 2);

模板字符串

模板字符串中可以：

• 解析变量
• 可以换行
• 可以调用函数

let name = `Pianpianluoye`;
let sayHello = `Hello,我的名字叫${name}`;
console.log(sayHello);

let result = {
	name: 'Pianpianluoye',
	age: 25
};
let html = `
<div>
	<span>${result.name}</span>
	<span>${result.age}</span>
</div>
`
console.log(html);

const fn = () => {
    return '我是fn函数';
}
let html = `我是模板字符串 ${fn()}`
console.log(html);

Set数据解构

ES6提供了新的数据解构Set。它类似于数组，但是成员的值都是唯一的，没有重复值。
Set本身是一个构造函数，用来生成Set的数据结构。
const s = new Set() ;
Set可以接受一个数组作为参数，用来初始化。
const set = new Set([1,2,3,4,4]) ;

ES6中的类和对象

创建类

类里所有的函数不需要写function

class person {
    constructor(uname) {
        this.uname = uname;
    }
}
var myName = new person('Pianpianluoye');
console.log(myName.uname);

类中添加方法

多个函数方法之间不需要加逗号。

类的继承

class C {
	constructor() {
	
	}
	m1() {
		console.log('继承');
	}
}
class C1 extends C {

}
var c1 = new C1();
c1.m1();

super关键字用于访问和调用对象父类上的函数。可以调用父类的构造函数，也可以调用父类的普通函数。

class C {
	constructor(x,y) {
		this.x = x;
		this.y = y;
	}
	sum() {
		console.log(this.x + this.y);
	}
}
class C1 extends C {
	constructor(x,y) {
		super(x,y);  // 调用了父类的构造函数   super 放到this前
		this.x = x;
		this.y = y;
	}
}
var c1 = new C1(1,2);
c1.sum();

改变this指向

call、apply、bind都可以改变this指向

var btn = document.querySelector('button');
btn.onclick = function () {
    this.disabled = true;
    // var that = this;
    setTimeout(() => {
        // that.disabled = false;   // 可以用bind代替
        this.disabled = false;
    }, 3000).bind(this);
}