ES6(持续更新)
模板字符串 可以换行定义 , 可以解析变量 , 空格回车会输出出来 eg : ‘‘我是${a}我’’
var : 有变量提升 , 可以重复定义 后定义的会覆盖前面定义的内容
let : 声明变量不能被定义过 , 变量不能被重复定义 , 没有变量提升
const : 声明要又初始值(声明变量必须赋值) , 没有变量提升, 定义后不重新赋值 但是可以修改里面的属性 一般声明的变量用大写
解构赋值 : 可以同时给多个变量赋值
eg : let [a,b,c] = ['张三','王五','李四'];
console.log(a) //张三
console.log(b) //王五
console.log(c) //李四
不使用第三个变量交换两个变量的值
eg : let [a,b]=[10,99];
[a,b]=[b,a];
函数可以使用解构赋值的方式返回值 同时给多个变量赋值
eg : function aa(){
return [11,22,33,44];
}
var [a,b,c,d]=[11,22,33,44]
console.log(c) //33
console.log(a) //11
不需要注意顺序
eg : function aa({name="张",age}){
console.log('我的名字是'+name)
console.log('我的年龄是'+age)
}
aa({age:"14",name:"李"})
箭头函数 : this指向 由上下文决定 , 指向他的父元素 (箭头函数的this指向在定义的时候继承最外层第一个普通函数的this)
普通函数的this 一般指向它的直接调用者，在默认情况下，this指的是window
var a(函数名) = (name)(参数) =>console.log()(函数里面的内容);
代码体如果是单行的情况下 可以省略 return 关键字,同时也可以省略代码体的{}
eg : 原函数 : function a (name){
return name+2
}
箭头函数 : var a = (name) => name+2;
var b = a(18)
console.log(b)
有参数的,有返回值的,多行代码体的
eg : 原函数: function a(name){
name +1;
name *2;
return name
}
箭头函数 : var a = (name) =>{
name +=1;
name *=2;
return name
}
如果返回的是对象的必须加 ()
eg : var a = () => ({name:"张三"})
function cc(){
"use strict" //开启严格模式
}
数组 : 复制填充方法
arr.fill(value,start,end) 向一个数组中插入全部或部分的值
第一个参数 用来插入或者是替换的值
第二个参数 开始填充的位置 可选
第三个参数 结束索引的位置 可选 如果有的话不包括end索引
eg : zeroes.fill(5);
console.log(zeroes); // [5, 5, 5, 5, 5]
zeroes.fill(6, 3);
console.log(zeroes); // [0, 0, 0, 6, 6]
zeroes.fill(0);
zeroes.fill(7, 1, 3);
console.log(zeroes); // [0, 7, 7, 0, 0];
新增的数组方法 : indexof() 查询数组或字符串中有没有指定的值,有的话返回第一个值的索引 , 没找到的话返回-1
find(回调函数) 查询指定的数组或字符串指定的值,符合条件的话,会返回这个值 , 返回第一个值后会停止查找
reduce((priceValue,n)=>{priceValue+n},0) 汇总计算 默认值是0 数组里有几个值执行几次返回
var arr [1,2,3,4]
第一次:priceValue: 0 n:1
第二次:priceValue: 1 n:2
第三次:priceValue: 3 n:3
第四次:priceValue: 6 n:4
结果为10
filter(回调函数) 会把所有符合条件的值放到一个数组中返回出来
some(回调函数) 有一个满足条件就会返回true , 都不满足返回false 如果第一个满足会有短路效果 会停止循环不继续查找
every(回调函数) 必须全部满足条件才会返回true , 有一个不满足就返回false ,也会出现短路效果
some(function(value,index,arr){ every(function(value,index,arr){
参数1 : 数组里面的每个元素 参数1 : 数组里面的每个元素
参数2 : 每个元素对应的索引 参数2 : 每个元素对应的索引
参数3 : 原数组 参数3 : 原数组
}) })
遍历数组的方式 :
1 . arr.forEach(function(value,index,arr){
参数1 : 数组里面的每个元素
参数2 : 每个元素对应的索引
参数3 : 原数组
})
2 . for(let i=0;iitem*2)
console.log(newArr) //(2,4,6,8,10)
合并 Object.assign( 合并的对象 ) 合 并到第一个对象
eg : var aa = {name:"张三"}
var bb = {age:"18",sex:"男"}
Object.assign(aa,bb)
console.log(aa) //{name:"张三",age:"18",sex:"男"}
深拷贝 : 吧里面的内容一个一个复制出来开一个内存放进去,地址不一样,互不影响
var arr1=[1,2,3]
var arr2=[]
for(let i in arr1){
arr2[i]=arr1[i]
}
arr1[0]=‘abc’
console.log(arr2) //[1,2,3]
console.log(arr1) //[‘abc’,2,3]
新增运算符(深拷贝) ( ... )
var arr1=[1,2,3]
var arr2=[...arr1]
arr1[0]='aa'
console.log(arr2) //[1,2,3]
console.log(arr1) //['aa',2,3]
不会拷贝原型里面的东西
function aa(name){
this.name=name
aa.prototype.age=17
}
function bb(name){
this.name=name
}
var a=new aa('张三')
var b={...a}
b.name='李四'
console.log(a) //name:'张三'
console.log(b) //name:'李四'
b.__proto__{...aa.prototype}
b.age=99
console.log(b.age) // 99
console.log(a.age) // 15
浅拷贝 : 数组和对象直接等号赋值的通常是浅拷贝 一个发生变化,另外一个也会跟着变,他只是指向另外一个地址
var obj1={‘name’:‘张三’}
var obj2=obj1
console.log(obj1) //张三 加上obj1.name='李四’后也变成 李四
consolelog(obj2) //张三 加上obj1.name='李四’后也变成 李四
obj1.name=‘李四’
console.log(obj2) //李四
set : 声明:var arr=new set([1,2,3]) 里面的不能有重复的 有去重效果 , 不能通过索引直接获得里面的值 , 他的键值对相同
arr.add(4) 添加元素
arr.size()获取数组长度
arr.delete(1) 删除元素
arr.has(1) 检测有没有 返回bool值
arr.clear() 清空
set拥有iterator属性所以可以使用for of 遍历
map方法 : 声明 var a=new Map([[‘name’,‘张’],[‘name’,‘张’]])(二维数组) 键值对可以不相同
添加 a.set(‘name’,‘李’)
删除 a.delete(‘name’) //根据键名删除
清空 a.clear()
Symbol : 是es6中新增的数据类型 他属性的名字是唯一的,独一无二的 , 不需要new(他是一个原始数据类型的值,不是对象) new的话会报错
一般用来定义属性和常量
基本数据类型(Number String Boolean undefined Null Symbol)
给对象添加独一无二的Symbol属性:
var a = {
[Symbol('run')]:function(){
console.log('111')
}
}
生成器函数:
function * gen(){
yield ‘’ 分割代码
}
let aa = gen()
aa.next()
只能通过调用next 来执行 调用一次执行一个yield
异步编程 纯回调函数
传参:next传入的参数会变成上一个yield的返回值
echarts : 使用来绘制图表的 eg : 柱状图 , 折线图 …
class : 声明类(语法糖) 没有变量提升
class aa{
//aa这个类一但被new实例化 , 就会第一时间调用 constructor方法
//constructor 构造方法 , 用来初始化值用
//constructor(构造函数)==function 里面的方法不用写function了
constructor(name,age){
this.name=name
this.age=age
console.log(name)
}
run(){
alert(‘111’)
}
}
//实例化
var b = new aa(‘zhangsan’,18)
console.log(b) // 先打印出来zhangsan 然后在打印 aa {name:‘zhangsan’,age:18}
//用extends来继承
class bb extends aa{
constructor(name,age){
//super 这个函数来重新定义父类里面构造函数的执行(注意要在构造函数里面使用)
super(name,age)
}
}
var b=new bb('王五',20)
console.log(b) //父类constructor里面的(name,age)都修改成 (王五 , 20)
Promise : 异步处理 处理结束后 : 调用resolve(成功) 或者 reject(失败)
//可读性好 便于维护
回调地狱 : 为了实现某些效果用到层层嵌套的回调函数 , 如果嵌套过多的话就会极大地影响可读性和逻辑,这种情况被称为回调地狱
//可以解决回调地狱
eg : function aa(){
return new Promise(function(resolve,reject){ //创建Promise
setTimeout(function(){
resolve("{'name':'张三','age':'18'}")
},1000)
})
}
aa().then(function(da){
console.log(da);
return aa()
})
.then(function(da){
console.log(da);
return aa()
})
d3.js : 绘制图表 eg : 柱状图 … 世界地图 …
reduce : 计算数组里面值的和
eg : var arr=[1,2,3,4]
var a=arr.reduce(function(a,b){
return a+b
},10)
console.log(a)
proxy : 对象代理
eg ; let test = { name: “小红” , age:19, sex:‘男’ };
//参数1 要被处理的对象 参数2 是怎么处理的
bb = new Proxy(test, {
//参数1 原对象 参数2 访问的属性名 bb.oo oo
//调用时用
get(target, key) {
for(let i in target){
target[i] = target[i]+"龙哥666"
}
return target //把 bb 对象放回到 bb.oo里面
}
});
bb.oo
console.log(bb)
set 可以做过滤
let test = { name: "小红" , age:19, sex:'男' };
//参数1 要被处理的对象 参数2 是怎么处理的
bb = new Proxy(test, {
//参数1 原对象 参数2 访问的属性名name 参数3传入的属性值 小
//赋值时用
set(target, key,value) {
var a = target[key].substring(0,1)
if(value == a){
console.log('ok思密达')
}else{
console.log('get out')
}
}
});
bb.name='小'
console.log(bb)