JavaScript笔记（一）: 基础js知识

前言

常用技术栈

标准：ES5、 ES6、 H5、 CSS3
编译工具：Gulp、 Grunt、 Webpack
基础库： jQuery 。。。
模块化：Common JS、 CMD、 AMD、 UMD、 ES6 Module
框架： Vue、 React、 Angular
UI框架：Bootstrap、 ElementUl、 Vux、 AntDesign (mobile) 、ionic
WebSocket：SockJS
数据可视化 Echarts、 Bmap
动画 - Animate. css
流程控制 - Redux (thunk、 saga、observab le)、 Vuex
函数式编程 - underscore、 lodash、 immutable、rxjs
CSS预处理器 sass、 less
移动开发一react native、 ionic、 Weex
中间语言 typescr ipt
服务端开发 Nodejs、 Express、 KOA、 SockJS

一、JS 基础

1.1 变量

JavaScript 提供八种不同的数据类型，它们是：

undefined（未定义）、
null（空）
boolean（布尔型）
string（字符串）
symbol
number（数字）
bigint（可以表示任意大的整数）
object（对象）

js中的变量名称推荐使用驼峰命名法（camelCase）。定义变量

var myName;
var myName;

//var声明的变量，可以被覆盖变量声明
var camper = "James";
var camper = "David";
console.log(camper);
// 使用 let 时，同名的变量只能声明一次 (ES6特性)
let camper2 = "James";
let camper2 = "David";
console.log(camper2);
// const定义只读变量， 只读变量建议大写
const FAV_PET = "Cats";

1.2 运算

var sum = 2+2;
var add = 1+4;
var diff = 2-1;
var pus = 2*6;
const quotient = 66 / 33;

// 数字递增
i++
i=i+1

i--

// remainder 求余运算符 % 返回两个数相除得到的余数
5 % 2 = 1

// 复合赋值
myVar += 5;

// 


//

1.3 字符串

js中的字符串不能被更改，只能重新赋值比如 str的第一个字母 str[0] 不能赋值，如果要改，整个str要修改

字符串切片：

默认从零开始： str[2]
后面倒数第几个字符串： str[str.length - 2 ]

1.4 数组 array

比如： const arr = [ ‘aaa’, ‘bbb’, ‘ccc’];

通过索引访问数组中的数据: arr[0]
数组的条目是可变的并且可以自由更改，即使数组是用 const 声明的：
```
const ourArray = [50, 40, 30];
ourArray[0] = 15;
```
数组的函数
- .push(): 将数据添加到数组末尾
- .pop() : 弹出一个数组末尾的值, 返回值是弹出的值
- .shift() : 移除第一个元素，返回值是移除的值
- .unshift(): 移入一个元素到数组的头部

1.5 函数 functions

function testFun(param1, param2) {
  console.log(param1, param2);
}

全局作用域和函数
- 任何在fun外面定义的变量都是global全局变量；
- 在fun中赋值变量不加let或者const声明，变量会自动变成全局变量；
- 在一个函数内声明的变量，以及该函数的参数都具有局部（local）作用域
- 一个程序中有可能具有相同名称的局部变量和全局变量。在这种情况下，局部变量将会优先于全局变量
队列

1.6 控制语句

if
等号判断
- 等号： 12 == 12 ，12 == “12” ： true
- 严格相等： 12 === 12： true； 12 === “12”：false；
typeof

switch：

switch(lowercaseLetter) {
  case "a":
    console.log("A");
    break;
  case "b":
    console.log("B");
    break;
}

switch 添加默认选项：

switch (num) {
  case value1:
    statement1;
    break;
  case value2:
    statement2;
    break;
...
  default:
    defaultStatement;
    break;
}

注意：如果你忘了给 switch 的每一条 case 添加 break，那么后续的 case 会一直执行，直到遇见 break 为止。

while 循环

const ourArray = [];
let i = 0;

while (i < 5) {
  ourArray.push(i);
  i++;
}

for循环

const ourArray = [];
for (let i = 0; i < 5; i++) {
  ourArray.push(i);
}
// ourArray 现在的值为 [0, 1, 2, 3, 4]

do…while循环：不论什么情况，它都会首先 do（运行）循环里的第一部分代码，然后 while（当）规定的条件被评估为 true（真）的时候，它会继续运行循环

const ourArray = [];
let i = 0;

do {
  ourArray.push(i);
  i++;
} while (i < 5);



const ourArray = []; 
let i = 5;

do {
  ourArray.push(i);
  i++;
} while (i < 5);

1.7 js 函数

js中的运算可以直接发挥true或false：
```
function isEqual(a,b){ return a===b }
```

