JavaScript的知识点备忘

Object.values/Object.keys/Object.entries()

Object.keys:对Object中的索引进行循环
Object.values:对Object中的值进行循环
Object.entries:对Object中的每个项进行循环

Array map()

map() 方法返回一个新数组,数组中的元素为原始数组元素调用函数处理后的值。

1
2
3
4
5
6
7
8
9
10
const numbers = [4,9,16,25];
numbers.map(Math.sqrt);


const users=res.items.map(item => ({
url: item.html_url,
img: item.avatar_url,
name: item.login,
})
);

拼接字符串

1
console.log(`当前Zoom等级:${this.mapControl.map.getView().getZoom()}`);

合并对象属性

Object.assign():用于将所有可枚举属性的值从一个或多个源对象复制到目标对象。它将返回目标对象。

1
2
3
4
5
6
7
8
9
10
11
12
//语法
Object.assign(target, ...sources);

//示例
const object1 = {
a: 1,
b: 2,
c: 3
};
const object2 = Object.assign({c: 4, d: 5}, object1);
console.log(object2.c, object2.d);
// expected output: 3 5

JavaScript Array Includes()

includes() 方法用来判断一个数组是否包含一个指定的值,如果是返回 true,否则false。

1
2
3
4
5
[1, 2, 3].includes(2);     // true
[1, 2, 3].includes(4); // false
[1, 2, 3].includes(3, 3); // false
[1, 2, 3].includes(3, -1); // true
[1, 2, NaN].includes(NaN); // true

JavaScript Array concat()

concat() 方法用于连接两个或多个数组。
该方法不会改变现有的数组,而仅仅会返回被连接数组的一个副本。

1
2
3
4
5
6
7
//语法
arrayObject.concat(arrayX,arrayX,......,arrayX)

//示例
var a = [1,2,3];
console.log(a.concat(4,5));
//1,2,3,4,5

ES6扩展运算符 三个点(…)

对象的扩展运算符

理解对象的扩展运算符其实很简单,只要记住一句话就可以:

对象中的扩展运算符(…)用于取出参数对象中的所有可遍历属性,拷贝到当前对象之中(浅拷贝)

1
2
let bar = { a: 1, b: 2 };
let baz = { ...bar }; // { a: 1, b: 2 }

上述方法实际上等价于:

1
2
let bar = { a: 1, b: 2 };
let baz = Object.assign({}, bar); // { a: 1, b: 2 }

数组的扩展运算符

扩展运算符同样可以运用在对数组的操作中

  • 可以将数组转换为参数序列
1
2
3
4
5
6
function add(x, y) {
return x + y;
}

const numbers = [4, 38];
add(...numbers) // 42
  • 可以复制数组
1
2
const arr1 = [1, 2];
const arr2 = [...arr1];

还是记住那句话:扩展运算符(…)用于取出参数对象中的所有可遍历属性,拷贝到当前对象之中,这里参数对象是个数组,数组里面的所有对象都是基础数据类型,将所有基础数据类型重新拷贝到新的数组中。

  • 扩展运算符可以与解构赋值结合起来,用于生成数组
1
2
3
const [first, ...rest] = [1, 2, 3, 4, 5];
first // 1
rest // [2, 3, 4, 5]

需要注意的一点是:如果将扩展运算符用于数组赋值,只能放在参数的最后一位,否则会报错。

1
2
3
4
const [...rest, last] = [1, 2, 3, 4, 5];
// 报错
const [first, ...rest, last] = [1, 2, 3, 4, 5];
// 报错
  • 扩展运算符还可以将字符串转为真正的数组
1
2
[...'hello']
// [ "h", "e", "l", "l", "o" ]
  • 任何 Iterator 接口的对象(参阅 Iterator 一章),都可以用扩展运算符转为真正的数组

这点说的比较官方,大家具体可以参考阮一峰老师的ECMAScript 6入门教程。

比较常见的应用是可以将某些数据结构转为数组,比如:

1
2
3
4
// arguments对象
function foo() {
const args = [...arguments];
}

用于替换es5中的Array.prototype.slice.call(arguments)写法。

js中!和!!的区别及用法

js中!的用法是比较灵活的,它除了做逻辑运算常常会用!做类型判断,可以用!与上对象来求得一个布尔值,

  • !可将变量转换成boolean类型,null、undefined和空字符串取反都为false,其余都为true。
1
2
3
4
5
6
7
8
9
!null=true

!undefined=true

!''=true

!100=false

!'abc'=false
  • !!常常用来做类型判断,在第一步!(变量)之后再做逻辑取反运算,在js中新手常常会写这样臃肿的代码:

判断变量a为非空,未定义或者非空串才能执行方法体的内容

1
2
3
4
var a;
if(a!=null&&typeof(a)!=undefined&&a!=''){
//a有内容才执行的代码
}

实际上我们只需要写一个判断表达:

1
2
3
if(!!a){
//a有内容才执行的代码...
}

就能和上面达到同样的效果。a是有实际含义的变量才执行方法,否则变量null,undefined和’’空串都不会执行以下代码。

可以总结出来,“!”是逻辑与运算,并且可以与任何变量进行逻辑与将其转化为布尔值,“!!”则是逻辑与的取反运算,尤其后者在判断类型时代码简洁高效,省去了多次判断null、undefined和空字符串的冗余代码。