JavaScript-ES6

本文链接: https://www.jianshu.com/p/963da58368b0
作者：西瓜甜

基本介绍

JavaScript 简称 JS

JavaScript 是一种适用于网页的脚本语言！

JavaScript 被数百万计的网页用来改进设计、验证表单、检测浏览器、创建cookies等更多的应用。

JavaScript 是因特网上最流行的脚本语言。

JavaScript 很容易使用！认识她, 爱上她！

浏览器内置了JavaScript语言的解释器，所以在浏览器上按照 JavaScript 语言的规则编写相应代码，浏览器就可以解释并做出相应的处理.

Windows 下，打开浏览器，按下F12

chrome 浏览器

image.png

IE 浏览器

image.png

二、如何在 HTML 中使用 JavaScript 的代码和编写 JavaScript 代码

1. 引入方式：

<!-- 方式一 :从一个文件引入-->
<script src="JS文件的路径.js"></script>
 
<!-- 方式二: 直接在 HTML 文档中代中写入 JS 代码 -->
<script type="text/javascript">
    var li = "Hello 千锋云计算好程序员"
</script>

2. 应该在 html 文档的哪个位置引入

由于Html代码是从上到下执行，为了不影响用户的体验效果,应该放在 body 标签的底部;

这样的话,即使由于加载js代码耗时严重，也不会影响用户看到页面效果，只是js实现特效慢而已。

<!DOCTYPE html>  <!--HTML5文档标识-->
<html lang="en">
<head> 
</head>
<body>  
    <div>
       页面内容
    </div>
    
</body>
    <!-- 引入的方式一 -->
    <script src="my_javascript.js"></script>
    
    <!-- 引入的方式二 -->
    <script>
        js 代码
    </script>
</html>

三、开发工具的搭建

1. Node.js

下载和安装

https://github.com/nodesource/distributions

[root@xiuyun ~]# curl -sL https://rpm.nodesource.com/setup_13.x | bash
[root@xiuyun ~]# yum install gcc-c++ make
[root@xiuyun ~]# yum install -y nodejs

验证安装

[root@xiuyun ~]# node -v
v13.12.0
[root@xiuyun ~]# node
Welcome to Node.js v13.12.0.
Type ".help" for more information.
> .exit
[root@xiuyun ~]#

测试 Node 环境支持 ES6 的程度

# 在系统的终端中执行 npm 安装一个包
npm install -g es-checker

# 之后在系统的终端中执行如下命令
es-checker

image.png

四、基本语法

1. JavaScript 代码的注释和代码风格

// 单行

/* 多
   行 */
// 注意：此注释仅在 script 标签内中或者一个 JS 文件中生效
console.log("每行代码后面加英文的分号");

2. 调试工具：终端输出，和浏览器弹窗

把一个对象(变量的值) 输出到终端

console.log("Hello JavaScript")

在浏览器中把一个对象(变量的值) 以一个小弹窗的方式显示出来

alert("Hello JavaScript")

3. 变量

JavaScript中变量的声明是一个非常容易出错的点，局部变量必须一个 var 开头，如果未使用var，则默认表示声明的是全局变量。

ES5 变量的作用域：

全局作用域
函数作用域

3.1 全局作用域

一对大括号{}内的代码都称为一个作用域

注意：全局作用域的变量可以被重复声明，并且可以被重新赋值。

全局作用域的变量声明有两种方式

3.1.1 没有使用任何关键字声明的变量，都是全局变量

s = '千锋'

{
s = "云计算"
}

// function 关键字，定义一个函数，函数名是 f
function f(){
    s = "好程序员"
}
f() // 执行这个函数，以便声明变量 s 
console.log(s)  // 输出: 好程序员

3.1.2 不是在函数中使用 `var` 关键字声明的变量，也是全局变量

注意： 必须不能在函数中使用的才可以是全局变量。就是在函数外面或者在代码块中(大括号中{})，比如 if 代码块中。

var n = 10;
var n = 100;
{
    var n = 10;
};

if (1 ===1){
    var n = '千锋云计算';
}

