变量的声明——var、let、const
1.传统的使用var来声明
var
在你使用这个的时候会造成一个全局的和局部的问题
而现在的单页面应用的框架中是非常避讳这种全局的变量的声明的 除非是万不得已的情况 不然就是被怼
2.这是现在都在使用的一个变量的声明方式——let
let
主要的作用在于他是一个局部的变量 不会由于你在函数内外而造成过多的问题
3.申明一个不可修改的常量——const
const
在现在单页面应用的框架中也是经常使用的
主要是当我们在使用一个JS封装时 或者命名一个常量时会使用
解构赋值——{}、[]
这个功能基本算的上是最好用的功能之一了
数组解构
在数组的解构赋值当中模式必须统一
let [a,b,c]=[1,2,3];
解构也是可以有默认值的
let [flag = true] =[];
对象的解构赋值——{}
let { code,msg } = req.data;
字符串解构——[]
字符串也是可以解构的
但是我觉得这个字符串的结构没有展开符的好用
[a,b,c,d,e] = "harry"
展开符——…
将对象或者数组中的每一个属性给单独取出来
...mapState(["room_id"]),
这个可以结合解构赋值一起使用 效果更佳
当你在对一个数组进行一个展开的时候取到的是数组里每一个单独的元素 所以没有一个堆栈的关系 是一个全新的空间
ES6二进制转化十进制——0B
let binary = 0B100101;
console.log(binary);
ES6八进制转化十进制——0o
let b=0o666;
console.log(b);
数字判断——isFinite
只要是数字，不论是浮点型还是整形都会返回true，其他时候会返回false。
Number.isFinite()
NaN判断——isNaN
NaN是特殊的非数字
Number.isNaN(NaN)
判断整数——isInteger
判断是否为整数
Number.isInteger(xx)
小数点保留——parseInt、parseFloat
Number.parseFloat(9.18)//9.18
Number.parseInt(9.18)//9
整数取值范围——MAX_SAFE_INTEGER、MIN_SAFE_INTEGER、isSafeInteger
最大安全整数——MAX_SAFE_INTEGER
Number.MAX_SAFE_INTEGER
最小安全整数——MIN_SAFE_INTEGER
Number.MIN_SAFE_INTEGER
安全整数判断——isSafeInteger
Number.isSafeInteger()
字符串模板——${}
这个里面也是可以支持标签和运算的
当你是要做变量之间的改变是在${}里面
其余的都是在``中进行即可
`恭喜${this.result}，中了优惠券`;
字符串的查找——includes、startsWith、endsWith、repeat
字符串整体查找——includes
str.includes(hello)
判断开头是否存在：——startsWith
str.startsWith(hello)
判断结尾——endsWith
str.endsWith(hello)
复制字符串——repeat
'hello|'.repeat(3)
数组的转化——Array.of
可以转化num类型str类型
Array.of(1,2,3);
数组的查找——find
在函数中如果找到符合条件的数组元素就进行return
array.find(fn(value,index,array){
return }))
数组填充——fill
数组进行填充
array.fill(想要填充的内容,开始的位置,结束的位置)
数组的遍历——for…of、entries、forEach、some、map
for…of循环：
for (let item of arr){
console.log(item);
};
for (let index of arr.keys()){
console.log(index);
}
for (let [index,val] of arr.entries()){
console.log(index+':'+val);
}
手动循环
let list=arr.entries();
console.log(list.next().value);
console.log(list.next().value);
console.log(list.next().value);
forEach
arr.forEach((val,index)=>console.log(index,val));
filter
arr.filter(x=>console.log(x));
some
arr.some(x=>console.log(x));
map
console.log(arr.map(x=>'web'));
主动抛出错误—— throw new Error
throw new Error( xxxx )抛错
function add(a,b=1){
if(a == 0){
throw new Error('This is error')
}
return a+b;
}
箭头函数——（）=>{}
箭头函数默认的this指向上下文
箭头函数中不可加new
this也无法在使用.bind方法修改
()=>{}
判断对象或者数组中是否存在某个属性——in
返回的是布尔值
let obj = {
a:'asd'
};
console.log("a" in obj);
判断数组中的下标是否存在
let obj = ['aa','bb','cc']
console.log(3 in obj);
console.log(2 in obj);
数组转化为字符串——join()、toString()、
join()方法就是在数组元素中间，加了一些间隔，开发中很有用处。
let arr=['1','2','3'];
console.log(arr.join('|'));
.toString转换时只是是用逗号隔开了。
let arr=['1','2','3'];
console.log(arr.toString());
对象key值变量
如果key的值是一个变量的话使用 [ ] 包起来
let key='chibaba';
var obj={
[key]:'dakouchi'
}
console.log(obj.skill);
对象比较—— Object.is( )
Object.is(obj1.name,obj2.name)
合并对象——assign
可以用作浅拷贝——assign
let obj3 = Object.assign(obj,obj1,obj2)
Symbol类型
在ES6当中给我们定义了一个全新的值 symbol
symbol的声明
let f= Symbol();
Set数据结构——增删改查
Set本身带有去重
let array = new Set(['1','2'])
增加：——add
array.add('str')
查找:——has
array.has('str')
删除所有的元素——clear
array.clear()
删除单个元素——delete
array.delete('1')
Set数据的循环输出——for of
for(let item of array){
console.log(item)
}
size的元素个数——size
array.size
weakSet
weakSet需要你自己手动的添加进去
let weakObj=new WeakSet();
let obj={a:'1',b:'2'}
weakObj.add(obj);
console.log(weakObj);
map的数据类型——Map
map的赋值
var newarray=new Map();
特殊的键值对形式——set
mnewarray.set(any,'qq');
map的增删查
查询：——get
newarray.get('str')
删除一个特定的值——delete
newarray.delete('any')
删除所有的值——clear
newarray.clear('any')
查找某个值——has
newarray.has('any')//返回的true 或者 false
proxy代理 ES6增强 对象 函数 生命周期 预处理
get 在得到值之前做的一个预处理
一定要return出去
三个参数
——target是自己本身的对象
——key是对象的键名
——第三个参数可以省略
var pro = new Proxy({
add: function (val) {
return val + 1;
},
name: 'harry'
}, {
get:function(target,key,property){
console.log('come in Get');
return target[key];//一定要return出去
}
});
console.log(pro.name);
set修改值做的处理
一定要return出去
四个参数
——target是自己本身的对象
——ket同是对象的键名
——value要修改后的值
——receeiver原来的数据
var pro = new Proxy({
add: function (val) {
return val + 10;
},
name: 'harry'
}, {
set:function(target,key,value,receiver){
console.log(` setting ${key} = ${value}`);
return target[key] = value;//一定要return出去
}
});
console.log(pro.name);
pro.name='123456';
console.log(pro.name);
apply
get = function () {
return 'harry111';
};
var handler = {
apply(target, ctx, args) {
console.log('do apply');
return Reflect.apply(...arguments);
}
}
var pro = new Proxy(target, handler);
console.log(pro());
promise
在前端的面试中特别喜欢考这个 应用也非常的广泛
由于JS本身是单线程的 在异步当中解决了 回调地狱（特别是node当中）
.then
通过.then的方法使异步变成同步 按照顺序进行执行
let promise = new Promise(function(resolve, reject) {
console.log('Promise');
resolve();
});
promise.then(function() {
console.log('resolved.');
});
console.log('Hi!');
.all方法
多异步同时执行 以时间长 为全部消耗时间
const p = Promise.all([p1, p2, p3]);
.race
数据请求的竞速或对图片使用竞速使用一个默认图片——谁快执行谁
const p = Promise.race([p1, p2, p3]);
promise的JS实现
function Mypromise(fn){
var that = this;
fn(function (result){
that.resolveInfo = result;
},function(result){
that.rejectInfo = result;
},function(result){
that.rejectInfo = result;
})
}
Mypromise.prototype.then = function(fn1,fn2){
fn1(this.resolveInfo)
}
var p = new Mypromise(function(resolve,reject){
console.log(666)
})
p.then(function(result){
alert(result);
},function(){
})
Class——类
定义
class pipi{
name(val){
console.log(val);
}
}
实例化：
let titi= new pipi;
titi.name('qiqi');
类自身的参数传递：
类似现在流行的框架中的data值利用的就是constructor
constructor(a,b){
this.a=a;
this.b=b;
}
class的继承
通过使用extends来得到之前的所有值和方法
class pipi extends Coder{
}
let qiqi=new pipi ;
qiqi.name('111');