Sunday, May 26, 2024

Regular Expression

regEx

Quantifiers

Metacharacters

Groups

flags

/abdul/	A regular expression
/abdul/i	A case-insensitive regular expression

/g	Perform a global match (find all)

/i	Perform case-insensitive matching

/m	Perform multiline matching

var pattern = /abdul/

text.match(pattern)

---------------------------------------------------------------------

let text = "aaaabb";

let result = text.match(/(aa)(bb)/d);

---------------------------------------------------------------------------

let text = `Is this

all there

is`

let pattern = /^is/m;

let result = text.match(pattern);

-------------------------------------------------------------------------

The "m" modifier specifies a multiline match.

It only affects the behavior of start ^ and end $.

^ specifies a match at the start of a string.

$ specifies a match at the end of a string.

With the "m" set, ^ and $ also match at the beginning and end of each line.

<p>Do a global, case-insensitive, multiline search for "is" at the beginning of each line in a string.</p>

let text = `Is this

all there

is`

let pattern = /^is/gmi;

-------------------------------------------------------------------------------------------------

<p>The multiline property returns true if the "m" modifier is set, otherwise false:</p>

let text = "Visit W3Schools!";

let pattern = /W3S/gmi;

let result = pattern.multiline;

-------------------------------------------------------------------------------------------------

Regular Expression Search Methods

text.match(pattern)	The String method match()
text.search(pattern)	The String method search()
pattern.exec(text)	The RexExp method exec()
pattern.test(text)	The RegExp method test()

search() searches a string for a value and returns the position of the first match

match() searches for a match in a string

The test() method returns true if it finds a match, otherwise false.

The exec() method tests for a match in a string

Abdulkareemjavascript

1.Using arrow function:

const first = ()=>{

const greet='Hi';

const second = ()=>{

const name='john';

console.error(greet);

}

return second;

}

const newFunc =first();

Notes:

here do call the function of first have to assign const variable and call that as variable name (Example:newFunc();)

2.Closures

Example:

function createGreeter(greeting) {

return function(name) {

alert(greeting + ', ' + name);

}

const sayHello = createGreeter('Hello');

output:

sayHello('Joe');

// Hello, Joe

example2:

<!DOCTYPE html>

<html>

<body>

<h2>JavaScript Closures</h2>

<p>Counting with a local variable.</p>

<button type="button" onclick="myFunction()">Count!</button>

const add = (function () {

let counter = 0;

return function () {counter += 1; return counter;}

})();

function myFunction(){

document.getElementById("demo").innerHTML = add();

}

</script>

</body>

</html>

The variable add is assigned to the return value of a self-invoking function.

The self-invoking function only runs once. It sets the counter to zero (0), and returns a function expression.

This way add becomes a function. The "wonderful" part is that it can access the counter in the parent scope.

This is called a JavaScript closure. It makes it possible for a function to have "private" variables.

The counter is protected by the scope of the anonymous function, and can only be changed using the add function.

If you want to extract properties under a different name, you can specify them using the following format

const obj = {

food: 'cake'

}

const { name: myName, food: myFood } = obj;

console.error(myName, myFood);

output:

Joe cake

const obj = {

food: 'cake'

}

const { food: myName,name: myFood } = obj;

alert(myName, myFood,obj);

output:

cake Joe {name: 'Joe', food: 'cake'}

In the following example, destructuring is used to cleanly pass the person object to the introduce function. In other words, destructuring can be (and often is) used directly for extracting parameters passed to a function. If you’re familiar with React, you probably have seen this before!

const person = {

age: 24

}

function introduce({ name, age }) {

console.log(`I'm ${name} and I'm ${age} years old!`);

}

introduce(person);

const oldarr = [4, 6, -1, 3, 10, 4];

const newarr = new Set(oldarr);

alert(newarr);

alert(oldarr);

const arr1 = [4, 6, -1, 3, 10, 4];

const max = Math.max(...arr1);

alert(max);

output:

Set(5) { 4, 6, -1, 3, 10 }

[ 4, 6, -1, 3, 10, 4 ]

Array Methods

1.Map Methods

const arr = [1, 2, 3, 4, 5, 6];

const mapped = arr.map(el => el + 20);

console.log(mapped);

// [21, 22, 23, 24, 25, 26]

2.Filter Methods

const arr = [1, 2, 3, 4, 5, 6];

const filtered = arr.filter(el => el === 2 || el === 4);

console.log(filtered);

// [2, 4]

3.Reduce Methods

const arr = [1, 2, 3, 4, 5, 6];

const reduced = arr.reduce((total, current) => total + current);

console.log(reduced);

// 21

4. Find Methods

const arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

const found = arr.find(el => el > 5);

console.log(found);

// 6

note that while everything after 5 meets the criteria, only the first matching element is returned.

This is actually super helpful in situations where you would normally break a for loop when you find a match!

5.findIndex

const arr = ['Nick', 'Frank', 'Joe', 'Frank'];

const foundIndex = arr.findIndex(el => el === 'Frank');

console.log(foundIndex);

// 1

6.indexOf

const arr = ['Nick', 'Frank', 'Joe', 'Frank'];

const foundIndex = arr.indexOf('Frank');

console.log(foundIndex);

// 1

push, pop, shift, unshift

7.push()

push() adds new items to the end of an array:

let arr = [1, 2, 3, 4];

const pushed = arr.push(5);

console.log(arr);

// [1, 2, 3, 4, 5]

console.log(pushed);

// 5

unshift()

adds new items to the beginning of an array:

const fruits = ["Banana", "Orange", "Apple", "Mango"];

fruits.unshift("Lemon", "Pineapple");

document.getElementById("demo").innerHTML = fruits;

output:

Lemon,Pineapple,Banana,Orange,Apple,Mango

9.shift()

removes the first item of an array:

const fruits = ["Banana", "Orange", "Apple", "Mango"];

fruits.shift();

document.getElementById("demo").innerHTML = fruits;

output:

Orange,Apple,Mango

10. pop()

removes the last element of an array

const fruits = ["Banana", "Orange", "Apple", "Mango"];

fruits.pop();

document.getElementById("demo").innerHTML = fruits;

output:

Banana,Orange,Apple

https://hackernoon.com/12-javascript-concepts-that-will-level-up-your-development-skills-b37d16ad7104

11.Remember self-invoking functions(closure function)

closure function

The variable add is assigned to the return value of a self-invoking function.

The self-invoking function only runs once. It sets the counter to zero (0), and returns a function expression.

This way add becomes a function. The "wonderful" part is that it can access the counter in the parent scope.

This is called a JavaScript closure. It makes it possible for a function to have "private" variables.

The counter is protected by the scope of the anonymous function, and can only be changed using the add function.

const add = (function () {
let counter = 0;
return function () {counter += 1; return counter}
})();

add();
add();
add();

// the counter is now 3

14.anonymous function

function(){

//body

}

(()=>{

//body

})();

Call is a function that helps you change the context of the invoking function. In layperson's terms, it helps you replace the value of this inside a function with whatever value you want.

Apply is very similar to the call function. The only difference is that in apply you can pass an array as an argument list.

Bind is a function that helps you create another function that you can execute later with the new context of this that is provided.

Dynamic data in segment and filter

define({

//Type your controller code here

onNavigate:function(){

this.view.btnSearch.onClick =this.Dynseg;

this.view.txtsearch.onTextChange =this.ontxtDynseg;

this.view.txtsearch.text="";

this.Dynseg();

ontxtDynseg:function(){

if(this.view.txtsearch.text.trim().length === 0)

{

this.Dynseg();

}

Dynseg:function(){

var data = [

{

"imgProfile": "steve.png",