ES6 learn

Posted on 2019-04-04 Edited on 2019-07-30 In ES6

Let

let is similar to var but let has scope. let is only accessible in the block level it is defined.

example:

if (true) {
 let a = 40;
 console.log(a); //40
}
console.log(a); // undefined

and

let a = 50;
let b = 100;
if (true) {
 let a = 60;
 var c = 10;
 console.log(a/c); // 6
 console.log(b/c); // 10
}
console.log(c); // 10
console.log(a); // 50

Const

Const is used to assign a constant value to the variable. And the value cannot be changed. Its fixed.

example:

const a = 50;
a = 60; // shows error. You cannot change the value of const.
const b = "Constant variable";
b = "Assigning new value"; // shows error.

Whenever you define a const variable, Javascript references the address of the value to the variable.

example:

const LANGUAGES = ['Js', 'Ruby', 'Python', 'Go'];
LANGUAGES = "Javascript"; // shows error.
LANGUAGES.push('Java'); // Works fine.
console.log(LANGUAGES); // ['Js', 'Ruby', 'Python', 'Go', 'Java']

the variable ‘LANGUAGES’ actually references to the memory allocated to the array. So you cannot change the variable to reference some other memory location later. Throughout the program it only references to the array.

Arrow Function

// Old Syntax
function oldOne() {
 console.log("Hello World..!");
}
// New Syntax
var newOne = () => {
 console.log("Hello World..!");
}

and

let NewOneWithParameters = (a, b) => {
 console.log(a+b); // 30
}
NewOneWithParameters(10, 20);

There are two things to explain here.

If you have a function with single parameter, you don’t need (). In our case element is the parameter.
And If you have single line as the body of the function you don’t need {} and also JS will implicitly returns the value after executing the function. You don’t have to use return keyword.
Arrow functions shine best with anything that requires this to be bound to the context, and not the function itself.

For of loop

for..of iterates through list of elements (i.e) like Array and returns the elements (not their index) one by one.

let arr = [2,3,4,1];
for (let value of arr) {
 console.log(value);
}
Output:
2
3
4
1

and

let string = "Javascript";
for (let char of string) {
 console.log(char);
}
Output:
J
a
v
a
s
c
r
i
p
t

Spread attributes

let SumElements = (arr) => {
 	console.log(arr); // [10, 20, 40, 60, 90]
 	
	let sum = 0;
 	for (let element of arr) {
 		sum += element;
 	}
 	console.log(sum); // 220. 
}

SumElements([10, 20, 40, 60, 90]);

consider the same example with spread attributes:

let SumElements = (...arr) => {
 console.log(arr); // [10, 20, 40, 60, 90]
let sum = 0;
 for (let element of arr) {
 sum += element;
 }
 console.log(sum); // 220. 
}
SumElements(10, 20, 40, 60, 90); // Note we are not passing array here. Instead we are passing the elements as arguments.

Math.max is a simple method that returns the maximum element from given list. It doesn’t accept an array.

1 2	let arr = [10, 20, 60]; Math.max(arr); // Shows error. Doesn't accept an array.

So lets use our savior:

1 2	let arr = [10, 20, 60]; Math.max(...arr); // 60

Maps

Map holds key-value pairs. It’s similar to an array but we can define our own index. And indexes are unique in maps.

var map = new Map();
map.set('name', 'John');
map.set('id', 10);

map.get('name'); // John
map.get('id'); // 10

map.size; // 2. Returns the size of the map.
map.keys(); // outputs only the keys. 
map.values(); // outputs only the values.

for (let key of map.keys()) {
 console.log(key);
}
Output:
name
id

for (let [key, value] of map) {
 console.log(key+" - "+value);
}
Output:
name - John
id - 10

Sets

Sets are used to store the unique values of any type.

var sets = new Set();
sets.add('a');
sets.add('b');
sets.add('a'); // We are adding duplicate value.
for (let element of sets) {
 console.log(element);
}
Output:
a
b

sets.size; // returns 2. Size of the set.
sets.has('a'); // returns true. 
sets.has('c'); // returns false.

Static methods

class Example {
 static Callme() {
 console.log("Static method");
 }
}
Example.Callme();
Output:
Static method

you can call the function without creating any instance for the class.

Getters and Setters

