1. ECMAScript 6简介
JavaScript 三大组成:
ECMAScript
JS中的数据类型以及相关操作,流程控制,运算符及相关运算... 都是ECMAScript的
DOM
文档的一些操作: 文档对象模型
BOM
浏览器对象模型: 窗口尺寸,历史记录管理,滚动条位置...
ECMAScript 发展历史 https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Language_Resources
2.两种变量的声明
let 和 const
let
/* let a = 0;//和var基本相似 console.log(a); */ let a = 0; var b = 10;//当上方有声明相同变量时(包含let)就会直接报错 /* var : 1.var 可以重复声明 let: 1.同一作用域下不能重复声明 */
let的块级作用域
if(true){ let a = 1; }
console.log(a);//报错!!~ { //只要是大括号就是一个代码块
//let在代码块之间,只能在代码块之中进行使用
} console.log(a);//->1; let->报错未定义 /* var : 1.var 可以重复声明 2.作用域: 全局作用域 和 函数作用域 let: 1.同一作用域下不能重复声明 2.作用域: 全局作用域 和 块级作用域{} */
let 和 var的区别
//JS是有域解析机制的! -> var 定义一个在上面进行调用的时候,并不会报错,而是出现一个undefined;
console.log(a);//var->undefined let->报错 let a = 1; /* var : 1.var 可以重复声明 2.作用域: 全局作用域 和 函数作用域 3.会进行域解析 let: 1.同一作用域下不能重复声明 2.作用域: 全局作用域 和 块级作用域{} 3.不进行域解析 */
const 常量
/* const : 常量 申明的时候必须赋值,赋值了之后不能修改 1.同一作用域下不能重复声明 2.块级作用域 3.不能域解析 基本和let一样 */ // const a = 10;//const只能在申明的时候赋值,后面是不允许修改的! const a = undefined; // a = 20;//不能修改! console.log(a);//10
块级作用域
/* {
let a = 1;
console.log(a);
} */
/*
if(true){
let a = 1;
} */
//循环之中的块级作用域
{
let lis = document.querySelectorAll("li");
for(let i = 0;i
lis[i].onclick = function(){
console.log(i);//所以在这里就不要加索引值了!
}
}
// console.log(i);//当然循环后let是不能用的!
//let 的作用域如下:
/* {
let i = 0;
lis[i].onclick = function(){
console.log(i);
}
}
{
let i = 1;
lis[i].onclick = function(){
console.log(i);
}
}
{
let i = 2;
lis[i].onclick = function(){
console.log(i);
}
} */
}
3.解构赋值
对象的解构赋值 let {a,b} = obj;
// 对象的解构赋值是根据:属性 let obj = { a : 1, b : 2, c : 4, d : 3 } /* let a = obj.a; let b = obj.b; console.log(a,b); */ // 解构赋值 -> 对象的结构赋值,这样赋值必须是一一对应的 let {a,b,c} = obj; console.log(a,b,c);
数组的解构赋值
// 数组的解构赋值是根据:顺序执行的 // let arr = ["a","b","c"]; // let [e,f] = arr; // console.log(e,f);//a b // 面试题:如何快速互换位置 let a = 0; let b = 1; console.log(a,b);//0 1; [a,b] = [b,a]; console.log(a,b);//1 0;
其他类型的解构赋值-字符串解构赋值
let str = "abc"; let [e,f] = str; console.log(e,f);//a b // let nub = 123; // let [c,d] = nub; // console.log(c,d);//1 2 /* 一般意义不大,和数组的解构赋值基本相似(也是按照顺序) */
4.展开运算符 ...
数组的展开运算符
// 展开运算符: 把一个数组、对象进行展开 -> ... let arr = [1,2,3,4]; let arr2 = ["a","b",...arr,"c","d"]; console.log(arr2);//a,b,1,2,3,4,c,d // 剩余参数:把解构之后的数组或对象放到后面 let [a,b,...c] = arr; console.log(a,b,c);//1,2,[3,4]
对象展开运算符
let obj = { a:1, b:2 } /* let obj2 = { ...obj, c:3, d:4 } */ // console.log(obj2);//{a: 1, b: 2, c: 3, d: 4} // let {a,b,...c} = obj2; //和解构赋值同时使用 // console.log(a,b,c);//1 2 {c: 3, d: 4} let obj2 = {...obj}; obj2.a = 10; // console.log(obj.a);//10 引用的复制 console.log(obj); console.log(obj2);
5.Set 和 Map对象
set 对象
// 构造函数 用来构建某一类型的对象 又叫做: 对象实例化 let arr = [3,1,2,2,3,4,5,3,5]; let s = new Set(arr); console.log(s);//自动去重了 arr = [...s]; console.log(arr);//去重之后的结果
set属性
1 // 构造函数 用来构建某一类型的对象 又叫做: 对象实例化 2 let arr = [3,1,2,2,3,4,"a",5,3,5]; 3 let s = new Set(arr); 4 // console.log(s.size);//5 size数值的个数 和 length基本一样 5 // s.clear();//清空所有值 6 // console.log(s.delete("a"));//删除某个值,不是下标而是具体的值 7 // s.add(6).add(7).add(8);//但是同时也是具备去重! 8 // console.log(s.has("a"));//true -> 查看是否包含某值 9 /* 10 set.clear(); 11 清空所有值 12 返回值:undefined 13 set.deleta(val); 14 删除某个值 15 参数: 16 val 删除的数值 17 返回值: 18 布尔值,判断是否删除成功 19 set.has(val); 20 查看是否包含某值 21 参数: 22 val 要查看的值 23 返回值: 24 true||false 是否包含这个值 25 set.add(val); 26 添加一项 27 参数: 28 val 要添加的项 29 返回值: 30 set 对象本身 31 */ 32 console.log(s);
Map 对象
// 构造函数 用来构建某一类型的对象 又叫做: 对象实例化 let arr = [ ["a",1], ["b",2], ["c",3] ]; let m = new Map(arr); // m.clear(); // console.log(m.delete("a")); // console.log(m.get("a")); // console.log(m.has("a")); // console.log(m.set("d",4)); m.set("a",4).set("e",5) console.log(m); /* clear(); 清空所有值 delete(key); 删除某一项 返回值:布尔值,是否删除成功 get(key); 获取某一个值 返回值:要获取的值 has(key); 获取某一个具体的值 返回值:布尔值 set(key,val); 设置一个值 参数: key 数据的key值 val 数据的val值 返回值: map 对象本身 */
6.箭头函数
箭头函数
/* function fn(){ return ; } */ /* let fn = ()=>{ console.log(1); }; */ // let fn = nub=>nub*2; // let fn = (nub,nub2)=>nub*nub2; // let fn = ()=>"返回值"; // console.log(fn()); // fn(); let fn = ()=>{ console.log("天气有点冷"); return "返回值"; } // fn(); console.log(fn()); /* 箭头函数: 形参=>返回值 (形参,形参)=>返回值 ()=>返回值 ()=>{ 执行语句 } ()=>{ 执行语句 return 返回值 } (形参)=>{ 执行语句 return 返回值 } */
箭头函数的不定参
function fn(){ console.log(arguments.length); }; fn(1,2,3,4); // 箭头函数没有不定参: arguments
rest参数
let fn = (a,b,...arg)=>{ console.log(a,b,arg); }; fn(1,2,3,4); // rest 剩余参数 ... 利用展开运算符 代替箭头函数的不定参
箭头函数的this指向
/* document.onclick = ()=>{ console.log(this); }; */ // document.onclick = function(){ // let fn = ()=>{ // console.log(this); // } // /* function fn(){ // console.log(this); // } */ // fn(); // }; let fn; let fn2 = function(){ console.log(this);//window fn = ()=>{ console.log(this); } } fn2 = fn2.bind(document.body); fn2(); fn(); /* 箭头函数本身没有 this,调用箭头函数的this时,指向其声明时 所在的作用域的this; */
箭头函数参数默认值
let fn = (a=10,b=2)=>{ // a : 10 // b : 2 console.log(a*b); }; fn();
7.数组新增方法
Array.from()
/* Array.form(类数组) 把一个类数组转换成真正的数组 类数组: 有下标 有length; 返回值: 转换之后的新数组 */ // new Date().getTime(); // Date.now(); // new Array(); // Array.from(); // arr.forEach(); // 注意哪些方法是构造函数下的,哪些方法是对象本身的! { let lis = document.querySelectorAll("#list li"); lis = Array.from(lis); console.log(lis); // lis.map(itme=>{ // return itme; // }); }
from()方法 把类数组转换成数组的方法
{ let lis = document.querySelectorAll("#list li"); var arr = []; // lis = Array.from(lis,function(itme,index){ // console.log(itme,index,this);//要this指向就不要使用箭头函数了 // return index; // },arr); lis = [...lis];//展开方法也能把它变成数组 console.log(lis);//组成的数组是from里面的index }
of()方法
{ console.log(Array.of(1,2,3,4,"a"));//把放进去的东西组成了一个新数组 }
isArray()方法 判断一个东西是不是数组
{ let lis = document.querySelectorAll("#list li"); console.log(Array.isArray(lis));//false -> 检测是否是数组 lis = [...lis]; console.log(Array.isArray(lis));//true }
数组下的 find()方法 findIndex()方法
{ let arr = [1,2,3,4]; /* let val = arr.find((itme,index)=>{ if(itme > 3){ return index; } }); */ // 简写: // let val = arr.find(itme=>itme>=3);//返回内容(值),没有这个值就返回undefined // console.log(val); let index = arr.findIndex(itme=>itme>=3);//返回下标 console.log(index); }
数组扁平化 fiat()方法
// 在工作的时候,可能后端传给我们一个二维数组,我们把它转位一位数组 就叫做 数组扁平化 let arr = [ ["小明",18], ["小强",20], [ [1, [2,3], [4, [5,6, [7,8] ] ] ] ] ]; console.log(arr.flat(Infinity));//参数:提取几层 Infinity:无限层
数组扁平化 fiatMap()方法
// 在工作的时候,可能后端传给我们一个二维数组,我们把它转位一位数组 就叫做 数组扁平化 let arr = [ ["小明",18], ["小强",20] ]; let newArr = arr.flatMap((itme)=>{ itme = itme.filter((itme,index)=>{ return index == 0; }); return itme; }); console.log(newArr);
fill()方法 填充
let arr = [1,2,3,4,5]; arr.fill("a",3);//"a","a","a","a","a" 填充,第二个参数,从第几个开始填充,第三个参数,截止个数 无论填多少也不会改变数组长度 console.log(arr);
includes()方法
let arr = ["a","b","c","d","e"]; console.log(arr.includes("a",2)); /* 查看数组是否存在(val); -> 返回布尔值 第二个参数: 从第几位开始 */
8.字符串新增方法
字符串方法 startsWith() endsWith()
let str = "Afan和JackAfan都是Afan"; console.log(str.startsWith("Afan",4)); console.log(str.endsWith("和",4)); /* startsWith 判断起始开始值 val 第二个参数: 从第几位开始查找 返回: 布尔值 endsWith 判断结束开始值 val 第二个参数: 到第几位开始结束 */
repeat()方法
{ let str = "a"; console.log(str.repeat(10));//注意数量别大于 一亿 /* repeat 重复的数次 */ }
模板字符串 插值表达式${}
let p = document.querySelector("p");
let name = "小明";
let age = 18;
let scholl = "高中";
// p.innerHTML = '今年'+name+'就要'+age+'岁了,终于可以上'+scholl+'了!';
p.innerHTML = `今年${name}就要${age}岁了,终于可以上${scholl}了!`
/*
模板字符串 : 字符串拼接很实用的一种方法
1.``
2.${} 插值表达式
用插值把东西放进去
*/
普通字符串与模板字符串的一些区别
let p = document.querySelector("p");
let name = "小明";
let age = 18;
let scholl = "高中";
// p.innerHTML = '今年'+name+'就要'+age+'岁了,终于可以上'+scholl+'了!';
p.innerHTML = `
今年${name}就要${age}岁了,终于可以上${scholl}了!
`
/*
模板字符串
1.``
2.${} 插值表达式
用插值把东西放进去
3.模板字符串可以换行
普通字符串
换行会报错
*/
插值表达式
let p = document.querySelector("p");
let name = ()=>{
var n = "小明";
return n;
};
let age = 18;
let scholl = "高中";
// p.innerHTML = '今年'+name+'就要'+age+'岁了,终于可以上'+scholl+'了!';
p.innerHTML = `
今年${name()}就要${age>18?18:"保密"}岁了,终于可以上${scholl}了!
`
/*
${} 插 值 表达式:
插入 具体的值 的表达式
*/
9.对象新增的一些方法
简介表示法
let a = 0; let b = 0; /* let obj = { a : a, b : b } */ let obj = { a,//代表a属性的值 b,//代表b属性的值 c(){ console.log("a"); } } console.log(obj)
属性名表达式
let name = "小明"; let obj = { c(){ console.log("a"); }, [name] : 111 } // obj[name] = 111; console.log(obj)
对象合并 assign()
let obj = { a:1, b:2 } let obj2 = { c:3, d:4 } // Object.assign(obj2,obj);//{c: 3, d: 4, a: 1, b: 2} obj2 = Object.assign({},obj,obj2);//{a: 1, b: 2, c: 3, d: 4} console.log(obj2);
is() 和 ===
/* if(+0){ console.log("真") }else{ console.log("假") } if(-0){ console.log("真") }else{ console.log("假") } */ console.log(+0 === -0);//true -> false===false // console.log(Object.is(1,"1"));//false 它和=== 基本一样 // console.log(Object.is(+0,-0));//-false console.log(Object.is(NaN,NaN));//->true //这是它和 === 不一样的地方!
10.ECMAScript的兼容 babel
http://www.babeljs.com/