目录
1.严格模式
使用"use strict"开启严格模式。
<script type="module">会自动开启严格模式
- 严格模式下不允许使用未定义的变量，必须使用var let const做定义变量或者常量才能使用未定义的变量不能赋值不能修改！----暂时性死区
- 不允许同名参数
- 不允许this语句
- 开启严格模式下不能使用with（with只能修改原对象中存在的属性，不能创建新属性）
- 不能对只读属性赋值，否则报错
- 不能使用八进制
- 不能删除不可删除属性
- eval和arguments不能重新赋值（eval 反射 将字符串反射为栈中存储变量、常量、函数或类名
- 不能使用arguments.callee arguments.callee.caller
console.log（this）在非严格模式下指向window，在严格模式下指向undefined
回调函数下this指向window
用...argt替换arguments
面试要点：
var a=3;
{
console.log(a);
a=4;
function a(){
console.log(1)
}
a=5;
function a(){
console.log(2)
}
a=6;
a=7;
console.log(a,"1")
}
console.log(a,"2");若没开启严格模式， console.log(a,"1");打印的将是最后一个赋给a的值，a=7的值。console.log(a,"2");打印的将是最后一个同名function之前a的值。
若开起了严格模式则会报错'a' has already been declared。因为严格模式下不允许参数同名。
2.let、const
let以块作为作用域
{
let a =1;
}
console.log(a); //a is not defined 在块外找不到a的定义const 常量：一旦定义就不能被改变
3.箭头函数（是一种匿名函数）
// 箭头函数可以减少代码量
// 箭头函数可以改变this指向
var fn = ()=>{}
var fn (表示赋值) = (参数) 指向=> {参数内容}
// 如果函数中仅有一条语句，并且是使用return返回一个结果 ，可以省略{}和return
var getSum() = (a,b)=>a+b;
// 如果函数的参数仅有一个，可以省略()，如果函数的参数没有或者有一个以上的参数，必须加()
var getSum = a=>a+10;
if(arr.some(t=>t>3)) { }
arr.sort((a,b)=>a-b);
var a = arr.reduce((v,t)=>v+t);
setTimeout( () => {
console.log(30);
},30);
// 箭头函数改变this指向，指向箭头函数外上下文环境的this指向（函数外面this指啥就指啥）
// this指向o对象
var o={
a:function(){
this.fn=e=>this.b(e);
document.addEventListener("click",this.fn);
},
b:function(e){
// document.removeEventListener("click",e=>this.b(e));//匿名函数无法删除
document.removeEventListener("click",this.fn);
console.log(this);
}
}
o.a();4.解构赋值-----可以达到变量交换目的
// 将对象o中的a函数提取出来赋值给a变量
var o={
a:function(){
console.log("a")
},
b:function(){
console.log("b");
}
}
var {a,b}=o;
a();
b();// 数组解构赋值 数组解构按位解构
var arr=[1,2,3,4,5];
var [a,b,c,d,e]=arr;
console.log(a,c)// 交换
/* 1 */
var a=3;
var b=4;
[b,a]=[a,b];
/* 2 */
function fn([a,b,c,d]){
console.log(a,b,c,d);
}
fn([1,2,3,4]);// 解构时赋值初始值
/* 1 */
function fn([a, b, c, d = 3]) {
console.log(a, b, c, d);
}
fn([1, 2, 3]);
/* 2 */
var [a,b,c=3]=[1,2];
function fn(a,b,c=3){
}
fn(1,2);// 对象解构赋值 对象解构赋值，就是将对象的属性和方法，按照名称解构
var name="xietian";
var age=30;
var o={name,age};// 对象中如果有同名属性，可以使用:别名的给这个变量起一个新的别名，与其他属性就不会重复了
var {a,b,c:{a:a1,b:b1}}={a:1,b:2,c:{a:2,b:3}};// 当解构赋值放在参数时，不需要按照顺序填写参数了
function fn({a,b,c}){
console.log(a,b,c);
}
fn({c:7,a:5});// 如果解构方法时，这个方法中包含有this，解构后，这个方法将会出现使用的问题
// 反柯里化
// 复制数组，将数组，解构到[...arr1]
var arr=[1,2,3,4];
var [...arr1]=arr;// 复制对象 ，通过解构赋值完成对象的浅复制
var obj={a:1,b:2,c:3};
var {...obj1}=obj;
console.log(obj1);5.字符串扩展方法
// 判断字符串的长度是否达到指定的长度，如果不足在前面补充对应的字符串
str=str.padStart(7,"0");
str=str.padEnd(7,"0");// 重复输出
str=str.repeat(3)6.字符串模板
字符串模板 ` ` 可以支持换行 支持变量 可以模板套模板
重要小实例：
var arr = [{site: "网易",url: "http://www.163.com"},
{site: "腾讯",url: "http://www.qq.com"},
{site: "淘宝",url: "http://www.taobao.com"},
{site: "京东",url: "http://www.jd.com"},
{site: "小米",url: "http://www.mi.com"}, ]
document.body.innerHTML = `
<ul>
${arr.reduce((v,t)=>v+`<li><a href='${t.url}'>${t.site}</a></li>`,"")}
</ul>
`7.symbol 唯一值类型
用法： var a=Symbol();
// 对象的key只能是字符型和Symbol型
obj[Symbol()]=20;
解决去除魔术字符串问题
const LEFT=Symbol(),
TOP=Symbol(),
BOTTOM=Symbol(),
RIGHT=Symbol();
var state=LEFT;
switch(state){
case LEFT:
break;
case RIGHT:
break;
case BOTTOM:
break;
case TOP:
break;
}8.set & map
// 数组 紧密结构 可以排序，添加删除速度慢，元素可以重复，查找需要遍历（查找速度慢），有长度
// 对象 松散结构 键值对，添加删除速度快，不能排序，key必须是字符串和Symbol类型，查找速度极快，没有长度
set 集合 元素不重复的集合 松散结构 插入删除速度快 不是键值对 查找需要遍历 有长度
已了解的迭代器：Array NoedList HTMLCollection arguments
- add() 添加
- a.clear()清除
- a.delete()上次对应的元素
- a.has()判断集合中是否含有这个元素
- a.forEach()遍历
- a.size()列表大小
// 所有迭代器都可以使用for of枚举
for(var value of a){
console.log(value)
}
for(var value of a.entries()){
console.log(value);
}WeakSet（弱引用集合） 不能被遍历 只能存储引用类型，不能存储布尔、字符串、数值、undefined、null 不能枚举
map 键值对 类似于hashMap 类似于对象
对象的key只能是字符串symbol map的键可以是任意类型 有长度
console.log(Object.entries(a));
将对象转换为迭代器 数组形态 每个元素是一个数组 包括键和值
console.log(Object.fromEntries(a));
将迭代器元素转换为对象
-
a.set()
-
a.delete()
-
a.has()
-
a.clear()
-
a.get()获取key所对应的值
重要小实例：
使界面上的四个按钮必须按顺序进行点击,最后一个按钮点击后输出"点击完成"
var bns=document.querySelectorAll("button");
var m=new Map();
for(var i=0;i<bns.length-1;i++){
m.set(bns[i],bns[i+1]);
}
bns[0].addEventListener("click",clickHandler);
function clickHandler(e){
console.log(this);
this.removeEventListener("click",clickHandler);
if(m.has(this)) m.get(this).addEventListener("click",clickHandler);
else console.log("单击完成");
}必须将页面上所有button按钮单击后显示“点击完成”
var s = new Set();
var bns = document.querySelectAll("buntton");
bns.forEach(item=>{
item.addEventListener("click",clickHandler);
})
function clickHandler(e){
s.add(this)
if(s.size === 4){
console.log("全部点击完成")：
}
}
weakmap(弱引用map) key 必须是引用类型 不可枚举
9.生成器函数
function *show(){
yield setTimeout(function(){
console.log("aaa")
g.next();
},1000);
yield setTimeout(function(){
console.log("bbb")
g.next();
},1000);
yield setTimeout(function(){
console.log("ccc")
g.next();
},1000);
}
var g=show();
g.next();
// 生成器函数生成 Generator对象是一个迭代器对象
// 所有的迭代器对象都可以使用for of遍历
for(var value of fn(2,5)){
console.log(value);
}
var g;
for(var value of g=show()){
console.log(value)
}
279
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
