菜鸟笔记：es6学习笔记
es6新特性
作为一名新上路的后端开发，有一段时间对小程序产生了兴趣，在学习微信小程序时发现一个问题，好多js语法我都不认识，我产生了疑惑，这些简单的js语法不是都学习过吗，作为菜鸟处理问题的最好的办法就是找万能百度，然后了解到自2015年出现es6语法，现在前端好多框架基本上都是用的es6的语法，例如vue、uni-app等，所以发现有必要把es6学习一下。
1、变量的声明
1、let变量不能重复声明，var可以重复声明
2、let创建局部变量（块级）
3、同一个代码块不允许重复声明
4、const是表示常量，不能重赋值
5、数组、对象一般使用const，函数、数值、字符类型一般用let
2、es6的字符串的方法
/*
1、indexOf ：是否包含，不包含返回-1
2、includes：是否包含，不包含返回false
3、startwith：开头是否包含，不包含返回false，可以指定开头的位置
4、endswith：结尾是否包含，不包含返回false，可以指定结尾的位置
5、模板字符串：
a、字符串拼接
b、和函数组组合使用
*/
let str = "www.imooc.com";
let n1 = str.indexOf("yyy");
console.log(n1);
let n2 = str.includes("yyy");
console.log(n2);
let n3 = str.startsWith("imooc", 4);
console.log(n3);
let n4 = str.endsWith("com");
console.log(n4);
let userName = "zhangsna";
let age = 18;
let logo = "1.jpg";
// let strs = "name=" + userName + ",age=" + age + ",logo=" + logo; 常规拼接方法
// 模板字符串拼接
let strs = `name=${userName},age=${age},logo=${logo}`;
console.log(strs);
// 模板字符串和函数组和使用1
function show() {
return "15152221";
}
console.log(`我的内容是=${show()}`);
// 模板字符串和函数组和使用2
/*
b, c, d代表的是内容${userName}，${age}，${logo}
a代表的是b=，c=，d=s
*/
function showUser(a, b, c, d) {
return a[0] + b + a[1] + c + a[2] + d;
}
let out = showUser `b=${userName},c=${age},d=${logo}`;
console.log(out);
3、函数扩展
1、函数参数的默认值、多参数的写法
// 参数默认值写法
function fun1(a = 0, b = 0) {
console.log(a + b);
}
// 多参数写法
function fun2(...n) {
for (let index = 0; index < n.length; index++) {
const element = n[index];
console.log(element);
}
}
2、箭头函数
let fun=(x,y)=>{
return x+y;
}
3、函数尾调用
//函数尾调用
let fun1=(x,y)=>{
return x+y;
}
let fun2=()=>{
return fun1(2,3);
}
console.log(fun2());
// 不是函数尾调用1
let fun3=()=>{
let n=fun1(2,3);
return n;
}
// 不是函数尾调用2
let fun4=()=>{
return fun1(2,3)+1;
}
函数尾调用案例：
<script>
// 递归：阶乘
let funaction = (n) => {
if (n <= 1) {
return 1;
} else {
return n * funaction(n - 1);
}
};
console.log(funaction(4))
// 尾数调用优化
let funaction1 = (n,p=1) => {
if (n <= 1) {
return 1*p;
} else {
let result=n*p;
return funaction1(n - 1,result);
}
};
console.log(funaction1(4))
</script>
4、循环
1、常规循环：for、while
2、es新增循环：for...of、for..in
3、es新增循环：forEach
<script>
// es6新增循环
let list = [1, 4, 5, 3, 6, 8, 9,1];
/*
for...in
i:代表数组下标
list[i]:代表数组内容
*/
for (const i in list) {
console.log(i);
console.log(list[i]);
}
/*
for..of
iter：代表数组内容
*/
for (const iter of list) {
console.log(iter);
}
/*
forEach
m:代表数组下标
n：代表数组内容
*/
list.forEach((n,m) => {
console.log(n);
console.log(m);
});
5、扩展运算符和filter的用法
// 扩展运算: 符号...
let add = (...n) => {
let sum = 0;
for (const iter of n) {
sum += iter;
}
return sum;
};
console.log(add(3, 5, 7));
// filter：过滤
let n=[1,5,5,6,9];
let num=n.filter(x=>x==5);
console.log(num);
6、set数据结构
注：set应用场景：去重、差集、交集，合并去重
// 新建set集合
let array = [1, 4, 6, 3, 7];
let set1 = new Set(array);
//set集合自带去重功能
console.log(set1);
let set2 = new Set([1, 5, 3, 6, 7, 1]);
set2.add(0); //添加
set2.delete(1); //删除
console.log(set2);
// 差集、交集，合并去重
let set3 = new Set([1, 5, 3, 6, 7, 1]);
let set4 = new Set([1, 6, 9, 6, 8, 3]);
// 合并两个set去重
let set5 = new Set([...set3,...set4]);
console.log(set5);
// 交集
// has() 方法是集合类型的方法，是一个set或Map集合是否包含一个数
let set6=new Set([...set3].filter(x=>set4.has(x)));
console.log(set6);
// 差集
let set7=new Set([...set3].filter(x=>!set4.has(x)));
console.log(set7);
7、Map数据结构
// Map集合可以赋值的类型
let num = 14; //数值类型
let str = "ad4"; //字符类型
let object = {}; //对象
let ara = [1, 2, 3]; //数组
const map = new Map();
// 为map赋值:set()方法
map.set(num, "aa1");
map.set(str, "aa2");
map.set(object, "aa3");
map.set(ara, "aa4");
console.log(map);
// 遍历Map
for (const val of map.keys()) {
console.log(val);
}
// 添加
map.set("s1","asass44");
// 删除
map.delete("s1");
let map1=map.has("s1");
console.log(map1);
console.log(map);
/*
将Map集合转为数组
1、values()方法：将Map集合的value转换为一元数组
2、keys()方法：将Map集合的keys转换为一元数组
3、entries()方法：将Map集合的转换为一元数组
*/
let k1=[...map.values()];
console.log(k1);
let k2=[...map.keys()];
console.log(k2);
let k3=[...map.entries()];
console.log(k3);
7、module进行多模块程序设计
//js与html之间的引用
//1、js文件中定义模块
//export：定义模块
例：
export default {
userName:"老王",
fun1:(x)=>{
return `fun1=${x}`;
}
}
//2、html中定义引用
//import:引入外部的js模块
//注意：type里面要填module
例：
<script type="module">
//引入文件的格式
import js1 from "./js/index.js";
console.log(js1.userName);
console.log(js1.fun1(555));
</script>
//------------------------------------------------------------------
//js件与js之间的引用
//1、在index.js引入js1、js
import js1 from './js1.js';
function fun(){
return js1;//获取js1中的定义数据
}
export default {
userName:"老王",
fun1:(x)=>{
return `fun1=${x}`;
},
fun2:()=>{
return fun();
}
}
//2、定义module程序块
export default {
num:33,
str:"asd15414"
}
