拓展一(H5、C3、es6、es7的新特性)

H5的新特性

1.语义化标签

有利于SEO,有助于爬虫抓取更多的有效信息,爬虫是依赖于标签来确定上下文和各个关键字的权重。

语义化的HTML在没有CSS的情况下也能呈现较好的内容结构与代码结构

方便其他设备的解析

便于团队开发和维护

2.表单新特性

3.多媒体视频(video)和音频(audio)

4.web存储

sessionstorage:关闭浏览器清空数据,储存大小约5M。

localstorage:永久生效,存储大小20M,多窗口下都可以使用

都只能储存字符串

5.web worker★★★★★★★

给Javascript模拟多线程环境的一个新特性~

C3的新特性

1.选择器:属性选择器E[attr],伪类选择器E:nth-child(n),空伪类E:empty ,排除伪类E:not(selector)

2.颜色:新增了RGBA、HSLA模式

3.文本:为文本设置阴影增强文本的表现能力,通过 text-shadow,可分别设置偏移量、模糊度、颜色(可设透明度)。

4.盒模型:box-sizing: border-box;

5.边框:圆角border-radius,阴影box-shadow

6.背景:

通过 background-size 设置背景图片的尺寸。

通过 background-origin 可以设置背景图片定位(background-position)的参照原点。

通过background-clip,可以设置对背景区域进行裁切,即改变背景区域的大小。

7.渐变:线性渐变 linear-gradient,径向渐变radial-gradient

8.字体图标

9.伸缩盒子:调整主轴对齐justify-content,调整侧轴对齐align-items,伸缩分配flex,正序方式排序order

10.2D转换

translate 设置元素的位置(x/y坐标)

scale 设置元素的缩放比例(x/y两个方向)

rotate 设置元素旋转(正值为顺时针,负值为逆时针)

transform-origin 设置转换元素的原点

11.3D转换:

透视(perspective)值为1000px~1200px

将2D元素转换为3D立体(给父元素设置)transform-style: perserve-3d;

设置元素背面是否可见 backface-visibility: hidden;

12.动画:

定义关键帧 @keyframes

通过百分编写帧

在各帧中分别定义各属性

通过animation将动画应用于相应元素

ES6新特性

1.变量声明const和let

let 和const都是块级作用域(var没有会计作用域),并且都不会有变量提升(var有变量提升)

const声明的变量都会被认为是常量,不能被修改,但如果被const修饰的是对象,对象中的属性值可以被修改

let在同一个块中不能定义两个相同名称的变量(var可以定义多个)

2.解构赋值

//对象

var people = { name: 'lux', age: 20}

const {name, age} = people

//数组

var arr = [1,2,3];const {one, , three} = arr; 

3.模板字符串,支持换行

用途:基本的字符串格式化。将表达式嵌入字符串中进行拼接。用${}来界定

const name = 'lili'console.log(`hello ${name}`) //hello lili

4.函数

函数扩展,箭头函数:

[1,2,3].map(x => x + 1)

箭头函数中的this :

functionfn(){

    console.log(this);  //{a:'123'}    var arr = [1, 2, 3];

    //es5    arr.map(function(num){

        console.log(this)  //window        return num + 1;

    })


    //es6 箭头函数    arr.map(num=> {

        console.log(this) //{a:'123'}        return num + 1;

    })

}

fn.call({a:'123'})

函数默认参数:

//es5functionaction(num){

    num = num || 200    return num

}//es6functionaction(num =200){

    console.log(num)

}

5.拓展的对象功能

键值对简写:

//es5functionpeople(name, age){

    return {

        name: name,

        age: age

    };

}//es6functionpeople(name, age){

    return {

        name,

        age

    };

}//方法同样适用//es5const people = {

    name: 'lux',

    getName: function(){

        console.log(this.name)

    }

}//es6const people = {

    name: 'lux',

    getName () {

        console.log(this.name)

    }

}

6.浅拷贝Object.assign() 

7.Spread Operator 展开运算符

8.Object.keys()方法

9.import 和 export用于js代码的模块化

10.Promise(异步)

11.Generators

ES7

1.数组的includes方法

['a','b'].inclueds('a')//true

2.求幂运算符

  3**2//9  3的2次方

3.Object.entries()

Object.entries({one:1,two:2})//[['one',1],['two',2]]

4.Object.values()

Object.values({a:'a1',b:'b1'})  //["a1","b1"]

你可能感兴趣的:(拓展一(H5、C3、es6、es7的新特性))