console.log(n)  // 输出：千锋云计算

3.2 函数作用域（局部变量）和局部作用域(ES6)

3.2.1 在函数中以关键字 `var` 开头声明的变量，并且不是在。

function foo(){
    var age=18;
}
foo()
console.log(age)   // 将会报错

3.2.2 Es6 中的 `let` 和 `const` 声明的变量

let 声明的变量只在它所在的代码块有效，在同一个代码块(作用域)下，不可以重复声明，可以被重新赋值。

const 声明的常量只在它所在的代码块有效，在同一个代码块(作用域)下，不可以重复声明，并且不可以被重新赋值(基本类型的数据)。

下面的示例是在 node 的终端中执行的结果。

let 示例

此代码是在 node 交互终端中运行的结果。

> { let num = 10;
... num = 100;
... console.log("当前值" + num);
... }
当前值100
undefined
> num
ReferenceError: num is not defined

for循环的计数器，就很合适使用let命令。

for (let i = 0; i < 10; i++) {
      console.log(i);
}

console.log("在代码块外面打印的变量 i 将会报错")
console.log(i);
// ReferenceError: i is not defined

const 示例

const 主要用于定义一个作用域中的常量，就是这个变量可以在自己的代码块儿中使用，但其值不能被修改。
这个作用域可以全局作用域，也可以是函数作用以及局部作用域。

//对于基本类型，值不能改变
const s = "千锋云计算";
s = "好程序员";  // TypeError: Assignment(分配) to constant(常量) variable.

//对于引用类型，
const obj = {x: 0};
obj = {y: '123'};  // TypeError: Assignment to constant variable.
obj.x = '123';     //obj存储的是一个地址，地址不能变，但对象本身是可变的

4. 判断

JavaScript中支持两个中条件语句，分别是：if 和 switch

// 条件 ： (1 === 1 && 2 === 2 || 3 === "3")
if(条件){ 
        // 条件成立后执行的代码
    }else if(条件){
        // 条件成立后执行的代码
    }else{
        // 以上条件都不成立要执行的代码
    }

switch(name){                 // name 一个变量
        case '1':             // 若果 name 的值等于 "1"  
            age = 123;        // 执行下面这段代码
            break;
        case '2':             //  若果 name 的值等于 "1" 
            age = 456;        //  执行下面这段代码
            break;
        default :             //  上面的值都没有匹配到
            age = 777;        //  则执行这段代码
    }

5. 函数

5.1 普通函数

// 普通函数
    function func(arg){
        return true;
    }

5.2 匿名函数

// 匿名函数  特点： 可以被当做参数传递；常用
function(arg){
    return "tony";
}
 
// 匿名函数的应用之一: 可以作为参数传递
function func(arg){
    arg()
}
func(function (){
        console.log(123);
      }
)

6. 箭头函数（ES6）

6.1 标准箭头函数的转换

// 普通函数
function f(arg) {
    return arg
}
// 执行普通函数
var ret = f(555);
console.log(ret)

// 转换为箭头函数
var f1 = (arg)=>{return arg};
// 执行箭头函数
var ret2 = f1('world');
console.log(ret2)

6.2 当函数只有一个参数时，小括号 `()`可以省略

// 接上一例子，标准箭头函数
var f1 = (arg)=>{return arg};

// 省略 ()
var f1 = arg=>{return arg};

6.3 当函数返回一个 map 对象时候，需要使用小括号包裹。

这样只会解析为函数体，并不会是返回值

> const f = () => {a: 1}
undefined
> f()
undefined

用户小括号将返回的对象包裹起来，才是正确写法

> const fu = () => ({a: 1})
undefined
> fu()
{ a: 1 }

6.4 当函数体中，只有一条 `return` 语句时，大括号 `{}` 可以省略

// 接上例,省略 {}
var f1 = arg=>arg;
// 执行箭头函数
var ret2 = f1('world');
console.log(ret2)

