没有合适的资源？快使用搜索试试~ 我知道了~

文库首页课程资源讲义Javascript高级笔记总结.pdf

Javascript高级笔记总结.pdf

javascript

需积分: 0 5 下载量 173 浏览量 2022-04-03 10:57:15 上传评论收藏 924KB PDF 举报

温馨提示

试读

72页

网页由三部分构成： 1. HTML：网页基本骨架，用来设计网页的结构 2. CSS：美化网页，有了样式，才能实现网页的像素级还原 3. JavaScript：动态脚本，控制页面上动态交互，动画效果，点击事件等等

资源推荐

资源详情

资源评论

《ES6 创建变量》-WEB11

ES6 创建变量

ES，指的是 ECMAScript 规范。JavaScript 的语法需要遵循这个规范。

ES6，全称 ECMAScript 2015。

ES6 中新增了以下两种方式来创建变量：

• let

• const

语法：

var 变量名 = 变量值；let 变量名 = 变量值；const 变量名 = 变量值；

1. 修改变量值

结论：var 和 let 创建的变量，是可以修改的，而 const 创建的变量不能修改。

const 创建的变量严格来说，应该称之为“常量”。常量指的就是不可修改的数据。

const 通常用来保存不会重新赋值的数据。

扩展了解：

在 ES6 之前，程序员在开发时，如果要使用常量，会在创建变量时，变量名用纯大

写命名，来表示当前变量是一个不可修改的常量。

var NUM = 10;

2. 初始值

结论：var 和 let 创建的变量可以不设置初始值，而 const 创建的变量必须设置初始

值。

3. 作用域

结论：var 创建的变量，通过函数来划分作用范围。let 和 const 创建的变量，通过

{} 大括号来划分作用范围。

4. 变量提升

变量提升：在所有的 JS 代码正式执行之前，浏览器会将所有的代码先解析一边，在

解析的过程中，找到所有通过 var 创建的变量，将这些变量的声明（创建）提升到当前

作用域的头部，然后才开始正式执行代码。

结论：只有通过 var 创建的变量才有变量提升，let 和 const 都没有。

《函数》-WEB11

函数

1. 函数提升

函数的创建方式分为两种：

• 声明式函数

function foo() {}

• 函数表达式

var foo = function() {}

声明式函数，具有函数提升。

函数提升，指的就是代码在运行之前，会将声明式函数提升到当前作用域头部。

2. 函数和变量命名冲突

当我们 var 创建的变量和声明式函数重名时，两个都会发生提升，当变量没有赋值

时，优先级低于函数。因此重名后会留下函数。

3. 函数参数的默认值（ES6）

可以在函数的形参上，通过赋值的方式，给函数的形参设置默认值。当该形参接收到

实参时，就使用实参，当形参没有接收到实参时，就可以使用默认值。

function foo(a = 1, b = 'hello') { console.log(a, b)}foo();

4. rest 不定参数（ES6）

当实参的个数不确定时，我们可以在函数的形参中设置不定参数，以数组的形式接收

所有不确定的实参：

function bar(a, b, ...rest) { console.log(rest);}bar(1, 2, 3, 4,

5);

形参变量名之前加 ... 的就是不定参数，不定参数的名字可以任意命名。

注意：不定参数只能是最后一个形参。

不定参数和 arguments 的区别在于，不定参数得到的值是一个真实的数组，而

arguments 是一个伪（类）数组。

5. 箭头函数（ES6）

const foo = function() {}// 箭头函数 const foo = () => {}

简写

1. 当函数的形参有且只有一个时，箭头函数的小括号可以省略：

const foo = (num) => {}// 简写 const foo = num => {}

2. 函数内有且只有一条 return 语句时，箭头函数的大括号可以省略：

const foo = () => { return 'hello';}// 简写 const foo

= () => 'hello';

箭头函数的 this

箭头函数内部没有 this，如果要在箭头函数内部使用 this，实际上使用的是箭头函数

所在函数作用域的 this。

简单来说，箭头函数中的 this，找的是外部函数的 this，外部没有函数，找的就是全

局的 this。

var name = 'lisi';const obj = { name: 'zhangsan', sayName:

() => { console.log(this.name); // this 指向全局对

象 }}obj.sayName();

var name = 'lisi';const obj = { name: 'zhangsan', sayName:

function() { let foo = () =>

{ console.log(this.name); // this 使用的是 sayName

的 this，指向 obj } foo(); }}obj.sayName();

《数组的遍历》-WEB11

数组的遍历

数组除了通过 for 循环去遍历以外，还有以下几种方式：

