#|ES6基础学习——第一天(let 声明、const 声明、解构赋值、模板字符串（反引号）、简化对象写法、箭头函数、参数默认值、rest 参数、spread 扩展运算符) ES6|ES6学习

目录
1. let 声明
2. const 声明
3. 解构赋值
4. 模板字符串（反引号）
5. 简化对象写法
6. 箭头函数
7. 参数默认值
8. rest 参数
9. spread 扩展运算符
知识一：let 声明 let 声明特征：

变量不能重复声明
块儿级作用域
不存在变量提升
不影响作用域链

> //声明变量 let a; let b,c,d; let e = 100; let f = 521, g = 'iloveyou', h = []; //1. 变量不能重复声明 // let star = '罗志祥'; // let star = '小猪'; //2. 块儿级作用域全局, 函数, eval // if else while for // { //let girl = '周扬青'; // } // console.log(girl); //3. 不存在变量提升，就是 var 可以声明提前，只是没有值，是 undefined // console.log(song); // let song = '恋爱达人'; //4. 不影响作用域链 { let school = '尚硅谷'; function fn(){ console.log(school); } fn(); }

知识二：const 声明
注意事项：

一定要赋初始值
一般常量使用大写(潜规则)
常量的值不能修改
块儿级作用域
对于数组和对象的元素修改, 不算做对常量的修改, 不会报错

> //声明常量 const SCHOOL = '尚硅谷'; //1. 一定要赋初始值 // const A; //2. 一般常量使用大写(潜规则) // const a = 100; //3. 常量的值不能修改 // SCHOOL = 'ATGUIGU'; //4. 块儿级作用域 // { //const PLAYER = 'UZI'; // } // console.log(PLAYER); //5. 对于数组和对象的元素修改, 不算做对常量的修改, 不会报错 const TEAM = ['UZI','MXLG','Ming','Letme']; // TEAM.push('Meiko');

知识三：解构赋值

> //ES6 允许按照一定模式从数组和对象中提取值，对变量进行赋值， //这被称为解构赋值。 //1. 数组的结构 const F4 = ['小沈阳','刘能','赵四','宋小宝']; let [xiao, liu, zhao, song] = F4; console.log(xiao); console.log(liu); console.log(zhao); console.log(song); //2. 对象的解构 const zhao = { name: '赵本山', age: '不详', xiaopin: function(){ console.log("我可以演小品"); } }; let {name, age, xiaopin} = zhao; console.log(name); console.log(age); console.log(xiaopin); xiaopin(); let {xiaopin} = zhao; xiaopin();

知识四：模板字符串（反引号）

内容中可以直接出现换行符，只有『``』可以，单双引号不可以
变量拼接

> // ES6 引入新的声明字符串的方式『``』 '' "" //1. 声明 // let str = `我也是一个字符串哦!`; // console.log(str, typeof str); //2. 内容中可以直接出现换行符，只有『``』可以，单双引号不可以 let str = ` 沈腾玛丽魏翔艾伦 `; //3. 变量拼接 let lovest = '魏翔'; let out = `${lovest}是我心目中最搞笑的演员!!`; console.log(out);

【#|ES6基础学习——第一天(let 声明、const 声明、解构赋值、模板字符串（反引号）、简化对象写法、箭头函数、参数默认值、rest 参数、spread 扩展运算符)】知识五：简化对象写法

> //ES6 允许在大括号里面，直接写入变量和函数，作为对象的属性和方法。 //这样的书写更加简洁 let name = '尚硅谷'; let change = function(){ console.log('我们可以改变你!!'); }const school = { name, change, improve(){ console.log("我们可以提高你的技能"); } }console.log(school);

知识六：箭头函数
注意：

this 是静态的. this 始终指向函数声明时所在作用域下的 this 的值
不能作为构造实例化对象
不能使用 arguments 变量
箭头函数还可以再次简写

