前端充电站：重温ES6新增语法

let

• let 允许声明一个在作用域限制在块级中的变量、语句或者表达式

理解块级作用域
let b;   
if(true){
    let a = 1;
    b = 2;
    console.log(a); //1
}
console.log(b); //2
console.log(a); //a is not defined

---

理解块级作用域-for语句

for(let i = 0; i < 5; i++ ){
   setTimeout(function(){
       console.log(i);
   },100);
}   //1 2 3 4

console.log(i)//i is not defined

---

理解块级作用域-for语句

let i;
for(i = 0; i < 5; i++ ){
  setTimeout(function(){
      console.log(i);
  },100);
}  //5 5 5 5 5

console.log(i) //5

---

理解块级作用域-for语句

console.log(i)
for(var i = 0; i < 5; i++ ){
  (function(i){
    setTimeout(function(){
        console.log(i);
    },100);
  })(i);
}  //0 1 2 3 4

console.log(i) //undefined

let和var的区别

情况一：var会预解析变量
console.log(a);
var a = 1; 



情况二：let 不会被预解析必须先声明后使用
console.log(a);
let a = 1; //Cannot access 'a' before initialization


情况三：var可以重复声明变量

var a = 1;
var a = 2;
console.log(a) //2

情况四：let 不能重复声明
let a = 10;
let a = 20; //Identifier 'a' has already been declared

const

情况一：常量只能在声明时赋值，并且一旦赋值不能修改
const b; //Missing initializer in const declaration

解构赋值

对象解构赋值:变量名和属性名要对应
let obj = {
    a: 1,
    b: 2,
    c: 3
};

let {a,c} = obj;
console.log(a,c); //1 3

let {d} = obj;
console.log(d); //undefined

---

数组解构赋值:变量名和值索引对应

let arr = [1,2,3];
let [a,b,c] = arr;
console.log(a,b,c); //1 2 3

---

字符串解构赋值：变量名和值索引对应(可迭代)

let str = "ABCD";
let [a,b] = str;
console.log(a,b); //A B

展开运算符

let arr = [1,2,3,[4,5]];
let arr2 = ["a",...arr,"b","c"];
console.log(arr2);

需求一：数组扁平化

方法一：

console.log(arr2.flat(Infinity));

需求一：数组扁平化

方法二：

function flatten(arr){
	var result=[]
	arr.forEach(function(item){
		if(Array.isArray(item)){
			result=result.concat(flatten(item))
		}else{
    		result.push(item)
		}
})
	return result;
}

需求一：数组扁平化

方法三：

function flatten(arr){
	while(arr.some(item => Array.isArray(item))){
		arr = [].concat(...arr);
}
		return arr;
}

需求一：数组扁平化

方法四：

function flatten(a=[]){
	return a.reduce(function(prev,cur){
		return prev.concat(Array.isArray(cur)?flatten(cur):cur)
},[])
}

---

var a=[1,2,[3,4]]
var b=[5,6]

console.log(b.concat(...a))
//[5, 6, 1, 2, 3, 4]

---

// 展开运算符
let obj = {
    a: 1,
    b: 2
};
let obj2 = {
    ...obj,
    c: 3,
    d: 4
};


console.log(obj2);


// 剩余参数
let {a,...d} = obj2;
console.log(a,d);


let obj3={...obj}  //新对象中 互不影响
obj3.a=3
console.log(obj,obj3)

set

确定性、无异性、无序性

size 数据长度
Set.add(val).add(val) //添加子项返回 set 数据本身
Set.delete(val) //删除子项具体值不是下标 返回 true | false 
Set.has(val) //是否包含子项
Set.clear() //清空所有值  返回undefined

---

let arr = [1,2,3,4,1,3,5,2];  
let data = new Set(arr);
console.log(data);
console.log([...data]);

console.log(data.add("a").add("b"));
console.log(data.delete("b"));
console.log(data.has(2));
console.log(data.size,data);

map

size 数据长度

Map.set(key,value) 添加子项  返回 set 数据本身
Map.delete(key) 删除子项  数据的key值 返回 true | false 
Map.has() 是否包含子项
Map.get(key) key对应的具体的value

---

let data = new Map([[1,40],['who','lth'],["true",false],[true,false]]);
data.set("name",'lth');
data.delete(1);
console.log(data.get("true")); //false
console.log(data);

箭头函数

箭头函数没有不定参数，但可以用rest参数

let fn = (a,...arg)=>{
    // console.log(arguments);
    //Uncaught ReferenceError: arguments is not defined
    console.log(a,arg); 
};

fn(1,2,3,4);



箭头函数的this指向箭头函数定义时所在的作用域的this



document.onclick = function(){
    let fn = (a,...arg)=>{
        console.log(this); //document
    };
    fn();
};

Array.from()

Array.from(ArrayLikes[,likeMapFunc,this])的返回值是转换成的新数组  

它可以把一个具备下标还有length的类数组转换为真正的数组类数组

Array.of()

转换为数组
let arr = Array.of(1,2,3,4,5,5,6);
console.log(arr);

find

let arr = [1,2,5,6];
let val = arr.find((item)=>{
    return item >= 5;
});
console.log(val);  //5

我想获得的格式是什么？

//是对象格式？
let arr = [{who:'lth'},{who:"lwl"}];
let val = arr.find((item)=>{
    return item.who === 'lth';
});
console.log(val);


//是数组格式？
let val1=arr.filter((item=>{
    return item.who === 'lth'
}))
console.log(val1);

findIndex

let arr = [1,2,5,6];
let index = arr.findIndex((item)=>{
    return item >= 5;
});
console.log(index);  //2

flatMap

let arr = [
    [1,2],
    [3,4],
    [6,8]
];
let arr2 = arr.flatMap(item=>{
    item = item.filter(item=>item>=2);
    return item;
});
console.log(arr2);

includes

let arr = ["a","b","c","d"];
console.log(arr.includes("a",-4));  //true

fill

arr.fill(value[, start[, end]]); 用一个固定值填充一个数组中从起始索引到终止索引内的全部元素。不包括终止索引

let arr = ["a","b","c","d","e"];
arr.fill("f",1,3);
console.log(arr); //["a", "f", "f", "d", "e"]

字符串方法

let str = "123456789";

console.log(str.startsWith("56",4));  //true

console.log(str.endsWith("67",7));  //true


let str2 = "1";
console.log(str.repeat(3));

对象合并

let obj = {
    a: 1,
    b: 2
};
let obj2 = {
    c: 3,
    d: 4
};
let f = null;       //把obj和obj2和f合并到空对象中
let obj3 = Object.assign({},obj,obj2,{f});
console.log(obj3);

Object.is()

Object.is 判断两个值是否是相同的值,使用的是强类型转换===


console.log(Object.is(NaN,NaN));  //true
console.log(Object.is(+0,-0));  //false
console.log(+0 === -0 ) //true
console.log(NaN === NaN ) //FALSE

属性名表达式

let n = "name" ;
let obj = {
    [n]: "leo"
};
console.log(obj);