微信平台微网站开发,优质的网站建设流程,虚拟机怎么做网页,青岛中小企业建设网站有扶持资金吗✨✨✨目录
1.箭头函数与普通函数的区别#xff1f;
2.箭头函数的this指向哪里#xff1f;
3.扩展运算符的作用及使用场景#xff1f;
4.对对象\数组解构的理解#xff1f;
5.你是怎么理解ES6中Proxy的#xff1f;使用场景有哪些?
6.说说对 ES6 中rest参数的理解
2.箭头函数的this指向哪里
3.扩展运算符的作用及使用场景
4.对对象\数组解构的理解
5.你是怎么理解ES6中Proxy的使用场景有哪些?
6.说说对 ES6 中rest参数的理解
7.Map和Object的区别
8.Map和WeakMap的区别
9.JavaScript有哪些内置对象
10.正则表达式运用及使用场景
11.JavaScript脚本延迟加载的方式有哪些
12.什么是类数组对象如何转化为数组
13.为什么函数的arguments参数是类数组而不是数组如何遍历类数组
14.数组有哪些原生方法
15.Unicode、UTF-8、UTF-16、UTF-32的区别 1.箭头函数与普通函数的区别
1箭头函数比普通函数更加简洁
箭头函数省去了function关键字采用箭头来定义函数。函数的参数放在前面的括号中函数体跟在后的花括号中。
2箭头函数没有自己的this
箭头函数不会创建自己的this所以它没有自己的this它只会从自己的作用域链的上一层继承this。所以箭头函数中this的指向在它被定义的时候就已经确定了之后永远不会改变。
3箭头函数继承来的this指向永远不会改变
对象obj的方法b是使用箭头函数定义的这个函数中的this就永远指向它定义时所处的全局执行环境中的this即便这个函数是作为对象obj的方法调用this依旧指向Window对象。
4.call()/.apply()/.bind()无法改变箭头函数中this的指向
.call()/.apply()/.bind()方法可以用来动态修改函数执行时this的指向但由于箭头函数的this定义时就已经确定且永远不会改变。所以使用这些方法永远也改变不了箭头函数this的指向虽然这么做代码不会报错。
5箭头函数不能作为构造函数使用
我们先了解一下构造函数的new都做了些什么简单来说分为四步
① JS内部首先会先生成一个对象 ② 再把函数中的this指向该对象 ③ 然后执行构造函数中的语句 ④ 最终返回该对象实例。
但是因为箭头函数没有自己的this它的this其实是继承了外层执行环境中的this且this指向永远不会随在哪里调用、被谁调用而改变所以箭头函数不能作为构造函数使用或者说构造函数不能定义成箭头函数否则用new调用时会报错
6箭头函数没有自己的arguments
箭头函数没有自己的arguments对象。在箭头函数中访问arguments实际上获得的是外层局部函数执行环境中的值。
7箭头函数没有prototype
let sayHi () {console.log(Hello World !)
};
console.log(sayHi.prototype); // undefined
8箭头函数不能用作Generator函数不能使用yeild关键字
2.箭头函数的this指向哪里
箭头函数不同于传统JavaScript中的函数箭头函数并没有属于自己的this它所谓的this是捕获其所在上下⽂的 this 值作为自己的 this 值。由于没有属于自己的this所以是不会被new调⽤的这个所谓的this也不会被改变。
可以⽤Babel理解⼀下箭头函数
// ES6
const obj { getArrow() { return () { console.log(this obj); }; }
}
转化后
// ES5由 Babel 转译
var obj { getArrow: function getArrow() { var _this this; return function () { console.log(_this obj); }; }
};
3.扩展运算符的作用及使用场景
扩展运算符...是JavaScript和TypeScript中的核心语法主要用于展开数组、对象或可迭代对象的元素或属性适用于函数参数传递、数组/对象操作、解构赋值等场景。
1对象扩展运算符
浅拷贝与合并 对象复制const obj2 {...obj1}等同于Object.assign({}, obj1) 合并属性后者覆盖前者{...obj1, ...obj2} 动态修改属性{...state, count: newValue}常用于Redux更新状态。
可枚举属性限制 仅复制对象自身的可枚举属性原型链属性不包含。
2数组扩展运算符
复制与合并 创建数组副本const arr2 [...arr1] 合并多个数组const merged [...arr1, ...arr2]
参数序列转换 将数组展开为函数参数Math.max(...)替代apply语法。 嵌套数组单层展开console.log(...[1,2,3]) // 1 2 3console.log(...[1,[2,3,4],5]) // 1 [2,3,4] 5
解构赋值应用 提取剩余元素const [a, ...rest] rest为。 仅允许在解构末尾使用[...rest, a]会报错。
将字符串转为真正的数组[...hello] // [h,e,l,l,o]
4.对对象\数组解构的理解
对象和数组解构是ES6提供的一种新特性允许通过模式匹配的方式从对象或数组中提取值并将其赋给变量。
对象解构严格以属性名来提取对应的值并将其赋给变量。对于高度嵌套的对象可以采用冒号{目标属性名}进一步解构例如
const person { name: Alice, age: 25, gender: female };
const { name, age } person;
console.log(name); // 输出: Alice
console.log(age); // 输出: 25const school {classes: {stu: {name: Alice,age: 25}}
}
const {classes:{ stu:{name} }} school;
console.log(name) // Alice
数组解构根据数组的索引位置来提取对应的值并将其赋给变量。例如
const numbers [1, 2, 3, 4, 5];
const [first, second, ...rest] numbers;
console.log(first); // 输出: 1
console.log(second); // 输出: 2
console.log(rest); // 输出: [3, 4, 5]5.你是怎么理解ES6中Proxy的使用场景有哪些? ES6中的Proxy 是一种用于创建对象代理的机制它允许开发者定义额外的行为来拦截和改写对目标对象的常规操作。Proxy通过定义一系列的“陷阱”traps如get、set、apply等来拦截和自定义对象的基本操作。这些操作包括属性读取、赋值、函数调用等从而实现对目标对象的控制和扩展。
Proxy的基本语法和作用 Proxy的基本语法如下let proxy new Proxy(target, handler);
target被代理的目标对象可以是任何类型的对象。handler一个包含各种陷阱的处理器对象用于定义代理的行为。这些陷阱包括get、set、apply、has、deleteProperty等。
Proxy的使用场景
1数据验证在设置对象属性时进行数据有效性验证例如限制数值范围或格式校验。通过set陷阱可以自定义验证逻辑不符合条件的赋值操作会被拒绝。
2属性拦截拦截并自定义对象的属性读取和赋值操作。例如可以在读取属性时添加日志记录或在设置属性时进行权限检查。
3函数调用通过apply陷阱拦截函数调用可以在函数执行前后添加自定义逻辑如权限检查或性能监控。
4对象监控通过get和set陷阱监控对象的访问和修改适用于需要跟踪对象状态变化的场景。
5动态对象属性在运行时动态定义和删除对象的属性通过defineProperty和deleteProperty陷阱实现。
示例使用 Proxy 拦截对象属性的读取和设置
// 定义一个目标对象
const target {name: Alice,age: 25
};// 定义一个处理器对象用于拦截目标对象的操作
const handler {// 拦截读取操作get(target, prop) {console.log(读取属性: ${prop});if (prop in target) {return target[prop];} else {throw new Error(属性 ${prop} 不存在);}},// 拦截设置操作set(target, prop, value) {console.log(设置属性: ${prop} ${value});if (prop in target) {target[prop] value;return true; // 表示设置成功} else {throw new Error(属性 ${prop} 不存在);}}
};// 创建一个 Proxy 对象
const proxy new Proxy(target, handler);// 测试 Proxy 对象
console.log(proxy.name); // 读取属性: name然后输出: Alice
proxy.age 30; // 设置属性: age 30
console.log(proxy.age); // 读取属性: age然后输出: 30// 尝试访问不存在的属性
try {console.log(proxy.gender); // 会抛出错误: 属性 gender 不存在
} catch (error) {console.error(error.message);
}// 尝试设置不存在的属性
try {proxy.gender female; // 会抛出错误: 属性 gender 不存在
} catch (error) {console.error(error.message);
}6.说说对 ES6 中rest参数的理解
ES6 引入 rest 参数形式为...变量名用于获取函数的多余参数这样就不需要使用arguments对象了。rest 参数搭配的变量是一个数组该变量将多余的参数放入数组中。
function add(...values) {let result 1;for (var val of values) {result * val;}return sum;
}
add(1, 2, 3, 4) // 24
下面是一个 rest 参数代替arguments变量的例子:
/ arguments变量的写法
function sortNumbers() {return Array.prototype.slice.call(arguments).sort();
}// rest参数的写法
const sortNumbers (...numbers) numbers.sort();
arguments对象不是数组而是一个类似数组的对象。所以为了使用数组的方法必须使用Array.prototype.slice.call先将其转为数组。rest 参数就不存在这个问题它就是一个真正的数组数组特有的方法都可以使用。下面是一个利用 rest 参数改写数组push方法的例子:
function push(array, ...items) {items.forEach(function(item) {array.push(item);console.log(item);});
}var a [];
push(a, 1, 2, 3)
注意rest 参数之后不能再有其他参数即只能是最后一个参数否则会报错函数的length属性不包括 rest 参数箭头函数不可以使用arguments对象该对象在函数体内不存在如果要用可以用 rest 参数代替。
(function(a) {}).length // 1
(function(...a) {}).length // 0
(function(a, ...b) {}).length // 1
7.Map和Object的区别
在JavaScript中Map和Object是用于存储键值对数据的两种不同的数据结构Map是ES6新增的数据结构。它们在构造方式、键的类型以及原型继承等方面存在区别。
1构造方式
Map只能通过构造函数new Map()创建
Object可以通过字面量、new Object()、Object.create()等方式创建
2键类型支持
MapMap的键可以是任意类型包括对象、数组、函数等
ObjectObject的键只能是字符串或者Symbol其他类型的键会被转换为字符串
3键的顺序
MapMap会保持键值对的插入顺序所以是有序的
Object对象是无序的尽管ES6开始对象保留了字符串和Symbol类型key的创建顺序但在存在数字key的情况下会优先迭代数字key。通常按照数值、字符串、Symbol的顺序排列
4键值大小
Map使用 .size 属性来获取其大小。使用 .get() 方法获取值。
Object 没有内置的方法来获取其大小键值对的数量可采用Object.keys(xxx).length。使用 . 获取值。
5原型继承
MapMap不会从原型链中继承属性。
Object通过字面量创建的对象会继承来自Object.prototype的属性例如toString、constructor等。
6迭代 MapMap是可迭代的实现了iterator接口可以使用for...of或.forEach循环。使用 .keys()、.values()、.entries() 获取迭代器。
Object对象本身不可直接迭代但可以先遍历其键或值的集合在迭代。通过for...in循环再使用Object.keys()、Object.values()、Object.entries等方法获取键、值或键值对。
7性能
MapMap提供了有序性和灵活的键类型在频繁添加和删除键值对的场景下进行了优化性能表现更好。Map在处理大量数据时性能优于Object尤其是当键值对数量非常大时。
ObjectObject则更适合作为普通对象的容器尤其在不需要严格顺序和键类型单一的场景中使用。在处理少量数据时Object的性能优于Map但在处理大量数据时性能较差。 8JSON支持
MapJSON不支持Map格式。
Object对象可以直接被JSON处理适用于与后端接口交互。
9API对比
操作MapObject添加键值对map.set(key,value)obj[key]value获取值map.get(key)obj[key]检查是否存在键map.has(key)obj.hasOwnProperty(key)键值大小map.sizeObject.keys(obj).length
详细JavaScript中Map与Object的区别_js map对象和object区别-CSDN博客
8.Map和WeakMap的区别
上一题有说关于Map的内容。什么是WeakMapWeakMap是ES6新增的一种集合类型叫做’弱映射‘。它和Map是兄弟关系与Map的区别在于这个弱字API还是Map的API。
1WeakMap的键必须为对象引用
只接受对象作为键名(null除外)不接受其它类型的值作为键名。
2WeakMap的键名引用的对象是弱引用
强引用是指在代码中明确地持有对对象的引用使对象不能被垃圾回收。只要存在强引用指向一个对象该对象就会一直存在于内存中垃圾回收器不会将其回收。JavaScript中的大多数引用都是强引用例如通过变量、属性、闭包等方式持有的对象引用。
弱引用是指即使存在对对象的引用但垃圾回收器可以在任何时候回收该对象。弱引用通过 WeakReference 类实现无论内存是否足够只要发生垃圾回收弱引用对象就会被回收。弱引用主要用于解决内存泄露问题特别是在缓存场景中。
两者区别
Map的键可以是任意类型WeakMap只接受对象作为键不接受其它类型的值作为键Map的键实际上是跟内存地址绑定的只要内存地址不一样就视为两个键WeakMap的键是弱引用键所指向的对象是可以被垃圾回收此时键是无效的Map可以被遍历WeakMap不能被遍历。WeakMap的遍历操作如.forEach()可能返回未被回收的对象但无法保证这些对象后续状态的一致性WeakMap不支持直接扩展或修改键集合的大小
9.JavaScript有哪些内置对象
在JavaScript中内置对象指的是那些预定义的对象你可以直接在全局作用域中使用它们。它们提供了核心的编程功能比如操作数组、处理日期时间、执行数学计算等。下面是JavaScript中一些常用的内置对象。 1全局对象Global Object 在浏览器中全局对象是 window。在Node.js中全局对象是 global。
2Object
3Array 用于处理数组。提供了许多有用的方法来操作数组如 push(), pop(), shift(), unshift(), slice(), splice() 等。
4String 用于处理字符串。提供了许多方法来操作字符串如 charAt(), indexOf(), slice(), split(), substring() 等。
5Number 用于处理数字。提供了一些方法来处理数字如 toFixed(), toPrecision(), parseInt(), parseFloat() 等。
6Boolean
7Function 用于创建新的函数。虽然这不是一个内置对象但它是所有函数的基础。
8Date 用于处理日期和时间。提供了许多方法来获取和设置日期和时间如 getDate(), setDate(), getFullYear(), setFullYear() 等。
9Math 提供了一系列数学常数和函数如 Math.PI, Math.sqrt(), Math.sin(), Math.cos() 等。
10RegExp 用于处理正则表达式。虽然这不是一个内置对象但它是正则表达式对象的构造函数。
11JSON 用于解析和序列化JSON数据。提供了 JSON.parse() 和 JSON.stringify() 方法。
12Map和Set ES6中新增的数据结构分别用于存储键值对集合和唯一值的集合。它们不是全局对象但它们是内置的全局构造函数。
13Promise和Symbol
ES6中新增的用于处理异步操作和唯一标识符的构造函数。它们同样不是全局对象但也是内置的全局构造函数。
10.正则表达式运用及使用场景
正则表达式Regular Expression简称 regex 或 regexp是一种用于匹配字符串中字符组合的模式。它通过定义一系列规则来描述字符串的特征从而实现对文本的查找、替换、分割等操作。正则表达式功能强大且灵活广泛应用于各种文本处理场景。
构建正则表达式的两种方式
1字面量创建其由包含在斜杠之间的模式组成
const re /\d/g;
2调用RegExp对象的构造函数
const re new RegExp(\\d,g);const rul \\d
const re1 new RegExp(rul,g);
详细JavaScript正则表达式解析模式、方法与实战案例_js正则表达式解析-CSDN博客
11.JavaScript脚本延迟加载的方式有哪些
延迟加载就是等页面加载完成之后再加载 JavaScript 文件。 js 延迟加载有助于提高页面加载速度。一般有以下几种方式
defer 属性 给 js 脚本添加 defer 属性这个属性会让脚本的加载与文档的解析同步解析然后在文档解析完成后再执行这个脚本文件这样的话就能使页面的渲染不被阻塞。多个设置了 defer 属性的脚本按规范来说最后是顺序执行的但是在一些浏览器中可能不是这样。async 属性 给 js 脚本添加 async 属性这个属性会使脚本异步加载不会阻塞页面的解析过程但是当脚本加载完成后立即执行 js 脚本这个时候如果文档没有解析完成的话同样会阻塞。多个 async 属性的脚本的执行顺序是不可预测的一般不会按照代码的顺序依次执行。动态创建 DOM 方式 动态创建 DOM 标签的方式可以对文档的加载事件进行监听当文档加载完成后再动态的创建 script 标签来引入 js 脚本。使用 setTimeout 延迟方法 设置一个定时器来延迟加载js脚本文件。让 JS 最后加载 将 js 脚本放在文档的底部来使 js 脚本尽可能的在最后来加载执行。
12.什么是类数组对象如何转化为数组
一个拥有 length 属性和若干索引属性的对象就可以被称为类数组对象类数组对象和数组类似但是不能调用数组的方法。常见的类数组对象有 arguments 和 DOM 方法的返回结果还有一个函数也可以被看作是类数组对象因为它含有 length 属性值代表可接收的参数个数。
常见的类数组转换为数组的方法有这样几种
1通过 call 调用数组的 slice 方法来实现转换
Array.prototype.slice.call(arrayLike);
2通过 call 调用数组的 splice 方法来实现转换
Array.prototype.splice.call(arrayLike, 0);
3通过 apply 调用数组的 concat 方法来实现转换
Array.prototype.concat.apply([], arrayLike);
4通过 Array.from 方法来实现转换
Array.from(arrayLike);
5扩展运算符...
const arr [...arrayLike];
13.为什么函数的arguments参数是类数组而不是数组如何遍历类数组
arguments是一个对象它的属性是从0开始依次递增的数字还有length属性但没有数组常见的方法属性如forEach、reduce等所以是类数组。
通过Array.from、扩展运算符等方法将类数组转化为数组再通过数组方法遍历。
14.数组有哪些原生方法
push(): 在数组末尾添加一个或多个元素并返回新数组的长度。
pop(): 移除并返回数组末尾的元素。
unshift(): 在数组开头添加一个或多个元素并返回新数组的长度。
shift(): 移除并返回数组开头的元素。
concat(): 合并两个或更多数组并返回新的合并后的数组不会修改原始数组。
slice(): 从数组中提取指定位置的元素返回一个新的数组不会修改原始数组。
splice(): 从指定位置删除或替换元素可修改原始数组。
indexOf(): 查找指定元素在数组中的索引如果不存在则返回-1。
lastIndexOf(): 从数组末尾开始查找指定元素在数组中的索引如果不存在则返回-1。
includes(): 检查数组是否包含指定元素返回一个布尔值。
join(): 将数组中的所有元素转为字符串并使用指定的分隔符连接它们。
reverse(): 颠倒数组中元素的顺序会修改原始数组。
sort(): 对数组中的元素进行排序默认按照字母顺序排序会修改原始数组。
filter(): 创建一个新数组其中包含符合条件的所有元素。
map(): 创建一个新数组其中包含对原始数组中的每个元素进行操作后的结果。
reduce(): 将数组中的元素进行累积操作返回一个单一的值。
forEach(): 对数组中的每个元素执行提供的函数。
15.Unicode、UTF-8、UTF-16、UTF-32的区别
ASCII码称为美国标准信息交换码它包含A-Z(包含大小写)数字0-9以及一些常见的符号。
Unicode是一个统一的字符集为全球所有语言的字符分配了唯一的代码点可以说是ASCII的超集又称统一码、万国码、单一码。例如英文字母A的代码点是U0041中文汉字“中”的代码点是U4E2D。Unicode通过不同的编码方式如UTF-8、UTF-16、UTF-32来实现字符的存储和传输。
UTF-8是一种可变长度的编码方式使用1到4个字节来表示一个字符。对于ASCII字符0x00到0x7FUTF-8使用1个字节对于非ASCII字符使用多字节表示。UTF-8的优点包括空间效率高、兼容性好并且是互联网和现代文件格式的主流编码方式。然而可变长度编码增加了处理的复杂性并且对于非ASCII字符存储和传输成本较高。
UTF-16使用2个或4个字节来表示一个字符。基本多文种平面BMP内的字符使用2个字节辅助平面内的字符使用4个字节通过代理对实现。UTF-16在处理BMP内的字符时效率较高适合内存操作。然而处理非BMP字符时占用空间较大。
UTF-32是一种固定长度的编码方式使用4个字节32位来表示每一个Unicode码点。无论字符是否在BMP内UTF-32都使用相同数量的字节进行编码。 持续更新中......
若文章对你有帮助点赞❤️、收藏⭐加关注➕吧
