ES 6学习笔记：
声明变量：
let声明变量不可重复声明
var 可以重复声明变量
块级作用域： 全局，函数，eval
let 的作用域只是在代码块中。 if else while for
var 的作用域是全局作用域
不存在变量提升：
let[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-bkVTN2Ef-1672538086501)(C:\Users\12926\AppData\Roaming\Typora\typora-user-images\image-20221227103328781.png)]let 不允许在变量声明之前去使用变量 会报错，
var 在变量之前去使用变量，会出现undefined
不影响作用域链
Const 常量 及特点：
1，const 常量一定要赋初始值
2，一般常量使用大写
3，常量的值不能修改
4，块级作用域
5，对于数组和对象里的属性作修改，不算对常量的修改，不会报错
变量解构赋值：
解构赋值：es 6 允许按照一定的模式从数组和对象中提取值，对变量进行赋值
1，数组的解构
const F4 = ['XIA','LI','JUN','张'] let [xiao,liu ,zhao,song ] = F4; console.log(xiao); //XIA console.log(liu); //LI console.log(zhao); //JUN console.log(song); //张
2，对象的解构
const zhao = { name :'夏'， age: '19', xiaopin : function(){ conlog.log("xxxxxx") } } let { name ,age ,xiaopin } = zhao; conlog.log(name) // 夏 conlog.log(age) // 19 conlog.log(xiaopin) //上面那个方法
es6 模板字符串
ES6 引入新的声明字符串的方式 [ `` ] , '' , "" 1,声明 let str = `我也是一个字符串`; console.log(str,typeof str) //我也是一个字符串 + String 2,特性 一: 内容中可以直接出现换行符 二: 变量拼接 let a = '夏'； let b = `${a} 是我心目中最帅的人`； console.log(b) //打印: 夏是我心目中最帅的人
es6 的对象简写写法
ES 6允许在大括号里面，直接写入变量和函数，作为对象的属性和方法 //这样书写也更加的简洁 let name = '尚硅谷'; let change = function(){ console.log('尚硅谷白嫖还不错!') } const school = { name, change //定义一个方法，可以直接简写为 improve(){ console.log("我们是简写之后的方法!!!") } } console.log(school) //打印结果为: '尚硅谷' , function()
es6 箭头函数
ES6 允许使用[ 箭头函数] (=>)定义函数 //声明一个函数 之前声明: let fn = function(){ } 使用箭头函数 let fn = (形参1，形参2) => { //代码体 return 形参1+形参2; } //调用箭头函数 let result = fn(形参1,形参2) console.log(result); //结果为 形参1+形参2 //箭头函数的特性 1，this是静态的，this 始终指向函数声明时所在作用域下的this 的值 function getName(){ console.log(this.name); } let getName2 = () => { console.log(this.name); } //设置window 对象的name 属性 window.name = '尚硅谷'; const school = { name: "ATGUIGU" } //直接调用俩个函数 getName(); //尚硅谷 getName2(); //尚硅谷 getName.call(school); //ATGUIGU getName2.call(school); //尚硅谷 2，不能作为构造函数实例化对象 let person = (name,age) => { this,name = name; this,age = age; } let me = new Person('xia',30) console.log(me) //会报一个 语法错误，person is not a constructor 3,不能使用 argument 变量 let fn = () =>{ console.log(argument) //会报argument 没有被定义 } 4 .箭头函数的简写 1，省略小括号， 当形参有且只有一个的时候 原:let add = (n) => { ==> return n + n; } 因为只有一个形参 可以简写为: let add = n =>{ return n + n; } console.log(add(9)); 2,省略花括号 当代码体只有一条语句的时候 ,此时return 必须省略，而且语句的执行结果就是函数的返回值 原:let pow = (n) => { return n*n; }; console.log(pow(9)); 简写为: let pow = n => n*n;
箭头函数允许给参数赋值初始值
1.形参的一个初始值 function add(a,b,c=10){ //形参初始值，具有默认值的参数，一般的位置要靠后 （潜规则） return a+b+c; } let result = add(1,2); console.log(result); // 通过给c=10;赋默认值，打印结果为13 2与解构赋值结合 function connect(options,username,password,port){ console.log(username) } connect({ host: 'localhost', username: 'root', password:'root', port:3306 })
es6 —rest 参数
//es6 引入rest 参数，用于获取函数的实参，用来代替arguments //es5 获取实参的方式 function date(){ console.log(arguments) } date('夏','茂'); // es6获取实参的方式 --rest 方式 function date(...args) { console.log(args) //filter some every map } date('夏','mao') //rest 参数必须要放到参数的最后 function date(a,b,...args){ console.log(a) console.log(b) console.log(args) } date(1,2,3,4,5,6) 打印1，2 3，4，5，6 数组
es6 扩展运算符
// [ ... ] 扩展运算符能将 数组转换为逗号分隔的 参数序列 //声明一个数组 ... const tfboys = ['王实际','齐菁菁','高俊'] //声明一个函数 -->将一个数组变成三个参数 function chuanwan(){ console.log(arguments); } chuanwan(...tfboys); //应用 //1.数组的合并 const kuaizi = ['王太利','肖洋']; const fenghuang = ['凤凰传奇','玲花']; //es5 的合并方法 console.log(kuaizi.concat(fenghuang)); //es6 扩展运算符 const hebin = [...kuaizi,...fenghuang]; console.log(hebin); //2.数组的克隆 const sanzhihua = ['E','G','M']; const sanzhicao = [...sanzhihua]; console.log(sanzhicao); //3.将伪数组转换成真正的数组 const divs = document.querySelectorAll('div'); const arrdivs = [...divs]; console.log(arrdivs);
es6 之Symbol 的介绍与创建
Symbol 的特点: 1,Symbol 的值是唯一的，用来解决命名冲突问题 2,Symbol 的值不能与其他数据进行运算 3,Symbol 定义的对象属性不能使用 for ... in 循环遍历，但是可以使用 Reflect.ownKeys 来获取对象的所有键名； //1，创建symbol let s= Symbol(); console.log(s,typeof s); //2，第二种创建symbol 的方法 let s2 = Symbol('夏天'); let s3 = Symbol('夏天'); console.log(s2); console.log(s3); console.log(s2 === s3); //3，第三种创建的方法 let s4 = Symbol.for('冬天'); console.log(s4); //USONB u underfined s string o object b boolen Symbol 的使用: // Symbol 向对象中添加方法 // Symbol 表示独一无二 的值，往对象中添加方法和属性 let game = {} //声明一个对象 let methods = { up: Symbol(), //表明我当前的方法是独一无二的 down: Symbol() }; game[methods.up] =function(){ console.log("我可以改变形状"); } game[methods.down] = function(){ console.log("我可以啊安全的下降"); } console.log(game); // 第二种添加方法 let youxi ={ name: "狼人杀", [Symbol('say')]:function(){ console.log("我可以发芽吗？"); } } console.log(youxi);
Symbol 内置值
1, Symbol.isConcatSpreadable 2, Symbol.unscopables 3, Symbol.match 4, Symbol.replace 5, Symbol.search 6, Symbol.spilt 7, Symbol.iterator 8, Symbol.toPrimitive 9, Symbol.toStringTag 10,Symbol.species
