JavaScript解构表达式

简介: JavaScript解构表达式

解构表达式可以很方便赋值

1.数组结构

<script>    
    let arr = [1, 2, 3, 4 ,5];
    //采用之前的赋值方式, 我们可以a = arr[1], b = arr[2].....  有了结构表达式就可以如下
    let [a, b, c, d, e] = arr;
    console.log(a,b,c,d,e);
</script>

2.对象结构

<script>
    const person = {
        name: 'zhanshen',
        age: 22,
        lanuage: ['python', 'java', 'go']
    }
    const {name, age, lanuage} = person;
    console.log(name,age,lanuage);
</script>

要是换名字, 可以用冒号

<script>
    const person = {
        name: 'zhanshen',
        age: 22,
        lanuage: ['python', 'java', 'go']
    }
    const {name: a, age: b, lanuage: c} = person;
    console.log(a, b, c);
</script>

3. 字符串模板

用反引号来表示长字符串

<script>
    let longStr = `
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
    `
    console.log(longStr);
</script>

用${}表示插值

<script>
    var name = '张三';
    var age = 14;
    function say() {
        return "我是个坏学生!"
    }
    console.log(`我叫${name}, 我今年${age}岁了, 明年我${age + 1}岁, 我想说${say()}`)
</script>

4. 其他方法

<script>
    let str = 'hello world';
    console.log(str.startsWith('hello'));
    console.log(str.endsWith("world"));
    console.log(str.includes("h"));
    console.log(str.includes("ll"));
</script>

相关文章
|
7月前
|
JavaScript 前端开发
JavaScript中的短路表达式
JavaScript中的短路表达式
47 0
|
3月前
|
JavaScript 前端开发
js 变量作用域与解构赋值| 22
js 变量作用域与解构赋值| 22
|
2月前
|
JavaScript
js---三元表达式详解
js---三元表达式详解
78 0
|
4月前
|
JavaScript 前端开发
JavaScript基础&实战 JS中正则表达式的使用
这篇文章介绍了JavaScript中正则表达式的使用,包括正则表达式的创建、匹配模式、字符串匹配、拆分、搜索、匹配和替换等方法,并通过示例代码展示了如何应用这些技术。
JavaScript基础&实战 JS中正则表达式的使用
|
4月前
|
JavaScript 前端开发
在js中正则表达式验证小时分钟,将输入的字符串转换为对应的小时和分钟
这篇文章介绍了如何在JavaScript中使用正则表达式来验证时间字符串的格式(小时和分钟),并提供了将时间字符串转换为JavaScript Date对象的示例代码及其测试结果。
|
4月前
|
JavaScript 前端开发 API
vue中将验证表单输入框的方法写在一个js文件中(表达式验证邮箱、身份证、号码、两次输入的密码是否一致)
这篇文章介绍了如何在Vue框架中将表单输入验证逻辑封装到一个JavaScript文件中,并通过正则表达式验证邮箱、身份证、手机号等信息,同时确保两次密码输入的一致性。
|
5月前
|
JavaScript 前端开发 网络架构
JavaScript编码之路【对象的增强、ES6新特性之函数的默认值设置 、rest参数 (剩余参数)、拓展运算符、对象与数组的解构赋值】
JavaScript编码之路【对象的增强、ES6新特性之函数的默认值设置 、rest参数 (剩余参数)、拓展运算符、对象与数组的解构赋值】
59 1
|
6月前
|
JavaScript
详细讲解JS的解构赋值(Es6)
详细讲解JS的解构赋值(Es6)
|
6月前
|
JavaScript 前端开发 开发者
JavaScript进阶-解构赋值与展开运算符
【6月更文挑战第19天】ES6的解构赋值与展开运算符增强了JS开发效率。解构允许直接从数组或对象提取值,简化数据提取,而展开运算符则用于合并数组和对象或作为函数参数。解构时注意设置默认值以处理不存在的属性,避免过度嵌套。展开运算符需区分数组与对象使用,勿混淆于剩余参数。通过示例展示了这两种操作在数组和对象中的应用,提升代码可读性与简洁度。
169 5
|
6月前
|
JavaScript 前端开发 Java
【JavaScript】ECMAS6(ES6)新特性概览(二):解构赋值、扩展与收集、class类全面解析
【JavaScript】ECMAS6(ES6)新特性概览(二):解构赋值、扩展与收集、class类全面解析
61 2