ECMAScript系列，第一章
JavaScript 是大家所了解的语言名称，但是这个语言名称是商标（ Oracle 公司注册的商标）。因此，JavaScript 的正式名称是 ECMAScript 。
一、ES6
1、let
语法：
<body>
<script>
//1、声明变量
// let a;
// let b,c,d;
// let e = "123";
// let f = 521, g='iloveyou', h=[];
//2、变量不能重复声明[var可以]
// let start="罗志祥";
// let start="小猪";
//3、块级作用域[var可以]
// {
// let girl="周扬青";
// }
// console.log(girl);
//4、不存在变量提升[var可以]
// console.log(song);
// let song = "转角遇到爱";
//5、不影响作用于链
// {
// let school="尚硅谷";
// function fn(){
// console.log(school);
// }
// fn();
// }
</script>
</body>
案例：
<body>
<div class="container over-flow">
<h2 class="page-header">点击切换颜色</h2>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
<script>
let items = document.getElementsByClassName("item");
// for(var i=0;i<items.length;i++){
// items[i].onclick = function(){
// //this.style.background="pink";
// items[i].style.background="pink"; //function中找不到i去外层找
// }
// }
// console.log(i); //这时候 i 为 3
for(let i=0;i<items.length;i++){
items[i].onclick = function(){
//this.style.background="pink";
items[i].style.background="pink";
}
}
</script>
</body>
2、const常量
语法
一般常量、数组、对象都用const声明
<body>
<script>
//1、声明常量：一般常量、数组、对象都用const声明
// const SCHOOL = "尚硅谷";
// console.log(SCHOOL);
//2、常量声明默认大写字母
// const A = "100";
//3、块级作用域
// {
// const PLAYER="UZI";
// }
// console.log(PLAYER);
//4、常量值不能修改
// const NAME="LEE";
// NAME="李";
//5、对数组和对象常量的修改，不报错[主要是常量的指针没变]
// const ARRAY = ["a","b","c"];
// ARRAY.push("d");
// console.log(ARRAY);
</script>
</body>
3、解构赋值
语法：
<body>
<script>
//ES6 允许按照一定的模式从数组和对象中提取值，对变量进行赋值
//1、数组的解构：字段可以不同
// const F4 = ["刘能","赵四","宋小宝","小沈阳"];
// let [liu,zhao,song,xiao] = F4;
// console.log(liu);
// console.log(zhao);
// console.log(song);
// console.log(xiao);
//2、对象的解构：字段必须相同
// const ZHAO = {
// name: "赵本山",
// age: "不详",
// ability: function(){
// console.log("昨天，今天和明天");
// }
// }
// let {name,age,ability} = ZHAO;
// console.log(name);
// console.log(age);
// console.log(ability);
// ability();
// let {ability} = ZHAO;
// ability();
</script>
</body>
4、模板字符串
语法：
<body>
<script>
//ES6 中引入了新的字符串声明 ` ` [原来是""和'']
//1、声明
// let str = `我也是一个字符串`;
// console.log(str,typeof str);
//2、字符串中可以直接出现换行符
//原来
// let str2 = "<ul>"
// +"<li>沈腾</li>"
// +"<li>马丽</li>"
// +"</ul>";
// console.log(str2);
// //现在
// let str3 = `<ul>
// <li>沈腾</li>
// <li>马丽</li>
// </ul>`;
// console.log(str3);
//3、变量拼接
// let lovest = "沈腾";
// let say = `${lovest}是我最喜欢的喜剧演员`;
// console.log(say);
</script>
</body>
5、对象的简化写法
<body>
<script>
//ES6 允许直接在{}中写入变量和函数，作为对象的属性和方法
// let name = "尚硅谷";
// let change = function(){
// console.log("we can change your life");
// }
// const school = {
// name,
// change
// }
// console.log(school);
// console.log(school.change());
//对象中函数的简化写法
// const school2 = {
// name,
// change2(){
// console.log("we can change your life too.");
// }
// }
// console.log(school2);
// console.log(school2.change2());
</script>
</body>
6、箭头函数
语法：
<body>
<script>
//ES6 允许使用箭头=> 定义函数
//1、声明
//原来
// let fn = function(){
// console.log("i'm a function");
// }
// fn();
//现在
// let fn2 = ()=>{
// console.log("i'm a function too");
// }
// fn2();
//2、=>声明的函数 this是静态的，this始终指向函数声明时所在的作用域下的this值
// window.name = "尚硅谷";
// const school = {
// name : "ATGUIGU"
// }
// let fn3 = function(){
// console.log(this.name);
// }
// let fn4 = ()=>{
// console.log(this.name);
// }
//直接调用
// fn3();
// fn4();
//call方法调用
// fn3.call(school);
// fn4.call(school);
//3、=>声明的函数，不能作为构造函数
// let person = (name,age)=>{
// this.name = name;
// this.age = age;
// }
// let me = new person("lee",20);
// console.log(me);
//4、=>声明的函数 不能使用arguments变量
// let fn5 = function(){
// console.log(arguments);
// }
// fn5(1,2,3);
// let fn6 = ()=>{
// console.log(arguments);
// }
// fn6(4,5,6);
//5、箭头函数的简写
//1)、只有一个参数时，可以省略小括号
// let add = n =>{
// return n+1;
// }
// console.log(add(7));
//2）、当代码体只有一句话时，可以省略{}和return
// let pow = n => n*n;
// console.log(pow(7));
</script>
</body>
实例：
<body>
<div id="ad"></div>
<script>
//1、需求一：点击div 2s后变色pink
// let ad = document.getElementById("ad");
//原来写法
// ad.addEventListener("click",function(){
// console.log(this);//this是add
// let _this = this;
// //定时器
// setTimeout(function(){
// //修改背景颜色
// console.log(this);//this是window
// _this.style.background='pink';
// },2000);
// });
//箭头函数写法
// ad.addEventListener("click",function(){
// setTimeout(()=>{
// console.log(this);
// this.style.background='pink';
// },2000);
// });
//2、需求二：从数组中返回偶数元素
// let arr = [2,5,16,88,77,97];
//原来写法
// let res = arr.filter(function(item){
// if(item%2===0){
// return true;
// }else{
// return false;
// }
// });
//箭头函数写法
// let res = arr.filter(item=>item%2===0);
// console.log(res);
//3、测试this
// window.name = 'ATGUIGU';
// const Person = {
// name:'lee',
// say:function(){
// console.log(this.name);
// }
// }
// Person.say();//this是person
// const Person2 = {
// name:"ren",
// say:()=>{
// console.log(this.name);
// }
// }
// Person2.say();//this是window
</script>
</body>
7、参数默认值
语法：
<body>
<script>
//ES6 允许给函数参数设置默认值
//1、形参初始值，具有默认值的参数：一般位置放在最后
// function add(a,b,c=10){
// return a+b+c;
// }
// let res = add(1,2);
// console.log(res);
//2、与解构赋值结合
// function connect(options){
// console.log(options.host);
// console.log(options.username);
// console.log(options.password);
// console.log(options.port);
// }
// connect({
// host: "localhost",
// username: "root",
// password: "root",
// port: 3306
// });
// function connect2({host="127.0.0.1",username,password,port}){
// console.log(host);
// console.log(username);
// console.log(password);
// console.log(port);
// }
// connect2({
// username: "root",
// password: "root",
// port: 3306
// });
</script>
</body>
8、rest参数
语法：
<body>
<script>
//ES6 引入rest，用以获取函数的实参。用来替代arguments
//ES5 获取实参方式：[获取的是Object对象]
// function arr(){
// console.log(arguments);
// }
// arr(1,2,3);
//ES6 rest参数：[获取的是数组]
// function arr2(...args){
// console.log(args); //这样就可以在这里用array的 方法了 filter some every map等
// }
// arr2(4,5,6);
//rest参数必须放在最后
// function arr3(a,b,...args){
// console.log(a);
// console.log(b);
// console.log(args);
// }
// arr3(7,8,9,10,11,12);
</script>
</body>
9、spread扩展运算符
语法：
<body>
<script>
//ES6 新增...扩展运算符，将数组转化为逗号分隔的 参数序列
const TFBOY = ["易烊千玺","王源","王俊凯"];
function chunwan(){
console.log(arguments);
}
chunwan(TFBOY);//1个参数 组成一个数组
chunwan(...TFBOY);//3个参数
</script>
</body>
实例：
<body>
<div>1</div>
<div>2</div>
<div>3</div>
<script>
//1、数组的合并
// const kuaizi = ["王太利","肖央"];
// const fenghuang = ["曾毅","玲花"];
//原来合并数组
// const zuixuanxiaopingguo = kuaizi.concat(fenghuang);
// console.log(zuixuanxiaopingguo);
//现在合并数组
// const zuixuanxiaopingguo2 = [...kuaizi,...fenghuang];
// console.log(zuixuanxiaopingguo2);
//2、数组克隆
// const sanzhihua = ["E","G","M"];
// const sanyecao = [...sanzhihua];
// console.log(sanyecao);
//3、将伪数组转为真正的数组
// const divs = document.querySelectorAll("div");
// console.log(divs);
// const divarr = [...divs];
// console.log(divarr);
</script>
</body>
10、Symbol
语法：
<body>
<script>
//Symbol 表示独一无二的值
//1、Symbol的值是独一无二的，用来解决命名冲突的问题
//2、Symbol不能与其他数据进行运算
//3、Symbol定义的对象属性不能使用for...in循环遍历，可以用Reflect.ownKeys来获取对象的所有键名
//1、创建Symbol
// let s = Symbol();
// console.log(s,typeof s);
// let s2 = Symbol("尚硅谷");
// let s3 = Symbol("尚硅谷");
// console.log(s2,typeof s2);
// console.log(s3,typeof s3);
// console.log(s2===s3);
// let s4 = Symbol.for("尚硅谷");
// let s5 = Symbol.for("尚硅谷");
// console.log(s4,typeof s4);
// console.log(s4,typeof s5);
// console.log(s4===s5);
//2、Symbol不可以与其他数据进行运算
// let res = s+100;
// let res2 = s+"100";
// let res3 = s+s;
//3、JS的基本数据类型 USONB
// undefined
// String Symbol
// Object
// Number Null
// Boolean
</script>
</body>
实例1：
<body>
<script>
//Symbol创建对象属性
//1、向game中添加up down [如果game内容很多，无法一眼看出里边是否有up down，如何安全的添加]
// const game = {
// name: "游戏",
// up:function(){
// console.log("up up up up");
// },
// down:function(){
// console.log("down down down down");
// }
// }
//先声明一个对象
// const method = {
// up : Symbol(),
// down : Symbol()
// }
// game[method.up] = function(){
// console.log("this is symbol up");
// }
// game[method.down] = function(){
// console.log("this is symbol down");
// }
// console.log(game);
//2、第二种添加方式
// let say = Symbol();
// const youxi = {
// name : "狼人杀",
// [say]:function(){
// console.log("say...");
// },
// [Symbol("zibao")]:function(){
// console.log("zibao...");
// },
// }
// console.log(youxi);
// youxi[say]();
</script>
</body>
11、迭代器
<body>
<script>
//声明一个数组
const xiyou = ["唐僧","孙悟空","猪八戒","沙僧"];
//for...in
for(let v in xiyou){
console.log(xiyou[v]);//V是index脚标
}
//for...of
for(let v of xiyou){
console.log(v);//V是value值
}
//iterator
const ite = xiyou[Symbol.iterator]();
let obj = null;
do{
obj = ite.next();
console.log(obj.value);
}while(!obj.done);
</script>
</body>
实例：
<body>
<script>
//定义一个对象，自定义iterator方法
const Person = {
name : "person name",
arrs : [
"aaa",
"bbb",
"ccc",
"ddd"
],
[Symbol.iterator]:function(){
let index = 0;
return {
next:()=>{
if(index<this.arrs.length){
const res ={value:this.arrs[index],done:false};
index++;
return res;
}else{
return {value:undefined,done:true};
}
}
}
}
}
for(let v of Person){
console.log(v);
}
</script>
</body>
12、生成器
语法：
<body>
<script>
//生成器函数是ES6提供的一种 异步编程 解决方案
//原来：异步编程 纯回调函数 ajax
//yield 是ES6的新关键字，使生成器函数执行暂停，yield关键字后面的表达式的值返回给生成器的调用者。它可以被认为是一个基于生成器的版本的return关键字
//语法
function * gen(){
console.log(1);
yield "你好啊";
console.log(2);
yield "你也好啊";
console.log(3);
yield "你真好啊";
console.log(4);
}
let iterator = gen();
console.log(iterator.next());
console.log(iterator.next());
console.log(iterator.next());
console.log(iterator.next());
for(let v of gen()){
console.log(v);
}
</script>
</body>
生成器函数的参数传递
<body>
<script>
function * gen(args){
console.log(args);
let one = yield 111;
console.log(one);
let two = yield 222;
console.log(two);
let three = yield 333;
console.log(three);
}
let iterator = gen('AAA');
console.log(iterator.next()); //111
console.log(iterator.next('BBB'));//222
console.log(iterator.next('CCC'));//333
console.log(iterator.next('DDD'));//undefined
</script>
</body>
生成器函数实例：
<body>
<script>
//需求 1s后 控制台输出aaa, 之后再2s 控制台输出bbb ,再3s 控制台输出ccc
//原来，回调函数里有回调
// setTimeout(()=>{
// console.log("aaa");
// setTimeout(()=>{
// console.log("bbb");
// setTimeout(()=>{
// console.log("ccc");
// },3000);
// },2000);
// },1000);
//使用生成器函数解决
function one(){
setTimeout(()=>{
console.log("aaa");
iterator.next();
},1000)
}
function two(){
setTimeout(()=>{
console.log("bbb");
iterator.next();
},2000)
}
function three(){
setTimeout(()=>{
console.log("ccc");
iterator.next();
},3000)
}
function * gen(){
yield one();
yield two();
yield three();
}
let iterator = gen();
iterator.next();
</script>
</body>
13、Promise
Promise是ES6引入的一个异步编程的新解决方案。
语法上Promise是一个构造函数，用来封装异步操作并可以获取其成功失败的结果。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Promise基础语法</title>
</head>
<body>
<script>
//实例化Promise对象
const p = new Promise(function(resolve,reject){
setTimeout(()=>{
// let data = "数据库中的user数据";
// resolve(data);
let reasonData = "异常数据";
reject(reasonData);
},1000);
});
//调用Promise中的then方法
p.then(function(value){
//正常返回
console.log(value);
},function(reason){
//发生异常
console.error(reason);
});
</script>
</body>
</html>