历史
ECMAScript是96年网景公司把javascript提交给欧洲计算器制作联合会
版本
97年 1.0
98年2.0
99nian3.0(之前学的js版本)
2000年4.0被和谐
09年5.0(很多新特性没有学)
15年es6正式确定
前端框架与语言
js
jquery
angular
react
vue
typescript趋势
let与Const
let局部变量声明
1.只能在一对{}里面有用
2.不能重复声明
3.不会变量提升
const常亮声明
1.生命必须赋值
2.赋值不能修改(简单数据类型)
3.建议变量名 大小
解构
对象
基本
let(name,age) = (name:"mumu",age:18)
let(name:foo) = (name:"mumu")
foo值就是mumu
剩余值
...rest
默认值
let{name,age,weight=120} = {name:"mumu",age:18}
没有顺序
变量名必须和对象的键名一致
js数据类型
int
Boolean
Number
Sring
null
undefined
Array
Object
数组
基础
let[a,b] = [12,18];
//a 12
//b 18
可以嵌套
let [a,b,[c,d,e]] = [1,2,[3,4,5]]
//c3 d4 e5
可以忽略
let [a,b] = [1,2,3];
//a 1 ,b 3
剩余值
let [a,...rest] = [1,2,3,4,5];
rest[2,3,4,5]
字符串
let[a,b,c,d] = "中国加油";
//a 中
//b 国
默认值
let [a,b=20] = [30];
//b 20
如果解析出来的值是 undefined 那么就会用默认值代替
字符串
空白
trim() 去掉空白
trimLeft() 去掉左侧空白
trimRight() 去掉右侧空白
检测包含
includes(s) 布尔值解构 查找字符串中是否包含s字符
startsWitj(s) 是否以s字符串开头
endsWitj(s) 是否以s字符串结尾
重复
repeat() 重复字符串n次
填充
padStart(len,s) 以s字符补齐长度开始
padEnd(len,s) 以s字符补齐长度结束
模板
1.符号``
2.可以在字符串模板里任意换行
3.单双引号特殊符号不需要转义
4.添加变量名 ${变量名}
var name = "mm";
var age = 19;
var str = `大家好,我的名字是${name}今年我${age}岁了`
数字
Number.isInteger 是否是整数
Number.isNaN() 是否是not a Number
Number.isFinite 是否是无穷
**运算符号
2**3 == 2x2x2
Number.parseInt
Number.parseFloat
转换为整数浮点数
迭代数组
迭代方法
forEach()遍历数组
map()返回一个Array
通过原来的数组映射出新的数据
filter()返回一个Array
如果遍历时返回的值为true,则最中返回时保留该元素
如果遍历时返回的值为false,则最中返回过滤该元素
reduce(function(a,b){}) 返回一个Any
a参数是上一次遍历时的结果,b参数是当前遍历元素
some()返回一个boll
如果遍历的值有一个返回为true,最终返回结果是true
如果遍历的值有一个返回为false,最终返回结果是false
every()返回一个boll
如果遍历的值有一个返回为false,最终返回结果是false
如果遍历的值有一个返回为true,最终返回结果是true
查找
find() 查找数组中符合条件的元素
findIndex()查找数组中符合条件的元素的下标
flat(n)扁平化数组 n 是扁平的层级
includes(el)查找数组是否包含el元素
fill(value,start,end)
填充数组value 填充值,start填充开始位置,end填充的结束位置
copyWithin(start,start,end)
从数组中拷贝内容替换
rsart 替换开始的位置 start拷贝开始,end拷贝结束
函数
箭头函数
函数的简写
特点
1.=> 左边是函数的参数
2. => 右边是函数的执行语句,也是返回值(语句只有一条)
arr.forEach(item=>console.log(item))
arr.map(item*2)
3. => 如果参数不受一个,那么参数要用()包裹
arr.reduce((a,b)=>a+b)
4. => 执行语句不止一条,还有返回值要用return 如果返回值是对象,要用()包裹
arr.map(item=>({ppic:item}))
5.=> 执行语句不止一条,要用{}包裹
6.=> 箭头函数的this指向当前的执行环境
默认参数
function add(a=1,b=1){
alert(a+b);
}
add(4,5);
add();
不定参数
function add(...args){
//args就是函数参数的数组列表
}
对象
1.对象的简写(变量名和对象的键一致的时候)
2.对象属性的表达式[ ]
3.对象的拷贝合并 Object.assign()
4.对象扩展
{...a,...b}
复制与合并对象
map
特点
1.有顺序
2.键名可以是任意类型
3.size长度
初始化
var map= newMap([[key,val],[key2,val2]])
方法
set(k,v)设置
get(k) 获取
delete(k)删除
has(k) 检测是否有
属性
for of
for(let[k,v] of map){
//k 键名
//v 值
}
转数组
Array.fom{map}
展开合并
[...map1,...map2]
set
不重复的数组
初始化 new set([]}
方法
add()添加
has()检测
delete()删除
clear()清空
属性 size 长度
转数组
[...set]
Array.from(set)
遍历for of
for(let v of set){
console.log(v0;)
}
模块
1。导出export
1.基本 export{name,age,fun,Animal}
2.使用as export{Animal as An}
3.default默认 export default Animal;
4.先声明,在导出
class Ball{}
export default Ball;
2.导入import
1.基本 import{name,age,fun,Animal} from"./xx.js"
2.import {An} from “./xxx.js”
3.import 也可以使用as
import {Animal as An} from “./xxx.js”;
var a1 = new An();
3. import Animal from "./xxx.js"
类
定义:创造实例对象的一个模板
class 类名{}
class Animal{}
constructor(){}
构造函数
constructor(name,color){}
new Animal(“小乖乖”,"blue");
say(){}
一般方法
var d1 = new Animal():
d1.say()
静态方法
static toName(){}
Animal.toName()
静态属性
Static price=100;
Animal.price
继承
class 类名 extends 父类名{}
super()
class Dog extends Animal{
constructor(){
super();
}
}
getter setter
1. 成对出现
2. 不能够直接赋值 和设置已经有的属性
consturctor(age){
this.age = age;
}
get Age(){
return this.age;
}
d1.Age 调用大写的Age属性是会执行 get Age()这个函数返回的小写age的值
set Age(val){
this.age = val
}
当 d1.Age=15抵用 set Age 这个方法最终设置是小写age的值
Promise
承诺
定义:返回一个延期的承诺,用then 来接受结果
resolve解决(兑现)
reject拒绝
作用
1.按顺序执行异步调用
2.避免回调函数 多层嵌套
race 偶一个resolve就调用then
all等于所有结果都resolve才调用then方法
基本写法
new Promise ((resolve,reject)=>{
resovle(结果)
reject(原因)
})
.then(
res=>{//获取结果}
err=>{//捕捉错误}
.catch(err=>{捕捉错误})
)
race
Promise.race{[多个异步调用]}
.then(res=>{返回的是最快resolve结果})
all
Promise.all{[多个异步调用]}
.then(res=>{所有的resolve结果列表})
generator
生成器
定义
遇到yield会挂起 (暂停)
执行时候next( )再次执行
通常去做异步请求
1.function * say( ){
yield "1";
yield "2";
yield"3"
}
2. var it = say();
it.next()//{value:"1",done:false}
it.next()//{value:"2",done:false}
it.next()//{value:"3",done:false}
it.next()//{value:undefined,done:true}
async 异步
await 等待
异步编程
function say(){return new Promise}
async function doit(){
await say("初次见面",2000);
await say("我喜欢你",5000);
await say("你真可爱",3000);
}
say()
.then(res=>(return say()))
.then(res=>(return say()))
proxy
代理
1.目标对象
2.处理
子主题 1
3.let proxy = new Proxy(target,handel)
4.处理函数
set
get
has()
oewnkeys
apply
......
Reflect反射
对 对象进行一些操作,方便代理处理
常用
Reflect.ownKeys(obj)获得对象键的列表
Relext.ownKeys(obj,key,value)获得对象键的列表
Relect.get(obj,key)获得对象的值
Reflext.has(obj,key)检测是否有某个值