导图社区 ES6新增语法
这是一篇关于ES6新增语法的思维导图,主要内容有flex布局、媒体查询、音视频标签、语义化标签、布局等。
编辑于2022-08-27 17:47:06 河南ES6新增
flex布局
布局原理
flex是flexible Box的缩写,意为"弹性布局",用来为盒装模型提供大量的灵活性,任何一个容器都可以指定为flex布局。
当我们为父盒子设为flex布局以后,子元素float、clear和vertical-align属性将失效
伸缩布局=弹性布局=伸缩盒布局=弹性盒布局=flex布局
总结:flex布局原理就是通过给父盒子添加flex属性,来控制子盒子的位置和排列方式
比较
传统布局
兼容性好
布局繁琐
局限性,不能再移动端很好的布局
flex布局
操作方便,布局极为简单,移动端应用很guangf
pc端浏览器支持情况较差
IE 11以下低版本不支持或仅部分支持
常见父项属性
----------------------------------------------------------------------------------------
flex-direction:设置主轴的方向
row:默认值从左到右
row-reverse:从右到左
column:从上到下
column-reverse:从上到下
justify-content:设置主轴上的子元素排列方式
flex-start:默认值从头开始,如果主轴是x轴,则从左到右
flex-end:从尾部开始排列
center:在轴距中对齐(如果主轴是x则水平居中)
space-around:平分剩余空间
*space-between:先两边贴边,再平分剩余空间
flex-wrap:设置子元素是否换行
align-content:设置侧轴上的子元素的排列方式(多行)
flex-start:默认值在侧轴的头部开始排列
flex-end:在侧轴的尾部开始排列
center:在侧轴中间显示
space-around:子项在侧轴平分剩余空间
space-between:子项在侧轴先分布在两头,再平分剩余空间
stretch:设置子项元素高度平分父元素高度
align-litems:设置侧轴上的子元素排列方式(单行)
flex-start:从上到下
flex-end:从下到上
center:挤在一起居中(垂直居中)
stretch:拉伸
flex-flow:复合属性,相当于同时设置了flex-direction和flex-wrap
注意:主轴和侧轴是会变化的,就看flex-direction设置谁为主轴,剩下的就是侧轴。而我们的子元素是跟着主轴来排列的。
媒体查询
媒体查询的结构: @media 媒体类型 and (媒体特性) { 条件满足时,渲染的css样式 }
媒体查询: 是css3新增的功能, 可以限制css样式渲染的条件, 当满足条件时渲染样式, 从而达到响应式布局效果
媒体类型: 此样式会在什么设备上生效 all / screen 媒体特性: 此样式渲染的条件, min-width / max-height
音视频标签
controls 属性设置播放控制器
autoplay 属性设置自动播放, 需要开启浏览器授权
loop 属性设置循环播放
<audio src="音乐.mp3" controls loop></audio>
<video src="视频.mp4" controls loop></video>
语义化标签
结构化标签: header, main, footer, nav, aside, hr
文本标签: p, h1-h6, strong, i, del
HTML语义化的好处是什么?
html语义化让页面的内容结构化,结构更清晰,便于对浏览器、搜索引擎解析;
即使在没有样式CSS情况下也以一种文档格式显示,并且是容易阅读的;
搜索引擎的爬虫也依赖于HTML标记来确定上下文和各个关键字的权重,利于SEO;
使阅读源代码的人对网站更容易将网站分块,便于阅读维护理解。
什么是SEO? 如何做SEO优化?
----------------------------------------------------------------------------------------
1、合理的title、description、keywords:搜索对着三项的权重逐个减小,title值强调重点即可;description把页面内容高度概括,不可过分堆砌关键词;keywords列举出重要关键词。
2、语义化的HTML代码,符合W3C规范:语义化代码让搜索引擎容易理解网页
3、重要内容HTML代码放在最前:搜索引擎抓取HTML顺序是从上到下,保证重要内容一定会被抓取
4、重要内容不要用js输出:爬虫不会执行js获取内容
5、少用iframe:搜索引擎不会抓取iframe中的内容
6、非装饰性图片必须加alt
7、提高网站速度:网站速度是搜索引擎排序的一个重要指标。
布局
响应式布局
概念: 在浏览器窗口尺寸变化时, 使一个网页在不同宽度的窗口上显示不同的排版样式和内容,使用场景: 一般用于PC端网页,实现原理: 使用媒体查询
浏览器适配
概念: 在浏览器窗口尺寸变化时, 使一个网页在不同宽度的窗口上显示相同的排版样式和内容,使用场景: 一般用于移动端网页,实现原理: 视口单位 vw / vh
浏览器兼容
概念: 在不同内核的浏览器上, 使一个网页在不同浏览器的上显示相同的排版样式和内容,使用场景: 在不同内核和不同版本浏览器上的兼容(兼容低版本浏览器),实现原理: 代码优化
Array
扩展运算符可以将数组或者对象转为用逗号分隔的参数序列
let ary = [1, 2, 3]; console.log(...ary) // 1,2,3
合并数组:ary.push(...ary2)
let ary3 = [...ary, ...ary2]
将类数组或可遍历对象转换为真正的数组,oDivs = [...oDivs]
可以接收第二个参数,作用类似于数组的map方法,用来对每个元素进行处理,将处理后的值放入返回的数组,let arr = Array.from(array, item => item * 2)
用于找出第一个符合条件的数组成员,如果没有找到返回undefined,myName.find((item, index) => item.id == 2)
用于找出第一个符合条件的数组成员的位置,如果没有找到返回,num.findIndex((v, i) => v > 5)
表示某个数组是否包含给定的值,返回布尔值,[1, 2, 3, 4, 5].includes(2)
Set数据结构
ES6提供了新的数据结构Set,它类似于数组,但是成员的值都是唯一的,没有重复的值,Set本身是一个构造函数,用来生成Set数据结构
const s = new Set()
add(value):添加某个值,返回Set结构本身
delete(value):删除某个值,返回一个布尔值,表示删除是否成功
has(value):返回一个布尔值,表示该值是否为Set的成员
clear():清除所有成员,没有返回值
数组去重:console.log([...new Set([1, 2, 3, 2, 2])]) // [1, 2, 3]
字符串去重:console.log([...new Set('aaabbc')].join(' ')) // a b c
什么时候用Set?数组或字符串去重时 不需要 通过下标访问的时候 只需要遍历时 为了使用Set提供的方法和属性的时候(add、 delete、 clear、 has、 forEach 、size等)
String
startsWith():表示参数字符串是否在原子符串的头部,返回布尔值
endsWith():表示参数字符串是否在原子符串的尾部,返回布尔值
str.startsWith('hello')
repeat方法表示将原子符串重复n次,返回一个新字符串,'x'.repeat(3)
类的创建与继承
ES6中把构造函数做了进一步封装和优化, 叫做 类 类是构造函数的变体, 它内部也是构造函数结构, 都用于创建对象 使用class关键字定义一个类
类的继承: 基于构造函数和原型的继承,但类的继承已经内部实现了原型继承, 所以使用类时,不必考虑原型, 使用extends实现类的继承 定义一个新的类Student, 继承People1, People1作为父类, Student为子类
class People1 { // 每一个类中都有一个构造器, 相当于构造函数 constructor(name, age){ this.name = name this.age = age } // age = 20 写这里是固定属性, 每一个对象的指都相同 eat(){ console.log(this.name+"是一个"+this.age+"岁的吃货") } } var lisi = new People1("李四", 30) lisi.eat()
class Student extends People1{ constructor(name, age, phone){ super(name, age); // super指的父类的构造函数, 调用后即可继承父类属性 this.phone = phone } } let xiaoming = new Student("小明",10,'120')
总结: 关于es5的构造函数和es6的类 1, 类是基于构造函数,是对构造函数的一个封装 2, 类可以像构造函数一样继承, 而且无需再考虑原型的继承 3, 一个类只能继承一次, 只能有一个父类, 但可以拥有多个子类
数组对象的遍历
forof还可以遍历字符串 for (const item of "abcd") { console.log(item) }
ES6中可以使用forof遍历数组 for (const item of arr) { console.log(item) }
ES6中可以使用forin遍历对象 for (const key in obj) { const value = obj[key]; console.log(key, value) }
参数默认值
ES6中使用 初始化形参 设置默认值 function add(a=0, b=0){ console.log( a + b ) }
js函数定义时有两个参数, 调用时就必须传入至少两个参数, 如果传入的实参少于形参的个数,为防止错误, 可以给形参设置默认值
ES6中通过形参...arr获取参数数组,function fn(first,...array){ }
箭头函数
()=>{ } const fn=()=>{ }
const num = (a, b) => a + b;
箭头函数不能绑定this关键字,箭头函数中的this,指向的是函数定义位置的上下文this
如果箭头函数只有一个参数, 可以省略小括号,如果箭头函数的函数体中只有一句return返回, return和{}可同时省略
总结: 箭头函数用法: 1, 在事件函数或计时器或异步回调函数中可以保留this上下文指向 2, 箭头函数在参数和返回值处,满足条件时,都可以简化 3, 在对象中有一个简化的函数写法
块级作用域
var 关键字定义变量有两个作用域 全局作用域 和 局部作用域 let 关键字定义变量有三个作用域 全局作用域, 局部作用域 和 块级作用域
全局变量: 在全局范围内定义的变量 局部变量: 在函数内部定义的变量 块级变量: 在语法块中定义的变量 比如循环,判断语法块
在循环中使用var定义变量,这个变量是全局变量,每次循环的count共享同一个作用域,所以下次循环的count把替换上次循环的count,循环之后,全局只有一个count
在循环中使用let定义变量,这个变量是块级变量,每次循环都会在一个新的块级作用域中定义一个独立块级变量number,循环结束后,就有5个块级变量number,他们的值各不相同,互补影响
总结: let和var的两点主要区别: 1, var 在同一作用域可以重复定义同一个变量, let不行 2, var 没有块级作用域, 在循环中定义的变量都是全局的, 会相互覆盖, let在循环中定义的变量都是独立的,互不影响
const定义常量
作用:声明常量,常量就是值(内存地址)不能变化的量
具有块级作用域
常量赋值后,值不能修改
解构赋值
ES6中允许从数组中提取值,按照对应位置,对变量赋值,对象也可以实现解构
按照一定模式,从数组中或对象中提取值,将提取出来的值赋值给另外的变量
注意: 由于对象中的数据没有顺序, 所有对象解构无需把所有字段都写上,可以按需定义变量读取对象中的某一个或几个字段即可, 但必须保证变量名和字段名相同
数组解构:let [a, b, c] = [1,2,3] 对象解构:let { name, age, sex } = {name: '善逸', age: 10, sex: '男'} 复制:let { name: myname } = obj
总结: 数组解构: var [count1,count2,...count3] = array 数组赋值1: array.push(...array2) 数组赋值2: array = [...array, ...array2, 5,6,7] 对象解构: var { age } = student 对象赋值: {...student, height:120}
模块化
模块化: 把一个整体的js文件或代码块通过功能性分割成多个js文件或代码块, 这样每一个js文件都称之为一个模块, 然后通过固定语法导入/导出把多个js文件联系到一起, 这种操作,我们称之为模块化
模块化语法
导出: export default data
导入: import data from "path"
html文件中使用script导入js算不算模块化?
答: 不算, 因为模块化有一个显著特点,是作用域隔离, 各个模块用于各自独立的作用, 互不干涉, 用script导入js相当于把所有js拼到一起了,共享了同一个作用域,这种不能称之为模块化
es6模块化一般用于vue框架或react框架中
await
es6新增了一个关键字 叫 async 用于放在函数function前,修饰函数
在函数前添加async标记可以使此函数变为异步函数
async异步函数的返回值总是一个promise对象,即使有返回值, 调用得到的也是promise
await关键字一般放在promise对象前边, 等待promise对象成功的结果,一旦成功, 无需调用then, 而是通过同步返回值的形式拿到promise中的异步结果(注意:await只能在async函数中使用)
await 的作用就是让异步回调结构改成同步返回值结构,依然能拿到数据, 好处是简化代码结构, 减少嵌套, 优化语法结构
promise
为什么ES6要有promise这个东西? promise就是为了解决 异步回调地域 问题而出现了,异步函数中的return是无效的
Promise 在es6中属于一个 类 要通过new创建promise对象使用,新建一个promise对象, 参数是一个同步函数, 同步函数的参数是成功和失败的回调函数,new Promise(function(resolve, reject){}(使用new创建promise对象这个操作是同步操作还是异步操作? 同步的)
使用promise对象调用函数then拿成功的数据, 调用catch拿失败的数据,promise无论何时,何地,多次调用then,总能拿到成功时的数据
注意: Promise对象的创建过程是同步的, then函数的调用是异步的,简单说peomise是异步的
总结:promise 是es6新增的一个类,主要用于解决项目开发中常见异步回掉地域问题,原理上是对回调函数的封装, 开发中经常用于多异步任务嵌套时和多异步任务并发时
js代码执行过程
js代码执行过程中,分为同步执行和异步执行的两种代码执行逻辑 同步执行: 代码总是从上向下依次执行,只有上一句执行完,才会执行下一句, 默认js是通过 异步执行: 特殊形况下,异步代码可以和其他代码同时执行,相互不影响,不严格按照顺序执行, 常见的异步执行逻辑有 计时器, js事件, ajax, promise调用 异步代码的标志性特点是: 回调函数 结论: 一段逻辑代码中,总是先执行同步代码, 再执行异步代码
Promise有一个类函数all, 可以把多个promise对象合并成一个,当合并前的所有promise对象都调用resolve后, 才会调用合并后的then
all合并后的then回调函数参数是一个数组, 数组中按照合并顺序依次获取每一个promise对象的成功数据
类函数: 就是使用类名调用的函数 如 all(),实例函数: 就是使用对象调用的函数 如 then()