JavaScript高级 ES6篇

前面的内容主要讲的是JavaScript基础内容,想要更加了解前端的小朋友们,需要再继续努力,我们开始向JavaScript高级内容出发了呦,不要掉队啦!

一、变量与常量的声明

1.1 var 关键字声明变量

语法:

var 变量 = 值;

var 声明的变量没有块级作用域(ES5中的作用域:全局和局部)

1、可以先使用,后声明

2、可以重复定义同一个变量,逻辑错误,第二次应该是修改变量,而不是定义

3、var用在for循环条件中,造成for 循环的污染的问题

4、var 声明的变量没有块级作用域(ES5中的作用域:全局和局部)

1.2 let 关键字声明声明变量

语法:

let 变量 = 值;

ES6中为了统一并提高代码的安全性,引入了let关键字来代替var声明变量

特点:

1、let声明的变量没有预解析,不会有变量提升

2、同一作用域let不可以重复定义同一个变量

3、let用在for循环条件中,不会造成for 循环的污染的问题

4、let声明的变量有块级作用域(ES6中的作用域:全局和局部还有块级作用域)

1.3 块级作用域

块指的是代码块,一对 { } 之间就是一个代码块。变量的有效范围只在这对 大括号 之间,就是块级作用域。

var 和 let都可以用来声明变量,当然,它们会有不同点:

var的声明

var btns = document.querySelectorAll('button')
for(var i = 0; i < btns.length; i++){btns[i].onclick = function(){console.log(i)}
}
console.log(i)  //btns.length
  • var声明的变量可以重复定义
  • var声明的变量有预解析
  • var声明的变量没有块级作用域

let声明

let btns = document.querySelectorAll('button')
for(let i = 0; i < btns.length; i++){btns[i].onclick = function(){console.log(i)}
}
console.log(i) //undefined
  • let声明的变量不可以重复定义
  • let声明的变量没有预解析
  • let声明的变量有块级作用域
  • let声明的变量暂时性死区

1.4 const关键字

ES6中,const关键字来声明一个只读的常量

常量具备以下特点:

  • 一旦声明就必须赋值
  • 一旦赋值就不能修改
  • 常量的作用域和let声明的变量作用域一样 块级作用域
  • 没有预解析
  • 引用类型的值可以修改

语法:

const 常量名 = 值;

二、模板字符串

语法:

`固定字符${变量或者表达式}`

例如:

let name = '狗蛋',age = 12,gender = '男'
// 字符串拼接
let str = "大家好,我叫" + name + ",今年" + age + "岁了,我是一个" + gender + "孩子"
// 模板字符串
let str2 = `大家好,我叫${name},今年 ${age}岁了,我是一个${gender}孩子`

特点:

    在模板字符串中,可以解析 ${ } 之间的变量或者表达式
    在整个字符串中允许换行

三、解构语法

ES6 允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为解构。

3.1 对象解构

let obj = {name: "luowowo",age:11,email:"luowowo@163.com"
};// 取出所有属性并赋值:
// let name  = obj.name;
// let age  = obj.age;
// let email  = obj.email;// 现在只需要(等效于上面的写法):
// 等号左边的变量要和对象里面的属性同名,否则没法解构出来
// let {name, email, age} = obj;  //{ }中的变量名和obj的属性名一致   完全解构// 部分解构
// let {name} = obj;     // 部分解构//解构之后重命名   
let {name:itsName} = obj;     解构之后重命名为itsName//将现有对象的方法,赋值到某个变量
let {random}=Math;
console.log(random)//[Function: random]

在ES6中,对象的写法发生了些改变,对象也可以简写

let name = '小龙女',age = 12,gender = '男'obj的属性名和变量是同样的,可以在es6中简化为:
let obj = {name,age,gender}

如果一个对象的属性名和外面的一个变量名同名,可以直接将变量名作为属性名,并会自动地把变量的值作为属性的值

3.2 数组解构

let arr1 = [10, 20, 30];let [a, b, c , d] = arr1;// 完全解构
console.log(a);  //10
console.log(b);  //20
console.log(c);  //30
// 若解构不成功,变量的值就等于 undefined
console.log(d);  //undefined// 部分解构
let [e] = arr1;
console.log(e);  //10let [ , ,f] = arr1;
console.log(f);  //30// 复合解构
let arr2 = [1, 2, [10, 20, 30]];
let [ j, k, [x, y, z]] = arr2;
console.log(j);  //1
console.log(k);  //2
console.log(x);  //10
console.log(y);  //20
console.log(z);  //30