class People {
constructor(name) {
 this.name = name;
 }
 getName() {
 return this.name;
 }
 setName(name) {
 this.name = name;
 }
}
let person = new People("Jon Snow");
console.log(person.getName());
person.setName("Dany");
console.log(person.getName());
Output:
Jon Snow
Dany

Promises

They are used to make async operations such as API request, file handling, downloading images, etc.

Before promises, programmers used to define callbacks. Callbacks are normal functions in Javascript which executes when the async operation is complete.

three states in promises

Pending: In this state the promise is just executing the async operation. For example, It’s making some API request to the server or downloading some images from cdn. from this state promise can move to either to Fulfilled or to Rejected
Fulfilled: If the promise has reached this state, then it means that the async operation is complete and we have the output. For example, we have the response from the API.
Rejected: If the promise has reached this state, it means that the async operation is not successful and we have the error which caused the operation to fail.

const apiCall = new Promise(function(resolve, reject) {
 if ( API request to get some data ) {
  resolve("The request is successful and the response is "+ response);
 }
 else {
  reject("The request is not successful. The error is "+error);
 }
});

Then the resolve function is called if we get the response from the server. And if there is some error reject function is called with the error message.

We use handlers to get the output from the promise.

Handlers are just functions which executes when some event occurs such as clicking a button, moving the cursor, etc.

So we can use handlers to handle when the resolve function is called or **reject **function is called.

The handler then executes its function parameter when the resolve function is called inside the promise.

// calling the promise with some handlers.
apiCall.then(function(x) {console.log(x); })

// Output
The request is successful and the response is {name: "Jon Snow"}

Catch handler looks out for reject function.

apiCall
.then(function(x) {
 console.log(x); 
})
.catch(function(x) {
 console.log(x);
}) 

// Assuming the request is not successful ( reject function is called in the promise. )
Output:
The request is not successful

Async / Await

async

1
2
3

async function hello() {
 return "Hello Promise..!"
}

The above code is equivalent to the below code:

function hello() {
 return new Promise(function(resolve, reject) {
 // executor function body.
 });
}

example:

async function hello(a, b) {
 if (a < b) {
  return "Greater";
 }
 else {
  return new Error("Not Greater");
 }
}
hello(14, 10)
.then(function(x) {
 console.log("Good..! " + x); 
})
.catch(function(x) {
 console.log("Oops..! " + x); 
})
Output:
Oops..! Not Greater. 
// if you call hello(4, 10) you get "Good..! Greater"

Don’t forget that async function will return a promise. So of course, you can call resolve and reject function inside async function too.

example:

async function Max(a, b) {
 if (a > b) {
  return Promise.resolve("Success");
 }
 else {
  return Promise.reject("Error");
 }
}
Max(4, 10)
.then(function(x) {
 console.log("Good " + x); 
})
.catch(function(x) {
 console.log("Oops " + x); 
});
Output:
Oops Error
// If we pass Max(14, 10) then we should get "Good Success" :)

await

It makes the Javascript to wait until you get the response from the endpoint. And then it resumes the execution.

await can be used only inside async function. It doesn’t work outside async function

async function hello() {
 let response = await fetch('https://api.github.com/');
 // above line fetches the response from the given API endpoint.
 return response;
}
hello()
.then(function(x) {
 console.log(x); 
});
...
...
Output:
Response from the API.

Array

Array Map

let arr = [1,2,3,4,5];
let modifiedArr = arr.map(function(element, index, arr) {
  return element * 10;
});
console.log(modifiedArr);
Output:
[10, 20, 30, 40, 50]

And also note we have to return some value in the end. Which will be the modified value of that element. If you didn’t return anything then the particular element will be undefined.

One more thing I like to add is the second and third parameter is only optional. Only the first parameter is mandatory. for example :

1
2
3

let modifiedArr = arr.map(function(element) {
  return element * 10;
});

write the map operator with arrow functions:

let modifiedArr = arr.map((element, index) => {
  console.log("index "+index);
  return element * 10;
});
console.log(modifiedArr);
Output:
index 0
index 1
index 2
index 3
index 4
[10, 20, 30, 40, 50]

better:

1 2	let modifiedArr = arr.map(element => element * 10); console.log(modifiedArr);

Array Filter

