脚本宝典收集整理的这篇文章主要介绍了【面试利器】原生JS灵魂拷问,你能答上多少(二),脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。
目前的前端世界,三大框架横行,原生JavaScript
所用越来越少。但我认为JavaScript
作为每一个前端工程师的立身之本,学再多遍都不为过。
因此我决定整理JavaScript
中容易忽视或者混淆的知识点,写一系列文章,以灵魂拷问的方式,系统且完整的带大家遨游基础的的JavaScript
,给大家带来不一样的体验。
系列文章链接F1a;
&&
只有在两个操作数都为 true
时,条件判断的结果才为 true
,如果操作数一为 false
,不会判断操作数二。||
两个操作数只要有一个为 true
,条件判断的结果就为 true
,因此操作数一为 true
时,不会判断操作数二。返回值规则
||
和 &&
首先会对操作数一执行条件判断,如果不是布尔值就先强制转换为布尔类型,然后再执行条件判断。||
来说,如果条件判断结果为 true
就返回第一个操作数的值,如果为 false
就返回第二个操作数的值。&&
则相反,如果条件判断结果为 true
就返回第二个操作数的值,如果为 false
就返回第一个操作数的值。||
和 &&
返回它们其中一个操作数的值,而非条件判断的结果(2<3)||(3<2)
返回值是多少?
1 + - + + + - + 1
结果是多少?+/-
号在 JavaScript
通常有三种用途:
++/--
: 自增自减,一元运算符+/-
: 正负,一元运算符上面表达式中没有涉及自增与自减的情况,一元运算符的优先级大于二元运算符,上述表达式执行顺序为: 1 + (- (+ (+ (+ (- (+ 1)))))) ----> 1 + 1 = 2
二进制的奇数最低位是1,偶数最低位是0,可以通过& 1运算后可以判断奇偶。
num & 1 === 1 // num 为奇数
num & 1 === 0 // num 为偶数
可以采用异或来实现两个变量值的交换
let a = 1
let b = 2
a ^= b
b ^= a
a ^= b
console.LOG(a) // 2
console.log(b) // 1
~~num
请回答:y
的值为?
VAR x = 1;
var y = x + ++x + 3 * (x = ++x + x + x++ + 1)
+ x++ + 3;
console.log(y);
咱们来解剖一下这个长的要死的表达式:
第一个x值为1
第二个自增先加后用,x = 2
将 ++x + x + x++ + 1 的运算结果赋值给x
++x 先加后用,x = 3
x = 3
x++ 先用后加,x = 3
++x + x + x++ + 1 = 3 + 3 + 3 + 1 = 10
x++的后加,x = 4
将表达式的值赋给x,x由4变为10
x++ 先用后加,x = 10
此时所有的变量都已经求出
y = 1 + 2 + 3*10 + 10 + 3 = 46
x++,x最终值为11
new
运算符的有两种优先级吗?MDN
对 new
操作符的描述中,语法是:
new constructor[([arguments])]
([arguments])
意味着可以缺省,会存在 new constructor(...args)
和 new constructor
两种模式,并且前者的优先级高于后者。更详细的优先级见下图:
这个知识点非常重要,只有区分开了 new
带参列表和不带参列表,才能准确并且透彻的理解下面这道面试题。
function Foo(){
getName = function(){ console.log(1); };
return this;
}
Foo.getName = function(){ console.log(2); };
Foo.PRototyPE.getName = function(){ console.log(3); };
var getName = function(){ console.log(4); };
function getName(){ console.log(5) };
Foo.getName();
getName();
Foo().getName();
getName();
new Foo.getName();
new Foo().getName();
toString()
的妙用吗?2-36
)// 参数为要转换的进制
var a = 10;
a.toString(2) // "1010"
a.toString(8) // "12"
a.toString(16) // "a"
利用 toString
的进制转换,可生成随机验证码
Math.random().toString(36).substring(3,7) //生成四位数的随机验证码
toString.call(()=>{}) // [object Function]
toString.call({}) // [object Object]
toString.call([]) // [object Array]
toString.call('') // [object String]
toString.call(22) // [object Number]
toString.call(undefined) // [object undefined]
toString.call(null) // [object null]
toString.call(new Date) // [object Date]
toString.call(Math) // [object Math]
toString.call(window) // [object Window]
原始值是没有属性也没有方法的,那为什么字符串可以调用方法那?
JavaScript
为了便于基本类型操作,提供了三个特殊的引用类型(包装类),即 Number,String,Boolean
,它们的 [[PrimITiveValue]]
属性存储它们的本身值。
光说这些有可能有些难理解,咱们来举个例子:
var str = 'zcxiaobao'
str2 = str.toUpperCase()
其实js引擎内部会这样处理:
var str = 'zcxiaobao'
// 调用方法,创建String的一个实例
new String(str)
// 调用实例上的方法,并将值返回
str2 = new String(str).toUpperCase()
// 销毁实例
但这里有一个需要注意的点,new String('1')
和 '1'
类型相同吗,我们来测试一下:
var str1 = new String('1');
var str2 = '1';
console.log(str1 === str2); // false
console.log(str1 == str2); // true
console.log(typeof(str1)) // object
// new String()得到的字符串为object格式
先看一个示例:
var str = '123456';
str.length = 0;
console.log(str, str.length); // 123456 6
很明显,修改 str.length
是无法做到修改字符串的长度的。
原因跟第二十二问是相同的,str
为原始值,调用 length
相当用 new String(str).length
,修改的是 new String(str)
的 length
,跟原始值 str
无关。
如果将上面代码修改一下,str
是由 new String
产生,修改 length
属性会生效吗?
var str = new String('123456');
str.length = 0;
console.log(str, str.length); // String {"123456"} 6
答案告诉我们,还是失败了。
二十三问中:new String()
生成的字符串是对象类型,为啥还不能使用 length
属性。那说明 length
属性,很有可能配置了不可写,测试一下上述猜想:
Object.getOwnPropertyDescriptor(str, 'length')
/*
{
value: 6,
writable: false,
enumerable: false,
configurable: false
}
*/
由控制台的打印可知:new String()
生成的字符串的 length
属性不止是不可写,而且是不可枚举、不可配置的。
千分符:每隔三位数加进一个逗号,也就是千位分隔符,以便更加容易认出数值。最经典的案例就是银行账单:
200,100,100.00
元。
toLocaleString()
方法var num = 1450068.12;
console.log(num.toLocaleString()) // 1,450,068.12
但这种方法经过测试,不管多少小数点后有多少位小数,都只会返回三位小数,并且经过四舍五入。
var num = 1450068.129999;
console.log(num.toLocaleString()) // 1,450,068.13
function addThousands(@H_272_1360@num) {
var result = '',
counter = 0;
[numInter, numDecimal] = (num || 0).toString().split('.');
// 倒序处理整数部分
for (var i = numInter.length - 1; i >= 0; i--) {
counter++;
result = numInter[i] + result;
if (!(counter % 3) && i != 0) {
result = ',' + result;
}
}
// 大家可以补充一下小数部分的代码
// 小数部分与整数部分类似
return result;
}
console.log(addThousands(42371582378423)) // 42,371,582,378,423
该方法实现太过惊天动地了,这里只留答案,剩下的留到正则部分再详细讲述。
function toThousands(num) {
var numStr = (num || 0).toString();
return numStr.replace(/(d)(?=(?:d{3})+$)/g, '$1,');
}
JSON.stringify
了吗?JSON.stringfy
的基本使用:JSON.stringify
可以将数组或者对象转化成 JSON
字符串。JSON.parse
可以将 JSON
字符串转化为数组或对象。基于这两个方法,可以产生很多用处,例如:
localStorage
只能存取字符串格式的内容,因此存之前转换成 JSON
字符串,取出来用时,在转化成数组或对象。JSON.stringfy
语法:
JSON.stringify(value[, replACER [, space]])
参数:
value
: 将要序列化成 一个 JSON
字符串的值。replacer
(可选):
JSON
字符串中;null
或者未提供,则对象所有的属性都会被序列化。space
:指定缩进用的空白字符串,用于美化输出特别要注意1、3、5条特性
symbol
为属性键的属性都会被完全忽略掉,即便 replacer
参数中强制指定包含了它们。NaN
和 Infinity
格式的数值及 null
都会被当做 null
。undefined
、任意的函数以及 symbol
值:
null
undefined
toJSON()
方法,该方法定义什么值将被序列化。Date
日期调用了 toJSON()
将其转换为了 string
字符串(同 Date.toISOString()
),因此会被当做字符串处理。Map/Set/WeakMap/WeakSet
,仅会序列化可枚举的属性这是一个比较重要的考点,我在看牛客的前端面试题时,该问题反复出现。
pop push shift unshift splice sort reverse
// ES6新增
copyWithin
fill
join // 返回字符串
foreach // 无返回值
concat map filter slice // 返回新数组
every some // 返回布尔值
reduce // 不一定返回什么
indexOf lastIndexOf // 返回数值(索引值)
// ES6新增
find findIndex
shift
与 unshift
的返回值是什么?const arr = [1,2,3,4,5]
undefined
console.log(arr.unshift(0)) // 6
console.log(arr.shift()) // 0
由上述代码可知:unshift返回插入元素后的新数组元素个数,shift返回删除的元素值。
那么可以类比推理一下,push返回的是插入元素的新数组元素格式,pop返回删除的元素值。
new Array()
与 Array.of()
的区别是什么?Array.of()
方法创建一个具有可变数量参数的新数组实例,而不考虑参数的数量或类型。这好像跟 new Array
的功能极度接近,为什么 ES6
添加了新方法那?原因就在于 new Array(n)
,只有一个参数时,构造的并非只含 n
的数组,而是 1*n
的数组,值全为 undefined
。具体看测试:
Array.of(7); // [7]
Array.of(1, 2, 3); // [1, 2, 3]
Array(7); // [ , , , , , , ]
Array(1, 2, 3); // [1, 2, 3]
splice()
方法吗?splice()
的返回值是什么?array.splice(start[, deleteCount[, item1[, item2[, ...]]]])
参数:
start
: 指定修改的开始位置(从0计数)deleteCount
(可选): 整数,表示要移除的数组元素的个数。item1, item2...
(可选): 添加到数组的元素返回值:由被删除的元素组成的一个数组,没有删除返回空数组。 2. 数组中插入元素
数组中只提供了在数组头尾插入与删除的方法,没有提供在中间位置插入的方法,但可以通过将 deleteCount
设置为0,来实现插入效果。
const arr = [1,2,3,4,5]
console.log(arr.splice(2,0,100)) // []
console.log(arr) // [1, 2, 100, 3, 4, 5]
splice()
删除元素时有没有要注意的地方?大家看到这个问题,可能会感觉有几分蒙,没遇到过应该比较难想到,我来假设一个场景大家就懂了。
现在有这样一个数组 [1,-1,2,-1,-5]
,我想删除掉所有的负数,于是我就写出了下面的代码:
const arr = [1,-1,-2,1,-5]
for(let i = 0; i<arr.length; i++) {
if (arr[i] < 0) {
arr.splice(i, 1)
}
}
console.log(arr) // [1, -2, 1]
这就奇怪了,为啥 -2
没被删除掉?我在上面的代码加一句打印,大家应该就懂了。
for(let i = 0; i<arr.length; i++) {
if (arr[i] < 0) {
arr.splice(i, 1)
console.log(a[i]) // -2 undefined
}
}
数组删除 -1
之后,当前的 i
值为 -2
,此次遍历结束,i++
,正好空过了 -2
元素。因此如果splice删除元素发生在数组中,一定要注意回调i的位置。
reduce()
吗?function Accumulation(...vals) {
return vals.reduce((t, v) => t + v, 0);
}
function Multiplication(...vals) {
return vals.reduce((t, v) => t * v, 1);
}
reverse
function Reverse(arr = []) {
return arr.reduceRight((t, v) => (t.push(v), t), []);
}
function Flat(arr = []) {
return arr.reduce((t, v) => t.concat(Array.isArray(v) ? Flat(v) : v), [])
}
[..."hello world"].reduce((a, v) => v + a)
[..."hello world"].reverse().join('')
// 这是一个十分巧妙的用法,如果结果等于0说明,括号数量是合法的。
[..."(())()(()())"].reduce((a,i)=> i === '(' ? a+1 : a-1 , 0);
map、filter、every、some
如何使用?map()
: 创建一个新数组,其结果是该数组中的每个元素是调用一次提供的函数后的返回值。其中原始数组不会发生改变。// 返回numbers的平方根
var numbers = [1, 4, 9];
var roots = numbers.map(Math.sqrt); // [1, 2, 3]
filter()
: 创建一个新数组, 其包含通过所提供函数实现的测试的所有元素。// 筛选排除所有较小的值
function isBigEnough(element) {
return element >= 10;
}
var filtered = [12, 5, 8, 130, 44].filter(isBigEnough); // filtered is [12, 130, 44]
some
:用于检测数组中的元素是否满足指定条件。
true
, 剩余的元素不会再执行检测false
// 检测在数组中是否有元素大于 10
function isBiggerThan10(element, index, array) {
return element > 10;
}
[2, 5, 8, 1, 4].some(isBiggerThan10); // false
[12, 5, 8, 1, 4].some(isBiggerThan10); // true
every
: 检测数组所有元素是否都符合指定条件.
false
,且剩余的元素不会再进行检测true
// 检测在数组中元素是否都大于 10
function isBigEnough(element, index, array) {
return element >= 10;
}
[12, 5, 8, 130, 44].every(isBigEnough); // false
[12, 54, 18, 130, 44].every(isBigEnough); // true
Math.random
提到乱序,大家首先会想到使用 Math.random
,比如下面代码:
var values = [1, 2, 3, 4, 5];
values.sort(function(){
return Math.random() - 0.5;
});
console.log(values)
Math.random() - 0.5
随机得到一个正数,负数或者0,之后通过sort实现乱序。
但这种方法的效果其实并不如人意,具体测试可参考博客:JavaScript专题之乱序
Fisher–Yates
洗牌算法function shuffle(a) {
var j, x, i;
for (i = a.length; i; i--) {
j = Math.floor(Math.random() * i);
x = a[i - 1];
a[i - 1] = a[j];
a[j] = x;
}
return a;
}
for
和 splice
function unique(arr){
for(var i=0; i<arr.length; i++){
for(var j=i+1; j<arr.length; j++){
if(arr[i]==arr[j]){
//第一个等同于第二个,splice方法删除第二个
arr.splice(j,1);
// 删除后注意回调j
j--;
}
}
}
return arr;
}
indexOf
或 includes
加新数组//使用indexof
function unique(arr) {
var uniqueArr = []; // 新数组
for (let i = 0; i < arr.length; i++) {
if (uniqueArr.indexOf(arr[i]) === -1) {
//indexof返回-1表示在新数组中不存在该元素
uniqueArr.push(arr[i])//是新数组里没有的元素就push入
}
}
return uniqueArr;
}
// 使用includes
function unique(arr) {
var uniqueArr = [];
for (let i = 0; i < arr.length; i++) {
//includes 检测数组是否有某个值
if (!uniqueArr.includes(arr[i])) {
uniqueArr.push(arr[i])//
}
}
return uniqueArr;
}
sort
排序后,使用快慢指针的思想function unique(arr) {
arr.sort((a, b) => a - b);
var slow = 1,
fast = 1;
while (fast < arr.length) {
if (arr[fast] != arr[fast - 1]) {
arr[slow ++] = arr[fast];
}
++ fast;
}
arr.length = slow;
return arr;
}
sort
方法用于从小到大排序(返回一个新数组),其参数中不带以上回调函数就会在两位数及以上时出现排序错误(如果省略,元素按照转换为的字符串的各个字符的 Unicode
位点进行排序。两位数会变为长度为二的字符串来计算)。 4. ES6
提供的 Set
去重
function unique(arr) {
const result = new Set(arr);
return [...result];
//使用扩展运算符将Set数据结构转为数组
}
Set
中的元素只会出现一次,即 Set
中的元素是唯一的。 5. 使用哈希表存储元素是否出现(ES6
提供的 map
)
function unique(arr) {
let map = new Map();
let uniqueArr = new Array(); // 数组用于返回结果
for (let i = 0; i < arr.length; i++) {
if(map.has(arr[i])) { // 如果有该key值
map.set(arr[i], true);
} else {
map.set(arr[i], false); // 如果没有该key值
uniqueArr.push(arr[i]);
}
}
return uniqueArr ;
}
map
对象保存键值对,与对象类似。但 map
的键可以是任意类型,对象的键只能是字符串类型。
如果数组中只有数字也可以使用普通对象作为哈希表。 6. filter
配合 indexOf
function unique(arr) {
return arr.filter(function (item, index, arr) {
//当前元素,在原始数组中的第一个索引==当前索引值,否则返回当前元素
//不是那么就证明是重复项,就舍弃
return arr.indexOf(item) === index;
})
}
这里有可能存在疑问,我来举个例子:
const arr = [1,1,2,1,3]
arr.indexOf(arr[0]) === 0 // 1 的第一次出现
arr.indexOf(arr[1]) !== 1 // 说明前面曾经出现过1
reduce
配合 includes
function unique(arr){
let uniqueArr = arr.reduce((acc,cur)=>{
if(!acc.includes(cur)){
acc.push(cur);
}
return acc;
},[]) // []作为回调函数的第一个参数的初始值
return uniqueArr
}
Array.prototype.slice.call()
const arrayLike = {
0: '111',
1: '222',
length: 2
}
console.log(Array.prototype.slice.call(arrayLike)) // ["1", "2"]
Array.From()
Array.from
是 ES6
新增的方法,它可以将**类数组对象和可遍历(iterable)**转变为真正的数组。
const arrayLike = {
0: '1',
1: '2',
length: 2
}
console.log(Array.from(arrayLike)) // ["1", "2"]
(...)
扩展运算符扩展运算符调用的是遍历器接口,如果一个对象没有部署此接口就无法完成转换。
上面咱们自己写的普通类数组就无法使用…运算符。
const arrayLike = {
0: '1',
1: '2',
length: 2
}
// Uncaught TypeError: arrayLike is not iterable
console.log([...arrayLike]) // ["1", "2"]
如果部署了遍历器接口,例如 arguments
类数组,便可以使用扩展运算符。
function fn() {
console.log([...arguments])
}
fn(1,2,3) // [1, 2, 3]
以上是脚本宝典为你收集整理的【面试利器】原生JS灵魂拷问,你能答上多少(二)全部内容,希望文章能够帮你解决【面试利器】原生JS灵魂拷问,你能答上多少(二)所遇到的问题。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。