react + redux Router + node实践总结(ES6+基础知识）

最新推荐文章于 2019-05-22 08:14:33 发布

西米幺幺

最新推荐文章于 2019-05-22 08:14:33 发布

阅读量296

点赞数

分类专栏： react 文章标签： react

react 专栏收录该内容

20 篇文章 0 订阅

订阅专栏

react开发环境

1. 使用create-react-app脚手架创建react项目

// 安装create-react-app
npm install -g create-react-app
// 创建项目
create-react-app react_jobs
// 安装第三方库redux
npm install redux --save
// 弹出配置文件，可以自定义配置webpack
npm run eject
// 扩展package.json里的script字段， 扩展npm run命令

ES6常用语法

ES6是什么？

它是一套新的Javascript语法标准，2015年6月正式发布，可使用babel语法转换器，转换后支持低端浏览器；流行的库基本都基于ES6构建，React默认使用ES6新语法开发

ES6里都有什么

块级作用域(let、const)、字符串(返引号“：模板字符串)、函数（箭头函数，函数允许有默认值（param=’val’)，展开符(…：批量传递参数）

// 展开符的使用
const hello = （val1, val2) {
    console.log(val1, val2)
}
let arr = ['lmh', 'zf']
// 传统写法
// hello.apply(null, arr)
// ES6写法
hello(...arr)

对象扩展
1. Object.keys、values、entries
2. 对象方法简写，计算属性
3. 展开运算符（不是ES6标准，但是babel也支持）
  - 类、模块化等

const obj = {name: 'lmh', course: 'zf'};
// ["name", "course"]
console.log(Object.keys(obj))
// ["lmh", "zf"]
console.log(Object.values(obj))
// [["name", "lmh"], ["course", "zf"]]
console.log(Object.entries(obj))
// {name: 'imooc', imooc: 'hello', hello: hello1() {imooc: 'hello', name: 'immoc'}
const name = 'imooc'
const obj = {
    name，
    [name]: 'hello',
    hello: function() {},
    hello() {}
}
console.log(obj)
// 对象连接
const obj = {name: 'immoc', course: 'React'}
const obj2 = {type: 'IT', name: 'lmh'}
// {course: 'React', date: '2018', name: 'lmh', type: 'IT'}
// 注意，合并后会以key值进行重新排序，顺序会发生变化
console.log({...obj, ...obj2, date: '2018'})

解构赋值
1. 数组解构

const arr = ['hello', 'imooc']
let [arg1, arg2] = arr
// hello|imooc
console.log(arg1,'|', arg2)

2. 对象解构

const obj = {name: 'imooc', course: 'react'}
const {course, name} = obj
// imooc|react
console.log(name, '|', course)

类class的语法糖
1. 是prototype的语法糖
2. Extends继承
3. Constructor构造函数

class MyApp {
    constructor() {
        this.name = 'imooc'
    ｝
    sayHello() {
        console.log(`hello ${this.name} !`)
    }
}
const app = new MyApp()
// hello imooc!
app.sayHello()

ES6中新出现的数据结构
1. Set, 元素不可重合
2. Map
3. Symbol
模块化：ES6中自带了模块化机制，告别sea.js和require.js
1. Import, import{}
2. Export、Export default
3. Node现在还不支持，还需要用require来加载文件

// module.js文件
export const name = 'imooc123'
export function sayHello() {
    console.log('immoc')
}
export default function test() {
    console.log('hello')
}
// module1.js文件
// 引入具体的内容
import {name, sayHello} from './module.js'
// imooc123
console.log(name)
// immoc
sayHello()
// 引入默认的导出内容（即export default)
import test from './module.js'
// 引入所有的内容
import * as mod1 from './module.js'
// 包含导出的name, sayHello以及默认导出的test
console.log(mod1)

还有一些特性，虽然不在ES6的范围，但是也被babel所支持，普遍被大家接受和使用(需要安装插件）
1. 对象扩展符，函数绑定
  Babel-plugin-transform-object-rest-spread插件，支持扩展符号
2. 装饰器
3. Async await
4. Promise
5. 迭代器和生成器
6. 代理Proxy
常用数组函数

// 遍历数组：1 2 3
[1,2,3].forEach(function(value, index) {
    console.log(value);
});
// 映射新数组：[2, 4, 6]
arr = [1,2,3].map(v => v*2);
// 所有元素是否通过测试: false
[1,2,3,4].every(v => v>3);
// 是否有元素通过测试：true
[1,2,3,4].some(v => v>3);
// 过滤数组：[4, 5]
[1,2,3,4,5].filter(v => v>3);
// 查找索引: 1
[1,2,3].indexOf(2);
// 连接数组：[1, 2, 3, 3, 4, 5]
arr1 = [1,2,3];
arr2 = [3,4,5];
[...arr1, ...arr2];
// 数组去重: [1, 2, 3,4]
arr = [1,2,3,4,3,2,1];
[...new Set(arr)];
// 去除某一项
var a = {name: 'lmh', age: 23, address: 'beijing'}
var {address, ...params} = a
console.log(params)      // {name: 'lmh', age: 23}