let keyword declares variable
let and var are both used to declare variables but differ
Features of let:
1. let cannot repeat declaration; var can repeat declaration
2. let will not be mounted under windows. var is mounted under windows as a property under Windows
3. let is a block-level scope. It does not affect variables in the global scope
4. Variables declared by let cannot be promoted.
const keyword declares variable
Characteristic:
const has other properties besides those of let
1. Declarations and assignments must be done at once
2. Do not allow changing memory space address
3. Constant values cannot be modified
String Template
Used to define multiline strings represented by (` `)
API of string in es6
codepointAt() Returns the code point of a character
// Define a string var arr='hello world'; // Gets the code value of a specified character using codePointAt() console.log(arr.codePointAt('h')); //104
Include() Determines whether the specified character exists in the matched string
var arr='hello world'; // Use include() to determine whether a specified character exists in a matched string console.log(arr.includes('h')); //true
startsWidth() determines whether to include the header of the parameter string
endsWidth() determines if the end of the parameter string is included
var arr='hello world'; console.log(arr.startsWith('h')); console.log(arr.endsWith('d'));
repeat() returns a new string that repeats the original string a specified number of times
console.log(arr.repeat(2));
Two uses of Starting.raw
1. String.raw`Parameters`
2. Starting.raw({raw:variable}1, 2, 3, 4)
Meaning: invalidates any escape character and backslash of a string to return the element string of a template string
padStart: Returns a new string representing the completion of the original string from the beginning with the parameter string.
padEnd: Returns a new string representing the completion of the original string from the beginning with the parameter string.
Accepts two parameters, the first is the length of the generated string and the second is the string used to complete. The second parameter is not specified and is used by default with spaces
'aa'.padStart(5,'bc') // 'bcbaa' 'aa'.endStart(5,'bc') // 'aabcb'
Returns the original string if the specified length is greater than or equal to the length of the original string.
'xxx'.padStart(2, 'ab') // 'xxx'
If the length of the original string plus the completion string is longer than the specified length, truncate the completion string that exceeds the number of digits
'abc'.padStart(10, '0123456789') // '0123456abc'
replaceAll() replaces all matching strings at once
var arr='hello world'; console.log(arr.replaceAll('ll','--')) // he--o world
String Tags
A label template is not actually a template, but a special form of function call. "Label" refers to a function, and the template string immediately following it is its parameter.
However, if there are variables in the template string, it is not a simple call, but will process the template string into multiple parameters before calling the function.
let a = 5; let b = 10; tag`Hello ${ a + b } world ${ a * b }`; // Equivalent to tag(['Hello ', ' world ', ''], 15, 50);
Destructuring assignment
1 - Understand:
Extract data from an object or array and assign it to a variable (multiple)
2 - Deconstruction assignment of objects
let {n, a} = {n:'tom', a:12}
3-Array Deconstruction Assignment
let [a,b] = [1, 'atguigu'];
4 - Purpose
Assigning values to multiple parameters
es6 uses a pattern to extract values from an array quota object to assign values to variables, which is called deconstruction.
Deconstruction assignment of arrays
var [x,y] = [1,2]; console.log(x,y) //x:1 y:2
Deconstruction assignment of objects
var {a,b} = {a:1,b:2}; console.log(a,b) // a:1 b:2
Deconstruction assignment of functions
// 3-Deconstruction assignment of a function: Deconstruction assignment of the first parameter of the function // Define an object here: const person = { name: 'jack', age: 18, sex: 'male' }; function fn(obj) { //Pass in an obj object here console.log(obj); //So here's the printout of person {name:'jack', age:18, sex:'man'} } fn(person); //Here an fn function is called, passing in a person object // But what we want to print is the name, age, sex inside // So here we go: function fn(obj) { const { name, age, sex } = obj; //Deconstruct and assign this object console.log(name, age, sex); //jack 18 men } // We can also write directly as follows: more concise: // Our ultimate goal is to deconstruct and assign the first parameter of the function // {name, age, sex} is just a parameter wrapped in curly braces. function fn({ name, age, sex }) { console.log(name, age, sex); //jack 18 men } fn(person);
Deconstruction assignment allows default values to be specified
var [a=true] =[]
Order value of assignment If there is a set value, take the set value without looking for your own default word If none of them is displayed as undefined
Extension Operator
The spread operator is a three-point (...). It acts like an inverse operation of the rest parameter, converting an array to a comma-separated sequence of parameters. The spread operator can be used in conjunction with normal function parameters, or it can be followed by an expression, but it has no effect if it is followed by an empty array.
let arr = []; arr.push(...[1,2,3,4,5]); console.log(arr); //[1,2,3,4,5] console.log(1, ...[2, 3, 4], 5) //1 2 3 4 5 console.log(...(1 > 0 ? ['a'] : [])); //a console.log([...[], 1]); //[1]