数组函数some、every、find、filter、map、forEach有什么区别

some

1、不创建新数组

2、不改变原数组

3、输出的是判断为true则马上跳出循环并return成true

4、回调函数参数,item(数组元素)、index(序列)、arr(数组本身)

5、使用return操作输出,会循环数组每一项,并在回调函数中操作

//计算对象数组中每个电脑的操作系统是否可用,
//大于16位操作系统表示可用,否则不可用

var computers = [
    { name: "Apple", ram: 8 },
    { name: "IBM", ram: 4 },
    { name: "Acer", ram: 32 },
];
var some = computers.some(function (computer) {
    return computer.ram > 16;
});
console.log(some);//true
console.log(computers);//[{ name: "Apple", ram: 8 },{ name: "IBM", ram: 4 },{ name: "Acer", ram: 32 }]

every(与some相反)

1、不创建新数组
2、不改变原数组
3、输出的是判断为false则马上跳出循环并return成false
4、回调函数参数,item(数组元素)、index(序列)、arr(数组本身)
5、使用return操作输出,会循环数组每一项,并在回调函数中操作

var computers = [
    { name: "Apple", ram: 8 },
    { name: "IBM", ram: 4 },
    { name: "Acer", ram: 32 },
];
var every = computers.every(function (computer) {
    return computer.ram > 16;
});
console.log(every);//false

find

1、不创建新数组

2、不改变原数组

3、输出的是一旦判断为true则跳出循环输出符合条件的数组元素

4、回调函数参数,item(数组元素)、index(序列)、arr(数组本身)

5、使用return操作输出,会循环数组每一项,并在回调函数中操作

//假定有一个对象数组,找到符合条件的对象
var users = [
    { name: 'Jill' },
    { name: 'Alex', id: 1 },
    { name: 'Bill' },
    { name: 'Alex' },
];
var user = users.find(function (user) {
    return user.name === 'Alex';
});
console.log(user);//[{ name: 'Alex', id: 1 }]

//假定有一个对象数组(A),根据指定对象的条件找到数组中符合条件的对象
var posts = [
    { id: 1, title: "Node.js" },
    { id: 2, title: "React.js" },
];
var comment = { postId: 1, content: 'hello' };
function postForComment(posts, comment) {
    return posts.find(function (post) {
        return post.id === comment.postId
    })
};
console.log(postForComment(posts,comment));//{ id: 1, title: "Node.js" }

filter

1、创建新数组

2、不改变原数组

3、输出的是判断为true的数组元素形成的新数组

4、回调函数参数,item(数组元素)、index(序列)、arr(数组本身)

5、使用return操作输出,会循环数组每一项,并在回调函数中操作

//假定有一个对象数组(A),获取数组中指定类型的对象放到B数组中
var products = [
    { name: "cucumber", type: "vegetable" },
    { name: "banana", type: "fruit" },
    { name: "celery", type: "vegetable" },
    { name: "orange", type: "fruit" },
];
var filtered = products.filter(function (product) {
    return product.type === "vegetable"
});
console.log(filtered);//[{ name: "celery", type: "vegetable" }, { name: "celery", type: "vegetable" }]

//假定有一个对象数组(A),过滤掉不满足以下条件的对象
//条件:蔬菜 数量大于0 价格小于10
var products = [
    { name: "cucumber", type: "vegetable", quantity: 0, price: 1 },
    { name: "banana", type: "fruit", quantity: 10, price: 16 },
    { name: "celery", type: "vegetable", quantity: 30, price: 8 },
    { name: "orange", type: "fruit", quantity: 3, price: 6 },
];
products = products.filter(function (product) {
    return product.type === 'vegetable'
        && product.quantity > 0
        && product.price < 10
});
console.log(products);//[{ name: "celery", type: "vegetable", quantity: 30, price: 8 }]
console.log(products)//[{ name: "cucumber", type: "vegetable" },{ name: "banana", type: "fruit" },{ name: "celery", type: "vegetable" },{ name: "orange", type: "fruit" }]

#map

1、创建新数组

2、不改变原数组

