ES5/ES6新增内容及其使用

1. • 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);