我用到的ES6
栏目: JavaScript · 发布时间: 5年前
内容简介:概念: 先解构再赋值,先从一堆数据中找出自己需要的数据,然后将找到的数据赋值给事先定义好的变量最佳实践,对整个项目接口地址进行单独js文件管理
let和const
- webpack构建的项目,直接废弃var,直接使用let代替var
- for循环中使用let而不是var
- 变量声明之后就不会改变,请使用const
解构赋值
概念: 先解构再赋值,先从一堆数据中找出自己需要的数据,然后将找到的数据赋值给事先定义好的变量
// 对象的解构赋值 // 使用场景 // 1,等号右边是大json,等号左边是变量,这样可快速获取大json中数据,后续可进行push到数组等一系列操作 // 2,react在render中,直接对组件props或state进行解构赋值之后,在渲染页面直接使用该数据 const response = { foo: 'aaa', bar: 'bbb', result: 'hello world'} // 这个数据一般是ajax请求得到 let { foo, bar } = response // 拿请求数据中对本业务有用的数据 let result = [] result.push({ foo, bar }) console.log(foo) // aaa console.log(bar) // bbb console.log(result) // [ { foo: 'aaa', bar: 'bbb' } ] // 数组的解构赋值 /*解构: 从数组和对象中提取值,对变量进行赋值,如果解构不成功,直接undefined*/ let [a, b, c] = [1, 11, 12] console.log(a) // 1 console.log(b) // 11 console.log(c) // 12 let [d, e] = [1] console.log(e) // undefined let [head, ...tail] = [1, 2, 3, 4] console.log(head) // 1 console.log(tail) // [2, 3, 4] // 以下这种是不完全解构 let [f, g] = [1, 2, 3] console.log(f) // 1 console.log(g) // 2 // 解构的时候,可以设置默认值,这样就不会undefined let [h, i = 1212] = [1] console.log(h) console.log(i)
数组扩展
{ /* * 扩展运算符: 数组前面加..., 可直接把数组中内容提取出来 * */ console.log('-------------扩展运算符-------------') const array1 = [1, 2, 3] const array2 = [4, 5, 6] console.log(...array1) console.log(1, ...[2,3,4], 5) function add(a, b) { return a + b } console.log(add(...array1)) console.log('返回值是数组的长度: ' + array1.push(...array2)) console.log(array1) console.log('ES6写法,求数据中最大值: ' + Math.max(...[1,2,3])) // 3 const copyArray = [...array2] console.log(copyArray instanceof Array) console.log(copyArray) console.log([...'hello world']) // 将字符串转换成数组 } { /* * Array.from(): 将类似数组对象转换成数组,比如 document.querySelectorAll('p')获取到所有p标签集合就是类似数组对象 * * */ console.log('------------Array.from()-------------') const likeArray = { '0': 'a', '1': 'b', '2': 'c', 'length': 3, 'name': 'wujiedong' } const array = Array.from(likeArray) console.log(array) /*const p = document.querySelectorAll('p') Array.from(p).filter(item => { return item.textContent.length > 100 })*/ } { /* * Array.of(): 将一组值转换成数组,它直接替代了 new Array()和Array() * */ console.log('------------Array.of()-------------') console.log(Array.of('北京', '上海', '广州')) } { /* * find():参数传递一个function,查找第一个符合条件的数组元素,返回该元素的值 * findIndex():参数传递一个function,查找第一个符合条件的数组元素,返回该元素在数组中位置 * */ console.log('------------find()和findIndex()------------') const array = [1, 22, 33, 44, 55, 56] const result = array.find((item, index, array) => { /*(当前值,当前位置,原数组)*/ return item > 23 }) console.log(result) const index = array.findIndex((item, index) => { if (item > 23) { return index } }) console.log(index) } { /* * 数组中是否包含某个元素 * Array.includes(参数1, 参数2) 参数1: 查询的参数 参数2: 查询位置,如果是负数,表示倒数的位置 * */ console.log('------------includes()------------') const array = [1, 22, 33, 44, 55, 56] console.log(array.includes(1)) console.log(array.includes(1, 0)) console.log(array.includes(1, 2)) } { /* * 数组实例的 entries(),keys() 和 values() * entries: key-value的遍历 * keys: key的遍历 * values: value的遍历 * */ console.log('------------entries(),keys() 和 values()------------') for (let [index, elem] of ['a', 'b'].entries()) { console.log(index, elem); } }
Module语法
- export: 导出 接口 ,使用{}将变量包裹起来,对外可以让其他js使用,import { 名字一致 } from 'js路径'
- export default: 导出 接口 ,对外可以让其他js使用,import 名字随意起 from 'js路径'
- import: 导入,需要使用到其他js文件
/* 写法1: 先单独定义,然后一次性export,导出需要加上{} let name = 'wujiedong' const getName = function () { console.log('getName') } export { name, getName }*/ /* * 写法2: 每写一个变量就进行一次导出 * */ export const name = 'wujiedong' export const getName = () => { console.log('getName') } /* * 上述2种方式的导出,在import导入的时候,如果要使用,需要指定导入名字,比如 export中name,那在import的时候需指定name一致,而且必须加上{} * */ /*export default * 导出的时候不指定名字,这样如果import需要使用了,直接 import xxx from 'js路径' , xxx可随意定义名字,不需要加{} * */ export default function foo() { console.log('foo'); } export default { name: '中国', setName: function (name) { this.name = name }, getName: function () { return this.name }, doubleName: function () { console.log(this) const result = () => this.name + '====' + this.name return result() // 这里可以正常输出 } /*sayHello: () => { console.log(this) undefined }*/ } /* 这种方式的导出是错误,它导出的不是接口,是一个数值 var i = 1 export i // 报错 function f() {} export f; // 正确 export function f() {}; // 正确 function f() {} export {f}; */
最佳实践,对整个项目接口地址进行单独js文件管理
// config.js单独文件维护 // import { constants } from 'config.js路径'即可使用接口地址 // 单独将serverAddress服务器地址抽取出来,生产和开发一般都是2个不同服务器 const serverAddress = 'http://10.12.3.80:8080' // jinfeng // const serverAddress = 'http://20.78.14.88:8888' // qinghai export const constants = { searchTimeDateApi: serverAddress + '/qh_plat/met_plot/wea_fore/timebar', picdzApi: serverAddress + '/qh_plat/met_plot/wea_fore/jsondata', searchSelectCjApi: serverAddress + '/qh_plat/met_plot/wea_fore/config?source=qh', weatherApi: serverAddress + '/qh_plat/met_stations/wea_std/stations', weatherDetailApi: serverAddress + '/qh_plat/met_stations/wea_std/forecast', }
以上所述就是小编给大家介绍的《我用到的ES6》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!
猜你喜欢:本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。