3.3 字符串解构

let string1 = "xyz";let [a,b,c] = string1;
console.log(a);  //x
console.log(b);  //y
console.log(c);  //zstring1[1] = "Y";
console.log(string1);  // xyz    无法修改
console.log(string1[1]);  // y

3.4 函数参数默认值和参数解构

函数参数可以给默认值

ES5的方法:
function add(a,b,c,d){a = a || 0;b = b || 0;c = c || 0;d = d || 0;return a + b + c + d;
}ES6的方法:funciton 函数名(参数=默认值){ // 注意当 参数 为 undefined 时 参数 赋值为 默认值
}function add(a=0,b=0,c=0,d=0){return a + b + c + d;
}

函数参数的解构

 // 参数是一组有次序的值
function f([x, y, z]) { console.log(x, y, z);
}
f([1, 2, 3]);
// 参数是一组无次序的值
function fn({x, y, z}) { // {x, y, z} = obj 解构console.log(x, y, z);
}
fn({z: 4, x: 5, y: 6});

函数解构赋值指定参数的默认值

function func2({name, age} = {}){   //防止不传实参时候的报错console.log(name, age);
}
func2();   //undefined undefined
// func2(); //相当于传了一个null   {name, age}=null 就会报错
// func2({});  //不会报错,输出:undefined undefinedfunction func2({name="luowowo", age=11} = {}){    //指定默认值console.log(name, age);
}
func2();  //luowowo 11

四、剩余运算符和展开运算符

4.1 剩余运算符

用于赋值号左边或函数形参

ES5的方法:
arguments 对象:function fn(){console.log(arguments);// 伪数组
}fn(10, 20, 30, 50, 60);
ES6的方法:function func( a, b ,...args){  // 把剩余的参数都交给argsconsole.log(rest);
}func(10, 20, 30, 50, 60);function func2(...args){   //args接收所有参数作为一个数组rest.forEach(function (item) {console.log(item);});
}
func2(60, 70, 80, 90);// 报错
function f(a, ...b, c) {// ...
}

4.2 展开运算符

用于函数实参或者赋值号右边

// 快速将一个数组拆开成一个一个的元素
let arr = [1, 2, 3, 4]
console.log(...arr)
// 快速将一个对象里面的数据复制一份到一个新的对象里面
let obj = { name: '狗蛋', age: 12, gender: '男' }
console.log({id:1,birthday:'2020-02-02', ...obj})
// 将一个字符串拆开成为多个单独的字符
let str = 'abc'
console.log(...str)
// 1、数组中的值作为函数参数使用
let arr1 = [10, 20, 30];function func(a, b, c){console.log(a,b,c)
}func(...arr1);  //等效于:func(10,20,30);     输出结果10 20 30// 2、合并数组
let arr2 = [40, 50, 60];
let newArr = [...arr1,...arr2];  // 等效于 [ 10, 20, 30, 40, 50, 60 ]
console.log(newArr);    //[ 10, 20, 30, 40, 50, 60 ]// 3、合并对象
let obj1 = {name:"chenglong",age:"18",
};
let obj2 = {email:"chenglong@163.com",
};
let newObj = {...obj1,...obj2}; // 等效于{ name: 'luowowo', age: '18', email: 'chenglong@163.com' }
console.log(newObj);    //{ name: 'chenglong', age: '18', email: 'chenglong@163.com' }// 4、es6中另一个合并对象的方法
let newObj2 = Object.assign({},obj1,obj2);  // 把第二个及第二个以上的参数都合并到第1个上面去。
console.log(newObj2);   //{ name: 'chenglong', age: '18', email: 'chenglong@163.com' }

五、箭头函数

5.1 基本使用

基本语法

ES6 允许使用 “箭头”(=>)简化函数的定义。

