闭包
闭包(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);
}