JavaScript语法
我比较薄弱的地方，
- map
map是一种数据结构，里面有set和get方法
（如果你亲自实现过链表、队列、栈这几个数据结构，你就应该明白我在说什么）。
看代码
var myMap = new Map();
var keyString = 'a string',
keyObj = {},
keyFunc = function() {};
// setting the values
myMap.set(keyString, "value associated with 'a string'");
myMap.set(keyObj, 'value associated with keyObj');
myMap.set(keyFunc, 'value associated with keyFunc');
myMap.size; // 3
// getting the values
myMap.get(keyString); // "value associated with 'a string'"
myMap.get(keyObj); // "value associated with keyObj"
myMap.get(keyFunc); // "value associated with keyFunc"
myMap.get('a string'); // "value associated with 'a string'"
// because keyString === 'a string'
map的遍历
var myMap = new Map();
myMap.set(0, 'zero');
myMap.set(1, 'one');
for (var [key, value] of myMap) {
console.log(key + ' = ' + value);
}
// 0 = zero
// 1 = one
map用箭头函数作为参数
let a = new MyArray(1,2,3);
let mapped = a.map(x => x * x);
// mapped is [1,4,9]
- 面向对象（类）
初始化，其实也是自动化，就是创建一个实例，就会自动执行的。
class Rectangle {
constructor(height, width) {
this.height = height;
this.width = width;
draw();
}
}
原型方法，官网是这么写的
class Rectangle {
constructor(height, width) {
this.height = height;
this.width = width;
}
// Getter
get area() {
return this.calcArea();
}
// Method
calcArea() {
return this.height * this.width;
}
}
const square = new Rectangle(10, 10);
console.log(square.area); // 100
我改成这样写，没有一丝毛病
class Rectangle {
constructor(height, width) {
this.height = height;
this.width = width;
}
// Method
calcArea() {
return this.height * this.width;
}
}
const square = new Rectangle(10, 10);
console.log(square.calcArea());
然后是静态方法，就是这个静态方法不能给实例用，只能给类用。（我也不知道这有jb毛用）
class Point {
constructor(x, y) {
this.x = x;
this.y = y;
}
static distance(a, b) {
let res = a + b
return res
}
}
console.log(Point.distance(7, 8)); // 15
继承
class Animal {
constructor(name) {
this.name = name;
}
speak() {
console.log(this.name + ' makes a noise.');
}
}
class Dog extends Animal {
constructor(name) {
super(name); // call the super class constructor and pass in the name parameter
}
speak() {
console.log(this.name + ' barks.');
}
}
let d = new Dog('Mitzie');
d.speak(); // Mitzie barks.
CSS
调用方法
// External Style Sheet
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
// Internal Style Sheet
<head>
<style>
body {
background-color: linen;
}
h1 {
color: maroon;
margin-left: 40px;
}
</style>
</head>
// Inline Styles
<h1 style="color:blue;margin-left:30px;">This is a heading</h1>
样式优先级(从高到底)，原因是浏览器渲染顺序是从根节点render的，外部的link相当于根节点。
!important
inline
link style
然后浏览器也是先render元素选择器，再render class选择器，在render id选择器。
居中写法
block元素居中：
margin: 0 auto;
inline或inline-block元素居中：
text-align: center;
垂直和水平居中：
垂直居中
{
position: absolute;
top: 50%;
transform: translateY(-50%)
// bottom: 50%;
//transform: translateY(50%);
}
水平居中
{
position: absolute;
left: 50%;
transform: translateX(50%)
}
更多内容（比现在写的更理解的）我在自己的fe6.js文件保存了。
网友评论