ES6
Every time the birth of a standard means the perfection of the language, the enhancement of functions, and there are some unsatisfactory aspects of javascript itself.
- Variable promotion feature increases the unpredictability of program runtime
- The grammar is too loose, to achieve the same function, different people may write different codes
let
The keyword declared by let has a block-level scope. The so-called block-level scope is a {}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>let声明的变量具有块级作用域</title>
</head>
<body>
</body>
<script>
if (true) {
let a = 20;
console.log(a); //20
if (true) {
let b = 50;
console.log(b)//50
}
}
console.log(a) //a is not define
</script>
</html>
let can prevent loop variables from becoming global variables
Variables declared by let will not be promoted
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>let声明的变量不会进行变量提升</title>
</head>
<body>
</body>
<script>
console.log(a) // a is not define
let a = 20;
</script>
</html>
Variables declared by let have the characteristics of temporary dead zone
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>let声明的变量具有暂存性死区的特性</title>
</head>
<body>
</body>
<script>
let a = 20;
if(true) {
console.log(a)
let a = 30;
}
</script>
</html>
let interview var
The key point of this question: the variable i is global and the output value of the function is i in the global scope
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>let面试题</title>
</head>
<body>
</body>
<script>
var arr = [];
for(var i = 0;i<2;i++){
arr[i] = function () {
console.log(i)
}
}
arr[0]()//2
arr[1]()//2
</script>
</html>
let interview questions
Key point: When the function is executed, the output is the value of i in the block scope generated by the previous loop
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>let面试题</title>
</head>
<body>
</body>
<script>
let arr = [];
for(let i =0;i<2;i++){
arr[i]= function () {
console.log(i)
}
}
arr[0]()//0
arr[1]()//1
</script>
</html>
const
const is used to declare constants. Constants are the amount that the value (memory address) cannot change
- Constants declared with const have the characteristics of block-level scope
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>const声明的常量具有块级作用域的特性</title>
</head>
<body>
</body>
<script>
if(true){
const a = 10;
if(true) {
const a =20;
console.log(a)//20
}
console.log(a)//10
}
console.log(a)// a is not define
</script>
</html>
The constant declared by const must have an initial value
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>const声明的常量必须赋初始值</title>
</head>
<body>
</body>
<script>
const a;
console.log(a)
</script>
</html>
The constant value (memory address) declared by const cannot be changed
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>const声明的常量值不能更改</title>
</head>
<body>
</body>
<script>
const arr = [200,300];
arr[0]='hello';
arr[1]='word';
console.log(arr);//['hello','word']
arr = [200,500];
console.log(arr) //TypeError: invalid assignment to const `arr'
</script>
</html>
The difference between var let const
Destructuring assignment
ES6 allows extracting values from arrays and assigning them to corresponding variables in a one-to-one correspondence. Objects can also be deconstructed and assigned.
Array destructuring
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ES6之数组解构</title>
</head>
<body>
</body>
<script>
let arr = [1, 2, 3];
let [a, b, c, d] = arr;
console.log(a); //1
console.log(b); //2
console.log(c); //3
console.log(d); //undefined
</script>
</html>
Object structure
The first way to write object deconstruction
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>对象解构</title>
</head>
<body>
</body>
<script>
let obj = {
name: "张三",
sex: "男"
};
let {
name,
sex
} = obj;
console.log(name);
console.log(sex);
</script>
</html>
The second way of writing object deconstruction
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>对象解构中的第二种写法</title>
</head>
<body>
</body>
<script>
let person = {
name: "尧子陌",
sex: '男'
};
let {
name: myname,
sex: mysex
} = person;
console.log(myname);
console.log(mysex);
</script>
</html>
Arrow function
New way to define functions in ES6
- If there is only one line of code in the function body, and the execution result of the code is the return value, the braces can be omitted
- If there is only one formal parameter, the parentheses can be omitted
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ES6之箭头函数</title>
</head>
<body>
</body>
<script>
const fn =() =>{
console.log('hello word')
};
fn() //hello word
//如果函数体内只有一句代码，且代码的执行结果为函数的返回值，则可以省略大括号
const sum =(sum1,sum2)=> sum1+sum2
console.log(sum(20,50))
//在箭头函数中，如果形参只有一个，也可以省略小括号
const fn2 = v => v;
console.log(fn2(20))
</script>
</html>
The this point of the arrow function
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>箭头函数中的this</title>
</head>
<body>
</body>
<script>
let obj = {
name: "尧子陌"
};
function fn() {
console.log(this);
return () => {
console.log(this)
}
}
const Rt = fn.call(obj);
Rt()
</script>
</html>
Interview Questions of Cutting Head Function
The key point of this question is: the object cannot have a scope and does not have its own this point. At this time, this points to this under the global scope.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>箭头函数面试题</title>
</head>
<body>
</body>
<script>
var age = 100;
var obj = {
age: 20,
say: () => {
alert(this.age)
}
}
obj.say()
</script>
</html>
Remaining parameters
In ES6, arguments cannot be used, so use the remaining parameters instead
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ES6之剩余参数</title>
</head>
<body>
</body>
<script>
function sum(...args) {
let total = 0;
args.forEach(item => {
console.log(item); //item代表遍历数组的每一项
total += item
});
return total;
}
console.log(sum(20, 20));
console.log(sum(20, 40, 60));
</script>
</html>
The remaining parameters are used in conjunction with structure assignment
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>剩余参数和解构赋值配合使用</title>
</head>
<body>
</body>
<script>
let [s1, ...s2] = ['张三', '李四', '王五']
console.log(s1);
console.log(s2);
</script>
</html>
Spread operator
The spread operator can convert an array or object into a sequence of parameters separated by commas
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>扩展运算符</title>
</head>
<body>
</body>
<script>
// 扩展运算符可以将数组或对象转换成以逗号分割的参数序列
let ary = [1, 2, 3];
console.log(...ary);
console.log(1, 2, 3);
</script>
</html>
Concatenate arrays with expansion operations
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>扩展运算符用于合并数组</title>
</head>
<body>
</body>
<script>
// 第一种方法：利用扩展运算符可以合并数组
let arr1 = [1, 2, 3];
let arr2 = [5, 6, 7];
let arr3 = [...arr1, ...arr2];
console.log(arr3);
// 第二种方法：利用push方法合并数组
const arr4 = ['a', 'b', 'c'];
const arr5 = ['d', 'e', 'f'];
arr4.push(...arr5);
console.log(arr4);
</script>
</html>
The spread operator can convert a pseudo-array into a real array
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>利用扩展运算符将伪数组转换成真正的数组</title>
<style>
ul {
list-style: none;
}
</style>
</head>
<body>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</body>
<script>
let lis = document.querySelectorAll('li');
let arrLis = [...lis];
arrLis.push('尧子陌')
console.log(arrLis);
</script>
</html>
ES6 array method
Array.from()
The Array.from() method can convert a pseudo-array into a real array, and you can also use a function as the second parameter
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Array.form()</title>
</head>
<body>
</body>
<script>
let arrayLike = {
'0': '张三',
'1': '李四',
'2': '王五',
'length': '3'
}
console.log(arrayLike);
let arr = Array.from(arrayLike);
console.log(arr);
let arrObj = {
'0': '1',
'1': '2',
'length': '2'
}
// Array.from()可以传递第二个参数，第二个参数为函数
let arr2 = Array.from(arrObj, item => item * 2);
console.log(arr2);
</script>
</html>
find()
Used to find the first qualified array member, if not found, it returns undefined
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>find()方法</title>
</head>
<body>
</body>
<script>
let arr = [{
id: 1,
name: "尧子陌"
}, {
id: 2,
name: "惊鸿"
}]
// index:索引 item:数组成员
let arrFind = arr.find((item, index) => item.id == 2);
console.log(arrFind);
</script>
</html>
findIndex()
Find out the position of the first array member that satisfies the condition, return -1 if not found
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>findIndex()</title>
</head>
<body>
</body>
<script>
let arr = [5, 10, 15, 20, 25];
let arrFind = arr.findIndex(item => item > 20);
console.log(arrFind);
</script>
</html>
includes()
Indicates whether an array contains a specific value, and the returned value is a Boolean value.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>includes()方法</title>
</head>
<body>
</body>
<script>
let arr = [1, 2, 3, 4]
console.log(arr.includes(1));
</script>
</html>
ES6 string method
Template string
ES6 adds a new method to define a string, which is defined with backticks
Features of template strings
- Template strings can parse variables
- Template string can wrap
- Template strings can call functions
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>模板字符串</title>
</head>
<body>
</body>
<script>
let name = `尧子陌`;
console.log(name);
// 特点一：模板字符串可以解析变量
let str1 = `大家好，我的名字叫做${name}`;
console.log(str1);
// 特点二：模板字符串可以换行
let people = {
name: "尧子陌",
sex: "男",
age: 18
}
let str2 = `<div>
<span>${people.name}</span>
<span>${people.sex}</span>
<span>${people.age}</span>
</div>`
console.log(str2);
//特点三：模板字符串可以调用函数
function star() {
return '我是一颗星星'
}
let str3 = `${star()}`;
console.log(str3);
</script>
</html>
starsWith() and endsWith()
- starsWith: indicates whether the parameter string is at the head of the original string, and returns a boolean value.
- endsWith: indicates whether the parameter string is at the end of the original string, and returns a Boolean value
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>starsWith()与endsWith()</title>
</head>
<body>
</body>
<script>
let str = `hello ES6`;
console.log(str.startsWith('h'));
console.log(str.startsWith('hello'));
console.log(str.endsWith('ES6'));
</script>
</html>
repeat()
The repeat() method can repeat the original string n times and return a new string
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>repeat()</title>
</head>
<body>
</body>
<script>
console.log('hello '.repeat(2));
console.log('2020'.repeat(3));
</script>
</html>
Set data structure
ES6 provides a new data structure Set, similar to an array, but its member values are unique
Set itself is a constructor, used to generate data structure
Deduplication of Set data structure
Note: Use the Set data structure to achieve data deduplication
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Set()</title>
</head>
<body>
</body>
<script>
let s = new Set();
console.log(s);
console.log(s.size);
let s1 = new Set([2, 5, 10, 15, 20, 15, 30]);
let s2 = [...s1];
console.log(s2);
console.log(s1.size);
</script>
</html>
Instance method in Set data structure
- add(value): add a value and return the Set structure itself
- delete(value): delete a value, return a boolean value, indicating whether the deletion is successful
- has(value): returns a boolean value indicating whether the value is a member of the Set data structure
- clear(): Clear all members, no return value
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Set()中的实例方法</title>
</head>
<body>
</body>
<script>
let arr = new Set();
console.log(arr.add('a').add('b'));
console.log(arr.delete('b'));
console.log(arr.has('a'));
arr.clear();
console.log(arr.size);
</script>
</html>
Traverse the Set data structure
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>遍历Set数据结构</title>
</head>
<body>
</body>
<script>
let s = new Set(['a', 'b', 'c']);
s.forEach(item => console.log(item));
</script>
</html>
