三：以理论结合实践方式梳理前端 ES 6+ ——— ES 6+ 内置对象

最新推荐文章于 2024-08-15 08:55:57 发布
最新推荐文章于 2024-08-15 08:55:57 发布
阅读量176 收藏
点赞数
分类专栏： ES6+ 专栏 文章标签： javascript es6 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weijun20180101/article/details/123613668
版权
本文详细介绍了JavaScript中的内置对象如Number、String、Array等，以及对象的创建方式、函数声明与调用、匿名闭包回调、内存回收机制、变量作用域和作用域链。同时，讲解了错误处理和异常捕获，帮助理解JavaScript中的核心概念和技术要点。
摘要由CSDN通过智能技术生成

ES 6+ 内置对象

JavaScript 设计中内置了许多对象：Number、String、Boolean、Null、Undefined、Symbol、Object、Array、Date、Math、Function、RegExp、Error对象

对象声明

对象是一种特殊的引用数据类型，拥有属性和方法，JavaScript 中所有的事务都是对象：字符串、数值、数组、函数等

  • 使用对象实例化方式创建对象：var obj = new Object();
  • 使用对象字面量方式创建对象：var obj = {};
function say() {
	console.log('miao');
}
var obj = new Object();
obj.name = 'Tom';
obj.age  = 5;
obj.say = say;					// 需要通过 obj.say() 方法调用
obj.say = say();				// 需要通过 obj.say 方法调用

var obj = {
	name: 'Tom',
	age: 5,
	say: function() {			// 匿名函数
		console.log('miao');
	}
};

通过使用函数来构造对象，就可以通过创建对象实例

function person(name, sex, age) {
	this.name = name;
	this.sex = sex;
	this.age = age;
}
var tom = new person('Tom', 'boy', 12);
console.log(tom.name, tom.sex, tom.age);
var lily = new person('Lily', 'girl', 10);
console.log(lily.name, lily.sex, lily.age);

函数声明

函数是定义一次但却可以调用或执行任意多次的一段 JS 代码，函数有时会有参数，通过调用函数进行参数的传递，有些函数也会将函数体执行的结果返回出来，这个返回值也是函数调用表达式的值。

语法：function fun-name([args]) { 函数执行体; }

有、无参数函数

function message() {					// 经常使用采用这种模式声明
	console.log('hello world');
}
message();								// 函数本身是不执行的，只有被调用时才执行
var message = function() {				// 执行体系大，采用这种模式声明
	console.log('hello world');
}

function myAdd(a, b) {
	console.log('两个数的和为：' + (a + b));
}
myAdd(2, 3);							// 5

返回数据

函数通过 return 返回函数体执行的结果，在函数调用时返回，并赋值给一个变量，return 发生了执行，后续代码无意义，不执行

function message() {
	return 'hello world';
}
var msg = message();					// msg = 'hello world'

function myAdd(a, b) {
	return a + b;
}
var sum = myAdd(2, 3);					// sum = 5

形参实参

  • 形参：就是函数在声明定义的时候参数变量
  • 实参：就是函数在调用传值的时候传递数据

JavaScript 中函数的形参设置多少，实参个数可以与形参个数不同，是被允许的，arguments 为函数的形参对象，是一个伪数组

arguments 有一个指针函数 callee()，用于指向 arguments 所在的函数，参考下面：# 内部指针

function addNum() {
	for(var sum = 0, i = 0; i < arguments.length; i++) {
		sum += arguments[i];
	}
	return sum;
}
var sum = addNum(2,5, 5);			// sum = 12
var sum = addNum(12, 4);			// sum = 16

匿名闭包回调

  • 匿名函数：就是没有名字的函数，单独的匿名函数是没法自身运行和调用的，常用于赋值，也可通过表达式运行
  • 闭包函数：就是函数内返回的一个可访问当前函数作用域的内部函数体，驻留局部变量，避免使用全局变量
  • 回调函数：通过一个函数调用另外一个函数，回调函数通常作为一个函数的参数传递，等到这个函数执行完成之前，调用回调函数
