脚本宝典收集整理的这篇文章主要介绍了我用到的ES6,脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。
let和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全部内容,希望文章能够帮你解决我用到的ES6所遇到的问题。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。