search

博客列表 >Javascript 基础（一）

Javascript 基础（一）

存在
存在原创
2020年11月08日 02:53:06617浏览

Javascript 作为一门强大的脚本语言，主要是用于前端开发。相比于其他脚本语言来讲，是有一定难度，所以要想学好它就必须下足功夫。对于如何学好一门语言想必大家都有各自的一套办法，但是方法再五花八门，有一点一定是相同的——那就是打好基础！下面来介绍两个重要的基础知识:

  • 模板字面量和标签函数
  • 对象和数组的解构

一，模板字面量与标签函数

1，模板字面量

  • 字面量

什么是字面量？

官方定义是：在计算机科学中，字面量（literal）是用于表达源代码中一个固定值的表示法。

我的理解是：所谓字面量就是你看到的某种语言的数据类型的一种展现形式。

比如在 JavaScript 中

  1. // 字面量
  2. let name = "zhanshan";
  4. let age = 30;
  6. const student = {
  7.   id: 1,
  8.   class: "三年二班",
  9.   name: "zhou",
  10. };

等号右边的zhanshan、30、{ id: 1, class: "三年二班", name: "zhou", }这几种“形式”分别表示字符串、数值、对象类型的数据。

我们一看到它们的“长相”就知道它们是谁。

  • 模板字面量

在引出这个概念之前先来看个东西。

在 ES6 之前,将字符串连接到一起的方法是+或者concat()方法,如

  1. let name = "lisi";
  2. let tel = 13866668888;
  3. let str = "我的名字是：" + name + " 电话号码是：" + tel;
  4. console.log(str); //我的名字是：lisi 电话号码是：13866668888
  6. let a = "hello";
  7. let hellowWorld = a.concat(" world!");
  8. console.log(hellowWorld); // hello world!

ES6 之后，我们可以使用模板字面量来让这些拼接字符串更为方便的表达。

如

  1. let name = "lisi";
  2. let tel = 13866668888;
  3. let str = `我的名字是：${name} 电话号码是：${tel}`;
  4. console.log(str); //我的名字是：lisi 电话号码是：13866668888
  6. let a = "hello";
  7. let hellowWorld = `${a} world!`;
  8. console.log(hellowWorld); // hello world!

是不是方便了很多？不用担心过引号写错，不用担心加号没放对地方。

什么是模板字面量？

模板字面量本质上是包含嵌入式表达式的字符串字面量.
模板字面量用倒引号 ( `` )（而不是单引号 ( ‘’ ) 或双引号( “” )）表示，可以包含用 \${expression} 表示的占位符

模板字面量中,变量或表达式叫”插值”, 变量和表达式必须返回一个值

2，标签函数

用来自定义模板字面量中的插值的行为的一个函数。

  1. function selfIntroduce(literal, ...val) {
  2.   // console.log(literal);
  3.   // console.log(Array.isArray(literal));
  4.   // console.log(val);
  5.   let info = `${literal[0]}${val[0]}${literal[1]}${val[1]}${literal[2]}${literal[3]}${val[2]}`;
  6.   return info;
  7. }
  9. let name = "zhangshan";
  10. let age = 20;
  11. let city = "shanghai";
  13. let result = selfIntroduce`my name is ${name},i am ${age} years old , i am come from ${city}`;
  15. console.log(result); //my name is zhangshan,i am 20 years old , i am come from shanghai

函数的第一个参数必须是模板字面中的原始字符串的内容组成的数组

第一个参数可以看作是用${...}符号切割模板字面量（字符串）组成的一个数组。

从第二个参数开始,与模板字面量中的插值一一对应

例子中我使用了 rest 语法(…val)，如果不用可以写成离散型参数:val1，val2，val3…。

二，对象和数组的解构

什么是解构赋值？

解构赋值允许你使用类似数组或对象字面量的语法将数组和对象的属性赋给各种变量。这种赋值语法极度简洁，同时还比传统的属性访问方法更为清晰。

通常我们如果想把一个数组或者对象的属性值赋予给几个变量时都是如下这样做

  1. const arr = ["a", 10, "b"];
  3. let a = arr[0];
  4. let b = arr[1];
  5. let c = arr[2];

现在通过解构赋值可以这样

  1. const arr = ["a", 10, "b"];
  2. [a, b, c] = arr;
  4. console.log(a, b, c);

是不是代码更为简洁优雅？

解构赋值通常针对的是复合数据类型才有意义,比如对象和数组。

1，对象的解构

通过解构对象，你可以把它的每个属性与不同的变量绑定。

  • 语法:

const { variable1, variable2, ..., variableN ]} = object;

或者

({ variable1, variable2, ..., variableN ]} = object;)