[root@gitlab alertmanager]# node
Welcome to Node.js v16.13.1.
Type ".help" for more information.
> const a = 1
undefined
> const b = 2
undefined
> const f1 = ()=>a
undefined
> f1
[Function: f1]
> f1()
1
> const f2 = ()=>{b}
undefined
> f2
[Function: f2]
> f2()
undefined
> const f3 = ()=>({b})
undefined
> f3()
{ b: 2 }
>

image.png

7. 函数的默认参数在 ES6 中被支持

let f = (arg1,arg2)=>arg1 +arg2;
console.log(f(1,2));
// python --> f = lambda arg1, arg2: arg1 + arg2

// 参数的默认值
let f2 = (arg1,arg2=10)=>arg1 +arg2;
console.log(f2(1));
console.log(f2(1,20));

上面代码中，参数变量x是默认声明的，在函数体中，不能用let或const再次声明，否则会报错。

8. 数据类型及其操作

JavaScript 中的数据类型分为原始类型和对象类型：

原始类型
- 数字
- 字符串
- 布尔值
对象类型
- 数组
- 字典
- ...

特别的: 数字、布尔值、null、undefined、字符串是不可变的类型。

可以使用 typeof 查看类型

name = "yangge"
age = 18
li = [1,2,3]
dic = {"a": 1, "b": 2}
typeof(li)

typeof name

typeof true

typeof false

8.1 字符串

字符串是由字符组成的数组，但在JavaScript中字符串是不可变的：可以访问字符串任意位置的文本，但是JavaScript 并未提供修改已知字符串内容的方法。

一句话和 pytone 的类似的特性

常见功能：

注意: 以下的操作不会改变原来的字符串

由于方法较多，不能一一演示。因为这里面的大部分方法都和 python 中的类似，是指方法的名字不一样而已，道理都一样。

/*长度，注意这是个属性，不是函数，不要加小括号()*/
obj.length
 
/*移除两端的空白字符*/
obj.trim() 

/*拼接*/      
obj.concat(value, ...)       
           

/*分割，返回的是分割好的列表形式；*/
obj.split(delimiter, limit) 
          delimiter /*以此字符为标识进行分割，此字符不会出现在分割后的结果里；*/ 
        
          limit     /*从分割后的结果中，取出总共几个元素。*/

ES 6 中字符串的新功能

// startsWith 判断字符串以什么字符为开始，返回一个布尔值
var str = "http://www.qfedu.com"
if (str.startsWith("http://")){
    console.log("http 地址")
} else if(str.startsWith("git")){
          console.log("git 地址")
};
// endsWith  判断字符串以什么为结尾
if (str.endsWith("com")){
    console.log("国际域名")
}

// includes  判断某些字符串是否存在其内
var s = "hello world ";
console.log(s.includes('h'));

字符串模板

// ES 5
var name = "shark"
var age  = 18
var tag = "<tr><td>" + name + "</td>" +
               "<td>" + age + "<td></tr>"


// ES 6
var name = "shark"
var age = 18
var tag = `<tr>
<td>${name}</td>
<td>${age}</td>
</tr>`

8.2 布尔类型（Boolean）和逻辑运算符

布尔类型

布尔类型仅包含真假，与Python不同的是全部是 小写字母。
false 和 true

逻辑运算符

== 比较值相等 1 == "1" 会返回 true
!= 不等于
=== 同时比较值和类型相等 1 === "1" 会返回 false
|| 或
&& 且

小示例

1 == 1 && 2 == 2 || 3 == "3"

8.3 数组

JavaScript 中的数组类似于 Python 中的列表
同样这里数组的方法所表示的原理和 python 中列表的方法一样
所以应该很快能够理解，不必都演示

// 创建数组
var li = []
var obj = [1, 2, 3]

// 数组元素的数量
obj.length

// 尾部追加元素，会真实的改变原列表
obj.push('c')

// 会删除掉列表里的最后一个元素，并且将这个元素返回
obj.pop()

// 从头部插入一个元素
obj.unshift("shark")  

// 从头部移除一个元素
obj.shift()         

// 将数组元素连接起来以构建一个字符串；
// sep 是一个任意字符
// 拼接后的结果，每个元素之间会以此字符为连接字符，元素类型没有限制，在Python中元素必须是字符。
obj.join(sep)

