如何做网站调研,企业网站推广设计,六盘水市城乡建设局网站,wordpress更改后台地址文章目录 #x1f4da;ES6新特性#x1f4da;let关键字#x1f4da;const关键字#x1f4da;变量的解构赋值#x1f4da;模板字符串#x1f4da;简化对象写法#x1f4da;箭头函数#x1f4da;函数参数默认值设定#x1f4da;rest参数#x1f4da;spread扩展运算符ES6新特性let关键字const关键字变量的解构赋值模板字符串简化对象写法箭头函数函数参数默认值设定rest参数spread扩展运算符SymbolSymbol基本介绍与使用对象添加Symbol类型的属性Symbol内置值 学习链接尚硅谷Web前端ES6教程 ES6新特性
let关键字
let关键字用来声明变量使用let声明的变量有几个特点 变量不允许重复声明。块级作用域。不存在变量提升不影响作用域链 应用场景以后声明变量使用let 就对了。
const关键字
const关键字用来声明常量const声明有以下特点 声明必须赋初始值。标识符一般为大写。不允许重复声明。值不允许修改。块级作用域。 注意对象属性修改和数组元素变化不会触发const 错误应用场景声明对象类型使用const非对象类型声明选择let。
变量的解构赋值
ES6 允许按照一定模式从数组和对象中提取值对变量进行赋值这被称为解构赋值。应用场景频繁使用对象方法、数组元素就可以使用解构赋值形式。!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0title变量的解构赋值/title
/head
bodyscript// 1. 数组的结构const F4 [小沈阳,刘能,赵四,宋小宝];let [xiao, liu, zhao, song] F4;console.log(xiao);console.log(liu);console.log(zhao);console.log(song);// 2. 对象的解构const zhaobenshan {name: 赵本山,age: 不详,xiaopin: function(){console.log(我可以演小品);}};let {name, age, xiaopin} zhaobenshan;console.log(name);console.log(age);console.log(xiaopin);xiaopin();/script
/body/html模板字符串
模板字符串template string是增强版的字符串用反引号标识特点 字符串中可以出现换行符可以使用 ${xxx} 形式输出变量 应用场景当遇到字符串与变量拼接的情况使用模板字符串。!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0title模板字符串/title
/head
bodyscript//1. 声明let str 我也是一个字符串哦!;console.log(str, typeof str);//2. 内容中可以直接出现换行符let str1 ulli沈腾/lili马丽/lili魏翔/lili艾伦/li/ul;console.log(str1, typeof str1)//3. 变量拼接let lovest 沈腾;let out ${lovest}是我心目中最搞笑的演员!!;console.log(out);/script
/body
/html简化对象写法
ES6 允许在大括号里面直接写入变量和函数作为对象的属性和方法。这样的书写更加简洁。应用场景对象简写形式简化了代码所以以后用简写就对了。!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0title简化对象写法/title
/head
bodyscriptlet name 尚硅谷;let change function(){console.log(我们可以改变你!!);}const school {name,change,improve(){console.log(我们可以提高你的技能);}}console.log(school);/script
/body
/html箭头函数
ES6 允许使用「箭头」定义函数。function写法function fn(param1, param2, …, paramN) { // 函数体return expression;
}写法let fn (param1, param2, …, paramN) {// 函数体return expression;
}箭头函数的注意点: 如果形参只有一个则小括号可以省略。函数体如果只有一条语句则花括号可以省略函数的返回值为该条语句的执行结果。箭头函数this始终指向声明时所在作用域下this的值。箭头函数不能作为构造函数实例化。不能使用 arguments。 注意箭头函数不会更改this指向用来指定回调函数会非常合适。!DOCTYPE html
html langenheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0title箭头函数/title
/headbodyscript//声明一个函数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);getName2.call(school);//箭头函数的简写//1) 省略小括号, 当形参有且只有一个的时候//2) 省略花括号, 当代码体只有一条语句的时候, 此时 return 必须省略// 而且语句的执行结果就是函数的返回值let pow n n * n; console.log(pow(8));//2. 不能作为构造实例化对象let Person (name, age) {this.name name;this.age age;}let me new Person(xiao,30);console.log(me);//3. 不能使用 arguments 变量let fn1 () {console.log(arguments);}fn1(1,2,3);/script
/body
/html函数参数默认值设定
ES6 允许给函数参数设置默认值当调用函数时不给实参则使用参数默认值。具有默认值的形参一般要靠后。可与解构赋值结合。!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0title函数参数默认值/title
/head
bodyscript//1. 形参初始值 具有默认值的参数, 一般位置要靠后(潜规则)function add(a,b,c10) {return a b c;}let result add(1,2);console.log(result);//2. 与解构赋值结合function connect({host127.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})/script
/body
/htmlrest参数
ES6 引入rest参数用于获取函数的实参用来代替 arguments作用与 arguments 类似。将接收的参数序列转换为一个数组对象。用在函数形参中语法格式fn(a, b, ...args)写在参数列表最后面。注意rest参数非常适合不定个数参数函数的场景。!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titlerest参数/title
/head
bodyscript// ES5 获取实参的方式function date(){console.log(arguments);}date(热辣滚烫,飞驰人生2,第二十条);// rest 参数function date(...args){console.log(args);}date(飞驰人生2,热辣滚烫,第二十条);// rest 参数必须要放到参数最后function fn(a,b,...args){console.log(a);console.log(b);console.log(args);}fn(1,2,3,4,5,6);/script
/body
/htmlspread扩展运算符
扩展运算符spread也是三个点...。它好比 rest 参数的逆运算将一个数组转为用逗号分隔的参数序列对数组进行解包。可用在调用函数时传递的实参将一个数组转换为参数序列。扩展运算符也可以将对象解包。!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0title扩展运算符/title
/head
bodyscript// 展开数组function fn(a, b, c) {console.log(arguments);console.log(a b c);}let arr [red, green, blue]; fn(...arr)// 数组合并let A [1, 2, 3];let B [4, 5, 6];let C [...A, ...B];console.log(C);// 对象合并let obj1 {a: 123};let obj2 {b: 456};let obj3 {c: 789};let obj { ...obj1, ...obj2, ...obj3 };console.log(obj);/script
/body
/htmlSymbol
Symbol基本介绍与使用
ES6 引入了一种新的原始数据类型 Symbol表示独一无二的值。它是 JavaScript 语言的第七种数据类型是一种类似于字符串的数据类型。JavaScript 的七种基本数据类型 值类型基本类型string、number、boolean、undefined、null、symbol引用数据类型object包括了array、function Symbol的特点 Symbol的值是唯一的用来解决命名冲突的问题。Symbol值不能与其他数据进行运算。Symbol定义的对象属性不能使用for...in循环遍历但是可以使用Reflect.ownKeys来获取对象的所有键名。 注: 遇到唯一性的场景时要想到Symbol。!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titlesymbol/title
/head
bodyscript//创建Symbollet s Symbol();console.log(s, typeof s);// 添加具有标识的Symbollet s2 Symbol(尚硅谷);let s3 Symbol(尚硅谷);console.log(s2 s3);//Symbol.for 创建,名字相同的 Symbol 具有相同的实体。let s4 Symbol.for(尚硅谷);let s5 Symbol.for(尚硅谷);console.log(s4 s5)// 输出Symbol变量的描述使用descriptionlet s6 Symbol(测试);console.log(s6.description);//不能与其他数据进行运算let result s 100;let result1 s 100;let result2 s s;/script
/body
/html 对象添加Symbol类型的属性
案例安全地向对象中添加属性和方法。分析如果直接向对象中添加属性或方法则原来对象中可能已经存在了同名属性或方法会覆盖掉原来的。所以使用 Symbol 生成唯一的属性或方法名可以更加安全地添加。!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleSymbol 创建对象属性/title
/head
bodyscript// 这是一个 game 对象假设我们不知道里面有什么属性和方法const game {uname: 俄罗斯方块,up: function () { },down: function () { }}// 通过 Symbol 生成唯一的属性名然后给 game 添加方法let [up, down] [Symbol(up), Symbol(down)];game[up] function () {console.log(up);}game[down] function () {console.log(down);}// 调用刚刚创建的方法game[up]();game[down]();/script
/body
/htmlSymbol内置值 除了定义自己使用的 Symbol 值以外ES6 还提供了11 个内置的 Symbol 值指向语言内部使用的方法。可以称这些方法为魔术方法因为它们会在特定的场景下自动执行。 !DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleSymbol内置属性/title
/head
bodyscriptclass Person{static [Symbol.hasInstance](param){console.log(param);console.log(我被用来检测类型了);return false;}}let o {};console.log(o instanceof Person);// 数组使用 concat 方法时是否可以展开const arr [1,2,3];const arr2 [4,5,6];arr2[Symbol.isConcatSpreadable] false;console.log(arr.concat(arr2));/script
/body
/html
