摘要:命令改变了这个行为,必须要在声明后使用,否则报错。值为临时锁区保证了命令不会受到外部影响。基本使用声明一个只读的常量。默认值解构允许指定默认值内部严格使用来判断是否有值,所以只有当一个数组成员严格等于,默认值才会生效。
ES6
ES6 就是ECMAScript 6是新版本JavaScript语言的标准。
1. let 和 constES6 新增了 let 和 const 来声明变量和常量,它们的用法类似var, 但只在代码块中有效。
1.1 let 的基本使用{ var a = "hello"; let b = "world"; } a // hello b // Uncaught ReferenceError: a is not defined
上述代码表明,let只在他所在的代码块中有效。
1.2 不能重复定义let不允许在相同作用域内,重复声明同一个变量。
let a = "hello"; let a = "world"; // Uncaught SyntaxError: Identifier "a" has already been declared function s1(arg){ let arg; // Uncaught SyntaxError: Identifier "arg" has already been declared }1.3 不存在变量提升
var 命令会存在变量提升的问题,在定义之前使用,值为 undefined。
let 命令改变了这个行为,必须要在声明后使用,否则报错。
console.log(a); // Uncaught ReferenceError: a is not defined let a = "hello world"; console.log(b); // 值为 undefined var b = "hello kitty"1.4 临时锁区(Temporal Distonrtion Zone)
保证了let 命令不会受到外部影响。
var a = 123; function s1(){ a = "hello world"; // Uncaught ReferenceError: a is not defined let a = "hello kitty"; }1.5 const 基本使用
const声明一个只读的常量。一旦声明,常量的值就不能改变。
const a = "hello world!"; console.log(a) // hello world! a = "hello kitty"; // Uncaught SyntaxError: Identifier "a" has already been declared
const实际上并不是保证变量的值不能变,而是变量指向的那个内存地址不得改动。
const arr = []; arr[0] = "hello"; arr[1] = "world"; console.log(arr); // ["hello", "world"] arr = []; // Uncaught SyntaxError: Identifier "arr" has already been declared const json = {}; json.name = "LiMing"; console.log(json.name) // LiMing json = {} Uncaught SyntaxError: Identifier "json" has already been declared
常量 arr, json 储存的是一个地址,只是保证了地址不可变,但数组和对象本身是可变的,所以依然可以为其添加新属性。
2 解构 2.1 数组解构赋值var name = "LiMing"; var age = 12; // ES5 变量赋值 let [name, age] = ["LiMing", 12]; // 解构赋值
以前为变量赋值,只能直接指定值。ES6中可以按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为解构。
let a = ["LiMing", 12]; let [name, age] = a; console.log(name, age) // LiMing 12 let [,,b] = ["hello", "world", "hello kitty"]; console.log(b) // hello kitty let [one, , two] = [1, 2, 3]; console.log(one, two) // 1 3 let [s1, ...s2] = [1, 2, 3, 4, 5]; console.log(s1, s2) // 1 [2, 3, 4, 5] let b = []; console.log(b) // undefined let [a1, a2 ,a3] = [1]; console.log(a1, a2) // 1 undefined
如果解构不成功,变量的值就等于undefined。
如果右边的数据不是数组将会报错。
let [a] = true; // TypeError: true is not iterable let [a] = NaN; // TypeError: NaN is not iterable let [a] = 1; // TypeError: 1 is not iterable let [a] = null; // TypeError: null is not iterable let [a] = undefined; // TypeError: undefined is not iterable let [a] = {}; // TypeError: {} is not iterable2.2 默认值
解构允许指定默认值
let [a = "hello"] = []; console.log(a) // hello
ES6内部严格使用 === 来判断是否有值,所以只有当一个数组成员严格等于undefined,默认值才会生效。
let [a = "hello world"] = [undefined]; console.log(a) // hello world let [a = "hello world"] = [null]; let [b = "hello kitty"] = [""]; console.log(a, b) // null ""2.3 对象解构
解构当然也可以用于对象
let {name, age} = {name: "LiMing", age: 12} console.log(name, age) // LiMing 12
对象解构与数组解构不同。 数组是有顺序的,变量值有位置决定,而对象是无序的,所以变量名必须为对象的属性名
let json = {name: "zero"} let {name} = json let {a} = json console.log(name, a) // zero undefined
如果变量名与属性名不一致,则需要:
let {a: name} = {name: "zero"} console.log(a) // zero2.4 函数参数解构
函数的参数当然也可以解构
function s1([a, b]){ return a + b } console.log(s1([1, 5])) // 6 function add({a = 0, b = 0} = {}) { return a + b; } add({a: 3, b: 8}); // 11 add({a: 3}); // 3 add({}); // 0 add(); // 0
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/93604.html
摘要:模板字面量相当于格式化字符串字符串用两个包含起来并且内部的占位符用标识一般用于标识多行文本或者配合函数使用与箭头函数用于数组是用于让数组每一个元素都调用函数的语法基本格式为其中为数组元素下标为当前元素所属的数组对象在实际调用时只需要箭头函数 1.模板字面量相当于格式化字符串,字符串用两个``包含起来,并且内部的占位符用${variable}标识.一般用于标识多行文本或者配合函数使用. ...
摘要:前端小白最近面试几家公司,写点面经分享给大家,同时记录下自己的缺点以供后期补足,各个公司的开发方向不同,请各位理性看待。直接现场手敲触发的样式。数组去重如何实现如果用的话,里面如何写排序算法。对象何时被修改心态需要调整好,不紧张不匆忙。 前端小白最近面试几家公司,写点面经分享给大家,同时记录下自己的缺点以供后期补足,各个公司的开发方向不同,请各位理性看待。 问题相关 Css 布局方式有...
阅读 1980·2021-09-29 09:35
阅读 1926·2019-08-30 14:15
阅读 2954·2019-08-30 10:56
阅读 932·2019-08-29 16:59
阅读 541·2019-08-29 14:04
阅读 1278·2019-08-29 12:30
阅读 1002·2019-08-28 18:19
阅读 450·2019-08-26 11:51