如何做网站调研,黑龙江住房和城乡建设厅官网,石材网站模板,公司网站建设维护管理办法文章目录 ecmascript 历程严格模式与常规模式下的区别及注意事项严格模式下的属性删除Array.prototype.flat()和Array.prototype.flatMap() 实例应用 ecmascript 历程 变量声明要求 常规模式#xff1a; 在常规模式下#xff0c;使用var关键字声明变量时会出现变量提升现象。… 文章目录 ecmascript 历程严格模式与常规模式下的区别及注意事项严格模式下的属性删除Array.prototype.flat()和Array.prototype.flatMap() 实例应用 ecmascript 历程 变量声明要求 常规模式 在常规模式下使用var关键字声明变量时会出现变量提升现象。这意味着变量可以在声明之前使用并且会被自动提升到函数作用域的顶部。例如 function test() {console.log(x); var x 10;
}
test(); 上述代码在常规模式下console.log(x)不会报错而是输出undefined。因为JavaScript引擎会将var x提升到函数顶部代码实际上被解释为 function test() {var x;console.log(x); x 10;
}
test(); 严格模式 在严格模式下use strict不允许使用未声明的变量。如果这样做会直接抛出引用错误。例如 use strict;
function test() {console.log(x); var x 10;
}
test(); 这段代码在严格模式下会抛出ReferenceError: x is not defined错误。严格模式强制要求变量先声明后使用这样可以避免因变量未声明而导致的潜在错误使得代码更加健壮。 函数参数重复命名 常规模式 在常规模式下函数参数可以有重复的名称后面的参数会覆盖前面同名的参数。例如 function add(a, a) {return a a;
}
console.log(add(2, 3)); 上述代码在常规模式下会输出6因为第二个a值为3覆盖了第一个a值为2。 严格模式 在严格模式下不允许函数参数有重复的名称。如果出现这种情况会抛出语法错误。例如 use strict;
function add(a, a) {return a a;
}
console.log(add(2, 3)); 这段代码在严格模式下会抛出SyntaxError: Duplicate parameter name not allowed in this context错误。 对象属性操作 常规模式 在常规模式下可以通过delete操作符删除不可配置的属性虽然在严格模式下会返回false但在常规模式下不会报错。例如 var obj {};
Object.defineProperty(obj, prop, {value: 10, configurable: false});
console.log(delete obj.prop); 上述代码在常规模式下会输出false但不会抛出错误。 严格模式 在严格模式下试图删除不可配置的属性会抛出类型错误。例如 use strict;
var obj {};
Object.defineProperty(obj, prop, {value: 10, configurable: false});
console.log(delete obj.prop); 这段代码在严格模式下会抛出TypeError: Cannot delete property prop of #Object错误。 函数的this指向 常规模式 在常规模式下函数中的this指向可能会出现一些不符合预期的情况。例如在全局函数中this通常指向全局对象在浏览器环境中是window。 function test() {console.log(this);
}
test(); 在浏览器环境下上述代码会输出window对象。并且在一些事件处理函数中如果没有正确绑定this它的指向也可能会出现问题。 严格模式 在严格模式下函数中的this不会自动指向全局对象。如果this没有被明确的对象调用它的值为undefined。例如 use strict;
function test() {console.log(this);
}
test(); 这段代码在严格模式下会输出undefined这使得函数内部this的行为更加可预测避免了一些由于this指向混乱而导致的错误。 应用注意点 谨慎转换现有代码如果要将现有的JavaScript代码转换为严格模式需要仔细检查代码中是否存在不符合严格模式要求的部分如未声明的变量、重复的函数参数等否则可能会导致大量错误。模块和库使用在开发模块和库时严格模式可以帮助确保代码的质量和稳定性。因为模块和库通常会被多个项目使用严格模式下的严格检查可以减少潜在的错误。团队协作和代码维护在团队开发环境中提倡使用严格模式可以使代码风格更加统一便于团队成员理解和维护代码。因为严格模式的规则更加明确减少了一些JavaScript中可能出现的模糊和易错的情况。
严格模式与常规模式下的区别及注意事项 变量声明要求 常规模式 在常规模式下使用var关键字声明变量时会出现变量提升现象。这意味着变量可以在声明之前使用并且会被自动提升到函数作用域的顶部。例如 function test() {console.log(x); var x 10;
}
test(); 上述代码在常规模式下console.log(x)不会报错而是输出undefined。因为JavaScript引擎会将var x提升到函数顶部代码实际上被解释为 function test() {var x;console.log(x); x 10;
}
test(); 严格模式 在严格模式下use strict不允许使用未声明的变量。如果这样做会直接抛出引用错误。例如 use strict;
function test() {console.log(x); var x 10;
}
test(); 这段代码在严格模式下会抛出ReferenceError: x is not defined错误。严格模式强制要求变量先声明后使用这样可以避免因变量未声明而导致的潜在错误使得代码更加健壮。 函数参数重复命名 常规模式 在常规模式下函数参数可以有重复的名称后面的参数会覆盖前面同名的参数。例如 function add(a, a) {return a a;
}
console.log(add(2, 3)); 上述代码在常规模式下会输出6因为第二个a值为3覆盖了第一个a值为2。 严格模式 在严格模式下不允许函数参数有重复的名称。如果出现这种情况会抛出语法错误。例如 use strict;
function add(a, a) {return a a;
}
console.log(add(2, 3)); 这段代码在严格模式下会抛出SyntaxError: Duplicate parameter name not allowed in this context错误。 对象属性操作 常规模式 在常规模式下可以通过delete操作符删除不可配置的属性虽然在严格模式下会返回false但在常规模式下不会报错。例如 var obj {};
Object.defineProperty(obj, prop, {value: 10, configurable: false});
console.log(delete obj.prop); 上述代码在常规模式下会输出false但不会抛出错误。 严格模式 在严格模式下试图删除不可配置的属性会抛出类型错误。例如 use strict;
var obj {};
Object.defineProperty(obj, prop, {value: 10, configurable: false});
console.log(delete obj.prop); 这段代码在严格模式下会抛出TypeError: Cannot delete property prop of #Object错误。 函数的this指向 常规模式 在常规模式下函数中的this指向可能会出现一些不符合预期的情况。例如在全局函数中this通常指向全局对象在浏览器环境中是window。 function test() {console.log(this);
}
test(); 在浏览器环境下上述代码会输出window对象。并且在一些事件处理函数中如果没有正确绑定this它的指向也可能会出现问题。 严格模式 在严格模式下函数中的this不会自动指向全局对象。如果this没有被明确的对象调用它的值为undefined。例如 use strict;
function test() {console.log(this);
}
test(); 这段代码在严格模式下会输出undefined这使得函数内部this的行为更加可预测避免了一些由于this指向混乱而导致的错误。 应用注意点 谨慎转换现有代码如果要将现有的JavaScript代码转换为严格模式需要仔细检查代码中是否存在不符合严格模式要求的部分如未声明的变量、重复的函数参数等否则可能会导致大量错误。模块和库使用在开发模块和库时严格模式可以帮助确保代码的质量和稳定性。因为模块和库通常会被多个项目使用严格模式下的严格检查可以减少潜在的错误。团队协作和代码维护在团队开发环境中提倡使用严格模式可以使代码风格更加统一便于团队成员理解和维护代码。因为严格模式的规则更加明确减少了一些JavaScript中可能出现的模糊和易错的情况。
严格模式下的属性删除
可配置属性的删除 在严格模式下如果对象的属性是可配置的configurable为true可以使用delete操作符正常删除属性。例如创建一个对象并定义一个可配置属性 use strict;
let obj {};
Object.defineProperty(obj, prop, {value: 10,configurable: true
});
console.log(delete obj.prop); // 输出 true
console.log(obj.prop); // 输出 undefined因为属性已被删除不可配置属性的处理 如果属性是不可配置的configurable为false在严格模式下不能直接使用delete操作符删除否则会抛出TypeError。例如 use strict;
let obj {};
Object.defineProperty(obj, prop, {value: 10,configurable: false
});
try {console.log(delete obj.prop);
} catch (error) {console.log(error); // 输出 TypeError: Cannot delete property prop of #Object
}若要删除不可配置的属性需要先将其configurable属性修改为true。这可以通过Object.defineProperty或者Object.defineProperties方法来实现。以下是一个修改configurable属性后再删除的示例 use strict;
let obj {};
Object.defineProperty(obj, prop, {value: 10,configurable: false
});
// 先将configurable修改为true
Object.defineProperty(obj, prop, {configurable: true
});
console.log(delete obj.prop); // 输出 true
console.log(obj.prop); // 输出 undefinedArray.prototype.flat()和Array.prototype.flatMap() 实例应用 Array.prototype.flat()实例应用 基本功能flat()方法用于将嵌套的数组“扁平化”即将多维数组转换为一维数组。默认情况下它会将嵌套一层的数组扁平化但可以通过传入一个深度参数来指定扁平化的深度。示例一扁平化一层嵌套数组 假设有一个二维数组代表学生的成绩每个学生有多门课程的成绩。 let studentScores [[80, 90], [70, 85], [90, 95]];
let flattenedScores studentScores.flat();
console.log(flattenedScores); 输出结果为[80, 90, 70, 85, 90, 95]将原来的二维数组扁平化成为一个包含所有学生成绩的一维数组。 示例二扁平化多层嵌套数组 考虑一个更复杂的情况有一个多层嵌套的数组。 let multiLevelArray [[1, 2], [3, [4, 5]]];
let flattenedDeeply multiLevelArray.flat(2);
console.log(flattenedDeeply); 这里传入深度参数2因为数组最多嵌套了两层。输出结果为[1, 2, 3, 4, 5]成功将多层嵌套的数组扁平化。 示例三处理空数组元素 flat()方法在扁平化过程中会忽略空数组元素。 let arrayWithEmpty [[1, 2], [], [3, 4]];
let flattenedWithEmpty arrayWithEmpty.flat();
console.log(flattenedWithEmpty); 输出结果为[1, 2, 3, 4]空数组元素在扁平化后被移除。 Array.prototype.flatMap()实例应用 基本功能flatMap()方法首先对数组中的每个元素应用一个映射函数然后将结果扁平化。它相当于先执行map()操作再执行flat()操作但在性能上可能更优因为它只需要遍历一次数组。示例一处理字符串数组 假设有一个字符串数组想要将每个字符串拆分成字符数组然后扁平化得到一个包含所有字符的数组。 let stringArray [abc, def];
let flattenedChars stringArray.flatMap(str str.split());
console.log(flattenedChars); 首先map部分对每个字符串应用split()函数将每个字符串拆分成字符数组如[abc]变成[a, b, c]。然后flat部分将这些字符数组扁平化最终输出结果为[a, b, c, d, e, f]。 示例二处理对象数组中的属性数组 假设你有一个包含用户对象的数组每个用户对象有一个属性数组表示用户的兴趣爱好。你想要获取所有用户的所有兴趣爱好。 let users [{name: Alice, hobbies: [reading, painting]},{name: Bob, hobbies: [sports, music]}
];
let allHobbies users.flatMap(user user.hobbies);
console.log(allHobbies); 对于每个用户对象flatMap首先通过user.hobbies获取兴趣爱好数组这是map操作然后将所有这些兴趣爱好数组扁平化最终输出结果为[reading, painting, sports, music]。