1.8 javascript对象（Object）

对象和 arrays 类似，区别在于数组使用索引来访问和修改数据，而对象中的数据是通过 properties 访问的。对象非常适合用来存储结构化数据，可以表示真实世界中的物体，比如一只猫。

这里是一个猫对象的样本：

const cat = {
  "name": "Whiskers",
  "legs": 4,
  "tails": 1,
  "enemies": ["Water", "Dogs"]
};

obj中的值可以这样访问: cat.name 和 cat["name"] 是相等的, 区别是，cat[xxx]形式可以用变量替换xxx ,或者写入数字或者有空格的属性。

对象定义后，属性可以修改、新增和删除
删除对象： delete obj.attr
测试对象
- .hasOwnProperty(propname) 方法来检查对象是否有指定的属性
操作复杂对象

1.9 其他方法

生成随机数
- Math.random() 可以放回0-1之间的随机小数 // 0.24118408085602505
- Math.floor() : 取整数，删除小数点
  - 返回最小值 min 和一个最大值 max直接的值： Math.floor(Math.random() * (max - min + 1)) + min
parseInt() : 转换为整数
- 转换二进制 parseInt(string, radix);： parseInt(“01100”, 2)
三元运算符： a ? b : c , 多个三元运算： (a) ? b:(c)?d:e;

三、正则表达式

.test(): .test() 方法会把编写的正则表达式和字符串（即括号内的内容）匹配，如果成功匹配到字符，则返回 true，反之，返回 false

let testStr = "freeCodeCamp";
let testRegex = /Code/;  // 可以搜索多个条件 ： /yes|no/
testRegex.test(testStr);

- 正则标识使用：
    - `/str1|str2/` : 多个或条件匹配
    - `/str1/i`: i标志（flag）忽略大小写
    - `/regx/g`: 多次搜寻或提取模式匹配
    - `/regx./g`: 通配符 . 将匹配任何一个字符。 通配符也叫 dot 或 period。 可以像使用正则表达式中任何其他字符一样使用通配符
    - `/regx[abc]/g`: `[]` 单元匹配 [abc] 匹配中间有a|b|c的内容， 区间这样写: [a-b]
    - `/[^aeiou]/gi `: 匹配所有非元音字符, `[^]`中前面^ 用于表示排除
    - `*?`: 贪婪模式， `/t[a-z]*?i/ ` 贪婪（greedy）匹配会匹配到符合正则表达式匹配模式的字符串的最长可能部分，并将其作为匹配项返回。 另一种方案称为懒惰（lazy）匹配，它会匹配到满足正则表达式的字符串的最小可能部分。
    - `\w`: 这个缩写等同于`[A-Za-z0-9_]`
    -  `\W`:  搜寻和 \w 相反的匹配模式, 此缩写与 [^A-Za-z0-9_] 是一样的
    - \d
    - \D

.match() 方法来提取找到的实际匹配项,如果匹配则返回数组结果

"Hello, World!".match(/Hello/);

let ourStr = "Regular expressions";
let ourRegex = /expressions/;
ourStr.match(ourRegex);

JavaScript笔记（一）: 基础js知识^[draft]

前言

一、JS 基础

1.1 变量

1.2 运算

1.3 字符串

1.4 数组 array

1.5 函数 functions

1.6 控制语句

1.7 js 函数

1.8 javascript对象（Object）

1.9 其他方法

三、正则表达式

`.match()` 方法来提取找到的实际匹配项,如果匹配则返回数组结果

四、debug

五、基础数据结构

六、基础算法

七、OOP

八、函数式编程

九、中级算法

十、总结

前言#

一、JS 基础#

1.1 变量#

1.2 运算#

1.3 字符串#

1.4 数组 array#

1.5 函数 functions#

1.6 控制语句#

1.7 js 函数#

1.8 javascript对象（Object）#

1.9 其他方法#

三、正则表达式#

.match() 方法来提取找到的实际匹配项,如果匹配则返回数组结果#

四、debug#

五、基础数据结构#

六、基础算法#

七、OOP#

八、函数式编程#

九、中级算法#

十、总结#

前言

一、JS 基础

1.1 变量

1.2 运算

1.3 字符串

1.4 数组 array

1.5 函数 functions

1.6 控制语句

1.7 js 函数

1.8 javascript对象（Object）

1.9 其他方法

三、正则表达式

`.match()` 方法来提取找到的实际匹配项,如果匹配则返回数组结果

四、debug

五、基础数据结构

六、基础算法

七、OOP

八、函数式编程

九、中级算法

十、总结