ES6
严格模式
-
两种方式开启严格模式
-
在script标签内的开头使用 “use strict”;
- //模块开发，自动严格模式
-
-
开启严格模式的注意事项
-
变量必须声明后再使用
-
函数的形参不能有同名，否则报错
-
不能使用with语句
-
with(div.style){ width="100px"; height="100px"; backgroundColor="red"; border="1px solid #000000"; }//给div增加样式
-
-
不能对只读属性赋值，否则报错
-
div.offsetLeft=300; var str=""; str.length=0; var obj={}; Object.defineProperty(obj,"a",{ writable:false//obj下面的a不能被修改 }) obj.a=10;
-
-
不能使用前缀 0 表示八进制数，否则报错
- 因为八进制数基本用不上
-
不能删除不可删除的属性，否则报错
-
var arr=[1,2]; delete arr.length;//数组的长度不能被删除，否则报错 var obj={} Object.defineProperty(obj,"a",{ configurable:false //表示不能删除a }); delete obj.a;
-
-
eval不会在它的外层作用域引入变量
-
eval 反射，将字符串反射为该字符串变量名的对象
-
var obj1={}; var obj2={}; var obj3={}; var obj4={}; for(var i=1;i<5;i++){ eval("obj"+i).a=i*10;//将eval里面的字符串反射为对象 //eval括号里面用+进行字符串拼接，表示第几个obj,给对应obj下面的a赋值 } console.log(obj1,obj2,obj3,obj4) for(var i=0;i<6;i++){ eval("div"+i).innerHTML=i; }//给对应div里面添加对应的i的值，不用获取div元素，直接赋值
-
-
eval和arguments不能被重新赋值
-
不能使用arguments.callee
-
不能使用arguments.callee.caller
-
在顶层函数中this不能执行window了，是undefined
-
function abc(){ console.log(this); } abc();//普通函数调用，里面的this指向的是window；在严格模式下是undefined
-
-
let和const
-
let
- let定义的变量仅在{}作用域内使用
- var 和 let可以混合使用
- var和let，const的区别
- var 会进行预解析
- => let 和 const 不会进行预解析
- => 你如果需要使用 let 或者 const 定义的变量
- => 必须要先声明后使用
- var 可以声明重复变量名
- => let 和 const 不允许声明重复变量名
- => 如果你使用 let 或者 const 定义变量
- => 那么你要保证你变量名的唯一性
- var 没有块级作用域
- => let 和 const 有块级作用域
- => 块级作用域：
- -> 只针对于 let 或者 const 定义的变量
- -> 任何可以书写代码段的 大括号({}) 都能限制变量的使用范围
- 注意：对象不是块级作用域，var obj = { 不是代码段, 是数据 }
- var 会进行预解析
-
const
-
常量
-
常量的变量名全部大写
-
在声明时必须赋值，并且常量不可以修改值
-
注意声明对象时，只能保证对象指针地址不变，对象自身的改变不会因此影响
-
const obj={a:1,b:2}; obj={a:4,b:5};//不能这样写，会报错 //这样做可以防止obj的引用地址发生改变 obj.a=10;//可以改变对象里面的值 obj=null;//不能这样写，会报错 //会一直存在堆中，无法销毁
-
箭头函数
-
箭头函数是对 函数表达式 的简写
- 函数表达式 - 也叫做匿名函数
-
箭头函数的特点
- 箭头函数 只有一个形参 的时候可以省略小括号不写，没有形参或者多个形参必须写小括号
- 箭头函数 只有一句话 的时候可以省略大括号不写，并且会自动把这一句话的结果返回
- 箭头函数里面没有 this 关键字
- 官方: 箭头函数里面的 this 是外部作用域的 this, 学名叫做上下文(context)
- 私人: 箭头函数写在哪一行, 上一行的 this 就是这个箭头函数里面的 this
-
一个注意的地方
var obj={ a:function(){ // ES5的方法 console.log("a") }, b(){ // ES6的方法 console.log("b"); }, c:()=>{ // ES6箭头函数 console.log("c"); } } obj.a(); obj.b(); obj.c();
解构赋值
-
把 对象 或者 数组 中的成员单独得到
-
数组解析最重要的是按位解析,对象是按照属性名解析
-
对象作为函数参数时，参数解构赋值后可以跳位，不需要按照顺序写
-
function fn({a,b=3,c}){ console.log(a,b,c); } fn({a:10,c:20}); var {a,b,c}={b:10,a:20,c:30}; console.log(a,b,c);//自动解析 var {a,b,c:{a:a1,b:b1}}={a:10,b:20,c:{a:30,b:40}}; //对象里面还有对象时，给对象里面的值起个名字，可以输出 var {a,b=100,c:{a:a1,b:b1=200}}={a:10,c:{a:30}}; //=后面赋的值时初始值，后面没有值就给初始值 var {a,b=100,c:{a:a1,b:b1=200}}={a:10,c:{a:30,b:40}}; console.log(a,b,c) console.log(a,b,a1,b1);
-
-
作用
-
-
函数返回多个元素时
function fn(){ var a=1; var b=2; var c=3; a++; b--; c+=4; return [a,b,c] //函数返回多个元素 } //var arr=fn(); //console.log(arr); var [a,b,c]=fn(); console.log(a,b,c);//接收多个值 -
可以让函数的参数赋初值
//c=3是是默认值，如果在实参中给c赋值，那么就是赋的那个值 function fn([a,b,c=3]){ console.log(a,b,c); } fn([1,2]); //函数参数直接赋值也可以 function fn(a,b,c=3){ console.log(a,b,c); } fn(3,5); -
将加载进来的对象中方法解构出来形成全局的函数
var {randomColor,ce}=Utils; console.log(randomColor()); ce("div",{width:"50px",height:"50px",backgroundColor:randomColor()},"body"); -
JSON解析
-
交换变量
var x=3; var y=4; [x,y]=[y,x];
-
-
字符串扩展方法
-
字符的 Unicode 表示法 “\u4e00”
- var num=0x4e00; var str;
- str=String.fromCharCode(num); //将数字的Unicode编码转为字符
-
includes()
-
判断字符在字符串中是否存在
-
返回值是一个布尔值
-
//能判断字符在字符串中是否存在的方法 var str="ashdjsahdwi"; console.log(str.indexOf("j")>-1); console.log(str.search(/j/)>-1); console.log(str.match(/j/)); console.log(/j/.test(str)); console.log(str.includes("j"));
-
-
startsWith()
-
表示参数字符串是否在原字符串的头部
-
console.log("abcde".startWith("a"));判断字符串是不是以a开头 console.log("abcde".startWith("b",1));判断第一位开始的是不是b console.log("car_0".startsWith("car_"));
-
-
endsWith()
-
表示参数字符串是否在原字符串的尾部
-
console.log("abc_car".endsWith("_car")); console.log("abc_car".endsWith("a",1));//第二个参数表示倒数第2个
-
-
repeat()
-
表示将原字符串重复几次，返回新的字符串
-
console.log("ab".repeat(3));
-
-
padStart()
-
字符串.padStart(长度,前面补充的字符);
-
console.log("#abcde".padStart(7,Math.floor(Math.random()*16).toString(16)))
-
-
padEnd()
- 字符串.padEnd(长度,后面补充的字符);
-
模板字符串
-
可以直接换行书写
-
当你需要在模板字符串里面解析变量的时候,你就写 ${ 你要解析的变量 }
-
var a=4; console.log(`abc${a}`);
-
-
标签模板
alert `123`;//123 function fn(a){ console.log(a); } fn `3`; //["3", raw: Array(1)]
symbol
- 唯一，创建的永远没有相同的
- 对象键值对中键可以是字符型也可以是Symbol型
Set和Map
-
Set
-
Set数据类型，无重复列表类型
-
Set没有下标，不是按照下标存储，但是是有序的，不能使用下标循环遍历
-
插入速度和删除速度非常快
-
没有重复元素，任何元素存在唯一性，遍历查找速度也非常快，但是略低于对象类型
-
var ab=new Set();//创建 ab.add(1);//添加数据 ab.delete(2);//删除数据 console.log(ab.has(3));//判断这个元素是否在列表中存在 ab.clear();//清除所有数据 console.log(ab.size);//size就是长度 -
利用set进行数组去重(没有重复元素，任何元素存在唯一性)
var arr=[1,3,5,7,2,4,3,5,1,2,6,5,7,8,9,1,2,4,3,5,7,9]; arr=Array.from(new Set(arr)); console.log(arr);
-
-
Map
-
map是一种有长度的键值对数据结构
-
具备数组的长度紧密型，又具备对象的键值对方法
-
它的获取，删除，查询，遍历速度很快
var map=new Map(); map.set("name","tanxu"); map.set("age",18); console.log(map.size); map.delete("name");//删除键名 map.clear();//清楚掉所有数据 console.log(map.get("age"))//获取某个键的值 console.log(map.has("age"));//判断某个键是否存在 console.log(map.values());//获取所有值的列表 console.log(map.keys());//获取所有键的列表 //遍历map map.forEach(function(value,key,map){ console.log(value,key); }) for(let key of map.keys()){ console.log(key); } for(let value of map.values()){ console.log(value); } for(let arr of map.entries()){ console.log(arr[0],arr[1]); }//name tanxu age 18 -
任何类型都可以作为键使用
-
WeakSet WeakMap 弱引用类型
- 弱引用，就是如果其中的强引用的类型地址设置为null，弱引用的关系会自动解除
- 弱引用的类型不可以遍历
- WeakMap 存储的key必须是对象
-
Generator生成器函数
-
相当于打断点
-
function *abc(a,b){ yield a;//一个yield相当于一个断点 yield b; a++; yield a; b+=10; yield b; return a+b; } //生成器对象 var a=abc(3,5); var obj=a.next(); //value就是yield返回的结果，done就是是否函数运行完成 console.log(obj);//{value:3,done:false} obj=a.next(); console.log(obj);//{value:5,done:false} obj=a.next(); console.log(obj);//{value:4,done:false} obj=a.next(); console.log(obj);//{value:14,done:false} obj=a.next(); console.log(obj);//{value:19,done:false} //通过循环来遍历 while(!obj.done){ obj=a.next(); console.log(obj.value); }注意：
var {a,b,c:{a:a,b:b}} = {a:10,b:20,c:{a:30,b:40}} console.log(a,b,a,b);//30 40 30 40
扫一扫
4110
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
