[Es6] Block-level scope and function declaration

Block scope and functions

es6 clearly stipulates that it can be declared in a block-level scope, and no error will be reported even in strict mode

//首先在全局作用域中声明f函数
function f() {
    
     console.log('I am outside!'); }

(function () {
    
    
  if (false) {
    
    
    // 重复声明一次函数f
    //在es5中执行时,下面的函数定义会被提升到if外面,因为if不是块级作用域
    //在es6执行时,if是块级作用域,里面声明的函数f对外面没有影响,if false 里面不会执行,变量也不会提升,
    function f() {
    
     console.log('I am inside!'); }
  }
//es5最终输出inside
//es6最终输出outside,
  f();
}());

Functions declared in the block-level scope, es6 will default to let declarations, but some browsers treat es6 block-level function declarations as var declarations, which will promote the declaration to the front of the scope, but the function body cannot be promoted, so it may Will result in undefined

// ES6的浏览器环境
function f() {
    
     console.log('I am outside!'); }
(function () {
    
    
  var f = undefined;
  if (false) {
    
    
    function f() {
    
     console.log('I am inside!'); }
  }

  f();
}());
// Uncaught TypeError: f is not a function

Therefore, when declaring functions at the block-level scope, it is best to use function expressions instead of promoting function declarations. The result is the same in any environment

// 函数声明语句
{
    
    
  let a = 'secret';
  function f() {
    
    
    return a;
  }
}

// 函数表达式
{
    
    
  let a = 'secret';
  let f = function () {
    
    
    return a;
  };
}

const command

Once const is declared, it must be initialized, and the value of the
const declaration object can not be changed in the future . It can only guarantee that the address of the object remains unchanged, but it cannot guarantee that the value of the object remains unchanged.

const foo = {
    
    };
foo.prop = 123;

foo.prop
// 123

foo = {
    
    }; // TypeError: "foo" is read-only
const a = [];
a.push('Hello'); // 可执行
a.length = 0;    // 可执行
a = ['Dave'];    // 报错
//彻底冻结对象,包括对象的属性
var constantize = (obj) => {
    
    
  Object.freeze(obj);
  //获取属性名,如果属性值是对象,就递归继续冻结该对象
  Object.keys(obj).forEach( (key, value) => {
    
    
    if ( typeof obj[key] === 'object' ) {
    
    
      constantize( obj[key] );
    }
  });
};

es6 method of declaring variables: var let const function class import

es6 stipulates that the global variables declared by var and function are attributes of the global object, but the newly added ones are not the global object, the browser value window, and node.js is global

Destructuring assignment

The arrays and objects deconstruction, extracting value assigned to other variables

The following is the array pattern matching assignment, as long as the pattern is the same, you can assign

var [a, b, c] = [1, 2, 3];
//表示从数组中提取值,一一对应赋值给新的数组变量
//模式完全匹配赋值
let [foo, [[bar], baz]] = [1, [[2], 3]];
foo // 1
bar // 2
baz // 3
//省略前面参数赋值
let [ , , third] = ["foo", "bar", "baz"];
third // "baz"
//省略中间参数赋值
let [x, , y] = [1, 2, 3];
x // 1
y // 3
//省略末尾参数,使用点语法解构赋值
let [head, ...tail] = [1, 2, 3, 4];
head // 1
tail // [2, 3, 4]
//点语法使用一个数组接收参数
let [x, y, ...z] = ['a'];
x // "a"
y // undefined
z // []

Incomplete structure

//多余的参数无法匹配,忽略掉
let [x, y] = [1, 2, 3];
x // 1
y // 2

let [a, [b], d] = [1, [2, 3], 4];
a // 1
b // 2
d // 4

Non-traversable objects cannot be deconstructed

let [foo] = 1;
let [foo] = false;
let [foo] = NaN;
let [foo] = undefined;
let [foo] = null;
let [foo] = {
    
    };

As long as there is an iterator, you can destructure and assign

let [x, y, z] = new Set(["a", "b", "c"]);
x // "a"

Guess you like

Origin blog.csdn.net/weixin_43124546/article/details/110914882