Basic //HTML5/CSS3/ES6 new features
1 HTML5
What are the new features of html5? What elements were removed? How to deal with html5 compatibility issues? How to distinguish between html and html5?
1. New elements:
content elements: article, header, footer, section, nav, aside
Form elements: time, number, date, url, search, calendar
Multimedia: video, audio
Control elements: websockt, webwork
painting: canvas
storage: localStorage, sessionStorage
2. Remove the element
big font basefont s tt u frame iframe
3. Deal with compatibility issues
Through the document.createElement method, let the browser support HTML5 new tags
4, html5 tags have stronger semantics
2 CSS3
CSS3 new features:
1. Selector
2. Box model
3. Background and border
① Background: background, Gradients gradient
② Border: border-radius rounded corners, box-shadow box shadow, border-image border image
4. Text effects
5. 2D/3D conversion
(translate move, rotate rotation, scale zoom, skew tilt, matrix merge)
six, transition
seven, animation
(@keyframes, animation, animation-name, animation-duration...)
eight, multi-column layout
(column- count, column-gap, column-rule-style...)
Nine, user interface resize, box-sizing, outline-offset
3 ES6
ES6 new features:
1. let const
2. Deconstruction assignment
3. Symbol-data type, representing a unique value, used to define the unique attribute name of the object
4. Map, Set
5. Class
6. Arrow function
7. Promise object
3.1 The difference between var, let, const
Variables defined by var can be repeatedly declared and modified. If it is not initialized, it will output undefined
. Variables defined by let cannot be modified. It is a block-level scope. After the let is used inside the function, it has no effect on the outside of the function.
const defined constants, cannot be modified, and must be initialization
3.2 Destructuring assignment
function personInfo({
name, age, address, gender}) {
console.log(name, age, address, gender)
}
personInfo({
gender: 'man', address: 'changsha', name: 'william', age: 18})
let a=1, b=2;
[b, a] = [a, b]
console.log(a, b)
function saveInfo({
name= 'william', age= 18, address= 'changsha', gender= 'man'} = {
}) {
console.log(name, age, address, gender)
}
saveInfo()
3.3 The difference between forEach, for in and for of
forEach is used to traverse the array.
for in is used to traverse objects.
for of is used to traverse arrays and objects.
for in —— The key value of the object. Equivalent to Object.keys()
for of-the value of the object. Equivalent to Object.values()
3.4 What should I pay attention to when using arrow functions?
1. An arrow function is used, and this points to the parent;
2. Aguments object cannot be used;
3. Constructor cannot be used, that is, the new command cannot be used, otherwise an error will occur;
4. Cannot be used as a Generator function
3.5 The difference between arrow functions and ordinary functions
① The arrow function is an anonymous function and will be released after use.
② The arrow function is not a constructor, and it has no prototype and cannot be new.
③ The this point of the ordinary function is dynamically variable. The this point of the arrow function is determined when it is declared. [Generally it is global, it points to the upper level after being included by ordinary functions]
④ The this point of ordinary functions is not only related to the source of the call, but can also be changed through apply, call, and bind. Arrow functions cannot be changed
3.6 Under what circumstances can't use arrow functions?
① The method of defining the class
(objects cannot constitute a separate scope)
② Binding the dynamic this
// button class=“btn”>click me/button>
// Window{…}
③ The code is complicated
3.7 The difference between Set and Get
Set is used for data reorganization
Get is used for data storage
3.8 Handwriting a promise
var promise = new Promise（（resolve，reject）=> {
if（操作成功）{
resolve（value）
} else {
reject（error）
}
})
promise.then（function（value）{
// success
}，function（value）{
// faluire
}