forEach()

const arr = [10, 20, 30, 40];arr.forEach(function(item, index)

{ console.log(item); // 数组的每一项 console.log(index); //

每一项的下标})// 简写 arr.forEach(item => { console.log(item); //

数组的每一项})

map()

map 方法可以满足基本的数组遍历需求，可以通过 item 和 index 拿到数组元素和

下标。

map 还有额外的功能，就是可以通过 return 设置每一次循环的返回值，最终这些返

回值会组成一个新数组。

const arr = [10, 20, 30, 40];const newArr = arr.map(function(item,

index) { return item * 2;});console.log(newArr);

filter()

filter 方法可以满足基本的数组遍历需求，可以通过 item 和 index 拿到数组元素和

下标。

filter 还有额外的功能，可以通过 return 设置筛选条件，return 的值为 true 的 item

就会被添加到新数组中。

const arr = [10, 20, 30, 40];const newArr = arr.filter(function

(item, index) { return item > 20;})// 简写 const newArr =

arr.filter(item => item > 20);console.log(newArr);

some()

some 方法可以满足基本的数组遍历需求，可以通过 item 和 index 拿到数组元素和

下标。

some 还有额外的功能，可以通过 return 设置判断条件，当数组中有一项满足条件

时，some 方法返回 true，如果所有项都不满足条件，则返回 false。

const arr = [10, 20, 30, 40];arr.some(function(item, index)

{ return item > 30})// 简写 arr.some(item => item > 30);

every()

every 方法可以满足基本的数组遍历需求，可以通过 item 和 index 拿到数组元素和

下标。

every 还有额外的功能，可以通过 return 设置判断条件，当数组中有一项不满足条

件时，every 方法返回 false。只有所有项都满足条件，才返回 true。

const arr = [10, 20, 30, 40];arr.every(function(item, index)

{ return item > 30})// 简写 arr.every(item => item > 30);

reduce()

剩余71页未读，继续阅读

评论收藏

内容反馈

资源评论

资源反馈

评论星级较低，若资源使用遇到问题可联系上传者，3个工作日内问题未解决可申请退款~

asdfgh12484

粉丝: 0
资源: 5

上传资源快速赚钱

我的内容管理展开

我的资源快来上传第一个资源

我的收益

登录查看自己的收益

我的积分登录查看自己的积分

我的C币登录后查看C币余额

我的收藏

我的下载

下载帮助

前往需求广场，查看用户热搜

Javascript高级笔记总结.pdf

Javascript高级程序设计---笔记.pdf

Javascript高级程序设计---笔记归类.pdf

python核心笔记.pdf

《XMPP高级编程 使用JavaScript和jQuery》 高清扫描 完整版 PDF电子书 详细书签

从jQuery看JavaScript.pdf

apuntes-javascript-avanzado:Javascript 笔记 II - 高级

python核心笔记整理pdf版本

若干源程序资料12.rar

javascript 设计模式与开发实践

leetcode新手刷题指南-Study-Notes:学习资料，笔记整理

leanote:这是一个云笔记，而不仅仅是记事本！ leanote的持续维护版本！（golang + ddd + mongodb）http

leanote：不只是记事本！ （golang + mongodb）http://leanote.org

IRdisplay:Jupyter R展示机械

百度翻译源码java-my-awesome-starred:我的真棒明星

phportfolio:使用纯网格为我当前的投资组合编写代码

简悦 - SimpRead-crx插件

echarts-gl.min.js

自主研发的软著申请代码文档整理输出工具

2023前端面试八股文.pdf

javascript网页设计期末作业 购物网站

javaWeb楠小弟自助图书系统项目，使用注解方式配合原生js、axios方式完成整个项目的开发，系统只适合在javaWeb阶段

基于JavaScript网红太空人表盘

jquery-3.7.0.min.js（jQuery下载）

小兔鲜项目源码（动态网页，包含首页、注册页、登录页、购物页）原生HTML、CSS、Javascript

chromedriver-122.0.6261.70-64

Visual Studio Code auto.js.pro专用插件 Auto.js-Pro-Ext hyb1996

h5+JavaScript 烟花demo

省市县三级联动city.js文件

使用pyLDAvis的实例结果，及d3.min.js，ldavis.v1.0.0.css，ldavis.v1.0.0.js

最新资源

《XMPP高级编程使用JavaScript和jQuery》高清扫描完整版 PDF电子书详细书签

leanote：不只是记事本！（golang + mongodb）http://leanote.org

javascript网页设计期末作业购物网站