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>

相关文章
|
1月前
|
JavaScript 前端开发
JavaScript中的短路表达式
JavaScript中的短路表达式
12 0
|
5月前
|
JavaScript 前端开发 开发者
从0开始学习JavaScript--JavaScript 表达式与运算符
JavaScript中的表达式和运算符是构建逻辑、进行计算的基础。本文将深入研究JavaScript中各类表达式,包括算术表达式、关系表达式、逻辑表达式,以及运算符的使用方法,并通过丰富的示例代码来帮助读者更全面地了解和运用这些概念。
|
5月前
|
JavaScript 前端开发
JavaScript 什么是三元表达式?
JavaScript 什么是三元表达式?
|
1月前
|
JavaScript 前端开发 数据可视化
JavaScript 什么是三元表达式?
JavaScript 什么是三元表达式?
18 1
|
2月前
|
JavaScript 前端开发
js开发:请解释什么是ES6的解构赋值(destructuring assignment),并给出一个示例。
ES6的解构赋值简化了JavaScript中从数组和对象提取数据的过程。例如,`[a, b, c] = [1, 2, 3]`将数组元素赋值给变量,`{name, age} = {name: &#39;张三&#39;, age: 18}`则将对象属性赋值给对应变量,提高了代码的可读性和效率。
|
7月前
|
JavaScript 前端开发
12Vue - 模板语法(插值-使用JavaScript表达式)
12Vue - 模板语法(插值-使用JavaScript表达式)
22 0
|
2月前
|
JavaScript 前端开发
javascript中的解构赋值
javascript中的解构赋值
|
2月前
|
JavaScript 前端开发
编程笔记 html5&css&js 076 Javascript 表达式
编程笔记 html5&css&js 076 Javascript 表达式
|
7月前
|
JavaScript
JS三元表达式
JS三元表达式
42 0
|
3月前
|
JavaScript 前端开发 网络架构
掌握JavaScript中的解构赋值:深入挖掘隐藏的技巧
掌握JavaScript中的解构赋值:深入挖掘隐藏的技巧
43 0