3、输出的是return什么就输出什么新数组

4、回调函数参数,item(数组元素)、index(序列)、arr(数组本身)

5、使用return操作输出,会循环数组每一项,并在回调函数中操作

//假定有一个数值数组(A),将A数组中的值以双倍的形式放到B数组
var numbers = [1, 2, 3, 4, 5];
var doubled = numbers.map(function (number) {
    return number * 2;
})
console.log(doubled);//[2,4,6,8,10]

//假定有一个对象数组(A),将A数组中的对象某个属性的值存储到B数组中
var cars = [
    { model: 'Buick', price: 'cheap' },
    { model: 'BMW', price: 'expensive' },
];
var prices = cars.map(function (car) {
    return car.price;
});
console.log(prices)//(2) ["cheap", "expensive"]

reduce

1、创建新数组

2、不改变原数组

3、输出的是return叠加什么就输出什么 新数组

4、使用return操作输出,会循环数组每一项,并在回调函数中操作

5、回调函数参数

pre(第一次为数组第一项,之后为上一操作的结果)
next(数组的下一项)
index(next项的序列)
arr(数组本身)
回调函数后的改变第一项参数。(不影响原数组)

//计算数组中所有值的总共
var numbers = [10, 20, 30];
var sum = 0;
//reduce第二个参数是sum的值,与上面的sum无关
var sumValue = numbers.reduce(function (sum, number) {
    return sum += number;
}, 0);
console.log(sumValue);//60

//使用reduce能同时实现map和filter,reduce能遍历数组两遍
const numberss=[10,20,30,40];
const doubleedOver50=numberss.reduce((finalList,num)=>{
    num=num*2;
    if(num>50){
        finalList.push(num);
    }
    return finalList;
},[]);
console.log(doubleedOver50);//[60,80]

//将数组中对象的某个属性抽离到另外一个数组中
var primaryColors = [
    { color: 'red' },
    { color: 'yellow' },
    { color: 'blue' },
];
var color = primaryColors.reduce(function (previous, primaryColor) {
    previous.push(primaryColor.color);
    return previous;
}, []);
console.log(color);//["red", "yellow", "blue"]


// 判断字符串括号是否对称,遇到(时加1,遇到)时减1
function balancedParens(string) {
    return !string.split("").reduce(function (previous, char) {
        if (previous < 0) { return previous };//若")"比"("先出现
        if (char == "(") { return ++previous };
        if (char == ")") { return --previous };
        return previous;
    }, 0);
};
console.log(balancedParens(")((()))"));//false

forEach

遍历数组全部元素,利用回调函数对数组进行操作,自动遍历数组.length次数,且无法break中途跳出循环
不支持return操作输出,return只用于控制循环是否跳出当前循环
因此难操作成新数组,新值

var colors = ['red', 'blue', 'green']
colors.forEach(function (color) {
    console.log(color);//red blue green
})

FlexBox 布局

一、Flex布局是什么?

1:由来

布局的传统解决方案,基于盒状模型,依赖 display属性 + position属性 + float属性。它对于那些特殊布局非常不方便,比如,垂直居中就不容易实现。
2009年,W3C提出了一种新的方案—-Flex布局,可以简便、完整、响应式地实现各种页面布局。目前,它已经得到了所有浏览器的支持,这意味着,现在就能很安全地使用这项功能。

2:是什么

Flex是Flexible Box的缩写,意为”弹性布局”,用来为盒状模型提供最大的灵活性。

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

  display: flex;

行内元素也可以使用Flex布局。

  display: inline-flex;

Webkit内核的浏览器,必须加上-webkit前缀。

 display: -webkit-flex; /* Safari */
 display: flex;

注意,设为Flex布局以后,子元素的float、clear和vertical-align属性将失效。

二、基本概念

采用Flex布局的元素,称为Flex容器(flex container),简称”容器”。它的所有子元素自动成为容器成员,称为Flex项目(flex item),简称”项目”。


容器默认存在两根轴:水平的主轴(main axis)和垂直的交叉轴(cross axis)。主轴的开始位置(与边框的交叉点)叫做main start,结束位置叫做main end;交叉轴的开始位置叫做cross start,结束位置叫做cross end。

