前端进阶之旅前端进阶之旅
基础篇
进阶篇
高频篇
精选篇
手写篇
面经篇
AI 篇
原理篇
每日一题
小程序题库
知识卡片NEW
  • 历年面经按年份追踪真实考点
  • 算法题库NEW在线编码即时判题
  • 专项自测100 题快速查漏
  • 业务场景题真实业务问题与追问
  • 查漏补缺常见问题解析
  • AI 模拟面试NEW模拟真实面试 + 报告
  • 前端基础
    • HTTP从报文一路讲到 HTTPS
    • 浏览器渲染、事件循环、进程
    • 计算机基础Linux、网络、操作系统
  • 进阶专项
    • 设计模式23 种模式怎么用
    • 前端系统进阶学习大型项目工程化
    • 前端综合文章长期沉淀的实践文
  • 工程与工具
    • Node学习指南从环境搭建到服务端
    • NPM工作流script、依赖与发布
    • Docker容器化部署上手
    • Canvas图形与动画实战
  • 路线与导图
    • 思维导图知识点全景图
    • 学习路线按图索骥不跑偏
    • AI 定制路线NEW按你的简历现排
    • AI 知识地图NEW串起全站知识点
  • 动态
    • AI 热点NEWAI 每日动态
    • 公众号动态公众号历史文章
    • 博客动态站长的技术博客
    • 开发者导航常用工具与文档站
AI 助手NEW
旧版
基础篇
进阶篇
高频篇
精选篇
手写篇
面经篇
AI 篇
原理篇
每日一题
小程序题库
知识卡片NEW
  • 历年面经按年份追踪真实考点
  • 算法题库NEW在线编码即时判题
  • 专项自测100 题快速查漏
  • 业务场景题真实业务问题与追问
  • 查漏补缺常见问题解析
  • AI 模拟面试NEW模拟真实面试 + 报告
  • 前端基础
    • HTTP从报文一路讲到 HTTPS
    • 浏览器渲染、事件循环、进程
    • 计算机基础Linux、网络、操作系统
  • 进阶专项
    • 设计模式23 种模式怎么用
    • 前端系统进阶学习大型项目工程化
    • 前端综合文章长期沉淀的实践文
  • 工程与工具
    • Node学习指南从环境搭建到服务端
    • NPM工作流script、依赖与发布
    • Docker容器化部署上手
    • Canvas图形与动画实战
  • 路线与导图
    • 思维导图知识点全景图
    • 学习路线按图索骥不跑偏
    • AI 定制路线NEW按你的简历现排
    • AI 知识地图NEW串起全站知识点
  • 动态
    • AI 热点NEWAI 每日动态
    • 公众号动态公众号历史文章
    • 博客动态站长的技术博客
    • 开发者导航常用工具与文档站
AI 助手NEW
旧版
  • JavaScript Part 1

    • Ajax总结篇
    • Canvas 绘制八大行星
    • DOM编程之API学习总结篇
    • JavaScript事件机制
    • JavaScript代码片段100个
    • JavaScript作用域分析总结
    • JavaScript原型链回顾
    • JavaScript及jQuery中的各种宽高属性图解
    • JavaScript工程项目的一系列最佳实践
    • JavaScript常用API合集
    • JavaScript数组、字符串、对象常用方法
    • JavaScript数组方法总结篇
    • JavaScript深浅拷贝
    • JavaScript运动框架之速度时间版本
    • JavaScript运行机制Event Loop
    • JavaScript防抖节流原理
    • Javascript中的复制粘贴功能
    • Javascript数组详解
    • OOP之原型与原型链
    • Object.defineProperty详解
    • V8源码浅析JS数组常见方法
    • await 在 forEach 中不生效解决方案
    • iframe+表单跨域提交POST请求
    • javascript笔记总结篇
    • 业务中处理数据结构常用的JS方法
    • 作用域
    • 你真的掌握变量和类型了吗
    • 前后端分离之数据Mock
    • 原型与原型链
    • 原生JS补给(上)
    • 如何写出一个惊艳面试官的深拷贝
    • 带你填一些JS容易出错的坑
    • 彻底弄懂 JavaScript 执行机制
    • 执行上下文 执行栈
    • 正则回顾总结
    • 正则基础知识
    • 正则完整篇
    • 正则表达式
    • 浅析Promise原理
    • 浅谈JavaScript中的异步处理
    • 深拷贝 vs 浅拷贝
    • 聊一聊typeof instanceof 实现原理.
    • 聊一聊闭包
    • 高阶函数map reduce filter
  • JavaScript Part 2

  • CSS

  • HTML

  • Jquery

  • ES6

  • 小程序

  • Vue

  • React

  • 深入React

  • React Native

  • NodeJS

  • Angular

  • TypeScript

  • Webpack

  • 浏览器

  • 移动端

  • 前端工程化

  • Electron

  • HTTP

  • Nginx

  • Linux

  • 数据结构与算法

  • LeetCode算法题

  • 综合