function addNum(a, b) {}			// 普通函数
var addNum = function(a, b) {};		// 等号右侧就是一个匿名函数，通过 addNum()
(function(a, b) {})(a, b);			// 表达式调用匿名函数，JQuery 的封装就是一个表达式的匿名函数
// 把匿名函数执行结果赋值给变量，与上面不同，上面是把匿名函数赋值给变量，变量就成了 Function 引用类型
var addNum = (function(a, b) { return a + b; })(a, b);
--------------------------------------------------------------------------------------------------------------------------------
for (var i = 0; i < 5; i++) {
	setTimeout(function() { console.log(i); }, i * 1000 );
}
解析：上面的代码不会按预期显示值0，1，2，3 和 4，而是会显示 5，5，5，5 和 5，原因是：在循环中执行的每个函数将整个循环完成之后被执行，会导致计时器函数引用存储的最有一个 i = 5 的值，所以会输出：5，5，5，5，5
for (var i = 0; i < 5; i++) {
    (function(x) {
        setTimeout(function() { console.log(x); }, x * 1000 );
    })(i);
}
--------------------------------------------------------------------------------------------------------------------------------
function cat(name, callback) {
	callback(name + 'see Jerry');
}
cat('Tom', function(message) { console.log(message); });			// "Tom see Jerry"

内存回收

在 JavaScript 定义的全局变量是不会被立即回收的，只有当关闭浏览器时，才会触发回收机制，垃圾不回收容易导致运行卡顿、内存溢出等现象，对于内存管理，是开发者必备的一块技术点，如何优化 JavaScript 的内存管理：

  • 善用函数，普通函数的创建，有时候会导致变量的提升，从而内存不会立即释放，推荐使用匿名函数方式
  • 使用普通函数，需要手动解除变量引用，重置为 null，从而减少内存占用，释放内存
  • 绝对不要定义全局变量，通过匿名函数传值发方式传递局部变量，也可以通过回调函数方式进行变量传值
for(var i = 0; i < 5; i++) {}
console.log(i);						// 5 不会被销毁
// 使用块模块封装，处理全局变量内存管理
(function() {
	for(var i = 0; i < 5; i++) {}
})();
console.log(i);						// Uncaught ReferenceError: i is not defined
--------------------------------------------------------------------------------------------------------------------------------
;(function(document, window){
	var btns = document.querySelectorAll('.btn');
	var output = document.querySelector('#output');
	var arrs = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
	for(var i = 0; i < btns.length; i++) {
		btns[i].onclick = (function(num){
			return function() {
				output.innerText += 'Clicked ' + num;
			};
		})(arrs[i]);
	}
})(document, window);

内部指针

  • arguments.callee() 返回正被执行的 Function 对象，常用于匿名函数的递归或者保证函数的封装性
  • this 默认指向 window（JavaScript 里面最大的对象，最外围的对象），可以指向当前对象或引用对象
  • apply() 用于设置 this 的指向，默认 this 指向 window，参数是那个对象，调用方法中的 this 就指向这个对象
function factorial(num) {									// 数的阶乘计算
	if (num <= 1) { return 1; } 
	return num * arguments.callee(num - 1);					// 会存在一个调用记录，每次调用就会形成一个调用栈
}
var res = factorial(3);										// !3 = 3 * 2 * 1 = 6
PS：不推荐使用 arguents.callee()，访问 arguments 是个很昂贵的操作，它是个很大的对象，每次递归调用时都需要重新创建，影响现代浏览器的性能，还会影响闭包，解决方法就是给内部函数指定一个名字，在条件满足是，尾调用这个函数
function factorial(num) {									// 数的阶乘计算
	return (function tailFactorial(num, total) {
		if(num === 1) return total;
		return tailFactorial(n - 1, n * total);				// 尾调用自己
	})(num, 1);
}
var res = factorial(3);										// !3 = 3 * 2 * 1 = 6
--------------------------------------------------------------------------------------------------------------------------------
function currying(fn) {
	return function(list) {
		return fn.call(this, list);							// 使用柯里化
	}
}
function recursion(list) {
	return (function tailRecursion(item, arr) {
		arr.push(item + 1);
		if(list.length === 0) return arr;
		return tailRecursion(list.splice(0,1)[0], arr)
	})(list.splice(0,1)[0], [])
}
var res = currying(recursion)([1, 2, 3, 4, 5]);				// res = [2, 3, 4, 5, 6]
--------------------------------------------------------------------------------------------------------------------------------
function recursion(list, arr = []) {						// ES 6 语法
	var item = list.splice(0,1)[0];
	arr.push(item + 1);
	if (list.length === 0) {
		return arr;
	}
	return recursion(list, arr);
}
var res = recursion([1, 2, 3, 4, 5]);