项目默认沿主轴排列。单个项目占据的主轴空间叫做main size,占据的交叉轴空间叫做cross size。

三、容器的属性

以下6个属性设置在容器上。

flex-direction

flex-wrap

flex-flow

justify-content

align-items

align-content

3.1 flex-direction

flex-direction属性决定主轴的方向(即项目的排列方向)。

box {
  flex-direction: column-reverse |column |row | row-reverse ;
}


它有4个值。

row(默认值):主轴为水平方向,起点在左端。
row-reverse:主轴为水平方向,起点在右端。
column:主轴为垂直方向,起点在上沿。
column-reverse:主轴为垂直方向,起点在下沿。

3.2 flex-wrap

默认情况下,项目都排在一条线(又称”轴线”)上。flex-wrap属性定义,如果一条轴线排不下,如何换行。

box{
  flex-wrap: nowrap | wrap | wrap-reverse;
}

三个值

(1)nowrap(默认):不换行。

(2)wrap:换行,第一行在上方。

(3)wrap-reverse:换行,第一行在下方。

3.3 flex-flow

flex-flow属性是flex-direction属性和flex-wrap属性的简写形式,默认值为row nowrap。

box {
  flex-flow: <flex-direction> <flex-wrap>;
}

3.4 justify-content

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

box {
  justify-content: flex-start | flex-end | center | space-between | space-around;
}

有5个值,具体对齐方式与轴的方向有关。下面假设主轴为从左到右。

flex-start(默认值):左对齐
flex-end:右对齐
center: 居中
space-between:两端对齐,项目之间的间隔都相等。
space-around:每个项目两侧的间隔相等。所以,项目之间的间隔比项目与边框的间隔大一倍。

3.5 align-items

align-items属性定义项目在交叉轴上如何对齐。

box {
  align-items: flex-start | flex-end | center | baseline | stretch;
}

5个值。具体的对齐方式与交叉轴的方向有关,下面假设交叉轴从上到下。

flex-start:交叉轴的起点对齐。
flex-end:交叉轴的终点对齐。
center:交叉轴的中点对齐。
baseline: 项目的第一行文字的基线对齐。
stretch(默认值):如果项目未设置高度或设为auto,将占满整个容器的高度。

3.6 align-content

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

box {
  align-content: flex-start | flex-end | center | space-between | space-around | stretch;
}


该属性可能取6个值。

flex-start:与交叉轴的起点对齐。
flex-end:与交叉轴的终点对齐。
center:与交叉轴的中点对齐。
space-between:与交叉轴两端对齐,轴线之间的间隔平均分布。
space-around:每根轴线两侧的间隔都相等。所以,轴线之间的间隔比轴线与边框的间隔大一倍。
stretch(默认值):轴线占满整个交叉轴。

四、项目的属性

以下6个属性设置在项目上。

order

flex-grow

flex-shrink

flex-basis

flex

align-self

4.1 order

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

.item {
  order: <integer>;
}

4.2 flex-grow

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

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

如果所有项目的flex-grow属性都为1,则它们将等分剩余空间(如果有的话)。如果一个项目的flex-grow属性为2,其他项目都为1,则前者占据的剩余空间将比其他项多一倍。

4.3 flex-shrink

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

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

如果所有项目的flex-shrink属性都为1,当空间不足时,都将等比例缩小。如果一个项目的flex-shrink属性为0,其他项目都为1,则空间不足时,前者不缩小。

负值对该属性无效。

4.4 flex-basis

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

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

它可以设为跟width或height属性一样的值(比如350px),则项目将占据固定空间。

4.5 flex

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

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

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

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

4.6 align-self

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

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

该属性可能取6个值,除了auto,其他都与align-items属性完全一致。

React-navigation ReferenceError: Can’t find variable: width

react-navigation 组件库在使用时按照官方文档设置tab图片
可是却出现了报错,最后的解决办法

Unhandled JS Exception: ReferenceError: ReferenceError: Can’t find variable: width

