ES5/ES6新增内容及其使用

    • ES5

  • 严格模式

“use strict”
//严格模式下,必须先声明变量,再进行赋值
//若直接使用函数名调用函数,函数体中的this为undefined
  • forEach

//遍历数组,不改变原数据
var arr=[1,2,3,4,5]
arr.forEach(function(e){
    console.log(e)
})
  • map

//数组映射,按照一定的规则把数组的每个元素修改后,形成新的数组
let names=['mike','lucy','lily','titty']
//把数组中的元素都变成大写
let array=names.map(value=>value.toUpperCase())
console.log(array)
  • filter

//过滤数组中的每个元素,把符合要求的过滤出来,组成新的数组
let nums=[11,22,33,44,55,66]
//找出所有奇数
let odds=nums.filter(v=>v%2==1)
console.log(odds)
  • reduce

//数组合并,数组元素整合,最终得到一个值
let nums=[11,22,33,44,55]
let sum=0
nums.forEach(v=>sum+=v)
//console.log(sum)
let a=nums.reduce((sum,v)=>sum+v,0)
console.log(a)
  • some

//判断数据中是否有一些满足条件,有即可,类似于逻辑运算符中的逻辑或 ||
let nums=[11,22,33,44]
//判断是否有小于30的数字
let a=nums.some(v=> v<30)
console.log(a?'有小于30的':'没有小于30的')
  • every

//每个元素都满足,类似于逻辑与 &&
let nums=[11,22,33,44]
//判断是否都小于30的数字
let a=nums.every(v=> v<30)
console.log(a?'都小于30的':'不都小于30的')

2.ES6

  • 模板字符串

//拼接字符串与变量,可换行
let name="wangmiaomiao"
let res=`hello ${name}!`
  • 块级作用域

//var声明的变量有声明提升,let/const没有声明提升,在变量定义前使用,会报错(暂存死区)

详见var、let、const有什么区别?

  • 解构赋值

//对象解构
const user={name:"xiaoming",age:17}
const {name,age}=user
console.log(`${name}:${age}`)

//数组解构
const arr=[1,2]
const [foo,bar]=arr
console.log(foo)

//复杂结构
const phone={
    name:'iphone15',
    price:9999,
    desc:{
        namker:'Apple',
        year:'2024.9',
    },
    tags:['最佳cpu','iOS系统','动态高刷']
}

//解构出所有的属性
const {name:pname,price,desc:{maker,year},tags:[t1,t2,t3]}=phone
console.log(pname,price,maker,year,t1,t2,t3)
  • 箭头函数

()=>{}
//函数表达式的简写,不需要通过function关键字创建函数,并可省略return
//箭头函数不会绑定自己的this,箭头函数中的this会继承当前上下文的this
//箭头函数不能作为构造函数使用
[1,2,3].map(x=>x+1)
//等同于↓
[1,2,3].map((function(x){
return x+1
}).bind(this))
  • 对象字面量

const name='wangmiaomiao'
const age=17
const user={name,age}
//相当于解构赋值的反向操作,用于重新组织一个Object
  • ...语法

//用于组装数组
const todos=['吃饭','睡觉','敲代码'];
[...todos,'喝咖啡']   //['吃饭', '睡觉', '敲代码', '喝咖啡']

//用于获取数组的部分项
const arr=['a','b','c'];
const [first,...rest]=arr;
rest; //['b','c']

//用于收集函数参数为数组
function direction(first,...rest){
console.log(rest)
}
direction('a','b','c')  //['b','c']

//替代apply
function foo(x,y,z){}
const args=[1,2,3]
//效果相同↓
foo,apply(null,args);
foo(...args);
  • Promise

//用于更优雅的处理异步请求
fetch('/api/todos')
.then(res=>res.json())
.then(data=>({data}))
.catch(err=>({err}))

//定义promise
const delay=(timeout)=>{
return new Promise(resolve=>{
setTimeout(resolve,timeout);
});
};
delay(1000).then(_=>{
console.log('executed')
})
  • 模块的 Import 和 Export

//import用于引入模块,export用于导出模块

//引入部分
import dva from 'dva';
import {connect} from 'dva';
import {Link,Route} from 'dva/router';

//引入全部并作为github对象
import * as github grom './services/github';

//默认导出
export default App
// 部分导出,需import {App} from './file';引入
export class App extend Component {};
  • Set集合

//存储任何类型的唯一值,去重
let a=[1,2,3,1]
let b = new Set(a); //数组a为可迭代对象,b此时为Set结构
    b = Array.from(b); //Set为可迭代对象,b此时为数组结构
        console.log(b);

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

长安梦我

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值