var color = 'red';
var car = {
	name: '大众',
	color: this.color							// this 指向 window：是 JavaScript 里面最大的对象，最外围的对象
};
--------------------------------------------------------------------------------------------------------------------------------
var car = {
	name: '大众',
	text: 'green',
	color: function() {
		return this.text;						// this 指向 car
	}
};
car.color();
--------------------------------------------------------------------------------------------------------------------------------
function person() {
	this.name = 'zhangsan';						// this 指向引用对象 person()
}
var zs = new person();
zs.name;										// 'zhangsan'
--------------------------------------------------------------------------------------------------------------------------------
function say() {
	console.log(this.text);						// this 指向引用对象 cat
}
var cat = {};
cat.text = 'miao';
cat.say = say;
cat.say();										// 'miao'

var person = {
	fullName: function() {
		return this.fName + ' ' + this.lName;	// 这里的 this 就对应到 apply 传入的对象
	}
};
var zs = {
	fName: 'zhang',
	lName: 'san'
};
person.fullName.apply(zs);						// zhang san
--------------------------------------------------------------------------------------------------------------------------------
function addNum1(a, b) {
	console.log(this);
	return a + b;
}
function addNum2(a, b) {
	return addNum1.apply(this, [a, b]);			// this 指向 window，apply 用于调用自身方法
}
addNum2(2, 3);
--------------------------------------------------------------------------------------------------------------------------------
function addNum1(a, b) {
	console.log(this);
	return a + b;
}
function addNum2(a, b) {
	return addNum1.call(this, a, b);			// this 指向 window，apply 用于调用自身方法
}
addNum2(2, 3);

变量作用域

JavaScript 内所有的函数的参数都是局部变量，没有引用传递方式

function message(text) {
	text = '改变';
}
var text = '原来';
message(text);									// text = '原来'
--------------------------------------------------------------------------------------------------------------------------------
function message(obj) {
	obj.name = 'Tom';
}
var obj = new Object();
message(obj);									// obj.name = 'Tom'
--------------------------------------------------------------------------------------------------------------------------------
function message(obj) {
	obj.name = 'Tom';
	var obj = new Object();
	obj.name = 'Jerry';							// 由于重新声明了一个引用类型，地址不同
}
var obj = new Object();
message(obj);									// obj.name = 'Tom'
  • 全局变量：在外环境中，在任何地方都可以读取使用到的变量，所有的全局变量都是在 window 下
  • 局部变量：在内代码块，仅在内部才能访问使用的变量，函数参数也是局部作用
function message() {
	return 'this is message';
}
var msg = 'hello world';
console.log(window.message());					// this is message
console.log(window.msg);						// hello world
--------------------------------------------------------------------------------------------------------------------------------
function message() {
	var msg = 'hello world';
	return 'this is message';
}
console.log(window.message());					// this is message
console.log(window.msg);						// undefined
--------------------------------------------------------------------------------------------------------------------------------
function message() {
	msg = 'hello world';
	return 'this is message';
}
console.log(window.message());					// this is message
console.log(window.msg);						// hello world （不推荐，全局变量最好写最外面）

作用域链

作用域链核心思想：变量的作用域始终是从里往外走，函数定义会预解析，变量不会

