0%

  • 为对象添加属性
  • 为对象添加方法
  • 浅克隆
  • 合并多个对象
  • 属性指定默认值
1
2
3
4
5
6
7
const DEFAULTS = {
logLevel: 0,
outputFormat: 'html'
};
function processContent(options) {
let options = Object.assign({}, DEFAULTS, options);
}

Object.create()、new Object()和{}的区别

直接字面量创建

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
var objA = {};
objA.name = 'a';
objA.sayName = function() {
console.log(`My name is ${this.name} !`);
}
// var objA = {
// name: 'a',
// sayName: function() {
// console.log(`My name is ${this.name} !`);
// }
// }
objA.sayName();
console.log(objA.__proto__ === Object.prototype); // true
console.log(objA instanceof Object); // true

new关键字创建

1
2
3
4
5
6
7
8
9
var objB = new Object();
// var objB = Object();
objB.name = 'b';
objB.sayName = function() {
console.log(`My name is ${this.name} !`);
}
objB.sayName();
console.log(objB.__proto__ === Object.prototype); // true
console.log(objB instanceof Object); // true

Object.create 创建

一个完整的版本

https://ouyangresume.github.io/2019/12/19/mapbox%E7%9A%84Popup%E4%B8%8EVue%E6%A1%86%E6%9E%B6%E8%9E%8D%E5%90%88%E4%BD%BF%E7%94%A8/

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
import StarRating from 'vue-star-rating'

// ...

var starRating = new Vue({
...StarRating,
parent: this,
propsData: { /* pass props here*/ }
}).$mount()

starRating.$on('someEvent', (value) => {
// listen to events emitted from the component
})
var popup = new mapboxgl.Popup()
.setDOMContent(startRating.$el)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
import InfoWindowContent from '../InfoWindowContent.vue'

L.popup({maxWidth: 600,
className: 'leaflet-info-window'})
.setLatLng(latlng)
.setContent('<div id="info-window"></div>')
.openOn(this.map)
const InfoWindow = Vue.extend(InfoWindowContent)
const infoWindow = new InfoWindow({
propsData: {
windowData: this.infoWindowData,
windowType: this.infoWindowType
},
store: this.$store
})
infoWindow.$mount("#info-window")
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
// 添加Popup对象
const popup = new mapboxgl.Popup({
anchor: "bottom",
offset: offset || [1, -15],
className: "popup"
});
popup.on("close", function(p) {
if (p && p.target && p.target._vue) {
p.target._vue.$destroy();
}
});
const dom = document.createElement("div");
dom.className = "popup-content-wrapper";

popup.setLngLat(coordinates).setDOMContent(dom).addTo(map);
// 渲染局部Vue组件(mappopupwrapper)
popup._vue = new Vue({
render: h =>
h(MapPopupWrapper, {
props: {
width: "700px",
type: "resource",
target: {
feature
}
}
})
}).$mount(dom);

options.preserveDrawingBuffer

If true , the map’s canvas can be exported to a PNG using map.getCanvas().toDataURL() . This is false by default as a performance optimization.

1
map.getCanvas().toDataURL()

queryRenderedFeatures

Returns an array of GeoJSON Feature objects representing visible features that satisfy the query parameters.

https://docs.mapbox.com/mapbox-gl-js/api/map/#map#queryrenderedfeatures

1
2
3
4
5
// Find all features within a static bounding box
var features = map.queryRenderedFeatures(
[[10, 20], [30, 50]],
{ layers: ['my-layer-name'] }
);
1
2
3
4
5
6
7
// Find all features within a bounding box around a point
var width = 10;
var height = 20;
var features = map.queryRenderedFeatures([
[point.x - width / 2, point.y - height / 2],
[point.x + width / 2, point.y + height / 2]
], { layers: ['my-layer-name'] });
1
2
// Query all rendered features from a single layer
var features = map.queryRenderedFeatures({ layers: ['my-layer-name'] });