(参数) => { 函数体 }1. 形参个数如果为1个,可以省略小括号不写;// 3、有一个参数    (函数只有一个函数,可以省略()不写// let fn3 = (a) =>{console.log(a);}let fn3 = a => console.log(a);fn3(6)2. 如果函数体里面只有一个语句,可以省略大括号不写, 并且他会默认返回 => 符号后面的数据。// let fn1 =() =>{console.log("无参数无返回值");}let fn1 = () => console.log("无参数无返回值");fn1();// 2、无参数有返回值   (函数体只有一句话(并且要返回),{}和return都可以不写// let fn2 = ()=>{return "无参数有返回值"}let fn2 = () => "无参数有返回值"console.log(fn2());3. 如果函数体有多个语句,则不能省略大括号。
4. 如果函数体只有一个语句,且返回一个对象,建议是,不要写简写的方式。
5. 箭头函数不可以使用 arguments 获取参数列表,可以使用 rest 参数代替。let fn6 = (...a) =>{console.log(a); //[1, 2, 3, 4, 5, 6, 7, 8, 9]}fn6(1,2,3,4,5,6,7,8,9)

使用场景(回调函数)

// 定时器中的回调函数
setInterval(() => {console.log("我用了箭头函数");
}, 1000);// forEach中的回调函数
var arr = [22, 32, 11, 3, 5, 7, 88];
arr.forEach(item => console.log(item));

箭头函数常用的省略

// 当只有一条return语句,{}和return可以一起省略
const getSum = (x, y) => {return x + y
}// 可以写为
const getSum = (x, y) => x + yconsole.log(getSum(3, 4))// 当只有一条return语句 并且返回的是一个对象,把这个对象用()包裹起来
const fn = () => ({a: 1,
})
console.log(fn()) // 形参只有一个,小括号可以省略,其余情况全部要加()
const f2 = (x) => x * 2    // (x)=> {return x *2}
console.log(f2(6))

5.2 this指向问题

普通函数中的this:

1. this总是代表它的直接调用者(js的this是执行上下文), 例如 obj.func ,那么func中的this就是obj

2.在默认情况(非严格模式下,未使用 'use strict'),没找到直接调用者,则this指的是 window (约定俗成)

3.在严格模式下,没有直接调用者的函数中的this是 undefined

4.使用call,apply,bind(ES5新增)绑定的,this指的是 绑定的对象

箭头函数中的this:

1.箭头函数没有自己的this, 它的this是继承而来; 默认指向在定义它时所处的对象(宿主对象),此处指父级作用域,而不是执行时的对象, 定义它的时候,可能环境是window; 箭头函数可以方便地让我们在 setTimeout ,setInterval中方便的使用this

2.箭头函数中,this指向的固定化,并不是因为箭头函数内部有绑定this的机制,实际原因是箭头函数根本没有自己的this,导致内部的this就是外层代码块的this。

六、数组(Array)拓展方法

6.1 Array扩展方法:Array.from方法

var arrylike = {"0":"张三","1":"李四","2":"王五","length":3
}
console.log(arrylike);//{0: '张三', 1: '李四', 2: '王五', length: 3}
var ary = Array.from(arrylike);
console.log(ary);//['张三', '李四', '王五']

方法还可以接受第二个参数,作用类似于数组的map方法,用来对每个元素进行处理,将处理后的值放入返回的数组。

var arraylike = {"0":"1","1":"2","length":2
}
var ary = Array.from(arraylike,item=>item*2) // 2 4
console.log(ary);

6.2 Array实例方法:find方法

用于找出第一符合条件的数组成员,如果没有找到返回undefined

let ary = [{id: 1,name: '张三' 
},{id: 2,name: '李四'
}];
let target = ary.find((item, index) => item.id == 2);
console.log(target);//{id: 2, name: '张三'}

6.3 Array实例方法:findIndex方法

用于找出第一个符合条件的数组成员的位置,如果没有找到返回-1

let  ary = [10,20,50];
let index = ary.findIndex(item => item> 15);
console.log(index);//1

6.4 Array实例方法:includes

let ary = ["a","b","c"];
let result = ary.includes('a');
console.log(result);//true
result = ary.includes('e');
console.log(result);//false

七、set

ES6 提供了新的数据结构 Set 它类似于数组 但是成员的值都是唯一的 没有重复的值
Set本身是一个构造函数,用来生成 Set 数据结构。

const s = new Set;

Set函数可以接受一个数组作为参数,用来初始化。

const set = new Set([1, 2 ,3 ,4 , 5]);
const s1 = new Set();
console.log(s1.size);// 0
const s2 = new Set(["a","b"]);
console.log(s2.size);// 2
const s3 = new Set(["a","a","b","b"]);
console.log(s3.size);// 2
const ary = [...s3];
console.log(ary);//['a', 'b']

    实例方法:

  • add(value): 添加某个值,返回Set结构本身
  • delete(value): 删除某个值,返回一个布尔值,表示删除是否成功
  • has(value): 返回一个布尔值,表示该值是否为Set的成员
  • clear(): 清除所有成员,没有返回值
const s4 = new Set();
//向set结构中添加值 使用add方法
s4.add('a').add('b');
console.log(s4.size);//2
//从set结构中删除值,用到的方法是delete
const r1 = s4.delete('a');
console.log(s4.size);//1
console.log(r1);//true
//判断某一个值是否是set数据中的成员 使用has
const r2 = s4.has('b');
console.log(r2);//true
//清空set数据结构中的值 使用clear方法
s4.clear();
console.log(s4.size);//0

遍历set

Set 结构的实例与数组一样,也拥有forEach方法,用于对每个成员执行某种操作,没有返回值

const s5 = new Set (['a','b','c','d','e']);
s5.forEach((value)=>{console.log(value);
})

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/238894.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

基于ssm+jsp学生综合测评管理系统源码和论文

网络的广泛应用给生活带来了十分的便利。所以把学生综合测评管理与现在网络相结合&#xff0c;利用java技术建设学生综合测评管理系统&#xff0c;实现学生综合测评的信息化。则对于进一步提高学生综合测评管理发展&#xff0c;丰富学生综合测评管理经验能起到不少的促进作用。…

轻量级Python IDE使用(二)——缩进规则

1、缩进对程序的影响 1.1、缩进不符合规则&#xff0c;解析器会报错&#xff0c;程序无法运行 a 0print(a)print(a)的缩进不符合缩进规则&#xff0c;程序在第二行发生错误。 1.2、符合规则&#xff0c;但缩进位置不同&#xff0c;程序执行的逻辑会有差异。 isP False if…

OPC UA 与PROFINET比较

ROFINET和OPC UA是两种常见的协议&#xff0c;过去这两个协议有两个不同的角色。PROFINET通常用于现场设备和本地控制器之间的实时数据通信。而OPC UA通常用于在本地控制器和更高级别的MES和SCADA系统之间进行通信。 OPC UA 网络架构 PROFINET网络由IO控制器和IO设备组成&…

【数据结构】什么是树?

&#x1f984;个人主页:修修修也 &#x1f38f;所属专栏:数据结构 ⚙️操作环境:Visual Studio 2022 &#x1f4cc;树的定义 树(Tree)是n(n≥0)个结点的有限集.n0时称为空树. 在任意一颗非空树中: 有且仅有一个特定的称为根(Root)的结点;当n>1时,其余结点可分为m(m>0)个互…

Laravel框架使用phpstudy本地安装的composer用Laravel 安装器进行安装搭建

一、首先需要安装Laravel 安装器 composer global require laravel/installer 二、安装器安装好后&#xff0c;可以使用如下命令创建项目 laravel new sys 三、本地运行 php artisan serve 四、 使用Composer快速安装Laravel5.8框架 安装指定版本的最新版本&#xff08;推荐&a…

虚拟机磁盘扩容

https://www.xjx100.cn/news/528878.html?actiononClick https://blog.csdn.net/ytraister/article/details/129631653 PC电脑 VMware安装的linux CentOs7如何扩容磁盘&#xff1f; - 知乎 (zhihu.com) 解决虚拟机磁盘满了&#xff0c;无法上传文件&#xff0c;给虚拟机扩容问…

怎样写一个C语言程序计算以下问题?

怎样写一个C语言程序计算以下问题&#xff1f; 在开始前我有一些资料&#xff0c;是我根据自己从业十年经验&#xff0c;熬夜搞了几个通宵&#xff0c;精心整理了一份「C语言的资料从专业入门到高级教程工具包」&#xff0c;点个关注&#xff0c;全部无偿共享给大家&#xff01…

Python 将RTF文件转为Word 、PDF、HTML

RTF也称富文本格式&#xff0c;是一种具有良好兼容性的文档格式&#xff0c;可以在不同的操作系统和应用程序之间进行交换和共享。有时出于不同项目的需求&#xff0c;我们可能需要将RTF文件转为其他格式。本文将介如何通过简单的Python代码将RTF文件转换为Word Doc/Docx、PDF、…

MySQL数据库基础和基本的增删改查操作

目录 前瞻 数据库的基本概念 数据库管理系统&#xff08;DBMS&#xff09; 数据库系统(DBS) 数据库类型和常用数据库 关系型数据库 SQL 非关系型数据库 NoSQL SQL语句 简介 SQL语句分类 常用的数据类型 MySQL的六大约束特性 SQL语句的使用 创建及删除数据库和表 …

【小白专用】php以pdo方式连接sqlserver,开启sqlsrv扩展

一、安装ODBC程序&#xff0c; 下载适用于 SQL Server 的 ODBC 驱动程序 - 适用于 SQL Server 的 ODBC 驱动程序 |Microsoft 学习 运行安装程序&#xff0c;出现如下图所示页面&#xff1b; 选择下一步&#xff1b;选择我同意许可协议中的条款后选择下一步&#xff1b; 点击安…

c语言易错题之数据类型变换

1.题目 #include<stdio.h> int main() {int arr[]{1,2,3,4,5};short*p (short*)arr;int i 0;for(i0;i<4;i){*(pi)0;}for(i0;i<5;i){printf("%d ",arr[i];}return 0; }2.解析 这道题主要容易错在&#xff0c;大家会以为通过指针赋值的时候&#xff0c;…

初级数据结构(七)——二叉树

文中代码源文件已上传&#xff1a;数据结构源码 <-上一篇 初级数据结构&#xff08;六&#xff09;——堆 | NULL 下一篇-> 1、写在前面 二叉树的基本概念在《初级数据结构&#xff08;五&#xff09;——树和二叉树的概念》中已经介绍得足够详细了。上一…

AcWing算法提高课-1.4.2股票买卖 IV

算法提高课整理 CSDN个人主页&#xff1a;更好的阅读体验 原题链接 题目描述 给定一个长度为 n n n 的数组&#xff0c;数组中的第 i i i 个数字表示一个给定股票在第 i i i 天的价格。 设计一个算法来计算你所能获取的最大利润&#xff0c;你最多可以完成 k k k 笔交易…

ubuntu20.04.3

1.方法1 创建账号 使用adduser创建账号&#xff0c;命令如下&#xff1a; adduser username username为要创建的账号名 置密码后&#xff0c;需要设置账户信息&#xff0c;这里可以采用默认&#xff0c;全部回车&#xff0c;最后输入Y确认即可&#xff1a; 2.方法2 创建新…

【工具使用-有道云笔记】如何在有道云笔记中插入目录

一&#xff0c;简介 本文主要介绍如何在有道云笔记中插入目录&#xff0c;方便后续笔记的查看&#xff0c;供参考。 二&#xff0c;具体步骤 分为两个步骤&#xff1a;1&#xff0c;设置标题格式&#xff1b;2&#xff0c;插入标题。非常简单~ 2.1 设置标题格式 鼠标停在标…

论文阅读——Flamingo

Flamingo: a Visual Language Model for Few-Shot Learning 模型建模了给定交织的图片或支视频的条件下文本y的最大似然&#xff1a; 1 Visual processing and the Perceiver Resampler Vision Encoder&#xff1a;from pixels to features。 预训练并且冻结的NFNet&#xff…

Hive Serde

Hive Serde 目的&#xff1a; ​ Hive Serde用来做序列化和反序列化&#xff0c;构建在数据存储和执行引擎之间&#xff0c;对两者实现解耦。 应用场景&#xff1a; ​ 1、hive主要用来存储结构化数据&#xff0c;如果结构化数据存储的格式嵌套比较复杂的时候&#xff0c;可…

C++的面向对象学习(4):对象的重要特性:构造函数与析构函数

文章目录 前言&#xff1a;将定义的类放在不同文件夹供主文件调用的方法一、构造函数与析构函数1.什么是构造函数和析构函数&#xff1f;2.构造函数和析构函数的语法3.构造函数的具体分类和调用方法①总的来说&#xff0c;构造函数分类为&#xff1a;默认无参构造、有参构造、拷…

【RocketMQ每日一问】rocketmq事务消息原理?

rocketmq事务消息原理&#xff1f; RocketMQ的事务消息主要由三部分组成&#xff1a;半消息&#xff08;Half Message&#xff09;、执行本地事务和事务补偿机制。下面详细介绍这三部分&#xff1a; 半消息&#xff08;Half Message&#xff09;用户向RocketMQ发送半消息&…

多臂老虎机算法步骤

内容导航 类别内容导航机器学习机器学习算法应用场景与评价指标机器学习算法—分类机器学习算法—回归机器学习算法—聚类机器学习算法—异常检测机器学习算法—时间序列数据可视化数据可视化—折线图数据可视化—箱线图数据可视化—柱状图数据可视化—饼图、环形图、雷达图统…