var name = 'tom';
function f() {
	name = 'jerry';
}
f();											// name = 'jerry';
--------------------------------------------------------------------------------------------------------------------------------
var name = 'tom';
f();											// name = 'jerry';
function f() {
	name = 'jerry';
}
--------------------------------------------------------------------------------------------------------------------------------
function f1() {
	var name = 'tom';
	function f2() {
		var name = 'jerry';
		function f3() {
			var name = 'terry';
			console.log(name);					// name = 'terry'
		}
		f3();
	}
	f2();
}	
--------------------------------------------------------------------------------------------------------------------------------
message();										// 预解析：“miao”
function message() {
	console.log('miao');
}	
--------------------------------------------------------------------------------------------------------------------------------
console.log(a);									// undefined
var a = 10;
--------------------------------------------------------------------------------------------------------------------------------
var name = 'tom';
function show() {
	console.log(name);
	var name = 'jerry';
}
show();											// undefined
--------------------------------------------------------------------------------------------------------------------------------
console.log(show);								// ƒ show() { console.log('function'); }
function show() {
	console.log('function');
}
var show = 'var_value';
console.log(show);								// 'var_value'
--------------------------------------------------------------------------------------------------------------------------------
var name = 'tom';
show();
function show() {
	console.log(name);							// undefined
	var name = 'jerry';
}
--------------------------------------------------------------------------------------------------------------------------------
var tom = 'tom';
show();
function show() {
	var jerry = 'jerry';
	console.log(tom);							// undefined
	console.log(jerry);							// 'jerry'
	var tom = 'cat';
}
--------------------------------------------------------------------------------------------------------------------------------
show();
console.log(cat);								// 会报错
console.log(mouse);								// 'like'
console.log(dog);								// 'like'
function show() {
	var cat = mouse = dog = 'like';				// mouse 和 dog 没有使用 var 是全局变量
	console.log(cat);							// 'like'
    console.log(mouse);							// 'like'
    console.log(dog);							// 'like'
}

异常处理

  • try ：测试代码块的错误
  • catch：处理错误
  • throw：创建自定义错误
  • finally：测试代码块后执行，不管有无异常