完整面试题地址:
作者:程序员poetry
扫码关注作者公众号:「前端进阶之旅」 每天分享技术干货
前端进阶之旅公众号二维码

shell入门|博客系列

# 一、初识shell

# 1.1 Shell 环境

Linux 的 Shell 种类众多,常见的有

  • /usr/bin/sh或/bin/sh
  • /bin/bash
  • C Shell(/usr/bin/csh)
  • K Shell(/usr/bin/ksh)
  • Shell for Root(/sbin/sh)

Bash 在日常工作中被广泛使用。同时,Bash 也是大多数Linux 系统默认的 Shell

  • 打开文本编辑器(可以使用 vi/vim 命令来创建文件),新建一个文件 test.sh,扩展名为 sh(sh代表shell),扩展名并不影响脚本执行,见名知意就好
#!/bin/bash
echo "Hello World !"
@前端进阶之旅: 代码已经复制到剪贴板
  • #! 是一个约定的标记,它告诉系统这个脚本需要什么解释器来执行,即使用哪一种 Shell
  • echo 命令用于向窗口输出文本

# 1.2 运行 Shell 脚本有两种方法

作为可执行程序

chmod +x ./test.sh  #使脚本具有执行权限
./test.sh  #执行脚本
@前端进阶之旅: 代码已经复制到剪贴板

注意,一定要写成 ./test.sh,而不是 test.sh,运行其它二进制的程序也一样,直接写 test.sh,linux 系统会去 PATH 里寻找有没有叫 test.sh 的,而只有 /bin, /sbin, /usr/bin,/usr/sbin 等在 PATH 里,你的当前目录通常不在 PATH 里,所以写成 test.sh 是会找不到命令的,要用 ./test.sh 告诉系统说,就在当前目录找

作为解释器参数

  • 这种运行方式是,直接运行解释器,其参数就是 shell 脚本的文件名
/bin/sh test.sh
/bin/php test.php
@前端进阶之旅: 代码已经复制到剪贴板
  • 这种方式运行的脚本,不需要在第一行指定解释器信息,写了也没用

# 二、shell变量

  • 定义变量时,变量名不加美元符号
  • 注意,变量名和等号之间不能有空格
  • 命名只能使用英文字母,数字和下划线,首个字符不能以数字开头
  • 中间不能有空格,可以使用下划线(_)
  • 不能使用标点符号
  • 不能使用bash里的关键字(可用help命令查看保留关键字)
your_name="poetries" #中间不能有空格
@前端进阶之旅: 代码已经复制到剪贴板
  • 有效的 Shell 变量名示例如下
RUNOOB
LD_LIBRARY_PATH
_var
var2
@前端进阶之旅: 代码已经复制到剪贴板

# 2.1 使用变量

  • 使用一个定义过的变量,只要在变量名前面加美元符号即可