扩展运算符

扩展运算符（spread）是三个点（...）。将一个数组转为用逗号分隔的参数序列。

function f(x, y, z) {
  console.log(x);
  console.log(z);
}
let args = [0, 1, 2];
f(...args);

// ES6 的写法
Math.max(...[14, 3, 77])

// 等同于
Math.max(14, 3, 77);

Math.max() 是 JS 中的内置函数

数组遍历（for 循环）

const arr = ['a', 'b'];

//  ES5 中得到 索引号
for (let i in li){
    console.log(i);  
}

ES6 还提供三个新的方法——entries()，keys()和values()——用于遍历数组。它们都返回一个遍历器对象，可以用for...of循环进行遍历，唯一的区别是keys()是对键名的遍历、values()是对键值的遍历，entries()是对键值对的遍历。

for (let index of arr.keys()) {
  console.log(index);
}
// 0
// 1

for (let elem of arr.values()) {
  console.log(elem);
}
// 或者
for (let i of li){
    console.log(i);  
}
// 'a'
// 'b'

// 同时遍历值和索引号
for (let [index, elem] of arr.entries()) {
  console.log(index, elem);
}

8.4 对象就像 python 中的字典

在 javaScript 实际上是没有字典和列表的概念的，它们都称为对象；只是我们把它构造称为列表和字典的形式而已。

$ node
> let li = [1,2,3]
undefined
> typeof li
'object'
> let dic = {"name": "shark"}
undefined
> typeof dic
'object'
>

8.4.1 更新对象

Object.assign方法用于对象的合并

Object.assign方法的第一个参数是目标对象，后面的参数都是源对象。

const target = { 'a': 1 };

const source1 = { 'b': 2 };
const source2 = { 'c': 3 };

Object.assign(target, source1, source2);
console.log(target); // {a:1, b:2, c:3}

8.4.2 遍历对象

const o = {"a": "1", "b": 2}

for (let k in o){
    console.log(o[k])
}


// 变量 key
for (let k of Object.keys(o)){
    console.log(k)
}

// 变量 value
for (let val of Object.values(o)){
    console.log(val)
}

// 变量 key 和 value
for (let [k,v] of Object.entries(o)){
    console.log(k,v)
}

10 序列化 JSON

JSON.stringify(obj) 序列化将 JS 的数据类型（对象或数组）转化为 JSON 标准数据，在开发语言中这个数据的类型是字符串。
JSON.parse(str) 反序列化将含有标准的 JSON 数据转化为 JavaScript 相应的对象

// 序列化，转化为 JSON
var json_arr = [1,'a',2,'b']
var json_str = JSON.stringify(arr)

var json_o = {'a': 1}
var json_str = JSON.stringify(json_o)

// 反序列化，转换为 对象
JSON.parse('{"a":1}')

注意：
留心 JSON 数据的单、双引号。
JSON 的数据中，字符串表示的，都必须使用双引号，最外层使用单引号。
'{"name": "shark", "age": 18, "other": "30"}'

JSON 的简写重要

当定义的 JSON 对象中的 key 和其对应 value 一样时可以只写一个。
当定义的 JSON 对象中含有函数时，可以把冒号和function 省略。

let a = 10
let b = 20

var json = {
    a,    // 相当于'a': a
    b,
    'c': 30,
    show(){
    console.log(this.a)
    }
}

json.show()

最后编辑于：2023.09.12 09:49:39

