ES6

let和const

let : 写法和var 一致， 用来声明变量
// let a = 10;
// console.log(a);

let 和 var 的具体区别：

var :
// 1. 重复声明
// 2. 作用域： 全局作用域 函数作用域(局部作用域)
// 3. 可以预解析(变量提升)

let :
// 1. 不可以重复声明
// 2. 作用域： 全局作用域 块级作用域(一对花括号包裹的区域)
// 3. 不可以预解析(变量提升) 严格遵守先声明 后使用

补充： 由于ie低版本不兼容es6新语法，所以在使用的使用优先考虑兼容性的问题
如果不考虑兼容的话， 优先推荐使用let/const

let b = 1;
// let b = 2;
// console.log(b);

块级作用域 : 只要是一个对花括号 就是一个块级作用域
块级作用域类似ES5中局部作用域，声明在其中的变量，出了该作用域，失效

{
// let b =10;
}
console.log(b);

const : 声明常量
// 变量： 可以改变的， 常量：不可以改变的

// 1. 使用let声明的变量可以修改， 使用const声明的变量，不可以修改
// 2. 声明的时候，必须赋值
// 3. 其他情况，可以let一致(不重复，块级作用域，不预解析)

const b = 10;
// b = 15;
// console.log(b);

展开运算符

展开运算符： …
在需要展开的目标前加… ,即可将该目标的值取出。
展开运算符： 不影响原有数据，对原有数据，做一个拷贝的动作

let arr1 = [“a”,“b”,“c”,“d”];
let arr2 = [1,2,3,…arr1,4,5];
let arr3 = […arr1,“av”];
console.log(arr3);
console.log(arr1);

剩余参数 ： 解构赋值+展开运算符

let obj = {
a:1,
b:2
}
let obj2 = {
…obj,
c:3,
d:4
}
console.log(obj2);
let {a,b,…c} = obj2; // let a = obj2.a let b = obj2.b
console.log(a,b,c);

set对象

Set: 本质是一个函数
作用： 用来构建某一个类型对象
通常我们把这类型的函数，叫做 构造函数

Set() 可以接受 指定目标 来作为参数;
和直接使用的区别： 达成去重的目的
let s = new Set(arr);
console.log(s);

size 属性

console.log(s.size);

clear() 方法 : 清除所有数据

// 无参 无返回值
// s.clear()
// console.log(s);

delete(): 删除指定的数据

参数： 指定的内容
返回值： true || false 是否删除成功(没有这个值的话，才会出现不成功)
console.log(s.delete(3));

has(): 查找是否具有该元素

参数： 指定的内容
返回值： true || false 是否具有
console.log(s.has(3));

add(): 添加数据

参数： 添加的内容
返回值： 添加后的整体内容
console.log(s.add(“a”).add(“b”));

箭头函数

1. () => 返回值
function fn(){

}

let fn = () => 2;
console.log(fn());

2. 形参 => 返回值
let fn2 = num => num*2;
console.log(fn2(10));

3. (形参,形参) => 返回值
let fn3 = (a,b) => a+b;
console.log(fn3(2,5));
没有参数或多个参数时，都需要带有()。 只有一个参数的时候，可以省略()

4. () => {
// 执行语句
}

5. (形参,形参) => {
执行语句;
return 返回值;
}

注意：箭头函数在定义的时候，需要绑定一个变量 或者自调用

箭头函数的不定参

回顾：在es5中，当我们不确定函数参数的时候，可以使用arguments对象来调用参数

// function fun(){
// console.log(arguments[0]);
// }
// fun(1,2,3,4,5,6,7);

es6中，没有arguments对象来帮助我们调用参数

// let fun = () =>{
// console.log(arguments);
// }
// fun(12,3,4,5,6,2,4);

//rest 参数(剩余参数)
// let fun2 = (…arg) => {
// console.log(arg);
// }
// fun2(12,3,4,5,6,7,8);

箭头函数中， this的指向问题

