JavaScript进阶学习

本文详细介绍了JavaScript中的闭包概念及其作用,通过实例展示了闭包如何扩展变量的作用域。同时,文章深入讲解了ES6的新特性,包括let和const声明变量、解构赋值、箭头函数、剩余参数、扩展运算符以及模板字符串的使用。此外,还探讨了Set数据结构以及类和对象的创建与继承。通过对这些特性的理解,读者能更好地掌握现代JavaScript编程技巧。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

闭包

闭包(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);
}
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值