因为 JavaScript 语法通知解析引擎将任何以{开始的语句解析为一个块语句（例如，{console}是一个合法块语句）。解决方案是将整个表达式用一对小括号包裹

  • 解构实例

（一）正常解构

js 代码

  1. //定义数组
  2. const obj = {
  3.   name: "zhangshan",
  4.   age: "30",
  5.   city: "shanghai",
  6.   sex: "male",
  7.   married: true,
  8. };
  10. //解构
  11. ({ name, age, city, sex, married } = obj);
  13. console.log(
  14.   "name:",
  15.   name,
  16.   "age:",
  17.   age,
  18.   "city:",
  19.   city,
  20.   "sex:",
  21.   sex,
  22.   "married:",
  23.   married
  24. );
  26. console.log("-----------------------");
  28. // 别名解构
  30. ({ name, age, city, sex: gentleman, married } = obj);
  32. console.log(
  33.   "name:",
  34.   name,
  35.   "age:",
  36.   age,
  37.   "city:",
  38.   city,
  39.   "gentleman:",
  40.   gentleman,
  41.   "married:",
  42.   married
  43. );

结果

result

（二）嵌套

js 代码

  1. const obj = {
  2.   info: ["zhangshan", "30", "shanghai", "male"],
  3.   married: true,
  4. };
  6. const { info, married } = obj;
  8. console.log("info", info);
  9. console.log("married", married);

结果

result

  • 不完全解构

什么时候是不完全解构？个人理解是=两边变量和数组的个数不一致时就会导致不完全解构的现象

js 代码

  1. const obj = {
  2.   name: "zhangshan",
  3.   age: "30",
  4.   city: "shanghai",
  5.   sex: "male",
  6.   married: true,
  7. };
  9. //变量名和值对不上
  10. ({ name, age, city, sex, married, others } = obj);
  12. console.log(
  13.   "name:",
  14.   name,
  15.   "age:",
  16.   age,
  17.   "city:",
  18.   city,
  19.   "sex:",
  20.   sex,
  21.   "married:",
  22.   married,
  23.   "others:",
  24.   others
  25. );
  27. console.log("-----------------------");
  29. //默认值
  31. ({ name, age, city, sex, married, edu = "大专" } = obj);
  33. console.log(
  34.   "name:",
  35.   name,
  36.   "age:",
  37.   age,
  38.   "city:",
  39.   city,
  40.   "sex:",
  41.   sex,
  42.   "married:",
  43.   married,
  44.   "edu:",
  45.   edu
  46. );
  48. console.log("-----------------------");
  50. // rest语法
  51. ({ name, ...other } = obj);
  53. console.log("name:", name);
  54. console.log("other:", other);

结果

result

  • 注意

对象的属性名要与变量名一致，要不然无法解构。还有在对象解构中无法使用数组解构时的对位解构（前面写几个逗号留空）

如下

  1. const obj = {
  2.   name: "zhangshan",
  3.   age: "30",
  4.   city: "shanghai",
  5.   sex: "male",
  6.   married: true,
  7. };
  8. // 变量名与属性名不一致，无法解构
  9. const { a, b, c, d, e } = obj;
  11. console.log(a, b, c, d, e);

结果

result

2，数组的解构

  • 语法:

[ variable1, variable2, ..., variableN ] = array;

这将为 variable1 到 variableN 的变量赋予数组中相应元素项的值。如果你想在赋值的同时声明变量，可在赋值语句前加入 var、let 或 const 关键字

  1. var [ variable1, variable2, ..., variableN ] = array;
  2. let [ variable1, variable2, ..., variableN ] = array;
  3. const [ variable1, variable2, ..., variableN ] = array;

事实上，用变量来描述并不恰当，因为你可以对任意深度的嵌套数组进行解构

  1. var [a, [[b], c]] = [1, [[2], 3]];
  2. console.log(a);
  3. // 1
  4. console.log(b);
  5. // 2
  6. console.log(c);
  7. // 3
  • 解构实例

js 代码:

  1. const arr = ["a", 10, "b", false];
  2. [a, b, c, d] = arr;
  4. console.log(a, b, c, d);

结果:

result

  • 不完全解构

=两边变量和数组的个数不一致时就会导致不完全解构的现象

js 代码：

  1. //等号左边留两个空位，其余对位解构
  2. const arr = ["zhangshan", 30, "shanghai", "male"];
  3. [, , city, sex] = arr;
  5. console.log("city: " + city);
  6. console.log("sex: " + sex);
  8. //rest 语法
  9. [name, ...other] = arr;
  11. console.log("-----------------------");
  12. console.log(name, other);
  14. console.log("name: " + name);
  15. console.log("other: " + other);
  17. //默认值
  18. [name, age, city, sex, married = true] = arr;
  20. console.log("-----------------------");
  21. console.log(name, age, city, sex, married);

结果：

result

三，总结

加油，多敲代码！

参考链接：https://www.cnblogs.com/cheng-du-lang-wo1/p/7259343.html

上一条：dom元素的操作和JS实战案例下一条：大神杰作：让站点飞快！懒加载图片案例，噢 my gad！太快啦…
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议
存在2020-11-08 19:23:521楼
好的老师！