人面猴
序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
沈念sama阅读 214,922评论 6赞 497
死咒
序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
沈念sama阅读 91,591评论 3赞 389
救了他两次的神仙让他今天三更去死
文/潘晓璐我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
开封第一讲书人阅读 160,546评论 0赞 350
道士缉凶录：失踪的卖姜人
文/不坏的土叔我叫张陵，是天一观的道长。经常有香客问我，道长，这世上最难降的妖魔是什么？我笑而不...
开封第一讲书人阅读 57,467评论 1赞 288
港岛之恋（遗憾婚礼）
正文为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
茶点故事阅读 66,553评论 6赞 386
恶毒庶女顶嫁案：这布局不是一般人想出来的
文/花漫我一把揭开白布。她就那样静静地躺着，像睡着了一般。火红的嫁衣衬着肌肤如雪。梳的纹丝不乱的头发上，一...
开封第一讲书人阅读 50,580评论 1赞 293
城市分裂传说
那天，我揣着相机与录音，去河边找鬼。笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。我是一名探鬼主播，决...
沈念sama阅读 39,588评论 3赞 414
双鸳鸯连环套：你想象不到人心有多黑
文/苍兰香墨我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
开封第一讲书人阅读 38,334评论 0赞 270
万荣杀人案实录
序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
沈念sama阅读 44,780评论 1赞 307
护林员之死
正文独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋以下内容为张勋视角年9月15日...
茶点故事阅读 37,092评论 2赞 330
白月光启示录
正文我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
茶点故事阅读 39,270评论 1赞 344
活死人
序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
沈念sama阅读 34,925评论 5赞 338
日本核电站爆炸内幕
正文年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
茶点故事阅读 40,573评论 3赞 322
男人毒药：我在死后第九天来索命
文/蒙蒙一、第九天我趴在偏房一处隐蔽的房顶上张望。院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
开封第一讲书人阅读 31,194评论 0赞 21
一桩弑父案，背后竟有这般阴谋
文/苍兰香墨我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。一阵脚步声响...
开封第一讲书人阅读 32,437评论 1赞 268
情欲美人皮
我被黑心中介骗来泰国打工，没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。一个月前我还...
沈念sama阅读 47,154评论 2赞 366
代替公主和亲
正文我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
茶点故事阅读 44,127评论 2赞 352

JavaScript-ES6

基本介绍

二、如何在 HTML 中使用 JavaScript 的代码 和 编写 JavaScript 代码

1. 引入方式：

2. 应该在 html 文档的哪个位置引入

三、开发工具的搭建

1. Node.js

下载和安装

测试 Node 环境支持 ES6 的程度

四、基本语法

1. JavaScript 代码的注释和代码风格

2. 调试工具：终端输出，和浏览器弹窗

3. 变量

3.1 全局作用域

3.1.1 没有使用任何关键字声明的变量，都是全局变量

3.1.2 不是在函数中使用 var 关键字声明的变量，也是全局变量

3.2 函数作用域（局部变量）和局部作用域(ES6)

3.2.1 在函数中以关键字 var 开头声明的变量，并且不是在。

3.2.2 Es6 中的 let 和 const 声明的变量

let 示例

const 示例

4. 判断

5. 函数

5.1 普通函数

5.2 匿名函数

6. 箭头函数（ES6）

6.1 标准箭头函数的转换

6.2 当函数只有一个参数时，小括号 ()可以省略

6.3 当函数返回一个 map 对象时候，需要使用小括号包裹。

6.4 当函数体中，只有一条 return 语句时，大括号 {} 可以省略

7. 函数的默认参数在 ES6 中被支持

8. 数据类型及其操作

8.1 字符串

常见功能：

8.2 布尔类型（Boolean）和 逻辑运算符

布尔类型

逻辑运算符

8.3 数组

扩展运算符

数组遍历（for 循环）

8.4 对象 就像 python 中的字典

8.4.1 更新对象

8.4.2 遍历对象

10 序列化 JSON

推荐阅读更多精彩内容

二、如何在 HTML 中使用 JavaScript 的代码和编写 JavaScript 代码

3.1.2 不是在函数中使用 `var` 关键字声明的变量，也是全局变量

3.2.1 在函数中以关键字 `var` 开头声明的变量，并且不是在。

3.2.2 Es6 中的 `let` 和 `const` 声明的变量

6.2 当函数只有一个参数时，小括号 `()`可以省略

6.4 当函数体中，只有一条 `return` 语句时，大括号 `{}` 可以省略

8.2 布尔类型（Boolean）和逻辑运算符

8.4 对象就像 python 中的字典