这是需要设置React 子元素
出错代码

const BottomTabNavigator = createBottomTabNavigator({
    Home: {
        screen: MainScreenNavigator1,
        navigationOptions: {
            title: '首页',
            tabBarIcon: ({ focused, horizontal, tintColor }) => {
                let iconName = 'ios-home';//`ios-home${focused ? '' : '-outline'}`;
                return ( <Icon name=iconName size={30} color="yellow" />)
            },
        },
        tabBarOptions: {
            activeTintColor: 'tomato',
            inactiveTintColor: 'gray',
        },
    },

把Image 改成React.createElement 创建就好了
修改后代码

const BottomTabNavigator = createBottomTabNavigator({
    Home: {
        screen: MainScreenNavigator1,
        navigationOptions: {
            title: '首页',
            tabBarIcon: ({ focused, horizontal, tintColor }) => {
                let iconName = 'ios-home';//`ios-home${focused ? '' : '-outline'}`;
                return React.createElement(
                    Ionicons,
                    { name: iconName, size: horizontal ? 20 : 25, color: tintColor },
                )
            },
        },

React-Naitve UI 组件库

React-Native 样式指南

React-Native 的样式基本上是实现了 CSS 的一个子集,并且属性名不完全一致,所以当你开始在编写 React-Native 之前,可以先简要了解一下。
1、react-native-stylesheet-guide

UI 组件库
选择UI库关注的一些方面:

社区活跃度
是否长期维护
license
components数量
国际化支持,主要是 locale (i18n) 和 RTL direction
按需加载和包大小

1、Teaset
国人作品:react native的UI库提供了20+纯JS(ES6)组件,重点是内容显示和动作控制。

2、NativeBase
与react-native-elements提供的能力差不多,是我最早使用的一个react native的ui库。只是后来发现bug相对较多,使用起来也没有react-native-elements方便。后来就转向使用react-native-elements。

3、react-native-elements
提供了一套完善且风格一致的UI控件。如果你们团队的设计师比较认同这套UI,那么恭喜你。你可以使用这个UI框架,在几天内完成一个小型App的UI。

4、react-native-ui-lib
相较于react-native-elements,react-native-ui-lib最大的优点,就是额外提供了View、Text、Button等基础组件的便捷布局能力。比如下面这个页面的布局

5、react-native-material-kit
google出品的一组UI组件,目的是将材料设计引入到使用React Native、快速和轻松方式构建的应用程序中。

6、React Native Material UI
React Native Material UI是一组高度可定制的 UI 组件,实现了谷歌的 Material Design。请注意,这个库使用了一个名为 uiTheme 的 JS 对象,这个对象在上下文间传递,以实现最大化的定制化能力。

7、 UI Kitten
UI Kitten这个库提供了一个可定制和可重复使用的 react-native 组件工具包,该工具包将样式定义移到特定位置,从而可以单独重用组件或为组件设置样式。通过传递不同的变量,可以很容易地“动态”改变主题样式。

8、 Shoutem
Shoutem也是一个 React Native UI 工具包,由 3 个部分组成:UI 组件、主题和组件动画。该库为 iOS 和 Android 提供了一组跨平台组件,所有组件都是可组合和可定制的。每个组件还提供了与其他组件一致的预定义样式,这样可以在无需手动定义复杂样式的情况下构建复杂的组件。

9、 Nachos UI
Nachos UI 是一个 React Native 组件库,提供了 30 多个可定制的组件,这些组件也可以通过 react-native-web 在 Web 上运行。它通过了快照测试,支持格式化和 yarn,提供了热火的设计和全局主题管理器。

10、 React Native Paper
React Native Paper是一个跨平台的 UI 组件库,它遵循 Material Design 指南,提供了全局主题支持和可选的 babel 插件,用以减少捆绑包大小。

程序员是如何痛苦、缓慢的死掉的(转)

长话短说:你想知道一个程序员是如何失业的吗?只要停滞不学习一段时间就行了。在不知不觉中。或者更糟,故意的。你就能发现自己已经从职场中你消失了。

这个说法可能是不正确的(如果是的话,请纠正我),但在我看来,技术是变化最快的领域之一,跟大部分的其他工作相比。也许不是最快的。至少,它一定排在榜单的前列。

举手:你们中有多少人记得jQuery风靡一时的时代?不要误解我,jQuery仍然在使用,并且有自己的位置,但我说的是,它已经不是以前的jQuery了,不是吗?

我记得当Mongo是一个崭新的闪亮的数据库时,它获得了各种各样的关注。

这些都是最近几年才出现的东西,甚至更近。

不管怎样,我为什么要提这个?如果你读了标题,你应该猜的到。事实上,再多写点东西可能是多余的。

但至少我需要说一个我认识的程序员的例子,以及她是如何发现自己陷入困境的,这很关键。

也许本文可以作为对其他程序员的警告。

案例
你们中有多少人还记得jQuery风靡一时的日子?不要误解我的意思,jQuery仍然在使用并且有一个相关的地方,但是我说它已经不再是以前的样子了,这是不是错的呢?

我记得Mongo是一个全新的闪亮的数据库,吸引了各种各样的关注。

这些都是过去几年才发生的变化,也许更少。

不管怎样,我为什么要提这个?如果你读了标题,你可能会猜一猜。事实上,写任何东西都是多余的。

但至少提供一个我认识的开发人员的例子,以及她是如何发现自己陷入困境的,这一点似乎很重要。

也许本文可以作为对其他开发者的警告。
这个开发人员在工作中一直处于战斗状态。她称其为“消防模式”,几乎从未消失。我不会给出细节,因为我不认为它们是重要的一点。可以这么说,她不得不与糟糕的代码库、糟糕的数据结构和糟糕的管理以及其他一些事情作斗争。

要在这些问题上取得进展是一项艰巨的挑战。她会在早上上班,整天挣扎着,一天结束后出来,感到沮丧,不愿做其他任何事情。这让人心力交瘁。

然而,尽管如此,她始终保持着专注和积极的心态,努力让事情变得更好。有时这意味着要加班。有时这只是意味着她不得不离开屏幕一整天,直到第二天早上才回头。对事业的承诺无疑是她的优势之一。
死亡
在某一时刻,她意识到她再也不能在这家公司工作了。没有进步(或者进步太慢),她不得不放弃。

不幸的是,当她开始考虑自己在科技行业里换个工作时,她很快就意识到,自己的技能已经过时了。她花了两年的时间专注于维护她所在公司的技术现状,因为她没有意识到自己在这之外失去了多少技术领地。

她最终不得不以更低的薪水接受了一份更低级的工作,而她得到这份工作的唯一原因是她的一个朋友在她求职的公司工作,并为她担保。
教训
这就是当你没有足够的注意力时发生的事情。如果你不去看你周围到底发生了什么,你就有可能变得停滞不前。你可能会因为跟不上潮流而让自己落伍,对这个行业的用处大打折扣。

这并不意味着你需要每天24小时编写代码,做无数的项目,并且一直提交开源代码。

这意味着你需要有足够的意识去意识到什么时候你不再感觉工作的脉搏了,并且在你的脉搏不再重要之前有足够的意识去做一些事情。
补充
基于我收到的大量反馈,我想澄清一下,这篇文章对web开发领域的人有一定的价值。现在的Web开发有点混乱,总是有一些闪亮的新东西,雇主也在迅速改变他们的需求。但在科技领域,有很多行业的发展速度没有那么快,在这些领域,你有时可以多年保持专注和安全。

原文链接

nodejs中流(stream)的理解

nodejs的fs模块并没有提供一个copy的方法,但我们可以很容易的实现一个,比如:

var source = fs.readFileSync('/path/to/source', {encoding: 'utf8'});
fs.writeFileSync('/path/to/dest', source);

这种方式是把文件内容全部读入内存,然后再写入文件,对于小型的文本文件,这没有多大问题,比如grunt-file-copy就是这样实现的。但是对于体积较大的二进制文件,比如音频、视频文件,动辄几个GB大小,如果使用这种方法,很容易使内存“爆仓”。理想的方法应该是读一部分,写一部分,不管文件有多大,只要时间允许,总会处理完成,这里就需要用到流的概念。

如上面高大上的图片所示,我们把文件比作装水的桶,而水就是文件里的内容,我们用一根管子(pipe)连接两个桶使得水从一个桶流入另一个桶,这样就慢慢的实现了大文件的复制过程。

Stream在nodejs中是EventEmitter的实现,并且有多种实现形式,例如:

  • http responses request
  • fs read write streams
  • zlib streams
  • tcp sockets
  • child process stdout and stderr

上面的文件复制可以简单实现一下:

var fs = require('fs');
var readStream = fs.createReadStream('/path/to/source');
var writeStream = fs.createWriteStream('/path/to/dest');

readStream.on('data', function(chunk) { // 当有数据流出时,写入数据
    writeStream.write(chunk);
});

readStream.on('end', function() { // 当没有数据时,关闭数据流
    writeStream.end();
});

上面的写法有一些问题,如果写入的速度跟不上读取的速度,有可能导致数据丢失。正常的情况应该是,写完一段,再读取下一段,如果没有写完的话,就让读取流先暂停,等写完再继续,于是代码可以修改为:

var fs = require('fs');
var readStream = fs.createReadStream('/path/to/source');
var writeStream = fs.createWriteStream('/path/to/dest');

readStream.on('data', function(chunk) { // 当有数据流出时,写入数据
    if (writeStream.write(chunk) === false) { // 如果没有写完,暂停读取流
        readStream.pause();
    }
});

writeStream.on('drain', function() { // 写完后,继续读取
    readStream.resume();
});

readStream.on('end', function() { // 当没有数据时,关闭数据流
    writeStream.end();
});

或者使用更直接的pipe

// pipe自动调用了data,end等事件
fs.createReadStream('/path/to/source').pipe(fs.createWriteStream('/path/to/dest'));

下面是一个更加完整的复制文件的过程

var fs = require('fs'),
    path = require('path'),
    out = process.stdout;

var filePath = '/Users/chen/Movies/Game.of.Thrones.S04E07.1080p.HDTV.x264-BATV.mkv';

var readStream = fs.createReadStream(filePath);
var writeStream = fs.createWriteStream('file.mkv');

var stat = fs.statSync(filePath);

var totalSize = stat.size;
var passedLength = 0;
var lastSize = 0;
var startTime = Date.now();

readStream.on('data', function(chunk) {

    passedLength += chunk.length;

    if (writeStream.write(chunk) === false) {
        readStream.pause();
    }
});

readStream.on('end', function() {
    writeStream.end();
});

writeStream.on('drain', function() {
    readStream.resume();
});

setTimeout(function show() {
    var percent = Math.ceil((passedLength / totalSize) * 100);
    var size = Math.ceil(passedLength / 1000000);
    var diff = size - lastSize;
    lastSize = size;
    out.clearLine();
    out.cursorTo(0);
    out.write('已完成' + size + 'MB, ' + percent + '%, 速度:' + diff * 2 + 'MB/s');
    if (passedLength < totalSize) {
        setTimeout(show, 500);
    } else {
        var endTime = Date.now();
        console.log();
        console.log('共用时:' + (endTime - startTime) / 1000 + '秒。');
    }
}, 500);

可以把上面的代码保存为copy.js试验一下

我们添加了一个递归的setTimeout(或者直接使用setInterval)来做一个旁观者,每500ms观察一次完成进度,并把已完成的大小、百分比和复制速度一并写到控制台上,当复制完成时,计算总的耗费时间,效果如图:

结合nodejs的readline, process.argv等模块,我们可以添加覆盖提示、强制覆盖、动态指定文件路径等完整的复制方法,有兴趣的可以实现一下,实现完成,可以

我们复制了一集1080p的权利的游戏第四季第7集,大概3.78G大小,由于使用了SSD,可以看到速度还是非常不错的,哈哈哈~ 复制完成后,显示总花费时间

转 数组-在SHELL脚本中的基本使用介绍

Shell脚本在运维工作中是极其重要的,而数组在shell脚本里的运用无论是在循环或运算方面都是非常实用的一个环节。
下面是对shell脚本中数组方面一些操作在此进行记录,希望能帮助到有兴趣的朋友~
1.数组定义
[root@bastion-IDC ~]# a=(1 2 3 4 5 6 7 8)
[root@bastion-IDC ~]# echo $a
1
一对括号表示是数组,数组元素用“空格”符号分割开。

2.数组读取与赋值
1)得到长度:
[root@bastion-IDC ~]# echo ${#a[@]}
8
[root@bastion-IDC ~]# echo ${#a[*]}
8

用${#数组名[@或*]} 可以得到数组长度

2)读取:
[root@bastion-IDC ~]# echo ${a[4]}
5
[root@bastion-IDC ~]# echo ${a[*]}
1 2 3 4 5 6 7 8

用${数组名[下标]} 下标是从0开始 下标是:*或者@ 得到整个数组内容

3)赋值:
[root@bastion-IDC ~]# a[1]=100
[root@bastion-IDC ~]# echo ${a[]}
1 100 3 4 5 6 7 8
[root@bastion-IDC ~]# a[5]=140
[root@bastion-IDC ~]# echo ${a[
]}
1 100 3 4 5 140 7 8

直接通过 数组名[下标] 就可以对其进行引用赋值,如果下标不存在,自动添加新一个数组元素

4)删除:
[root@bastion-IDC ~]# a=(1 2 3 4 5 6 7 8)
[root@bastion-IDC ~]# unset a
[root@bastion-IDC ~]# echo ${a[*]}

