快速建站属于saas吗,相册制作软件,毕业设计网站开发题目,上海网络网站建设JavaScript经历了不同标本的迭代#xff0c;在不断完善中会添加不同的新特性来解决前一个阶段的瑕疵#xff0c;让我们开发更加便捷与写法更加简洁#xff01;
1、箭头函数#xff1a;
箭头函数相比传统的函数语法#xff0c;具有更简洁的语法、没有自己的this值、不会绑…JavaScript经历了不同标本的迭代在不断完善中会添加不同的新特性来解决前一个阶段的瑕疵让我们开发更加便捷与写法更加简洁
1、箭头函数
箭头函数相比传统的函数语法具有更简洁的语法、没有自己的this值、不会绑定arguments关键字并且在没有new关键字时不会生成this上下文。
传统的函数定义
function add(x, y) { return x y;
}箭头函数的定义
const add (x, y) x y;2、解构赋值
允许把数组或者对象的属性直接赋值给其他变量。
数组的解构赋值
let [a, b, c] [1, 2, 3];对象的解构赋值
let { foo, bar } { foo: aaa, bar: bbb };3、默认、剩余、展开
默认参数
function f(x 10) { ... }剩余参数
function f(...args) { ... }展开运算符
let arr [...args]4、模板字符串
使用反引号()创建的字符串可以跨越多行并可以嵌入表达式。
const name Jack;
const message My name is ${name}.;5、import模块
引入了 import 和 export 关键字用来定义模块的导入和导出。模块可以帮助我们更好地组织代码避免命名冲突和代码重复。
如果想要导入模块的默认导出可以使用import defaultExportedValue from module’语法。如果想要同时导入多个变量或函数可以使用import { variable1, variable2 } from module’语法。
//make.js
//定义函数方法
function makeStyleGuide() {}
//导出
export default makeStyleGuide;//index.js
import makeStyleGuide from make.js;如果想要导入模块的默认导出可以使用语法。
import defaultExportedValue from module如果想要同时导入多个变量或函数可以使用语法。
import { variable1, variable2 } from module6、Array.prototype.includes()
用来判断一个数组是否包含一个指定的值根据情况如果包含则返回true否则返回false。
let arr [react, angular, vue];
console.log(arr.includes(react)); // true使用 includes()查找字符串是区分大小写的。 使用 includes()只能判断简单类型的数据对象类型的数组二维数组这些是无法判断的。 使用 includes()能识别NaN 如果只想知道某个值是否在数组中存在而并不关心它的索引位置建议使用includes()如果想获取一个值在数组中的位置那么使用indexOf方法。
7、Object.values()
方法返回一个数组成员是参数对象自身的不含继承的所有可遍历enumerable属性的键值。
const obj {name: Lucy,age: 18}
console.log(Object.values(obj)); // [Lucy, 18,]8、String.prototype.padStart和String.prototype.padEnd
padStart用另一个字符串填充当前字符串在原字符串开头填充指定的填充字符串直到目标长度所形成的新字符串
padEnd用另一个字符串填充当前字符串在原字符串结尾填充指定的填充字符串直到目标长度所形成的新字符串
语法
str.padStart(targetLength , padString)
targetLength 当前字符串需要填充到的目标长度。如果这个数值小于当前字符串的长度则返回当前字符串本身。padString 可选 填充字符串。如果字符串太长使填充后的字符串长度超过了目标长度则只保留最左侧的部分其他部分会被截断。此参数的默认值为
const str ABC;
console.log(str.padStart(10,a)) //aaaaaaaABC
console.log(str.padEnd(10, 123)) //ABC1231231应用场景
日期格式化yyyy-mm-dd的格式
const now new Date();
const year now.getFullYear();
const mounth (now.getMonth() 1).toString().padStart(2, 0)
const day (now.getDate()).toString().padStart(2, 0
console.log(${year}-${mounth}-${day}); //2023-11-02信息脱敏(手机号银行卡号等
const tel 13245678901;
tel.slice(-4).padStart(tel.length, *) // *******89019、可选链操作符
?.允许读取位于连接对象链深处的属性的值而不必明确验证链中的每个引用都是否有效。?. 操作符的功能类似于.链式操作符不同之处在于在引用为 null 或 undefined 时不会报错该链路表达式返回值为 undefined。与函数调用一起使用时如果给定的函数不存在则返回 undefined。
当尝试访问可能不存在的对象属性时可选链操作符将会使表达式更短、更简明。在探索一个对象的内容时如果不能确定哪些属性必定存在可选链操作符也是很有帮助的。
传统的写法
const user res res.data res.data.user;可选链写法
const user res?.data?.user;10、String.prototype.replaceAll()
返回一个新字符串字符串中所有满足 pattern 的部分都会被 replacement 替换掉。原字符串保持不变。
语法
String.prototype.replaceAll(pattern,replacement)
pattern 可以是一个字符串或 RegExp使用正则表达式搜索值时必须是全局的。replacement 可以是一个字符串或一个在每次被匹配被调用的函数。
const str student is a real student;
const newStr str.replaceAll(student, hahaha);
console.log(newStr); //hahaha is a real hahahaconst str student is a real student;
const newStr str.replaceAll(/student/g, hahaha);
console.log(newStr); //hahaha is a real hahaha