function message() {
	try {
		adddlert("Welcome guest!");
	} catch(err) {
		console.log(err);
	}
}
message();										// ReferenceError: adddlert is not defined
--------------------------------------------------------------------------------------------------------------------------------
function myFunction(val) {
	try {
		if(val == '') throw 'empty';
		if(isNaN(val)) throw 'not a number';
		if(val > 10) throw 'too high';
		if(val < 5) throw 'too low';
	} catch(err) {
		console.log(err);
	}
}
myFunction(NaN);								// not a number
myFunction('');									// empty
--------------------------------------------------------------------------------------------------------------------------------
function myClear() {
	try {
		throw new Error('出错了...');
	} finally {
		console.log('清理完成');
	}
}
myClear();										// 清理完成
错误属性属性描述
name设置或返回一个错误名
message设置或返回一个错误信息(字符串)
function say() {
	try {
		add(2, 3);
	} catch(err) {
		console.log(err.name);						// ReferenceError
		console.log(err.message);					// ReferenceError
	}
}
十三餍
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
ELK镜像：elasticsearch:7.17.6+kibana:7.17.6+logstash:7.17.6 下载
05-15
ELK:elasticsearch:7.17.6+kibana:7.17.6+logstash:7.17.6 支持操作系统：centos7 中标麒麟、银河麒麟、通信UOS 均已经验证 安装方式，docker安装
浏览器内置对象/事件/ajax
baidu_24293811的博客
09-21 541
浏览器内置对象/事件/ajax 浏览器是一个 JS 的运行时环境，它基于 JS 解析器的同时，增加了许多环境相关的内容。用一张图表示 各个运行环境和 JS 解析器的关系如下: 我们把常⻅的，能够用 JS 这⻔语言控制的内容称为一个 JS 的运行环境。常⻅的运行环境有 Node.js， 浏览器，小程序，一些物联网设备等等。所有的运行环境都必须有一个 JS 的解释器，在解释器层面符合 ECMAScript 规范，定义了 JS 本身语言层面的东⻄比如关键字，语法等等。 在每个环境中，也会基于 JS 开发一些当前
ES6新增语法及内置对象（声明变量、解构、箭头函数、剩余参数、数组、字符串以及集合）、ES7新特性
星河梦~的博客
08-08 679
目录ES6简介ES6新增语法letconstvar三者区别解构赋值箭头函数剩余参数ES6内置对象Array对象String对象Set集合 ES6简介 ES全称ECMAScript,它是由ECMA国际标准化组织制定的一项脚本语言的标准化规范。 ES6新增语法 let let是ES6中新增的用于声明变量的关键字。 注意： （1）它声明的变量只在所处的块级中有效； （2）不存在变量的提升 （3）let声明变量必须先声明后使用 如： console.log(a) //直接报错 let a=20 con
重温JS——（ES6）内置对象（Map与Set、字符串、数值、对象、数组）
qq_52301431的博客
06-22 1105
目录内置对象1、Map与Set（1）Map（2）Set2、字符串（1）子串的识别（2）字符串重复（3）字符串补全（4）模板字符串（5）标签模板3、数值（1）数值的表示（2）方法（3）Math对象的扩展4、对象（1）对象字面量（2）对象的扩展运算符（3）对象的新方法5、数组（1）数组创建（2）扩展的方法（3）扩展运算符（...）Map 对象保存键值对。任何值(对象或者原始值) 都可以作为一个键或一个值。Map没有语法糖，Map很像一个对象Map特点：有序、键值对（键可以是任意类型）、键名不能重复（如果重复，那
（三）ES6 内置对象
weixin_46227563的博客
04-09 691
文章目录新增一、Set 与 Map1. Set(1) 认识Set(2) Set实例的方法和属性(3) Set构造函数的参数(4) Set的注意事项2. Map(1) 认识Map(2) Map实例的方法和属性(3)Map构造函数的参数(4) Map的注意事项(5) Map的应用二、Proxy 与 Reflect扩展一、字符串1. 新增的方法(1) includes()(2) padStart() 和 padEnd()(3) trimStart() 和 trimEnd()2. 模板字符串(1) 模板字符串与一般
ES6内置对象扩展
weixin_44809439的博客
08-16 157
Array的扩展 扩展运算符可以将数组或者对象转为用逗号分隔的参数序列。 let ary = [1, 2, 3]; ...ary // 1, 2, 3 console.log(...ary); // 1 2 3 console.log(1, 2, 3) 扩展运算符可以应用于合并数组。 // 方法一 let ary1 = [1, 2, 3]; let ary2 = [3, 4, 5]; let ary3 = [...ary1, ...ary2]; // 方法二 ary1.pu
弹性演示：SpringBoot + elasticsearch6.x + mybatis
01-31
SpringBoot + elasticsearch6.x构建的es全文搜索服务demo，主要技术： 1，SpringBoot + Mybatis + Elasticsearch6.x框架 2，使用RestHighLevelClient作为搜索java api 3，使用LogStash同步mysql数据 环境安装 创建...
2023Windows-x64-ES-8.7.0：elasticsearch8.7.0+ik8.7.0+kibana8.7.0
04-19
windows_x64_2023最新es全家桶8.7.0_elasticsearch8.7.0+ik分词8.7.0+kibana8.7.0，配套使用，注意ik分词不要安装在有中文/数字/空格的文件目录下，尤其注意空格
ElasticSearch + 架构解析 + 最佳实践
07-22
ElasticSearch 架构解析与最佳实践 ElasticSearch 作为一个基于 Lucene 的搜索引擎，它的架构设计和原理分析是非常重要的。下面我们来详细地分析 ElasticSearch 的架构和原理。 一、ElasticSearch 应用概述 ...
人工智能-项目实践-信息检索-博客网站检索系统，框架：Springboot + ElasticSearch+Tkmybatis+
02-29
博客网站检索系统，框架：Springboot + ElasticSearch+Tkmybatis+vue ElasticSearch：elasticsearch-6.3.2 下载地址：https://www.elastic.co/cn/downloads/elasticsearch Logstash: logstash-6.3.2（同步mysql...
ES标准中规定的，浏览器厂商已经实现11个内置对象！！！
geqiandexiaoshiguang的博客
11-19 289
一共 11个内置对象； 1.包装类型3个：String Number Boolean； 2.Array  Date  Math   RegExp； 3.Error 4.Function Object； 5.global  注意： 1.其中global 不能new  因为他是全局作用域对象，在浏览器中是window，在node中是global；官方规定是global； 2.Math ...
ES6内置对象
清风的博客
10-02 515
ES6 的内置对象 1.Array的扩展方法 1.1扩展运算符 扩展运算符可以将数组或者对象转为用逗号分割的参数序列 let arr = [1,2,3]; ...arr //1,2,3 console.log(...arr); /相当于console.log(1,2,3) 扩展运算符应用于合并数组 //方法1 let arr1 = [1,2,3]; let arr2 = [4,5,6];...
ES-对象篇
weixin_44908855的博客
11-20 683
1. 对象 1.1 什么是对象 现实生活中：万物皆对象，对象是一个具体的事物，看得见摸得着的实物。例如，一本书、一辆汽车、一个人可以是“对象”，一个数据库、一张网页、一个与远程服务器的连接也可以是“对象” 在JS中：对象是一组无序的相关属性和方法的集合，所有事物都是对象，例如字符串、数值、数组、函数等 对象是由属性和方法组成的。 a. 属性：事物的特征，在对象中用属性来表示（常用名词） b. 方法：事物的行为，在对象中用方法来表示（常用动词） 1.2 为什么需要对象 保存一个值时，可以使用变量，保存
【面向JS--内置对象与包装类型】
hfhan的博客
10-11 319
内置对象ES标准已经规定好，由浏览器厂商已经实现的对象一共有11个(就是API)：开发人员直接使用，不必关心具体实现。String --包装类型 Number --包装类型 Boolean --包装类型,和小写的不同。Array Date RegExp（正则表达式） MathErrorFunction(所有函数的祖宗) Object(所有对象的祖宗)Global（全局）-->就
【ES6基础】四、内置对象扩展，函数对象扩展
大小都是愁的成长之路
03-13 540
内置对象的扩展1.字符串的扩展 1.1模板字符串 .反引号 `` .通过${}进行字符串拼接 .${}中不能跟二元表达式，如if等1.2字符串的相关方法.repeat()//对字符串进行重复操作.includes(),startsWith() ,endsWith()//和indexOf()差不多，indexOf()返回字符串的下标或-1，这三个返回true或false2.数组的扩展.A...
es 中对象的学习
lcl249847947的博客
10-11 748
es对象学习笔记
ES中的内置对象--jquery如何优化代码，少用$进行查找，减少查找次数的方法
tangdou369098655的博客
08-29 176
ES6--内置对象的扩展
jiaojsun的博客
10-04 360
1. 数组的扩展1) Array.from() //把类数组对象转换成真正的数组 在页面中写一些livar lis = document.querySelectorAll('li'); console.log(Array.isArray(lis));//false说明不是数组 var lis2 = Array.from(lis); console.log(lis2); console.log(Ar
ECMAScript性能优化技巧与陷阱：深入探索与实践
最新发布
Chujun123528的博客
08-15 644
ECMAScript性能优化是一个复杂而细致的过程，需要开发者从多个角度进行考虑和优化。通过合理利用现代JavaScript特性、优化DOM操作、选择合适的算法和数据结构、利用Web Workers等技术手段，可以显著提升JavaScript代码的执行效率。同时，开发者还需要关注全局变量、闭包、eval等性能陷阱，避免不必要的性能开销。此外，性能监控与分析、内存管理、网络层面的优化等也是不可忽视的重要方面。只有综合考虑这些因素，并持续进行性能优化工作，才能为用户提供更加流畅、高效的Web应用体验。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值