let arr = [1, 2, 3, 4, 5, 6]
let modifiedArr = arr.filter(function(element, index, array) {
  return element % 2 == 0
});
console.log(modifiedArr);
Output:
[2, 4, 6]

try by arrow function:

1	let modifiedAarr = arr.filter((element, index) => element%2 == 0)

we have to return a boolean value for each element of the array. If you won’t return any boolean value at the end then the filter takes it as false and deletes the element.

Array Reduce

Array reduce is used to aggregate all the elements of an array and return a single value.

let arr = [1,2,3,4,5,6]
let total= arr.reduce(function(sum, element, index, array) {
  return sum + element;
},0);
console.log("total is "+total);
Output:
total is 21

Unlike filter and map, reduce takes a function with four parameters and also a additional element. Unlike filter and map, the first two parameters are mandatory. Other two are optional.

The first parameter is the aggregator element.In our case it’s 0.

Like filter and map you have to return the end result.

write the same code with arrow functions:

1	let totalSum = arr.reduce((sum, element) => element+sum, 0)

Template Literals

let name = "Srebalaji";
let languages = () => {return "Ruby, Js, Java, Python"}
let msg = `My name is ${name}
My age is ${20+3}
And I code in ${languages()}`
Output:
My name is Srebalaji
My age is 23
And I code in Ruby, Js, Java, Python

Imports and Exports

//app.js
export let name = "Jon"
export let age = 23

//index.js
import {name, age} from './app'
console.log(name);
console.log(age);

//index.html
<script src="./index.js"></script>

Output:
Jon
23

and:

//app.js
let a = 10;
let b = 2;
let sum = () => a+b;
export {a,b}
export default sum

//index.js
import * as variables from './app'
import addition from './app' // default value
console.log(variables.a);
console.log(variables.b);
console.log(addition());

Output:
10
2
12

If you are using * to import values then you have to use alias (i.e) names that will refer to imported values. In our example we have used variables as alias.
Using * to import values doesn’t import default value. You have to import it separately.

for example:import addition, * as variables from './app'

Destructuring objects and arrays

let person = {firstName: "Jon", lastName: "Snow", age: 23}
const {firstName, lastName, age} = person
console.log(firstName);
console.log(lastName);
console.log(age);
Output:
Jon
Snow
23

Extend and Super

class Person{
 constructor(firstName, lastName, age) {
   this.firstName = firstName;
   this.lastName = lastName;
   this.age = age;
 }
 displayName() {
  return `${this.firstName} - ${this.lastName}`;
 }
}
class Employee extends Person {
 constructor(firstName, lastName, age, salary) {
  super(firstName, lastName, age);
  this.salary = salary;
 }
 displaySalary() {
  return `${this.salary}`;
 }
 displayName() {
  return super.displayName();
 }
 displayAge() {
  return this.age;
 }
}
let manager = new Employee("Jon", "Snow", 23, 100);
console.log(manager.displaySalary());
console.log(manager.displayName());
console.log(manager.displayAge());
Output:
100
Jon Snow
23

And then we have used super keyword to call the constructor of the parent class. And we also have called the method declared in the parent class using super.

Generator functions

Generator functions are written using the function* syntax. When called initially, generator functions do not execute any of their code, instead returning a type of iterator called a Generator.
When a value is consumed by calling the generator’s next method, the Generator function executes until it encounters the yield keyword.
- Each yield in a generator basically represents an asynchronous step in a more synchronous/sequential process — somewhat like await in an asyncfunction.
The function can be called as many times as desired and returns a new Generator each time, however each Generator may only be iterated once.

some method

includes

construct an array of the items, and use includes:
1
['a', 'b', 'c'].includes('b')

spring boot learn

Posted on 2019-03-31 Edited on 2021-09-02 In spring boot

什么是正则表达式?

正则表达式是一组由字母和符号组成的特殊文本, 它可以用来从文本中找出满足你想要的格式的句子.

一个正则表达式是在一个主体字符串中从左到右匹配字符串时的一种样式.
“Regular expression”这个词比较拗口, 我们常使用缩写的术语”regex”或”regexp”.
正则表达式可以从一个基础字符串中根据一定的匹配模式替换文本中的字符串、验证表单、提取字符串等等.

想象你正在写一个应用, 然后你想设定一个用户命名的规则, 让用户名包含字符,数字,下划线和连字符,以及限制字符的个数,好让名字看起来没那么丑.
我们使用以下正则表达式来验证一个用户名:

