ECMAScript 6
- let 和 const 命令
let：声明的变量只能在当前的代码块内部有效 不能提前声明
const：常量不能赋值
{
let a = 10;
a = 20;
console.log(a);
const g = 9.8;
g=20;
console.log(g);
}
var a = [];
for (let i = 0; i < 10; i++) {
a[i] = function () {
console.log(i);
};
}
a[6](); // 6
注释：变量i是let声明的，当前的i只在本轮循环有效，所以每一次循环的i其实都是一个新的变量，所以最后输出的是6。
- 数组的解构赋值
{
//es5
let a=1;
let b=2;
let a= 1,b=2;
//es6
let [a,b,c]=[1,2,3];
let [a,b,c]=[,1,2];
console.log(a, b, c);
//es6嵌套数组的解构
let [foo, [[bar], baz]] = [1, [[2], 3]];
console.log(foo, bar, baz);
//... 扩展运算符 数组 只能放在最后
let [a,...b]=[1, 2, 3, 4];
console.log(a, b);
}
- 字符串的扩展
{
//es5
let a = "abcdefg";
for (let i = 0; i < a.length; i++) {
console.log(a.charAt(i));
}
for (let key in a) {
console.log(a.charAt(key));
}
//es6
for (let char of a) {
console.log(char);
}
//模板字符串 : `${}` 反引号
let m = 20;
let str = `abc${m}`;
console.log(str);
console.log(`bvfhdsbf${m}jndskfndsj`);*/
}
- 正则的扩展
{
//flags 获取修饰符
let a = new RegExp(/abc/ig, 'i').flags;
console.log(a);
}
注释：RegExp构造函数第一个参数是一个正则对象，那么可以使用第二个参数指定修饰符。而且，返回的正则表达式会忽略原有的正则表达式的修饰符，只使用新指定的修饰符。
- 函数的扩展
可以在参数列表上直接给默认值
function show(x, y = 'world') {
console.log(x, y);
}
show('hello');
//搭解构赋值来使用
function getinfo({x,y=1}) {
console.log(x, y);
}
getinfo({x: 1, y: 2});
1. 箭头函数
//函数带一个参
let f=v=>v;
let f=function (v){
return v;
}
console.log(f(1));
//函数带多个参数
//let f1=(v,m)=>m+v;
let f1=function (v,m){
return v+m;
}
console.log(f1(1, 2));*/
let f=()=>1;
let f=function (){
return 1;
}
2. 不带返回值的es6函数
let f1 = ()=>
{
console.log("1");
}
f1();
let f2=(a,b)=>{
return a+b;
}
console.log(f2(1, 2));
let f3=()=>[1,2,3];
console.log(f3());
let f4=()=>({a:1,b:2});
console.log(f4());
3. 箭头函数 + 结构赋值
let f=({a,b})=>{
console.log(a,b);
}
f({a:1,b:2});
4. 上下文一致
{
function foo() {
console.log(this)//id:1
return function (){
console.log(this)//id:2
return () => {
return () => {
console.log('id:', this.id);
};
};
}
}
var id=100;
var f = foo.call({id: 1});
var t1 = f.call({id: 2})()(); // id: 1
}
5. 箭头函数的嵌套
let Data=()=>({getInfo:()=>"你好"});
console.log(Data().getInfo());
注释：箭头函数不适用在对象里面的函数，dom对象的事件
- 严格模式
按标准写代码
优点：提高代码的安全性 优化代码 提高运行速度 - 处理异常
$("button").click(function () {
try {
//抓异常的语句
//出现异常 会抛出异常 catch
let num = $("input").val();
if (num < 0) {
throw new Error("输入的值不能小于0！");
}
else {
alert(Math.sqrt(num));
}
}
catch (err) {
console.log(err);
}
finally {
console.log("最后执行");
}
});
- 数组的扩展
- 扩展运算符
let [a,...b]=[1,2,3,4];
console.log(a,b);
//拆开数组
console.log(...[1,2,3,4]);
//dom元素集合分开
console.log(...document.querySelectorAll(".btn"));
- 替代函数的 apply 方法
function add(x,y){
return x+y;
}
console.log(add.apply(null, [1, 2]));
console.log(add(...[1,2]));
//通过push函数，将一个数组添加到另一个数组的尾部
// ES5的 写法
var arr1 = [0, 1, 2];
var arr2 = [3, 4, 5];
Array.prototype.push.apply(arr1, arr2);
// ES6 的写法
let arr1 = [0, 1, 2];
let arr2 = [3, 4, 5];
arr1.push(...arr2);
- 数组的复制
//es5
let a=[1,2,3];
let b=a;
b[0]=2;
console.log(a);*/
//es6
let a=[1,2,3];
let b= [...a];
b[0]=2;
console.log(a);
- 合并数组
//es5
let a=[1,2];
let b=[3,4];
let c=[5,6];*/
console.log(a.concat(b, c));
//es6
let d= [...a,...b,...c];
console.log(d);
- 将字符串转化为数组
let h="abcdef";
console.log([...h]);
- Array.from
将类数组转化为数组
let obj={
0:1,
1:2,
2:3,
length:3
};
console.log(Array.from(obj));
console.log(Array.from(document.querySelectorAll(".btn")));
console.log(document.querySelectorAll(".btn"));
- Array.of
将值转化为数组
console.log(Array.of(1,2,3,4));
- find()
找符合条件的 ,返回第一个的值
let a=[1,2,3,4,5];
console.log(a.find(function (n) {
return n > 2;
}));
- findIndex
找符合条件的 ,返回第一个的索引
let a=[1,2,3,4,5];
console.log( a.findIndex((val)=>{
return val>3;
}));
- fill
用值填充数组，也可以多个参数，填充的位置
a.fill("a",1,3);
console.log(a);
- 对象的扩展
- 对象属性和值以及方法都可以简写
let foo="你好";
let obj={
foo,
hello:function (){
},
info(){
},
};
console.log(obj);
- 扩展getter（获取值） setter（设置器）访问器
let obj = {
get names() {
console.log("返回值");
return this.name;
},
set names(val) {
console.log("设置值");
try {
if (val) {
this.name = val;
}
else {
throw new Error("val is no value");
}
}
catch (err) {
console.log(err);
}
}
}
obj.names="张三";
console.log(obj.names);
- super 关键字
const popinfo = {
hello: "bar"
}
const world = {
hello:"my",
gethello(){
//获取到原型链上的hello
//super.hello 指的是world 原型链上的hello
return super.hello;
}
}
Object.setPrototypeOf(world, popinfo);
console.log(world.gethello());
- 对象扩展符
let {a,...b}={a:23,x:1,y:2};
console.log(a,b);
let obj = {a: {b: 1}};
let {...x}=obj;
obj.a.b=2;
console.log(x);//2
let a=[{m:1},2,3];
let b= [...a];
b[0].m=2;
console.log(a);
-
Set 和 Map 数据结构
1.set
set 集合里面的值必须唯一, set集合没有键,只有值
let arr = [1, 1, 2, 2, 3, 3, 4, 5, 6, 7, 6, 5, 4, 3, 4, 2, 1, 3];
let s = new Set();
console.log(s);
//add set集合追加值
for (let key of arr) {
s.add(key);
}
//... 可以将set集合转化为数组
console.log([...s],s);
//size set集合的长度
//delete 删除某个值 返回值true、false
console.log(s.delete(5), s);
//has 判断时候有哪个值 true、false
console.log(s.has(1));
//clear 清除集合所有成员
s.clear();
console.log(s);
- set集合遍历
Set.prototype.keys()：返回键名的遍历器
Set.prototype.values()：返回键值的遍历器
Set.prototype.entries()：返回键值对的遍历器
Set.prototype.forEach()：使用回调函数遍历每个成员
let set = new Set(['red', 'green', 'blue']);
for (let item of set.keys()) {
console.log(item);
}
// red
// green
// blue
for (let item of set.values()) {
console.log(item);
}
// red
// green
// blue
for (let item of set.entries()) {
console.log(item);
}
// ["red", "red"]
// ["green", "green"]
// ["blue", "blue"]
- map 键值对集合
let m = new Map();
//添加值
m.set("a", {name: "张三"});
m.set("b", {name: "李四"});
console.log(m.get("a"));
//has 判断键是否存在 true/false
console.log(m.has("a"));
//delete 删除某个键 true/false
m.delete("b")
//size 长度
//clear 清除map集合
m.clear()
- map集合遍历
Map.prototype.keys()：返回键名的遍历器。
Map.prototype.values()：返回键值的遍历器。
Map.prototype.entries()：返回所有成员的遍历器。
Map.prototype.forEach()：遍历 Map 的所有成员。
const map = new Map([
['F', 'no'],
['T', 'yes'],
]);
for (let key of map.keys()) {
console.log(key);
}
for (let value of map.values()) {
console.log(value);
}
for (let item of map.entries()) {
console.log(item[0], item[1]);
}
// 或者
for (let [key, value] of map.entries()) {
console.log(key, value);
}
// 等同于使用map.entries()
for (let [key, value] of map) {
console.log(key, value);
}
- json 转map
let op = {
"name": "张三",
"sex": "男"
}
let m1 = new Map();
for (let key of Object.keys(op)) {
m1.set(key, op[key]);
}
console.log(m1.entries());
- map 转json
let json = {};
for (let item of m1.keys()) {
console.log(item);
json[item] = m1.get(item)
}
console.log(json);
扫一扫
1204
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