[root@bastion-IDC ~]# a=(1 2 3 4 5 6 7 8)
[root@bastion-IDC ~]# unset a[1]
[root@bastion-IDC ~]# echo ${a[]}
1 3 4 5 6 7 8
[root@bastion-IDC ~]# echo ${#a[
]}
7

直接通过:unset 数组[下标] 可以清除相应的元素,不带下标,清除整个数据。

3.特殊使用
1)分片:
[root@bastion-IDC ~]# a=(1 2 3 4 5 6 7 8)
1 2 3
2 3 4 5
[root@bastion-IDC ~]# echo ${#c[@]}
4
[root@bastion-IDC ~]# echo ${c[*]}
2 3 4 5

直接通过 ${数组名[@或*]:起始位置:长度} 切片原先数组,返回是字符串,中间用“空格”分开,因此如果加上”()”,将得到切片数组,上面例子:c 就是一个新数据。

分割第一个代表从第几个数开始,比如1:4 ,1从第二个数开始,4代表分割几个数字,这里是1-4个,如果从开始的数字后面不够时,那就只能获取到从这个数开始的后面所有数字

2)替换:
[root@bastion-IDC ~]# a=(1 2 3 4 5 6 7 8)
[root@bastion-IDC ~]# echo ${a[@]/3/100}
1 2 100 4 5 6 7 8
[root@bastion-IDC ~]# echo ${a[@]}
1 2 3 4 5 6 7 8
[root@bastion-IDC ~]# a=(${a[@]/3/100})
[root@bastion-IDC ~]# echo ${a[@]}
1 2 100 4 5 6 7 8

