JavaScript-ES6总结（更新中！！！）

Posted 2020-12-12 lucky-cat233

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了JavaScript-ES6总结（更新中！！！）相关的知识，希望对你有一定的参考价值。

基本介绍

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 当函数体中，只有一条 `return` 语句时，大括号 `{}` 可以省略

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

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()

以上是关于JavaScript-ES6总结（更新中！！！）的主要内容，如果未能解决你的问题，请参考以下文章

JavaScript-ES6新特性

HTML5+JavaScript-ES6移动端2D飞行射击游戏

JavaScript面试题总结系列

React学习--不断修正更新

模板字符串中的数字格式（Javascript - ES6）

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 当函数体中，只有一条 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.3 当函数体中，只有一条 `return` 语句时，大括号 `{}` 可以省略

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

8.4 对象就像 python 中的字典