JavaScript-ES6总结(更新中!!!)

基本介绍

JavaScript 简称 JS

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

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

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

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

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

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

chrome 浏览器

 
JavaScript-ES6总结(更新中!!!)
image.png

IE 浏览器

 
JavaScript-ES6总结(更新中!!!)
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

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

验证安装

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

测试 Node 环境支持 ES6 的程度

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

# 之后在系统的终端中执行如下命令
es-checker
JavaScript-ES6总结(更新中!!!)
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 中的 letconst 声明的变量

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不同的是全部是 小写字母
falsetrue

逻辑运算符

  • == 比较值相等 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 的简写 重要

  1. 当定义的 JSON 对象中的 key 和其对应 value 一样时可以只写一个。
  2. 当定义的 JSON 对象中含有函数时,可以把 冒号和function 省略。
let a = 10
let b = 20

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

json.show()
 
 

相关推荐