调用方法是:${数组名[@或*]/查找字符/替换字符} 该操作不会改变原先数组内容,如果需要修改,可以看上面例子,重新定义数据。

苹果发布了免费的 Swif 应用程序开发课程

苹果宣布为社区大学生和高中生推出一套全新的为期一年的 App 开发课程,现在已经上架 iBook 商店。这门课程将向学生们传授使用苹果 Swift 开发应用程序的一些要素。

根据外媒 MacRumors 的报道,苹果公司今日发布了一个新的应用程序开发课程,旨在为那些想要在快速增长的 App 经济中寻求职业发展的学生提供帮助,这个课程可以在 iBooks Store 中免费下载。

这个全年课程名为“应用程序开发与 Swift”,它可以向学生们传授使用苹果旗下日益流行的编程语言 Swift 开发应用程序的一些要素。苹果表示,学习这门课程的学生将学习编码和设计功能完备的应用程序,在软件开发和信息技术方面获得重要的工作技能。

苹果表示,从今年秋季开始,该公司将会为全美 6 个社区学院系统中的近 50 万名学生提供这门课程,其中包括阿拉巴马社区学院系统、哥伦布州立社区学院、哈里斯堡地区社区学院、休斯顿社区学院、梅萨社区学院以及圣马特奥社区学院。

