ES6基础知识
2018-11-01 本文已影响0人
Mika_I
let const
es6 提供了新的声明方式代替以前的 var
let construction
- var不支持封闭作用域，会声明到全局作用域上
- 函数作用域
- 全局作用域
let和{}配合可以产生一个作用域
let支持块级作用域声明的变量只会声明在当前作用域内
let可以结局作用域污染问题 和 局部作用域的问题
- 在同一个作用域下可以多次声明同一个变量（var）
let声明过的变量不能重复声明，会报错 - 预解释问题 变量提升
let 声明的没有变量提升，先声明后使用
暂存死区，如果作用域内有这样一个变量，那么这个作用域内就会绑定这个变量，不会继续向上查找 - 通过const 声明的变量不能被修改，不能被修改引用空间（不能修改变量的地址）
const a = {name:'xxx'};
a.age = 9;
console.log(a);
解构赋值
声明和赋值都放到一起
解构 表示等号左边和右边结构类似
//数组位置必须对应，没有的可以空着
let [name, age ] = ['xxx' , 9];
console.log(name,age);
//对象解构时名字必须相同
let {length} = ['xxx',9];
console.log(length);//2
//若果有关键字可以采用冒号：的形式更改名字
let {name,age, default:d} = {name:'xxx, age:9, default:'aaa'};
console.log(d); //aaa
//拿到address中的
let [,{address[,a]}] = [
{name:'xxx'},
{age:9, address:[1,2,3]}
]
console.log(a)//2
//如果想设置某个属性的默认值，必须采用=号的方式
let [,{address[,a]},hobby='游泳'] = [
{name:'xxx'},
{age:9, address:[1,2,3]}
]
console.log(hobby)//游泳
模板字符串
es6 模板字符串 特殊的字符串
模板字符串取代了原有的字符串凭借功能
可以支持换行，可以支持取值
let name = 'xxx';
let age = 9;
let str = 'hello~\'' +name+ '\'今年' + age + '岁了'；
let str = `hello~${name}今年${age}岁了`;//es6
let ul = '<ul>'+
'<li>'+name+'</li>'+
'<li>'+age+'</li>'+
'</ul>'
let ul = `<ul>
<li>${name}</li>
<li>age</li>
<ul/>`
带标签的模板字符串 自定义模板字符串
let name = 'xxx';
let age = 9;
function ff(){
let strings = arguments[0];
let values = [].slice.call(arguments,1);
let str = ' ';
for (let i = 0;i<values.length;i++ ){
str += `${strings[i]}*{values[1]}*`;
}
str+= strings[strings.length-1];
return str;
}
let str = ff`hello~${name}今年${age}岁了`;
console.log(str);//
常用字符串方法
let url = 'http://www.baidu.com/logo,png'
//includes 是否包含
cosnole.log(url.includes('baidu'));
//starWith 以xxx开头
cosnole.log(url.starWith('http://'));
//endWith 以xxx结尾
cosnole.log(url.endWith('.png'));
//padStar padEnd 补全
//进制转换
setInterval(function(){
let date = new Date;
let hour = date.getHours();
let minutes = date.getMinutes();
let seconds = date.getSeconds();
let str = `${hour.toString().padStart(2,0)}:`;
str += `${minutes.toString().padStart(2,0)}:`;
str += `${seconds.toString().padStart(2,0)}:`;
console.log(str)
},1000)
箭头函数
写起来简单 可以解决this的问题
1.箭头函数没有function关键字
2.小括号和大括号之间有个箭头
3.如果参数是一个可以省略小括号
4.如果没有return 可以不写大括号
5.若果直接返货对象类型需要小括号（）包裹起来
普通函数
function fn (a){
return a;
}
//箭头函数
let fn =a => return a;
function a(c){
return function(d){
return c+d;
}
}
let a = c => d => c+d;
console.log(a(1)(2))//3
/**若果直接返货对象类型需要小括号（）包裹起来**/
function a(c){
return function(d){
return {sum: c+d};
}
}
let a = c => d => ({c+d});
console.log(a(1)(2))
可以解决this的问题 看this指代谁，看.前面是谁就是谁
1.解决this的问题 var that = this;
2.通过bind方式绑定this （call apply 会让函数执行）
3.箭头函数 箭头函数中没有this指向
let obj = {
b:1,
a:()=>{
setTimeout(()=>{
console.log(this);
},1000);
}
}
obj.a()
//对象不是作用域,let声明的也不会被声明到全局上
let a= 1;
laet obj = {
a:2;
b:()=>{
console.log(a)
}
}
obj.b();//1
箭头函数中没有arguments
//...叫剩余运算符 ，就是把多余的放到数组中
let fn = (x,...args) =>{
console.log(args);
}
fn('x',1,2,3,4,5)//[1,2,3,4,5]
let fn = (...arguments) =>{
let args = arguments.slice(1);
console.log(args);
}
fn('x',1,2,3,4,5)
//函数可以赋默认值
let fn = (a=1,b=2)=>{
console.log(a,b)
}
fn();
展开运算符 [ ...是浅拷贝]
function spread(x,...args){
sum(...args);
}
function sum() {
console.log(a,b,c,d);
}
spread('x',1,2,3,4)
//可以拼接数组
let arr1= [1,2,3,4]concat([5,6,7]);
let arr2 = [...[1,2,3,4],...[5,6,7]]
console.log(arr1,arr2)
//slice是浅拷贝 如果拷贝一层就是浅拷贝
//...也是浅拷贝
let b = [1,2,3];
let a = [b];
let c = a.sclice(0)
b[0] = 100;
console.log(c);
//实现深拷贝 保留继承关系 可以实现各种类型的拷贝 实现递归拷贝
function deepClone(obj) {
if(typeof obj !== 'object') return obj
if (obj = null) return null;
if( obj instanceof Date) return new Date(obj);
if( obj instanceof RegExp) return new RegExp(obj);
let o = new obj.constructor();
for (let key in obj){
o[key] =typeof obj[key] === 'object'?deepClone(obj[key]):obj[key];
}
return o;
}
数组的方法
数组常见方法
//map(some,every,filter,forEach) es5
// find fidnIndex es6
// reduce收敛 叠加
//for of
// 1.reduce 返回结果是叠加后的结果
let result = [1,2,3,4,5].reduce((prev,next,currentIndex,ary) =>{
console.log(pre,next,currentIndex,ary);
if (currentIndex === ary.length - 1) {
return (prev+next)/ary.length;
}
return prev + next;
},0);
cossole.log(result);
写一个自己的reduce方法
Array.prototype.myReduce = function(fn,pre){
for(let i = 0; i < this.length; i++){
if (typeof prev ==='undefined') {
prev = fn(this[i],this[i+1],i+1,this);
++i;
}else{
prev = fn(prev,this[i],i,this);
}
}
return prev;
};
//求和
let total = [1,2,3].myReduce((prev,next,currentIndex,ary) => {
return prev + next;
},0);
console.log(total);
//数组拼接
let flat =[ [1,2,3],[4,5,6]].reduce((prev,next,index,ary) =>{
return [...prev,...next];
});
console.log(flat);
2.foreach
Array.prototype.forEach = function(fn){
for(let i = 0;i<this.length;i++){
fn(this[i],i);
}
};
[1,2,3].forEach((item,index)=>{
console.log(item,index);
});
3.map 返回值 返回值是一个新数组
Array.prototype.map=function(fn){
let arr = [];
for(let i = 0;i<this.length;i++){
arr.push(fn(this[i],i));
}
return arr;
}
let arr = [1,2,3].map((item) => {
return item*2;
});
console.log(arr);
kk