> // ES6 允许使用「箭头」（=>）定义函数。 //声明一个函数 // let fn = function(){// } // let fn = (a,b) => { //return a + b; // } //调用函数 // let result = fn(1, 2); // console.log(result); //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(); //尚硅谷//call 方法调用 // getName.call(school); //ATGUIGU // getName2.call(school); //尚硅谷//2. 不能作为构造实例化对象 // let Person = (name, age) => { //this.name = name; //this.age = age; // } // let me = new Person('xiao',30); // console.log(me); // 会报错//3. 不能使用 arguments 变量 // let fn = () => { //console.log(arguments); // } // fn(1,2,3); // 报错 arguments 变量未定义//4. 箭头函数的简写 //1) 省略小括号, 当形参有且只有一个的时候 // let add = n => { //return n + n; // } // console.log(add(9)); //2) 省略花括号, 当代码体只有一条语句的时候, 此时 return 必须省略 // 而且语句的执行结果就是函数的返回值 let pow = n => n * n; console.log(pow(8));

实例：

> //需求-1点击 div 2s 后颜色变成『粉色』 //获取元素 let ad = document.getElementById('ad'); //绑定事件 ad.addEventListener("click", function(){ //保存 this 的值 // let _this = this; //定时器 setTimeout(() => { //修改背景颜色 this // console.log(this); // _this.style.background = 'pink'; this.style.background = 'pink'; }, 2000); }); //需求-2从数组中返回偶数的元素 const arr = [1,6,9,10,100,25]; // const result = arr.filter(function(item){ //if(item % 2 === 0){ //return true; //}else{ //return false; //} // }); const result = arr.filter(item => item % 2 === 0); console.log(result); // 箭头函数适合与 this 无关的回调. 定时器, 数组的方法回调 // 箭头函数不适合与 this 有关的回调.事件回调, 对象的方法

知识七：参数默认值

> //ES6 允许给函数参数赋值初始值 //1. 形参初始值具有默认值的参数, 一般位置要靠后(潜规则) // function add(a,b,c=10) { //return a + b + c; // } // let result = add(1,2); // console.log(result); //2. 与解构赋值结合 function connect({host="127.0.0.1", username,password, port}){ console.log(host) console.log(username) console.log(password) console.log(port) } connect({ host: 'atguigu.com', username: 'root', password: 'root', port: 3306 })

知识八：rest 参数

> // ES6 引入 rest 参数，用于获取函数的实参，用来代替 arguments // ES5 获取实参的方式 // function date(){ //console.log(arguments); // } // date('白芷','阿娇','思慧'); // rest 参数 function date(...args){ console.log(args); // filter some every map } date('阿娇','柏芝','思慧'); //rest 参数必须要放到参数最后 function fn(a,b,...args){ console.log(a); console.log(b); console.log(args); //[3, 4, 5, 6] } fn(1,2,3,4,5,6);

知识九：spread 扩展运算符

> // 『...』扩展运算符能将『数组』转换为逗号分隔的『参数序列』 //声明一个数组 ... const tfboys = ['易烊千玺','王源','王俊凯']; // => '易烊千玺','王源','王俊凯'// 声明一个函数 function chunwan(){ console.log(arguments); }chunwan(...tfboys); // chunwan('易烊千玺','王源','王俊凯')

实例应用：

> //1. 数组的合并 const kuaizi = ['王太利','肖央']; const fenghuang = ['曾毅','玲花']; // const zuixuanxiaopingguo = kuaizi.concat(fenghuang); const zuixuanxiaopingguo = [...kuaizi, ...fenghuang]; console.log(zuixuanxiaopingguo); //2. 数组的克隆 const sanzhihua = ['E','G','M']; const sanyecao = [...sanzhihua]; //['E','G','M'] console.log(sanyecao); //3. 将伪数组转为真正的数组 const divs = document.querySelectorAll('div'); //是一个对象 const divArr = [...divs]; console.log(divArr); // arguments type="text/javascript" > let arr1 = [1,3,5,7,9] let arr2 = [2,4,6,8,10] console.log(...arr1); //展开一个数组 let arr3 = [...arr1,...arr2]//连接数组//在函数中使用 function sum(...numbers){ return numbers.reduce((preValue,currentValue)=>{ return preValue + currentValue }) } console.log(sum(1,2,3,4)); //构造字面量对象时使用展开语法 let person = {name:'tom',age:18} let person2 = {...person} //console.log(...person); //报错，展开运算符不能展开对象 person.name = 'jerry' console.log(person2); console.log(person); //合并 let person3 = {...person,name:'jack',address:"地球"} console.log(person3);

点击回到顶部