库克解释了为什么苹果会打造这样一套开发课程:

“我们亲眼看到编程对个人以及整个美国经济的影响。App 经济和软件开发是美国增长最快的就业领域之一,我们很高兴为教育工作者和学生提供学习编程的工具”,库克说。“社区大学在帮助学生实现梦想方面发挥了关键作用,我们希望这些课程将会为所有年龄和背景的人打开门路,追求自己喜欢的事物。”

Swift Playground 已经被证明是一款强大的教学工具,自从发布以来有超过一百次下载。而且,超过 1000 所美国学校计划在秋天使用苹果的 Everyone Can Code 教学材料进行教学。能够将 Everyone Can Code 进行扩展至高年级学生将会让这整个项目对教育者比以往更具有吸引力。

苹果官方视频地址

苹果官方地址

原 html javascript 图片上传

<input type="hidden" id="boyHead" name="boyHead" value="" />
<input type="file" id="file_boyHead" style="display:none;" />
<div id="studentHead" style="padding-top:150px;letter-spacing:2px;font-size:16px; font-weight:bold; border: 1px #d3d3d3 solid; width: 155px; height:190px; text-align: center;">学生免冠1寸近照</div>
<script type="text/javascript" >
   $(function(){

      $("#studentHead").click(function(){
         $("#file_boyHead").click();
      });
      $("#file_boyHead").change(function(){
         var objUrl = getObjectURL(this.files[0]) ;
         if (objUrl) {
            $("#studentHead").css("background-image","url("+objUrl+")");
            createImg(objUrl,155,190,'boyHead');
         }
      });
   });

   //获取图片的Base64
   function getBase64Image(img) {
      var canvas = document.createElement("canvas");
      canvas.width = img.width;
      canvas.height = img.height;
      var ctx = canvas.getContext("2d");
      ctx.drawImage(img, 0, 0, img.width, img.height);
      var ext = img.src.substring(img.src.lastIndexOf(".")+1).toLowerCase();
      var dataURL = canvas.toDataURL("image/"+ext);
      return dataURL;
   }

   //赋值图片的base64
   function createImg(url,width,height,targetId) {
      var image = new Image();
      image.crossOrigin = '';
      image.src = url;
      image.width = width;
      image.height = height;
      image.onload = function(){
         var base64 = getBase64Image(image);
         document.getElementById(targetId).value = base64;
      }
      return image;
   }

   //获取图片地址(预览)
   function getObjectURL(file) {
      var url = null ;
      if (window.createObjectURL!=undefined) { // basic
         url = window.createObjectURL(file) ;
      } else if (window.URL!=undefined) { // mozilla(firefox)
         url = window.URL.createObjectURL(file) ;
      } else if (window.webkitURL!=undefined) { // webkit or chrome
         url = window.webkitURL.createObjectURL(file) ;
      }
      return url ;
   }
</script>

转 致:危机管理者升级列表

致:危机管理者升级列表
主题:九月二十二日登录故障

问题:从九月22日星期四上午9:00开始,网络客户登录100%失败。已经登录的客户可以继续工作,除非他们退出或者关闭浏览器。

原因:目前不知道,但可能与8:59代码上线有关系

影响:从上午九点开始,所有的登录失败,用户活动量指标与上周相比下降了20%

更新:经过分析,已经找到了可能的三个潜在问题、期待在未来30分钟内确定根源。

恢复时间:期望修复代码问题,在60分钟内生成新的代码,并更新到网站上。

后备计划:如果不能再90分钟内恢复服务,我们将在75分钟内把代码回滚到以前的版本。

Joy

危机管理经理

xx公司网络