学习 ES6/JavaScript - 第一部分

注意：javascript 和 java 彼此之间有很大不同

什么是 javascript？

Javascript 是一种编程语言，旨在为网页增添活力，即通过动态加载页面来显示实时道具。

你在互联网上浏览的所有内容都包含 JavaScript。从谷歌搜索到浏览视频，再到阅读博客，就连我的博客也使用了 JavaScript。是不是很有意思？让我们深入探究一下。

如何为网页增添活力？

HTML（结构）只是网页的骨架，CSS（样式）用于美化网页，但所有主要的逻辑内容呢？

这里是 JavaScript（行为），它负责处理网页的每个行为。

常见行为包括：

单击按钮时要采取的操作。
弹出窗口以通知用户信息。
滚动和动画。
跟踪和捕获数据（抓取）。

ES6 是什么？它和 JavaScript 有什么不同？

根据维基百科，ES 或 ECMAScript 是一种引入标准化 JavaScript 的脚本语言规范。ES6 是 ECMAScript 的第六个版本，于 2015 年发布，对 JavaScript 进行了一些更改。我将在本博客中从最基础的讲解开始，探讨这些更改。

在开始之前，我建议你先了解一下开源专家Ameer建议的JavaScript基础知识

主题

声明和作用域：Let vs var vs const
箭头函数
for..of 与 for..in 对比
传播属性
地图与设置
静态方法

1. 声明和作用域：Let、var 和 const

在 JavaScript 中声明变量就是使用其中的一个。简而言之

Let 是一个块范围。
var 是函数范围。
const 只能声明一次，并且其值在整个脚本中不能改变。

与let相比，你可以假设用var声明的变量在整个程序中都是定义的。考虑下面的例子

var b= 40;
if(true){
  let a = 20;
  console.log(a + b); // output:60
}
//console.log("value of a : " + a); 
//if above uncommented "error : *ReferenceError: a is not defined*"
console.log("value of b : " + b); // 40

我认为上面的代码块是不言自明的。 let的作用域在if 块内，如果你尝试访问块外的变量，则会抛出错误，但var在整个程序中都可以访问，无论是在 if 块内还是在块外。

使用const：
const 与其他变量声明之间的区别是const不能被重新分配。让我们考虑下面的例子：

const PI = 3.14 //can't be changed through the program
let radius = 5;
let c_o_c = 2 * PI * radius;
console.log(c_o_c);

PI 的值无法改变，因此它在整个程序中保持不变，而其他值可以动态改变。

2. 箭头函数 (() =>)

一种比函数表达式更好的定义函数的最简单、最简洁的方法。让我们通过例子来学习

//The older approach
function sum(n1,n2){
  return n1+n2
}
console.log("This is older approach : " + sum(34,54))

//The new approach
var es6_sum = (n1,n2) => {
  console.log("The new approach : ", n1+n2);
}
es6_sum(55,65)

上面的例子很简单，不言自明，很直接。

3. for..in 与 for..of

人类是为了创新，而不是为了重复做同样的任务，而机器是为了做这些重复性的任务而不感到疲倦而生的。循环就是用来执行重复性任务的。for 循环是计算机科学中广泛使用的循环之一。让我们深入研究一下 for..of 和 for..in。

for..in
循环遍历对象的可枚举属性。语法如下：

for (variable in object){
// your logic here
}

例子：

var person = { 
  firstName: "Vikram", 
  lastName: "Sahu",  
}; 
var userId = ""; 
var i; 
for (i of person) { 
  console.log(person[i]) // prints the value of object
  userId += person[i]; 
}

for..of
循环遍历可迭代数据结构，例如数组、映射、字符串、节点和列表。语法如下：

for (variable of iterable){
// your logic here
}

例子：

let fruits = ["pineapple","mango","watermelon","banana"]
for (let fruit of fruits){
  console.log(fruit)
}

4. 扩展属性

顾名思义，Spread 属性有助于传播表达式。即将元素列表转换为数组。

不带 Spread 属性的示例：

let s_att = (arr) => {
  console.log(arr);
  let sum = 0;
  for (let ele of arr){
    sum += ele
  }
  console.log(sum)
}
s_att([2,42,51,12,32,98,08])

正如您所看到的，上面的例子很简单，它接受数组并给出数组的总和。

具有 Spread 属性的示例：

let s_att = (...arr) => {
  console.log(arr);
  let sum = 0;
  for (let ele of arr){
    sum += ele
  }
  console.log(sum)
}
s_att(2,42,51,12,32,98,08)

给你一个小任务来找出不同之处。你有 3 秒的时间

1.. 2.. 3..

我希望你有这么小的变化，我们刚刚将参数从数组转换为单个参数，并在函数中将（arr）转换为（...arr）。

5. 地图与布景

地图

映射是键控数据项的集合，与对象相同，但不同之处在于它允许任何类型的键。

方法和属性
- new Map() ：创建新地图。
- map.set(key,value) ：按键添加/存储值
- map.get(key) ：根据键返回值，如果键在 map 中不存在则返回 undefined。
- map.has(key) ：如果键存在则返回 true
- map.delete(key) ：从地图中删除键
- map.clear() ：从地图中删除所有内容
- map.size() ：返回地图的数量

let map = new Map();
map.set("name","Vikram")
map.set("designation","Developer Evangelist")

// looping over map
for (let [ele_key, ele_value] of map){
  console.log(ele_key + " -- > " + ele_value)
}
console.log(map.get("name"))
console.log(map.keys())  //return all the keys within map
console.log(map.size())  
console.log(map.values()) // return all the value within map
console.log(map.delete("designation"))
console.log(map.clear())

放

集合 (Set) 是一种独特的类型集合，它包含一组“值”（不含键），每个值只出现一次（不会插入重复的值）。我们来看一个简单的例子：

var mysets = new Set();
mysets.add("a");
mysets.add("b");
mysets.add("a"); // We are adding duplicate value.
//looping over sets
for (let element of mysets) {
 console.log(element);
}
mysets.has("b")
mysets.delete("b")

6.静态方法

您可以将方法赋值给类函数本身，而不是其“原型”。此类方法称为静态方法。其语法如下：

class Mydata{
  static CallMe(){
  console.log("Hello i am static function")
  }
}
Mydata.CallMe() // returns "Hello i am static function"

你需要注意的是：

我还没有在类中编写函数，但我仍然可以访问该函数。
我调用了该函数，但并未创建该类的实例。

总结...

JavaScript/ES 是一门奇特却又神奇的语言。这只是我学习曲线的开端，很快会更新后续内容。

希望你喜欢这篇博客。快来分享吧！🤗

文章来源：https://dev.to/sahuvikramp/learning-es6-javascript-part-1-1i3l