querySourceFeatures

Returns an array of GeoJSON Feature objects representing features within the specified vector tile or GeoJSON source that satisfy the query parameters.

https://docs.mapbox.com/mapbox-gl-js/api/map/#map#querysourcefeatures

1
2
3
4
// Find all features in one source layer in a vector source
var features = map.querySourceFeatures('your-source-id', {
sourceLayer: 'your-source-layer'
});

updateImage

1
2
3
// If an image with the ID 'cat' already exists in the style's sprite,
// replace that image with a new image, 'other-cat-icon.png'.
if (map.hasImage('cat')) map.updateImage('cat', './other-cat-icon.png');
1
2
3
4
5
6
7
8
"icon-color": [
"case",
["boolean", ["feature-state", "hover"], false],
"#F89806",
["boolean", ["==", ["get", "state"], 0], false],
"#2363F8",
["get", "color"]
],

https://stackoverflow.com/questions/17964757/how-to-prune-delete-nodes-in-nested-tree-like-json

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
var a =  [
{
"label": "node1",
"children": [
{
"label": "Human"
},
{
"label": "Chimpanzee"
}
]
},
{
"label": "node2",
"children": [
{
"label": "node3",
"children": [
{
"label": "Rat"
},
{
"label": "Mouse"
}
]
},
{
"label": "BigRat"
}
]
}
]

function prune(array, label) {
for (var i = 0; i < array.length; ++i) {
var obj = array[i];
if (obj.label === label) {
// splice out 1 element starting at position i
array.splice(i, 1);
return true;
}
if (obj.children) {
if (prune(obj.children, label)) {
if (obj.children.length === 0) {
// delete children property when empty
delete obj.children;

// or, to delete this parent altogether
// as a result of it having no more children
// do this instead
array.splice(i, 1);
}
return true;
}
}
}
}

var wasItPruned = prune(tree, "node3");

简单说,就是允许碰撞

1
2
3
4
5
"icon-ignore-placement": true, //  不管下面
"icon-allow-overlap": true, // 允许被覆盖

"text-ignore-placement": true,
"text-allow-overlap": true,

polygon 多维数组是 “挖洞”

1
2
3
4
5
6
7
8
9
10
11
12
13
var aa =  { "type": "Polygon",
"coordinates": [

[ [108.9093384209429, 34.25000258545077],[108.90846464854332, 34.24677914297165],[108.91640950499936, 34.24612373914805],[108.91687875313949, 34.249801959853556],[108.9093384209429, 34.25000258545077]],

[ [108.91183029038228, 34.24663201194514] ,[108.91448396952353, 34.24651163182365], [108.91482376990217, 34.247608422127456],[108.91183029038228, 34.24663201194514]],

[[108.91026413410287, 34.24909755966851],[108.90994051469443, 34.24858930176197],[108.9122058505489, 34.248442173900116],[108.91243238413387, 34.24909755966851]]

]
}

test.map.getSource('temp_polygon').setData(aa)

MultiPolygon

最外面多一层

1
2
3
4
5
6
7
8
9
10
11
12
var aa =  { "type": "MultiPolygon",
"coordinates": [[

[ [108.9093384209429, 34.25000258545077],[108.90846464854332, 34.24677914297165],[108.91640950499936, 34.24612373914805],[108.91687875313949, 34.249801959853556],[108.9093384209429, 34.25000258545077]],

[ [108.91183029038228, 34.24663201194514] ,[108.91448396952353, 34.24651163182365], [108.91482376990217, 34.247608422127456],[108.91183029038228, 34.24663201194514]],


[[108.91026413410287, 34.24909755966851],[108.90994051469443, 34.24858930176197],[108.9122058505489, 34.248442173900116],[108.91243238413387, 34.24909755966851]]

]]
}

test.map.getSource(‘temp_polygon’).setData(aa)

