1、async、await的常见面试题
async function async1() {
console.log('async1 start');
const result = await async2();
console.log(result);
// 会先执行async2函数， 然后跳出async1， 同时将返回的promise放入微队列
console.log('async1 end');
}
async function async2() {
console.log('async');
return "testAwait";
}
console.log('script start');
setTimeout(function() {
console.log('setTimeout');
}, 0);
async1();
new Promise(function(resolve) {
console.log('promise1');
resolve();
}).then(function() {
console.log('promise2');
});
new Promise(function(resolve) {
console.log('promise3');
resolve();
}).then(function() {
console.log('promise4');
});
console.log('script end');
/* script start
async1 start
async
promise1
promise3
script end
promise2
promise4
testAwait
async1 end
setTimeout
*/
正常情况下，await命令后面是一个 Promise 对象，返回该对象的结果。如果不是 Promise 对象，就直接返回对应的值（相当于直接Promise.resolve）。
例子：
async function f() {
// 等同于
// return 123;
return await 123;
}
f().then(v => console.log(v))
// 123
2、js实现对象去重
var arr = [{
key: '01',
value: '乐乐'
}, {
key: '02',
value: '博博'
}, {
key: '03',
value: '淘淘'
},{
key: '04',
value: '哈哈'
},{
key: '01',
value: '乐乐'
}];
// 方法1：利用对象访问属性的方法，判断对象中是否存在key
function uniqueObj(arr) {
const obj = {};
const result = [];
for(let i = 0; i<arr.length; i++) {
if(!obj[arr[i].key]){
result.push(arr[i]);
obj[arr[i].key] = true;
}
}
return result;
}
// 方法2：利用reduce方法遍历数组,reduce第一个参数是遍历需要执行的函数，第二个参数是item的初始值
function uniqueObj(arr) {
const obj = {};
//const result = [];
arr.reduce((prev, cur) => {
obj[cur.key] ? '' : obj[cur.key] = true && prev.push(cur);
return prev;
}, [])
}
//方法3: 利用JSON.stringify和JSON.parse实现
function uniqueObj() {
var obj = [
{year: '2013-2014', term: '1'},
{year: '2013-2014', term: '2'},
{year: '2013-2014', term: '3'},
{year: '2013-2014', term: '2'},
{year: '2014-2015', term: '1'},
{year: '2013-2014', term: '2'}
]
var unique = {};
obj.forEach(function(gpa) {
unique[JSON.stringify(gpa)] = gpa
});
console.log(unique);
console.log(Object.keys(unique));
obj = Object.keys(unique).map(function(u) {
return JSON.parse(u)
});
console.log(obj)
}
uniqueObj()
3、实现数组去重
1、利用indexOf、filter
function array_unique(arr) {
return arr.filter(function(e,i){
return arr.indexOf(e)===i;
})
}
console.log(array_unique([1, 2, 3, 4, 4, 3, 2, 1, 1]));//[1, 2, 3, 4]
console.log(array_unique([1, 2, 3, 4, 4, 3, 2, 1, 1,5,'5']));//[1, 2, 3, 4, 5, "5"]
2、利用hash可以把数字和字符相同的也去掉
单一数据类型hash很快
字符串和数字混合的话会出错
function array_unique(arr) {
var hash = {},
result = [];
for (var i = 0; i < arr.length; i++) {
if (!hash[arr[i]]) {
hash[arr[i]] = true;
result.push(arr[i]);
}
}
console.log(hash);
return result;
}
console.log(array_unique([4, 3, 2, 1, 1, 2, 3, 4]));//[4, 3, 2, 1]
console.log(array_unique([4, 3, 2, 1, 1, 5, '5', 1, 2, 3, 4]));//[4, 3, 2, 1, 5]
3、js数组中过滤掉false, null, 0, "", undefined, and NaN值的方法
// 1.Array.filter()方式实现
function bouncer(){
var arr = [7, "ate", "", false, 9];
return arr.filter(Boolean);
//或者用下面这种方式
// return arr.filter(item => !(!item || item === ''));
}
bouncer();//[7, "ate", 9]
//2、遍历数组
//空字符，undefined， null, false , 0转化为布尔类型都是 false;
let arr=[1, , null, false, undefined, 3]
let newArr= [];
//法1
arr.forEach(item => {
if (item) {
newArr.push(item)
}
})
//法2
for (let item of arr) {
if (item) {
newArr.push(item)
}
}
//js数组完美去重，区分undefined,NaN,null,字符串等
function array_unique(arr) {
let len = arr.length;
if (!len) {
return [];
}
let tmp = [];
for (let i = 0; i < len; i++) {
if (
tmp.findIndex((v) => { return JSON.stringify(v) === JSON.stringify(arr[i]) }) === -1
) {
tmp.push(arr[i])
}
}
return tmp;
}
let arr = [1, 2, 3, 4, '1', 2, undefined, undefined, 'undefined', NaN, NaN, {}, {}, { a: 1 }, { a: 1 }]
let newArr = array_unique(arr);
console.log(newArr);// [1, 2, 3, 4, "1", undefined, "undefined", NaN, {}, {a:1}]
4、常用的处理数组方法
https://www.cnblogs.com/sqh17/p/8529401.html
map、filter、reduce、every、some、find、findIndex方法
find、findIndex用法
find()函数用来查找目标元素，找到就返回该元素，找不到返回undefined。
findIndex()函数也是查找目标元素，找到就返回元素的位置，找不到就返回-1。
他们的都是一个查找回调函数。
[1, 2, 3, 4].find((value, index, arr) => {
})
查找函数有三个参数。
value：每一次迭代查找的数组元素。
index：每一次迭代查找的数组元素索引。
arr：被查找的数组。
例：
1.查找元素，返回找到的值，找不到返回undefined。
const arr1 = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11]
var ret1 = arr1.find((value, index, arr) => {
return value > 4
})
var ret2 = arr1.find((value, index, arr) => {
return value > 14
})
console.log('%s', ret1) // 5
console.log('%s', ret2) //undefined
2.查找元素，返回找到的index，找不到返回-1。
var ret3 = arr1.findIndex((value, index, arr) => {
return value > 4
})
var ret4 = arr1.findIndex((value, index, arr) => {
return value > 14
})
console.log('%s', ret3) // 4
console.log('%s', ret4) // -1
map用法:
arr.map(callback) 映射数组(遍历数组),有return 返回一个新数组 。
callback的参数： value --当前索引的值
index --索引
array --原数组
let arr = [1,2,3,4,5]
arr.map( (value,index,array)=>{
value = value * 2
console.log(`value:${value} index:${index} array:${array}`)
})
console.log(arr)
var arr1 = [1,2,3,4];
var res1 = arr1.map((item,index,arr)=>{
item = item * 3;
return item;
})
console.log(arr1); // [1,2,3,4]
console.log(res1); // [3,6,9,12]
filter用法
arr.filter(callback) 过滤数组，返回一个满足要求的数组
callback的参数： value --当前索引的值
index --索引
let arr = [1,2,3,4,5]
let arr1 = arr.filter( (value, index) => value<3)
console.log(arr1) // [1, 2]
reduce用法
arr.reduce(callback, initialValue) 迭代数组的所有项，累加器，数组中的每个值（从左到右）合并，最终计算为一个值
参数： callback: previousValue 必选 --上一次调用回调返回的值，
或者是提供的初始值（initialValue）
currentValue 必选 --数组中当前被处理的数组项
index 可选 --当前数组项在数组中的索引值
array 可选 --原数组
initialValue: 可选 --初始值
实行方法：回调函数第一次执行时，preValue 和 curValue 可以是一个值，如果 initialValue 在调用 reduce() 时被提供，那么第一个 preValue 等于 initialValue ，并且curValue 等于数组中的第一个值；如果initialValue 未被提供，那么preValue 等于数组中的第一个值.
let arr = [0,1,2,3,4]
let arr1 = arr.reduce((preValue, curValue) =>
preValue + curValue
)
console.log(arr1) // 10
reduce的高级用法
（1）计算数组中每个元素出现的次数
let names = ['peter', 'tom', 'mary', 'bob', 'tom','peter'];
let nameNum = names.reduce((pre,cur)=>{
if(cur in pre){
pre[cur]++
}else{
pre[cur] = 1
}
return pre
},{})
console.log(nameNum); //{ peter: 2, tom: 2, mary: 1, bob: 1 }
（2）数组去重
let arr = [1,2,3,4,4,1]
let newArr = arr.reduce((pre,cur)=>{
if(!pre.includes(cur)){
return pre.concat(cur)
}else{
return pre
}
},[])
console.log(newArr);// [1, 2, 3, 4]
(3）将多维数组转化为一维
let arr = [[0, 1], [2, 3], [4,[5,6,7]]]
const newArr = function(arr){
return arr.reduce((pre,cur)=>pre.concat(Array.isArray(cur)?newArr(cur):cur),[])
}
console.log(newArr(arr)); //[0, 1, 2, 3, 4, 5, 6, 7]
every用法
arr.every(callback) 依据判断条件，数组的元素是否全满足，若满足则返回ture
callback的参数： value --当前索引的值
index --索引
let arr = [1,2,3,4,5]
let arr1 = arr.every( (value, index) =>value<3)
console.log(arr1) // false
let arr2 = arr.every( (value, index) =>value<6)
console.log(arr2) // true
some用法
arr.some() 依据判断条件，数组的元素是否有一个满足，若有一个满足则返回ture
callback的参数： value --当前索引的值
index --索引
let arr = [1,2,3,4,5]
let arr1 = arr.some( (value, index) =>value<3)
console.log(arr1) // true
let arr2 = arr.some( (value, index) =>value>6)
console.log(arr2) // false
include用法
arr.includes() 判断数中是否包含给定的值。返回true和false
let arr = [1,2,3,4,5]
let arr1 = arr.includes(2)
console.log(arr1) // ture
let arr2 = arr.includes(9)
console.log(arr2) // false
let arr3 = [1,2,3,NaN].includes(NaN)
console.log(arr3) // true
s:与indexOf()的区别：
1 indexOf()返回的是数值，而includes()返回的是布尔值
2 indexOf() 不能判断NaN，返回为-1 ，includes()则可以判断
ES6 —— entries()，keys()和values()
https://www.cnblogs.com/jing-tian/p/11115758.html)
ES6 提供三个新的方法——entries()，keys()和values()——用于遍历数组。它们都返回一个遍历器对象，可以用for...of循环进行遍历，唯一的区别是keys()是对键名的遍历、values()是对键值的遍历，entries()是对键值对的遍历。
一、一般数组的用法
for of支持遍历数组、类对象（例如DOM NodeList对象，也称伪数组）、字符串、Map对象、Set对象；
for of不支持遍历普通对象，可通过参考下面的Object.keys()搭配使用遍历
var arr = ['a', 'b'];
for (let index of arr.keys()) {
console.log(index);
}
// 0
// 1
for (let elem of arr.values()) {
console.log(elem);
}
// 'a'
// 'b'
for (let [index, elem] of arr.entries()) {
console.log(index, elem);
}
// 0 "a"
// 1 "b"
二、object对象keys(), values() entries() 返回值：数组
1.Object.keys()
ES5 引入了Object.keys方法，返回一个数组，成员是参数对象自身的（不含继承的）所有可遍历（enumerable）属性的键名。
for of不支持遍历普通对象，可通过与Object.keys()搭配使用遍历
let obj = { a: 1, b: 2, c: 3 };
for (let key of Object.keys(obj)) {
console.log(key); // 'a', 'b', 'c'
}
var obj1 = {"name":"lucas","age":22};
console.log(Object.keys(obj1)) // ["name", "age"]
2.Object.values()
let obj = { a: 1, b: 2, c: 3 };
for (let value of Object.values(obj)) {
console.log(value); // 1, 2, 3
}
var obj1 = {"name":"lucas",age:22}; console.log(Object.values(obj1)) //["lucas", 22]
3.Object.entries()
Object.entries()和 Object.keys 相关，不过 entries()函数会将 key 和 value 以数组的形式都返回。这样，使用循环或则将对象转为 Map 就很方便了。
let obj = { a: 1, b: 2, c: 3 };
for (let [key, value] of Object.entries(obj)) {
console.log([key, value]); // ['a', 1], ['b', 2], ['c', 3]
}
var obj1 = {"name":"lucas",age:22}; console.log(Object.entries(obj1)) //["name","lucas"] ["age",22]
Object.entries方法的一个用处是，将对象转为真正的Map结构。
var obj2 = {foo:'bar',baz:42};
var map2 = new Map(Object.entries(obj2));
console.log(map2); //map{"foo" => "bar", "baz" => 42}
var data={a:1,b:2,c:9,d:4,e:5};
console.log(data); //{a: 1, b: 2, c: 9, d: 4, e: 5}
console.log(Object.keys(data)); //["a", "b", "c", "d", "e"]
Object.keys(data).map((key,item)=>{
console.log(key,data[key]); //key=>属性名 data[key]=>属性值
/* 输出:
a 1
b 2
c 9
d 4
e 5
*/
});
网友评论