- 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没有声明提升,在变量定义前使用,会报错(暂存死区)
解构赋值
//对象解构
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);