document.onclick = ()=>{
// console.log(this);
// }
箭头函数，本身没有this。 this会指向 定义函数时 所在的作用域

箭头函数的 默认参数
let fn = (a=10,b=5) => {
return a+b;
}
console.log(fn(6));

数组的新增方法

这个文件中所说的三个方法： 都是构造函数的方法 Array.方法名()
不是数组对象的方法，注意调用格式 数组名.方法名()

Array.from: 将类数组转化为数组
类数组： 有下标，有length， 但是无法使用数组的方法

参数1： 需要转化的类数组
参数2； 处理的方式(可选的)
参数3： 函数执行时this的指向(可选)

let lis = document.querySelectorAll(“li”);
console.log(lis);
lis = Array.from(lis,(item,index)=>{
item.textContent = “列表”;
console.log(index);
});

lis.map((item)=>item); // 转化为数组后，才可以使用数组自带的方法
map(): 返回一个新数组，新数组中的元素，是原数组中按照指定需求处理过的数据

把类数组转化成数组，我们常用的两种方式：

1. Array.from
2. 展开运算符
   lis = […lis];
   lis.sort();

检测 数据是否是个数组

console.log(Array.isArray(lis));

Array.of() : 将参数组成一个 新的 数组

let arr = [1,2,3,4,5];
arr = Array.of(“a”,“b”); // 新数组会覆盖原有数据
console.log(arr);

数组的扁平化

数组对象的方法
数组扁平化不是一个具体的方法，而是通过具体的方法来达成的效果

let arr = [
[“小萌”,18],
[“小萌”,18],
[“小萌”,18],
[“小萌”,18],
[“小萌”,18,[“小萌”,17,[“小萌”,18]]]
];

flat()： 将多层数据，处理成一层

参数： 处理层数
console.log(arr);
arr = arr.flat(3);
console.log(arr);
未知层数的情况下： infinity–无限

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

flatMap(): 处理扁平化数组

因为它只能处理一层数组
所以arr = arr.flat(Infinity);
使用flat()处理为一层后，再使用filter()过滤，会无法找到

let newArr = arr.flatMap((item,index)=>{
console.log(item,index);

item = item.filter((item,index)=>{
return index == 0;
});
return item;
});
console.log(newArr);

数组 find()方法： 返回第一个满足条件的值

let arr_two = [1,2,3,4,5];
// let val = arr_two.find((item,index)=>{
// if(item > 1){
// return true;
// }
// });

简写的方式
let val = arr_two.find(item=>item>3);
console.log(val);

findIndex(): 返回第一个满足条件的值 的索引(下标)

fill() : 向指定数组填充指定的数据，覆盖原有数据。 覆盖的范围可以控制，默认是全部

let arr_three = [“a”,“b”,“c”,“d”,“e”,“f”,“g”,“z”];
arr_three = arr_three.fill(“v”,1,4); // 位置： 包头 不包尾
console.log(arr_three);

includes(): 判断是否包含一个指定的值
参数1：指定的值
参数2：指定位置(从指定的位置之后，开始查找)

console.log(arr_three.includes(“v”,3));

字符串新增的方法

str.startsWith： 判断是否已指定字符串开头的
参数1 ： 指定字符串
参数2 ： 指定的开始位置 (从1开始)

let str = “好好学习,每天进步一点点”;
console.log(str.startsWith(“好好”));
console.log(str.endsWith(“学习”,3));

repeat()： 将字符串重复指定的次数 (次数不限)

let str2 = “a”;
console.log(str2.repeat(3));

模板字符串

模板字符串 ``
插值运算符 ${} 可以写表达式 可以写函数

let p = document.querySelector(“p”);

let name = ()=>{
let n = “花花”;
return n;
};
let age = “18”;
let school = “高中”;

// p.textContent = 我叫${name}，今年${age}岁，就要上${school}了;

// p.textContent = 我叫${name()}，今年${age}岁，就要上${school}了;

//需要判断的时候， 用三目运算符
p.textContent = 我叫${name()}，今年${age>13?"保密":age}岁，就要上${school}了;