多个 polygon

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
var aa = {
"type": "MultiPolygon",
"coordinates": [
[

[[108.9093384209429, 34.25000258545077], [108.90846464854332, 34.24677914297165], [108.91640950499936, 34.24612373914805], [108.91687875313949, 34.249801959853556], [108.9093384209429, 34.25000258545077]],
],
[
[[108.91183029038228, 34.24663201194514], [108.91448396952353, 34.24651163182365], [108.91482376990217, 34.247608422127456], [108.91183029038228, 34.24663201194514]],
],
[
[[108.91026413410287, 34.24909755966851], [108.90994051469443, 34.24858930176197], [108.9122058505489, 34.248442173900116], [108.91243238413387, 34.24909755966851]]
]
],
}

test.map.getSource('temp_polygon').setData(aa)

(从世界中)只显示 xxx

1
2
3
4
5
6
7
8
9
10
11
12
var aa =  {
"type": "Polygon",
"coordinates": [
[[-180, -90], [-180, 90], [180, 90], [180, -90], [-180, -90]],

要删掉的部分


]
}

test.map.getSource('temp_polygon').setData(aa)

最大化

option(alt) 点击左上角绿色按钮 最大化(不是全屏)

全屏

ctrl+command+f

1
2
var clone = Object.assign({}, {a: 1, b: 2, c: 3});
delete clone.b;

这个不完美

1
var clone2 = Object.assign({}, {a: 1, b: 2, c: 3}, {b: undefined});
1
2
3
4
5
6
7
8
9
const x = {a: 1, b: 2, c: 3, z:26};

const objectWithoutKey = (object, key) => {
const {[key]: deletedKey, ...otherKeys} = object;
return otherKeys;
}

console.log(objectWithoutKey(x, 'b')); // {a: 1, c: 3, z:26}
console.log(x); // {a: 1, b: 2, c: 3, z:26};
1
2
3
const obj = { a: 1, b: 2, c: 3, d: 4 }
const clone = (({ b, c, ...o }) => o)(obj) // remove b and c
console.log(clone)

lodash

1
_.omit(x, 'b')

  • 早安,所有善良而勇敢的人们
  • 坏人们,颤抖吧

关掉 vue has been registered but not used

package.json 的 eslintConfig(如果已经有 eslintrc.js )

1
2
3
"rules": {
"vue/no-unused-components": "off"
}

clone object 三种

1
2
3
4
5
6
7
let a = {a:1,b:{c:{d:2}}}

{...a}

Object.assign({},a)

JSON.parse(JSON.stringify(food))

via https://www.samanthaming.com/tidbits/70-3-ways-to-clone-objects/

padStart

1
2
3
4
5
6
7
8
9
10
const purchase = [
['Masks', '9.99'],
['Shirt', '20.00'],
['Jacket', '200.00'],
['Gloves', '10.00'],
];

purchase.forEach(([item, price]) => {
console.log(item + price.padStart(20 - item.length));
});

两头对齐

1
2
3
4
Masks           9.99
Shirt 20.00
Jacket 200.00
Gloves 10.00
1
2
3
4
5
const bankNumber = '2222 2222 2222 2222';
const last4Digits = bankNumber.slice(-4);

last4Digits.padStart(bankNumber.length, '*');
// ***************2222

类似滴:

  • trimStart(trimLeft) 去除前空格
  • trimEnd(trimRight) 去除后空格
  • trim() 去除前后空格

shadow copy

  • spread operator {…} […]
  • array slice
  • Object.assign
  • Array.from

deep copy

deep copy (or deep clone): lodash _.cloneDeep, Ramda, a custom function, JSON.parse() / JSON.stringify(), and rfdc

For the best performance, the library rfdc (Really Fast Deep Clone) will deep copy about 400% faster than lodash’s _.cloneDeep

https://medium.com/javascript-in-plain-english/how-to-deep-copy-objects-and-arrays-in-javascript-7c911359b089