your_name="poetries"
echo $your_name
echo ${your_name}
@前端进阶之旅: 代码已经复制到剪贴板
  • 变量名外面的花括号是可选的,加不加都行,加花括号是为了帮助解释器识别变量的边界,比如下面这种情况
  • 如果不给skill变量加花括号,写成echo "I am good at $skillScript",解释器就会把$skillScript当成一个变量(其值为空),代码执行结果就不是我们期望的样子了
  • 推荐给所有变量加上花括号,这是个好的编程习惯
for skill in Ada Coffe Action Java; do
    echo "I am good at ${skill}Script"
done
@前端进阶之旅: 代码已经复制到剪贴板
  • 已定义的变量,可以被重新定义,如:
your_name="tom"
echo $your_name
your_name="alibaba"
echo $your_name
@前端进阶之旅: 代码已经复制到剪贴板

# 2.2 只读变量

  • 使用 readonly 命令可以将变量定义为只读变量,只读变量的值不能被改变
  • 下面的例子尝试更改只读变量,结果报错
#!/bin/bash
myUrl="http://www.w3cschool.cc"
readonly myUrl
myUrl="http://www.runoob.com"
@前端进阶之旅: 代码已经复制到剪贴板
/bin/sh: NAME: This variable is read only.
@前端进阶之旅: 代码已经复制到剪贴板

# 2.3 删除变量

  • 使用 unset 命令可以删除变量。
  • 语法 unset variable_name
  • 变量被删除后不能再次使用。unset 命令不能删除只读变量
#!/bin/sh
myUrl="http://www.runoob.com"
unset myUrl
echo $myUrl
@前端进阶之旅: 代码已经复制到剪贴板

# 2.4 变量类型

运行shell时,会同时存在三种变量

  • 局部变量 局部变量在脚本或命令中定义,仅在当前shell实例中有效,其他shell启动的程序不能访问局部变量
  • 环境变量 所有的程序,包括shell启动的程序,都能访问环境变量,有些程序需要环境变量来保证其正常运行。必要的时候shell脚本也可以定义环境变量
  • shell变量 shell变量是由shell程序设置的特殊变量。shell变量中有一部分是环境变量,有一部分是局部变量,这些变量保证了shell的正常运行

# 2.5 Shell 字符串

  • 字符串是shell编程中最常用最有用的数据类型(除了数字和字符串,也没啥其它类型好用了),字符串可以用单引号,也可以用双引号,也可以不用引号。单双引号的区别跟PHP类似。

单引号

str='this is a string'
@前端进阶之旅: 代码已经复制到剪贴板
  • 单引号里的任何字符都会原样输出,单引号字符串中的变量是无效的
  • 单引号字串中不能出现单引号(对单引号使用转义符后也不行)

双引号

author='poetries'
echo "hello,I'm ${author}"
@前端进阶之旅: 代码已经复制到剪贴板
  • 双引号里可以有变量
  • 双引号里可以出现转义字符

# 2.6 拼接字符串

your_name="poetries"
greeting="hello, "$your_name" !"
greeting_1="hello, ${your_name} !"
echo $greeting $greeting_1
@前端进阶之旅: 代码已经复制到剪贴板

# 2.7 获取字符串长度

author='poetries'
echo "length:${#author}" # length:8
@前端进阶之旅: 代码已经复制到剪贴板

# 2.8 提取子字符串

  • 以下实例从字符串第 2 个字符开始截取 4 个字符:
author='poetries'
echo "提取字符串:${author:1:4}" # oetr
@前端进阶之旅: 代码已经复制到剪贴板

# 2.9 Shell 数组

  • bash支持一维数组(不支持多维数组),并且没有限定数组的大小
  • 类似与C语言,数组元素的下标由0开始编号。获取数组中的元素要利用下标,下标可以是整数或算术表达式,其值应大于或等于0

# 2.10 定义数组

  • 在Shell中,用括号来表示数组,数组元素用"空格"符号分割开。定义数组的一般形式为:
