2015.9.18笔记

1. 删除给定数组中的第二项和第三项，并且在得到的新的数组中第二项后面添加一个新的值

var arr1 = ['a','b','c','d','e'];
var arr2 = arr1. ？( ？ , ？ ,'newvalue')；

2. splice详解

3. 写一个求和的函数sum，达到下面的效果

// Should equal 15
sum(1, 2, 3, 4, 5);
// Should equal 0
sum(5, null, -5);
// Should equal 10
sum('1.0', false, 1, true, 1, 'A', 1, 'B', 1, 'C', 1, 'D', 1,
'E', 1, 'F', 1, 'G', 1);
// Should equal 0.3, not 0.30000000000000004
sum(0.1, 0.2);

function sum(){
var result = 0;
var arg = arguments.length;
foreach(var i = 0;i < arg;i++){
result += window.parseFloat(arguments[i]) || 0;
}
return result.toFixed(3) * 1000 / 1000;
}

补充：

parseFloat()之后null和string都为NaN；NaN || 0 为0。

a && b : 将a, b转换为Boolean类型, 再执行逻辑与, true返回b, false返回a

a || b : 将a, b转换为Boolean类型, 再执行逻辑或, true返回a, false返回b

转换规则:

对象为true

非零数字为true

非空字符串为true

其他为false

**4. **Flex布局

首先给出一个使用flex实现水平垂直居中的方法

.box{

display:flex;

justify-content:center;

align-items:center;

}

是不是很酷！！！！

以下内容参考阮一峰flex布局教程

任何一个容器都可以指定为flex布局

.box{
display:-前缀-flex;
display:flex
}

flex container的6个属性

flex-direction

flex-wrap

flex-flow

justify-content

align-items

align-content

flex-direction有四个值

.box {
flex-direction: row | row-reverse | column | column-reverse;
}
//row为默认值

row（默认值）：主轴为水平方向，起点在左端。

row-reverse：主轴为水平方向，起点在右端。

column：主轴为垂直方向，起点在上沿。

column-reverse：主轴为垂直方向，起点在下沿。

flex-wrap有三个值

.box{
flex-wrap: nowrap | wrap | wrap-reverse;
}
//nowrap为默认值

nowrap:不换行

wrap:换行，第一行在上面

wrap-reverse:换行，第一行在下面

flex-flow为flex-direction加flex-wrap的简写形式

.box {
flex-flow: <flex-direction> || <flex-wrap>;
}
//row nowrap为默认值

justify-content定义了项目在主轴上的对齐方式

.box {
justify-content: flex-start | flex-end | center | space-between | space-around;
}
//flex-start为默认值

对齐方式与轴的方向有关，下图为main axis从左到右



space-between：两端对齐，项目之间的间隔都相等。

space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。

align-items定义了在交叉轴上的对齐方式

.box {
align-items: flex-start | flex-end | center | baseline | stretch;
}
//注意这里：stretch为默认值

对齐方式与轴的方向有关，下图为cross axis从上到下

align-content属性定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。

.box {
align-content: flex-start | flex-end | center | space-between | space-around | stretch;
}
//stretch为默认值

flex item也有6个属性

order

flex-grow

flex-shrink

flex-basis

flex

align-self

order属性定义项目的排列顺序。数值越小，排列越靠前，默认为0。

.item {
order: <integer>;
}

flex-grow属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。

.item {
flex-grow: <number>; /* default 0 */
}

flex-shrink属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。

.item {
flex-shrink: <number>; /* default 1 */
}

flex-basis属性定义了在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。

.item {
flex-basis: <length> | auto; /* default auto */
}

flex属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选。

.item {
flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
}

该属性有两个快捷值：auto (1 1 auto) 和 none (0 0 auto)。

建议优先使用这个属性，而不是单独写三个分离的属性，因为浏览器会推算相关值。

align-self属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。

.item {
align-self: auto | flex-start | flex-end | center | baseline | stretch;
}