向总部建设网站申请书,外国好的设计网站大全,网站建设技术可行性,如何建多语言网站1. ES6的解构ES6中引入了解构赋值的操作#xff0c;其作用是#xff1a;将值从数组Array或属性从对象Object提取到不同的变量中即分为两种情况#xff1a;从数组Array中解构#xff0c;以及从对象Object中解构①.从数组中解构const [a, b] [1, 2]//a 1, b 2当然这些是基…1. ES6的解构ES6中引入了解构赋值的操作其作用是将值从数组Array或属性从对象Object提取到不同的变量中即分为两种情况从数组Array中解构以及从对象Object中解构①.从数组中解构const [a, b] [1, 2]//a 1, b 2当然这些是基本的数组解构赋值你还可以用逗号,进行跨值解构用扩展运算符...进行多余项的解构等等②.从对象中结构const {a, b} {a: 1, a: 2}//a 1, b 2这也是基本的对象结构赋值不过在这里提一下你仍然可以用扩展运算符...进行多余项的解构const {a, ...b} {a: 1, b: 2, c: 3, d: 4}//a 1//b {b: 2, c: 3, d: 4}③. 其他类型当解构其他类型时也是先将其他类型值转换为Array或者Objectconst [a, b, c] hello// a h, b e, c lconst {toString: a} truetoString Boolean.prototype.toString // true2. ES6的函数默认参数① 定义函数默认参数允许在没有值或undefined被传入时使用默认形参。栗子function foo (a 1, b 2) {console.log(a, b)}foo ()// 1 2Note: 形参默认是undefiend, 也就是说在没有默认值时a undefiend, b undefined不过上面这个例子是没有值被传入的情况undefiend被传入的情况如下function foo (a 1, b 2) {console.log(a, b)}foo (undefined, window.valueIsNotDefined)// 1 2② 默认值不是只有函数参数才能用还是直接举个例子var {a 1, b 2} {}// a 1, b 2var {a 1, b 2} {a: hello}// a hello, b 2其实解构赋值也是可以赋值默认值的由此可见函数参数默认值的本质还是解构赋值3. 一个有趣的小栗子说了那么多废话终于要说到这个小栗子了。Step 1这是一种超常见的情况有的时候当我们定义函数参数的时候可以去解构当前的参数比如function foo ({ a, b }) {console.log(a, b)}foo({ a: 1, b: 2 })// 1 2Note: 可以看成做了以下操作const { a, b } { a: 1, b: 2 };console.log(a, b)Step 2更多的时候我们不会满足于此我们想要一个默认值function foo ({a 1, b 2}) {console.log(a, b)}foo({})// 1 2Note: 可以看成做了以下操作const { a 1, b 2 } {};console.log(a, b)问题 1然而我们实际使用时不会用foo({})这种写法来表示参数缺省我们大多数人采用foo()这种显而易见的写法由此问题来了function foo ({a 1, b 2}) {console.log(a, b)}foo()Uncaught TypeError: Cannot destructure property a of undefined or null.at foo (:1:14)at :4:1通过换一种写法不难发现错误原因const {a 1, b 2} undefined // Error解决方法其实function foo ({a 1, b 2}) {}是对第一个参数的解构那我们完全按照文章前面函数默认参数定义的那样在参数为undefined或没有传入的时候预先定义:function foo ({a, b} {a: 1, b: 2}) {console.log(a, b)}foo()// 1 2分析可以看做以下写法function foo (temp {a: 1, b: 2}) {var {a, b} tempconsole.log(a, b)}foo()// 1 2问题 2上面这种方法看似解决了问题但当我们回过头来重新运行foo({}),却出现了错误function foo ({a, b} {a: 1, b: 2}) {console.log(a, b)}foo({}) // undefined undefined经历了前面情景的分析后不难发现此时的函数参数传入了一个有效值所以temp不会去采纳默认值而是去采纳有效的传入值{}; 而var { a, b } {}的解构自然而然会让a和b变为undefined解决方法var { a 1, b 2 } {}的形式可以解决这种情况原函数写作function foo ({ a 1, b 2 } {}) {console.log(a, b)}foo()// 1 2foo({})//1 2