数组名=(值1 值2 ... 值n)
@前端进阶之旅: 代码已经复制到剪贴板
array_name=(value0 value1 value2 value3)
@前端进阶之旅: 代码已经复制到剪贴板

或者

array_name=(
value0
value1
value2
value3
)
@前端进阶之旅: 代码已经复制到剪贴板

还可以单独定义数组的各个分量

array_name[0]=value0
array_name[1]=value1
array_name[n]=valuen
@前端进阶之旅: 代码已经复制到剪贴板

# 2.11 读取数组

  • 读取数组元素值的一般格式是
${数组名[下标]}
@前端进阶之旅: 代码已经复制到剪贴板
valuen=${array_name[n]}
@前端进阶之旅: 代码已经复制到剪贴板
  • 使用@符号可以获取数组中的所有元素,例如
echo ${array_name[@]}
@前端进阶之旅: 代码已经复制到剪贴板

# 2.12 获取数组的长度

  • 获取数组长度的方法与获取字符串长度的方法相同,例如
# 取得数组元素的个数
length=${#array_name[@]}
# 或者
length=${#array_name[*]}
# 取得数组单个元素的长度
lengthn=${#array_name[n]}
@前端进阶之旅: 代码已经复制到剪贴板
like=(
  'running'
  'reading'
  'play'
)

echo "读取数组元素:${like[@]}" # @读取数组所有长度
@前端进阶之旅: 代码已经复制到剪贴板

# 2.13 Shell 注释

  • 以"#"开头的行就是注释,会被解释器忽略
  • sh里没有多行注释,只能每一行加一个#号。只能像这样
#--------------------------------------------
# 这是一个注释
# author:poetry
# site:www.poetries.top!
#--------------------------------------------
##### 用户配置区 开始 #####
#
#
# 这里可以添加脚本描述信息
# 
#
##### 用户配置区 结束  #####
@前端进阶之旅: 代码已经复制到剪贴板
# 学习记录

#!/bin/sh

echo '====学习变量===='
author='poetries'
like=(
  'running'
  'reading'
  'playing'
)

echo "读取数组元素:${like[@]}" # @读取数组所有长度
echo "提取字符串:${author:1:4}"
echo "字符串length:${#author}"
echo "hello,I'm ${author}"
@前端进阶之旅: 代码已经复制到剪贴板

# 三、shell传递参数

  • 我们可以在执行 Shell 脚本时,向脚本传递参数,脚本内获取参数的格式为:$n。n 代表一个数字,1 为执行脚本的第一个参数,2 为执行脚本的第二个参数,以此类推
  • 以下实例我们向脚本传递三个参数,并分别输出,其中 $0 为执行的文件名
# sh test.sh 1 2 3 4

#!/bin/bash
# author:poetries
# url:blog.poetries.top

echo "Shell 传递参数实例!";
echo "执行的文件名:$0";
echo "第一个参数为:$1";
echo "第二个参数为:$2";
echo "第三个参数为:$3";
@前端进阶之旅: 代码已经复制到剪贴板
  • 为脚本设置可执行权限,并执行脚本,输出结果如下所示
$ chmod +x test.sh 
$ ./test.sh 1 2 3
Shell 传递参数实例!
执行的文件名:./test.sh
第一个参数为:1
第二个参数为:2
第三个参数为:3
@前端进阶之旅: 代码已经复制到剪贴板

# 四、数组

  • 数组中可以存放多个值。Bash Shell 只支持一维数组(不支持多维数组),初始化时不需要定义数组大小
  • 与大部分编程语言类似,数组元素的下标由0开始
  • Shell 数组用括号来表示,元素用"空格"符号分割开,语法格式如下
#!/bin/bash
# author:poetry
# url:blog.poetries.top

my_array=(A B "C" D)
@前端进阶之旅: 代码已经复制到剪贴板
  • 我们也可以使用下标来定义数组:
array_name[0]=value0
array_name[1]=value1
array_name[2]=value2
@前端进阶之旅: 代码已经复制到剪贴板

# 4.1 读取数组

${array_name[index]}
@前端进阶之旅: 代码已经复制到剪贴板

← Linux之scp传输文件一文读懂Linux →

fe
基础篇
进阶篇
高频篇
精选篇
手写篇
面经篇
AI 篇
原理篇
每日一题
小程序题库
知识卡片NEW
  • 历年面经按年份追踪真实考点
  • 算法题库NEW在线编码即时判题
  • 专项自测100 题快速查漏
  • 业务场景题真实业务问题与追问
  • 查漏补缺常见问题解析
  • AI 模拟面试NEW模拟真实面试 + 报告
  • 前端基础
    • HTTP从报文一路讲到 HTTPS
    • 浏览器渲染、事件循环、进程
    • 计算机基础Linux、网络、操作系统
  • 进阶专项
    • 设计模式23 种模式怎么用
    • 前端系统进阶学习大型项目工程化
    • 前端综合文章长期沉淀的实践文
  • 工程与工具
    • Node学习指南从环境搭建到服务端
    • NPM工作流script、依赖与发布
    • Docker容器化部署上手
    • Canvas图形与动画实战
  • 路线与导图
    • 思维导图知识点全景图
    • 学习路线按图索骥不跑偏
    • AI 定制路线NEW按你的简历现排
    • AI 知识地图NEW串起全站知识点
  • 动态
    • AI 热点NEWAI 每日动态
    • 公众号动态公众号历史文章
    • 博客动态站长的技术博客
    • 开发者导航常用工具与文档站
AI 助手NEW
旧版
  • JavaScript Part 1

    • Ajax总结篇
    • Canvas 绘制八大行星
    • DOM编程之API学习总结篇
    • JavaScript事件机制
    • JavaScript代码片段100个
    • JavaScript作用域分析总结
    • JavaScript原型链回顾
    • JavaScript及jQuery中的各种宽高属性图解
    • JavaScript工程项目的一系列最佳实践
    • JavaScript常用API合集
    • JavaScript数组、字符串、对象常用方法
    • JavaScript数组方法总结篇
    • JavaScript深浅拷贝
    • JavaScript运动框架之速度时间版本
    • JavaScript运行机制Event Loop
    • JavaScript防抖节流原理
    • Javascript中的复制粘贴功能
    • Javascript数组详解
    • OOP之原型与原型链
    • Object.defineProperty详解
    • V8源码浅析JS数组常见方法
    • await 在 forEach 中不生效解决方案
    • iframe+表单跨域提交POST请求
    • javascript笔记总结篇
    • 业务中处理数据结构常用的JS方法
    • 作用域
    • 你真的掌握变量和类型了吗
    • 前后端分离之数据Mock
    • 原型与原型链
    • 原生JS补给(上)
    • 如何写出一个惊艳面试官的深拷贝
    • 带你填一些JS容易出错的坑
    • 彻底弄懂 JavaScript 执行机制
    • 执行上下文 执行栈
    • 正则回顾总结
    • 正则基础知识
    • 正则完整篇
    • 正则表达式
    • 浅析Promise原理
    • 浅谈JavaScript中的异步处理
    • 深拷贝 vs 浅拷贝
    • 聊一聊typeof instanceof 实现原理.
    • 聊一聊闭包
    • 高阶函数map reduce filter
  • JavaScript Part 2

  • CSS

  • HTML

  • Jquery

  • ES6

  • 小程序

  • Vue

  • React

  • 深入React

  • React Native

  • NodeJS

  • Angular

  • TypeScript

  • Webpack

  • 浏览器

  • 移动端

  • 前端工程化

  • Electron

  • HTTP

  • Nginx

  • Linux

  • 数据结构与算法

  • LeetCode算法题

  • 综合