国外网站能否做百科参考资料,dede网站地图插件,做网站需要哪些东西和步骤,东莞做网页的公司ECMAScript 6
目标#xff1a;学习完 ES6 可以掌握方便后续的开发#xff0c;未来工作中大量使用 ES6 开发
ECMAScript 6 介绍ECMAScript 6 新增语法内置对象的扩展ECMAScript 6 降级处理#xff08;学习完node再讲#xff09;
1. ECMAScript 6 介绍 ES – ECMAScript
…ECMAScript 6
目标学习完 ES6 可以掌握方便后续的开发未来工作中大量使用 ES6 开发
ECMAScript 6 介绍ECMAScript 6 新增语法内置对象的扩展ECMAScript 6 降级处理学习完node再讲
1. ECMAScript 6 介绍 ES – ECMAScript
ECMA – 欧洲计算机制造商协会
ECMA262标准 – 第一版JS的标准
我们之前学习的是 ES5.1
2015年发布了ES6并且更名为ES2015。决定以年号为版本号并且每年发布一个新版本。
ES2015ES2016…
网上所说的ES7、ES8等等只是人们推算的因为官方从未承认什么ES7ES8。网上所提到的ES7正式名称应该是ES2016。
每一年所有人可以给JS提议提出JS需要哪些改进并给出解决办法。如果提议被采纳进入草案阶段第二年发布的新版就会包括前一年的草案
1.1 为什么要学习ES6
提供了更加方便的新语法弥补 JS 语言本身的缺陷新增了便捷的语法给内置对象Array、String、…增加了更多的方法。ES6 让 JS 可以开发复杂的大型项目成为企业级开发语言新的前端项目中大量使用 ES6 的新语法今天学完后面就大量使用了
1.2 ECMAScript 6 是什么
ECMAScript 6 又叫 ES2015简称 ES6ES6 是继 ES4、ES5 之后的 JS 语言规范ES6 中增加了一些新的特性ES6 的目标是使得 JavaScript 语言可以用来编写复杂的大型应用程序成为企业级开发语言2015年6月发布
1.3 小结
ES6 是新的 JS 的代码规范提供了一些新特性使我们可以开发大型应用ES6 弥补了 JS 语言本身的缺陷增加了新语法扩展了内置对象ES6用起来非常爽。因为语法非常人性化。
2. ECMAScript 6 新增语法 let和const关键字 箭头函数 函数参数默认值 函数剩余参数 Array对象扩展 String对象扩展 新增对象Set 定义对象的简洁方式 Promise最后一天
2.1 let 和 const let – 用于声明变量 let 定义变量变量不可以再次定义但可以改变其值 具有块级作用域 没有变量提升必须先定义再使用 let声明的变量不会压到window对象中是独立的 代码演示 // 1. let 定义变量变量不可以再次定义但可以改变其值
let name zhangsan;
name lisi;
console.log(name); // lisi
let name wangwu; // 再次定义报错Identifier name has already been declared// 2. 具有块级作用域块就是大括号
{let age 18;console.log(age); // 18
}
console.log(age); // 报错此作用域中没有age的定义for (let i 0; i 10; i) {// i 只能在此范围内使用因为有块级作用域
}
console.log(i); // 报错此作用域中没有age的定义// 3. 没有变量提升必须先定义再使用
console.log(gender); // 报错此时还没有定义gender
let gender 男; // 4. let声明的变量不会压到window对象中是独立的
let hobby 吃饭;
console.log(window.hobby); // undefined如果使用var声明了变量也不能再次用let声明了反之也是不行的。 原因也是这个变量已经被声明过了。 不过这只是一种特殊情况了实际开发要么全部使用var要么全部使用let。 const – 用于声明常量值不能改变 使用const关键字定义常量 常量是不可变的一旦定义则不能修改其值 初始化常量时必须给初始值 具有块级作用域 没有变量提升必须先定义再使用 常量也是独立的定义后不会压入到window对象中 代码演示 // 1. 使用const关键字定义常量常量名一般大写
const PI 3.1415926;// 2. 常量是不可变的一旦定义则不能修改其值
const PI 3.1415926
PI 3.14; // 报错常用一旦被初始化则不能被修改// 3. 初始化常量时必须给初始值
const PI; // 报错Missing initializer in const declaration// 4. 具有块级作用域
// 5. 没有变量提升必须先定义再使用
// 6. 常量也是独立的定义后不会压入到window对象中
// 这三条和let变量一样不再写代码小结 关键字变量提升块级作用域初始值更改值通过window调用let×√-YesNoconst×√YesNoNovar√×-YesYes
2.2 解构赋值
数组的解构对象的解构
ES 6 允许按照一定**模式**从数组和对象中提取值对变量进行赋值这被称为解构Destructuring。
2.2.1 数组的解构
方便获取数组中的某些项
// 情况1变量和值一一对应
let arr [5, 9, 10];
let [a, b, c] arr;
console.log(a, b, c); // 输出 5 9 10// 情况2变量多值少
let arr [5, 9, 10];
let [a, b, c, d] arr;
console.log(a, b, c, d); // 输出 5 9 10 undefined// 情况3变量少值多
let arr [5, 9, 10, 8, 3, 2];
let [a, b] arr;
console.log(a, b); // 5, 9// 情况4按需取值
let arr [5, 9, 10, 8, 3, 2];
let [, , a, , b] arr; // 不需要用变量接收的值用空位占位
console.log(a, b); // 10, 3 // 情况5剩余值
let arr [5, 9, 10, 8, 3, 2];
let [a, b, ...c] arr; // ...c 接收剩余的其他值得到的c是一个数组
console.log(a, b, c);
// 结果
// a 5,
// b 9,
// c [10, 8, 3, 2]// 情况6复杂的情况只要符合模式即可解构
let arr [zhangsan, 18, [175cm, 65kg]];
let [, , [a, b]] arr;
console.log(a, b); // 175cm 65kg实际应用
function sum ([a, b, c]) {// 形参 实参// [a, b, c] [1, 2, 3, 4, 5]console.log(a b c);
}
sum([3, 4, 5, 6, 7]); // 345 122.2.2 对象的解构
方便解析对象中的某些属性的值
// 情况1默认要求变量名和属性名一样
let { foo, bar } {foo: aaa, bar: bbb};
console.log(foo, bar); // aaa, bbblet {a, c} {a: hello, b: world};
console.log(a, c); // hello, undefined// 情况2可以通过:为变量改名
let {a, b:c} {a: hello, b: world};
console.log(a, c); // hello, world// 情况3变量名和属性名一致即可获取到值不一定要一一对应
let {b} {a: hello, b: world};
console.log(b); // world
// 此时没有定义变量a所以使用a会报错// 情况4剩余值
let obj {name:zs, age:20, gender:男};
let {name, ...a} obj;
console.log(name, a);
// 结果
// name zs
// a {age: 20, gender: 男};// 情况5复杂的情况只要符合模式即可解构
let obj {name: zhangsan,age: 22,dog: {name: 毛毛,age: 3}
};
let {dog: {name, age}} obj;
console.log(name, age); // 毛毛 3let person {pname: 小明,page: 20,dog: {name: 小黑,age: 4,child: {name: 小白,age: 1}}}let {pname, page, dog: {name: dname, age: dage, child: {name, age}}} person;console.log(pname, dname, name);
/*
解构的时候模式和对象的 结构 是一样的
如果变量名冲突可以使用 原变量: 新变量 的语法处理
*/2.2.3 实际应用
// 假设从服务器上获取的数据如下
let response {data: [a, b, c],meta: {code: 200,msg: 获取数据成功}
}
// 如何获取到 code 和 msg
let { meta: { code, msg } } response;
console.log(code, msg); // 200, 获取数据成功2.3 函数
2.3.1 箭头函数 ES6 中允许使用箭头定义函数 ( goes to)目的是简化函数的定义并且里面的this也比较特殊。 箭头函数的基本定义 // 非箭头函数
let fn function (x) {return x * 2;
}
// 箭头函数等同于上面的函数
let fn (x) {return x * 2;
}箭头函数的特点 形参只有一个可以省略小括号 let fn (x) {return x * 2;
}
// 等同于
let fn x {return x * 2;
}函数体只有一行代码可以省略大括号并且表示返回函数体的内容 let fn (x, y) {return x y;
}
// 等同于
let fn (x, y) x y; // 注意如果函数体仅仅是返回一个字面量对象的话需要给字面量对象加 () let abc () ({x: 1}); // 不加小括号程序会把{}当做函数体的大括号
- 箭头函数内部没有 argumentsjslet fn () {console.log(arguments); // 报错arguments is not defined
};fn(1, 2);箭头函数内部的 this 指向外部作用域中的 this 或者可以认为箭头函数没有自己的 this MDN解释箭头函数不会创建自己的this,它只会从自己的作用域链的上一层继承this var name lisi; // 测试时这里必须用var因为用let声明的变量不能使用window调用
let obj {name: zhangsan,fn : () {console.log(this); // window对象console.log(this.name); // lisi}};obj.fn();- 箭头函数不能作为构造函数jslet Person () {};let obj new Person(); // 报错Person is not a constructor// 换个角度理解箭头函数中都没有自己的this怎么处理成员所以不能当构造函数
2.3.2 参数的默认值
ES6 之前函数不能设置参数的默认值
// ES5 中给参数设置默认值的变通做法
function fn(x, y) {y y || world;console.log(x, y);
}
fn(1)
// ES6 中给函数设置默认值
function fn(x, y world) {console.log(x, y);
}
fn(2)
fn(2,3)我们实际传递给函数的实参优先级大于默认值。如果我们调用的时候没有传递实参则会使用默认值如果调用函数的时候传递了实参则使用传递的实参有默认值的参数应该放到没有默认值的参数的后面。这样才会有意义任何函数都可以为参数设置默认值
2.3.3 rest 参数
rest 参数剩余参数以 … 修饰最后一个参数把多余的参数都放到一个数组中。可以替代 arguments 的使用
// 参数很多不确定多少个可以使用剩余参数
function fn(...values) {console.log(values); // [6, 1, 100, 9, 10]
}
// 调用
fn(6, 1, 100, 9, 10);function fn(a, b, ...values) {console.log(a); // 6console.log(b); // 1console.log(values); // [100, 9, 10]
}
// 调用
console.log(fn(6, 1, 100, 9, 10));注意rest 参数只能是最后一个参数 3. 内置对象的扩展
Array 的扩展String 的扩展Number 的扩展Set
3.1 Array 的扩展 扩展运算符 添加链接描述可以在函数调用/数组构造时, 将数组表达式或者string在语法层面展开还可以在构造字面量对象时, 将对象表达式按key-value的方式展开 // 合并两个数组
let arr1 [1, 2];
let arr2 [3, 4];
let arr3 [...arr1, ...arr2];
console.log(arr3); // [1, 2, 3, 4]// 把数组展开作为参数可以替代 apply
// 求数组的最大值
let arr [6, 99, 10, 1];
let max Math.max(...arr); // 等同于 Math.max(6, 99, 10, 1);Array.from() 把伪数组转换成数组伪数组必须有length属性没有length将得到一个空数组转换后的数组长度是根据伪数组的length决定的 let fakeArr {0: a,1: b,2: c,length: 3
};let arr Array.from(fakeArr);
console.log(arr); // [a, b, c]// 转数组的对象必须有length值因为得到的数组的成员个数是length指定的个数
// 上例中如果length为2则得到的数组为 [a, b]forEach遍历数组 要为forEach传递一个函数进来 为forEach传递的函数有三个形参分别表示数组的值、下标、当前的数组 // [xxx,xxx].forEach(function (value, index, arr) {// value 表示数组的值// index 表示数组的下标、索引// arr 表示当前的数组
// });[3, 8, 4, 9].forEach(function (v, i, a) {console.log(v); // 表示数组的值 输出的结果是 3,8,4,9// console.log(i); // 表示数组的下标// console.log(a); // 表示数组
});// 如果不需要下标和当前的数组只使用value即可
// 函数可以使用箭头函数
[3, 8, 4, 9].forEach((item) {console.log(item);
});// 下面的意思是循环在循环数组的时候输出数组的每个值
[3, 8, 4, 9].forEach(item console.log(item));数组实例的 find() 和 findIndex() 类似语法的方法还有forEach 、some、every、filter、map、reduce find和findIndex方法会遍历传递进来的数组 回调函数有三个参数分别表示数组的值、索引及整个数组 回调函数中return的是一个条件find和findIndex方法的返回值就是满足这个条件的第一个元素或索引 find 找到数组中第一个满足条件的成员并返回该成员如果找不到返回undefined。 findIndex 找到数组中第一个满足条件的成员并返回该成员的索引如果找不到返回 -1。 // 语法结构
let arr [1, 2, 4, 0, -4, 3, -2, 9];
arr.find(function (item, index, self) {console.log(item); // 数组中的每个值console.log(index); // 数组中的每个索引/下标console.log(self); // 当前的数组
});// 用法找数组中第一个小于0的数字
let arr [1, 2, 4, 0, -4, 3, -2, 9];
let result arr.find(function (item) {return item 0; //遍历过程中根据这个条件去查找
});
console.log(result); // -4findIndex 的使用和 find 类似只不过它查找的不是值而是下标 数组实例的 includes() 判断数组是否包含某个值返回 true / false参数1必须表示查找的内容参数2可选表示开始查找的位置0表示开头的位置 let arr [1, 4, 3, 9];
console.log(arr.includes(4)); // true
console.log(arr.includes(4, 2)); // false 从2的位置开始查所以没有找到4
console.log(arr.includes(5)); // false3.2 String的扩展 模板字符串 模板字符串解决了字符串拼接不便的问题 模板字符串使用反引号 括起来内容 模板字符串中的内容可以换行 变量在模板字符串中使用 ${name} 来表示不用加 符号 let name zs;
let age 18;
// 拼接多个变量在模板字符串中使用占位的方式更易懂
let str 我是${name}今年${age}; // 内容过多可以直接换行
let obj {name: zhangsan, age: 20};
let arr [175cm, 60kg];
let html divulli${obj.name}/lili${obj.age 2}/lili${arr[0]}/lili${arr[1]}/li/ul/div
;includes(), startsWith(), endsWith() includes(str, [position]) 返回布尔值表示是否找到了参数字符串startsWidth(str, [position]) 返回布尔值表示参数字符串是否在原字符串的头部或指定位置endsWith(str, [length]) 返回布尔值表示参数字符串是否在原字符串的尾部或指定位置。 console.log(hello world.includes(e, 2)); // false 从位置2开始查找e没有找到
console.log(hello world.includes(e)); // trueconsole.log(hello world.startsWith(h)); // 未指定位置看开头是否是h返回true
console.log(hello world.startsWith(l, 2)); // 指定位置的字符是l返回trueconsole.log(hello world.endsWith(d)); // 未指定位置结尾是d返回true
console.log(hello world.endsWith(r, 9)); // 先截取9个字符然后看这9个字符串的结尾是不是r。返回truerepeat() repeat方法返回一个新字符串表示将原字符串重复n次。 let html liitheima/li;
html html.repeat(10);trim() trim() 方法可以去掉字符串两边的空白 console.log( hello .trim()); // hello
console.log( hello ); //3.3 Number的扩展
ES6 将全局方法parseInt()和parseFloat()移植到Number对象上面功能完全保持不变。 Number.parseInt() Number.parseFloat() console.log(parseInt(123abc));
// ES6中将parseInt移植到了Number对象上
console.log(Number.parseInt(123abc));3.4 Set ES6 提供了新的数据结构 Set。它类似于数组但是成员的值都是唯一的没有重复的值。
Set本身是一个构造函数用来生成 Set 数据结构。
Set的特点就是该对象里面的成员不会有重复。
// 1. 基本使用
let s new Set();
// 得到一个空的Set对象
// 调用add方法向s中添加几个值
s.add(3);
s.add(7);
s.add(9);
s.add(7); // Set对象中的成员都是唯一的前面添加过7了所以这里添加无效console.log(s.size);
console.log(s); // {3, 7, 9}Set 的成员 size属性获取 set 中成员的个数相当于数组中的 lengthadd(value)添加某个值返回 Set 结构本身。delete(value)删除某个值返回一个布尔值表示删除是否成功。has(value)返回一个布尔值表示该值是否为Set的成员。clear()清除所有成员没有返回值。
// 将一些重复的值加入到Set对象中看看效果
const s new Set();
// 使用forEach遍历前面的数组然后将数组中的每个值都通过Set对象的add方法添加到Set对象中
[2, 3, 5, 4, 5, 2, 2].forEach(x s.add(x));
// s {2, 3, 5, 4}
// 遍历Set对象发现重复的值只有一份
// for...in 循环中的 i 表示数组的下标或对象的属性名
// for...of 循环中的 i 表示数组的值或对象的值
for (let i of s) {console.log(i);
}
// 2 3 5 4另外初始化Set的时候也可以为其传入数组或字符串得到的Set对象中的成员不会有重复。
根据这个特点可以完成数组或字符串去重。
// Set 可以通过一个数组初始化
let set new Set([1, 2, 1, 5, 1, 6]);
console.log(set); //Set(4) {1, 2, 5, 6}
// 数组去重
let arr [...set]; // 方式一
console.log(Array.from(set)); // from是将伪数组变为数组;方式二
console.log(arr); // [1, 2, 5, 6]// 完成字符串去重
let str [...new Set(ababbc)].join();
console.log(str); // abc4. 定义对象的简洁方式 let id 1;
let name zs;
let age 20;// 之前定义对象的方案
// let obj {
// // 属性: 值
// id: id,
// name: name,
// age: age,
// fn: function () {
// console.log(this.age);
// }
// };// obj.fn();// ES6的新方案
let obj {id, // 属性名id和前面的变量id名字相同则可以省略 :idname,nianling: age,// 下面的函数是上面函数的简化写法可以省略 :function 。但是注意这里仅仅是上面函数的简化不是箭头函数fn () {console.log(this.name);}
};
obj.fn();5. ECMAScript 6 降级处理 (保留)
5.1 ES 6 的兼容性问题 ES6 虽好但是有兼容性问题IE7-IE11 基本不支持 ES6 ES6 兼容性列表 在最新的现代浏览器、移动端、Node.js 中都支持 ES6 后续我们会讲解如何处理 ES6 的兼容性
5.2 ES 6 降级处理
因为 ES 6 有浏览器兼容性问题可以使用一些工具进行降级处理例如babel 降级处理 babel 的使用步骤 安装 Node.js 命令行中安装 babel 配置文件 .babelrc 运行 安装 Node.js 官网 项目初始化(项目文件夹不能有中文) npm init -y在命令行中安装 babel babel官网 npm install babel/core babel/cli babel/preset-env配置文件 .babelrc (手工创建这个文件) babel 的降级处理配置 {presets: [babel/preset-env]
}在命令行中运行 # 把转换的结果输出到指定的文件
npx babel index.js -o test.js
# 把转换的结果输出到指定的目录
npx babel 包含有js的原目录 -d 转换后的新目录参考babel官网
6. 扩展阅读
ES 6 扩展阅读