以上的正则表达式可以接受 john_doe, jo-hn_doe, john12_as.
但不匹配Jo, 因为它包含了大写的字母而且太短了.

元字符	描述
.	句号匹配任意单个字符除了换行符.
[ ]	字符种类. 匹配方括号内的任意字符.
[^ ]	否定的字符种类. 匹配除了方括号里的任意字符
*	匹配>=0个重复的在*号之前的字符.
+	匹配>=1个重复的+号前的字符.
?	标记?之前的字符为可选.
{n,m}	匹配num个大括号之前的字符 (n <= num <= m).
(xyz)	字符集, 匹配与 xyz 完全相等的字符串.
\|	或运算符,匹配符号前或后的字符.
\	转义字符,用于匹配一些保留的字符 `[ ] ( ) { } . * + ? ^ $ \ \|`
^	从开始行开始匹配.
$	从末端开始匹配.

2.1 点运算符 `.`

.是元字符中最简单的例子.
.匹配任意单个字符, 但不匹配换行符.
例如, 表达式.ar匹配一个任意字符后面跟着是a和r的字符串.

".ar" => The car parked in the garage.

简写	描述
.	除换行符外的所有字符
\w	匹配所有字母数字, 等同于 `[a-zA-Z0-9_]`
\W	匹配所有非字母数字, 即符号, 等同于: `[^\w]`
\d	匹配数字: `[0-9]`
\D	匹配非数字: `[^\d]`
\s	匹配所有空格字符, 等同于: `[\t\n\f\r\p{Z}]`
\S	匹配所有非空格字符: `[^\s]`
\f	匹配一个换页符
\n	匹配一个换行符
\r	匹配一个回车符
\t	匹配一个制表符
\v	匹配一个垂直制表符
\p	匹配 CR/LF (等同于 `\r\n`)，用来匹配 DOS 行终止符

符号	描述
?=	正先行断言-存在
?!	负先行断言-排除
?<=	正后发断言-存在
?<!	负后发断言-排除

标志	描述
i	忽略大小写.
g	全局搜索.
m	多行的: 锚点元字符 `^` `$` 工作范围在每行的起始.

Let

Const

Arrow Function

For of loop

Spread attributes

Maps

Sets

Static methods

Getters and Setters

Promises

Async / Await

async

await

Array

Array Map

Array Filter

Array Reduce

Template Literals

Imports and Exports

Destructuring objects and arrays

Extend and Super

Generator functions

some method

目录

1. 基本匹配

2. 元字符

2.1 点运算符 .

2.2 字符集

2.2.1 否定字符集

2.3 重复次数

2.3.1 * 号

2.3.2 + 号

2.3.3 ? 号

2.4 {} 号

2.5 (...) 特征标群

2.6 | 或运算符

2.7 转码特殊字符

2.8 锚点

2.8.1 ^ 号

2.8.2 `### 号

3. 简写字符集

4. 零宽度断言(前后预查)

4.1 ?=... 正先行断言

4.2 ?!... 负先行断言

4.3 ?<= ... 正后发断言

4.4 ?<!... 负后发断言

5. 标志

5.1 忽略大小写 (Case Insensitive)

5.2 全局搜索 (Global search)

5.3 多行修饰符 (Multiline)

6. 贪婪匹配与惰性匹配 (Greedy vs lazy matching)

贡献

许可证

create react app

JSX: JavaScript + XML

Components

Function

Class Components

Simple Components

Converting a Function to a Class

Props

State

The Data Flows Down

Lifecycle methods

constructor

componentDidMount

componentWillUnmount

componentWillReceiveProps

Events

Conditional Rendering

Lists and Keys

Forms

Lifting State Up

Composition vs Inheritance

Thinking in React

types

Variables

Operators

Control structures

Objects

2.1 点运算符 `.`

2.3.1 `*` 号

2.3.2 `+` 号

2.3.3 `?` 号

2.4 `{}` 号

2.5 `(...)` 特征标群

2.6 `|` 或运算符

2.8.1 `^` 号

4.1 `?=...` 正先行断言

4.2 `?!...` 负先行断言

4.3 `?<= ...` 正后发断言

4.4 `?<!...` 负后发断言