首页 > 编程知识 正文

es6面试会问些什么,es6特性面试

时间:2023-05-03 08:59:14 阅读:236143 作者:3894

    首先我们来看一下ES是什么?全称为ECMAScript,是JavaScript语言的核心,它规定了js的组成部分:语法、类型、语句、关键字、保留字、操作符、对象。下面直奔两者不同:

1. 系统库的引用

    ES5中的引用需要先使用require导入React包,成为对象,再去进行真正引用

//ES5var React = require("react");var { Component, PropTypes} = React; //引用React抽象组件var ReactNative = require("react-native");var { Image, Text,} = ReactNative; //引用具体的React Native组件

    在ES6里,可以使用import方法来直接实现系统库引用,不需要额外制作一个类库对象

//ES6import React, { Component, PropTypes,} from 'react';import { Image, Text} from 'react-native' 2. 导出及引用单个类

    ES5中,要导出一个类给别的模块使用,一般通过module.exports来实现,引用时,依然通过require方法来获取。

//ES5导出var MyComponent = React.createClass({ ...});module.exports = MyComponent;//ES5导入var MyComponent = require('./MyComponent');

    ES6中,使用export default实现同样的功能,但要使用import方法来实现导入。

//ES6导出(一般都继承于Component类)export default class MyComponent extends Component{ ...}//ES6导入import MyComponent from './MyComponent';

    注意:ES5和ES6的导入导出方法是成对出现的,不可以混用。

3. 定义组件

    ES5中,组件类的定义通过React.createClass实现。

    注意:ES5中React.createClass后面是需要小括号的,且结尾必须有分号。

//ES5var Photo = React.createClass({ render: function() { return ( <Image source={this.props.source} /> ); },});

    在ES6里,让组件类去继承React.Component类就可以了。

    注意:这里结尾时不会出现小括号,也不需要添加分号。

//ES6class Photo extends React.Component { render() { return ( <Image source={this.props.source} /> ); }} 4. 给组件定义方法

    从上面的例子可以看到,给组件定义方法不再用 名字:function()的写法,而是直接用 名字(),在方法的最后也不能有逗号了。

//ES5 var Photo = React.createClass({ componentWillMount: function(){ }, render: function() { return ( <Image source={this.props.source} /> ); },}); //ES6class Photo extends React.Component { componentWillMount() { } render() { return ( <Image source={this.props.source} /> ); }} 5. 初始化State

    ES5中,初始化state使用getInitialState

//ES5 var Video = React.createClass({ getInitialState: function() { return { loopsRemaining: this.props.maxLoops, }; },})

ES6中存在两种写法
第一种,直接构造state函数

class Video extends React.Component { state = { loopsRemaining: this.props.maxLoops, }}

第二种,相当于OC中的方法重写,重写constructor方法

class Video extends React.Component { constructor(props){ super(props); this.state = { loopsRemaining: this.props.maxLoops, }; }} 6. ES6中的新特性 ES6中的let命令,声明变量,用法和var差不多,但是let是为JavaScript新增了块级作用域,ES5中是没有块级作用域的,并且var有变量提升的概念,但是在let中,使用的变量一定要进行声明;ES6中变量的结构赋值,包括对象解构和数组解构以及混合解构,比如:var [a,b,c] = [0,1,2];ES6中的函数定义也不再使用关键字function,而是利用了箭头函数=>来进行定义;ES6中可以设置默认函数参数,如function A(x,y=9){};ES6中新增了Set集合和Map集合;ES6新增了一个基本数据类型Symbol;……

 

目前先总结这么多,其他小伙伴也可以补充哦,大家一起学习、进步!

 

版权声明:该文观点仅代表作者本人。处理文章:请发送邮件至 三1五14八八95#扣扣.com 举报,一经查实,本站将立刻删除。