IT数码 购物 网址 头条 软件 日历 阅读 图书馆
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
图片批量下载器
↓批量下载图片,美女图库↓
图片自动播放器
↓图片自动播放器↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁
 
   -> JavaScript知识库 -> 学习笔记:ES6 -> 正文阅读

[JavaScript知识库]学习笔记:ES6

一、let和const

var:存在变量提升,可以重复声明,不支持块级作用域,不能定义常量

let:只在代码块内有效,必须先声明再使用(不能提升)

const:声明一个只读的常量(常量指向的内存地址不变),只在代码块内有效。常量对象内的属性可以变

二、变量的解构赋值

ES6 允许按照?定模式,从数组和对象中提取值,对变量进?赋值
let [ x1 ,[[ y1 ], z1 ]] = [ 10 ,[[ 20 ], 30 ]]; // 嵌套数组
let [ , , z ] = [ "one" , "two" , "three" ];
console . log ( z ); //three
// 其中 ... ES6 的扩展运算符,即 d 加上 ... 可以接收多个值
let [ a , ... d ] = [ 1 , 2 , 3 , 4 ];
console . log ( a ); // 1
console . log ( d ); // [2, 3, 4]
let [ x , y = 'b' ] = [ 'a' ]; // x='a', y='b'? ? ? ? //默认值

对象的解构赋值:

要求变量必须与属性同名
let { age , name } = { name : ' 张三 ' , age : 20 };
// 如果变量名与属性名不?致,必须写成下?这样
let { email : em , password : ps } = { email : 'zs@163.com' , password : '123456' };
// 如上代码 email password 都是匹配的模式, em 才是变量。真正被赋值的是变量 em ,?不是模式
email
类似数组的对象都有?个 length属性,因此还可以对这个属性解构赋值。
let { length : len } = 'hello' ;
console . log ( len ); // 5

用途:

1、交换变量的值

let x = 1 ;
let y = 2 ;
[ x , y ] = [ y , x ]; `
2、 从函数返回多个值
// 返回?个数组
function example1 () {
????????return [ 1 , 2 , 3 ];
}
let [ a , b , c ] = example1 ();
// 返回?个对象
function example2 () {
????????return {
????????????????foo : 1 ,
????????????????bar : 2
????????};
}
let { foo , bar } = example2 ();
3、函数参数的定义
// 参数是?组有次序的值
function f ([ x , y , z ]) { ... }
f ([ 1 , 2 , 3 ]);
// 参数是?组?次序的值
function f ({ x , y , z }) { ... }
f ({ z : 3 , y : 2 , x : 1 });
4、提取json的值
// 解构赋值对提取 JSON 对象中的数据,尤其有?。
let jsonData = {
????????id : 42 ,
????????status : "OK" ,
????????data : [ 867 , 5309 ]
};
let { id , status , data : number } = jsonData ;
console . log ( id , status , number );
// 42, "OK", [867, 5309]

三、函数的扩展

1、函数的默认值

function add ( x = 0 , y = 0 ){
return x + y ;
}
console . log ( add ()); //0
console . log ( add ( 10 )); //10
2、箭头函数? =>
var sum = ( num1 , num2 ) => { return num1 + num2 ; }
由于?括号被解释为代码块,所以如果箭头函数直接返回?个对象,必须在对象外?加上括号,否
则会报错。
let getTempItem = id => ({ id : id , name : "Temp" });

箭头函数有?个使?注意点。

(1 )函数体内的 this 对象,就是定义时所在的对象,?不是使?时所在的对象。
(2 )不可以当作构造函数,也就是说,不可以使? new 命令,否则会抛出?个错误。
(3 )当你真的需要 this的时候,如为对象添加普通?法或事件绑定回调函数使?箭头函数,可能获取不到 this
(4 )不可以使? arguments 对象,该对象在函数体内不存在。
上?四点中,第?点尤其值得注意。 this 对象的指向是可变的,但是在箭头函数中,它是固定的。

数组的扩展:

遍历:

for(普通for循环)?

for...in(会遍历其他非数字属性)

for...of(不会遍历非数字属性,支持break和continue)

a.forEach(使用回调函数遍历)

// 数组对象 entries() ?法返回?个数组的迭代对象,该对象包含数组的键值对 (key/value)
//1. 使? for...of 遍历数组:
let a = [ 'zhangsan' , 'lisi' , 'wangwu' ];
for ( let [ k , v ] of a . entries ()){
????????console . log ( k , v );
}
//0 "zhangsan"
//1 "lisi"
//1 "lisi"

Array.from()

<!DOCTYPE html>
<html lang = "en" >
<head>
????????<meta charset = "UTF-8" >
????????<title> Array.from() 使?实例 </title>
</head>
<body>
????????<ul>
????????????????<li> zhangsan </li>
????????????????<li> lisi </li>
????????????????<li> wangwu </li>
????????</ul>
????????<script type = "text/javascript" >
????????????????//获取上?的li 节点对象列表
????????????????let nlists = document . querySelectorAll ( "li" );
????????????????console . log ( nlists ); //NodeList(3) [li, li, li]
????????????????//将NodeList列表对象转成数组,并解析出每个元素之间的内容。
????????????????const alist = Array . from ( nlists , li => li . textContent );
????????????????console . log ( alist ); // ["zhangsan", "lisi", "wangwu"]
????????</script>
</body>
</html>

Array.of()

console . log ( Array . of ( 1 , 2 , 3 )); //[1,2,3] 创建?个值为 1 2 3 的数组

数组实例的 find() findIndex()

let s2 = data . find ( v => v [ 'name' ] == 'lisi' );
console . log ( s2 ); //{name: "lisi", age: 25, sex: "woman"}
let s4 = data . findIndex ( v => v [ 'name' ] == 'lisi' );
console . log ( s4 ); //1

数组实例的 some() every()

every ()和 some ()?的:确定数组的所有成员是否满?指定的测试 .
????????some()?法 只要其中?个为 true 就会返回 true
????????every()?法必须所有都返回 true 才会返回 true ,哪怕有?个 false ,就会返回 false
即: every: ?假即假; some: ?真即真。

?数组实例的 .fill()

fill() 函数,使?指定的元素替换原数组内容,会改变原来的数组。
语法结构: arr.fill(value[, start[, end]])
????????value:替换值。
????????start:替换起始位置(数组的下标),可以省略。
????????end:替换结束位置(数组的下标),如果省略不写就默认为数组结束
  JavaScript知识库 最新文章
ES6的相关知识点
react 函数式组件 & react其他一些总结
Vue基础超详细
前端JS也可以连点成线(Vue中运用 AntVG6)
Vue事件处理的基本使用
Vue后台项目的记录 (一)
前后端分离vue跨域,devServer配置proxy代理
TypeScript
初识vuex
vue项目安装包指令收集
上一篇文章      下一篇文章      查看所有文章
加:2022-01-30 18:50:47  更:2022-01-30 18:52:24 
 
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁

360图书馆 购物 三丰科技 阅读网 日历 万年历 2024年11日历 -2024/11/24 13:25:28-

图片自动播放器
↓图片自动播放器↓
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
图片批量下载器
↓批量下载图片,美女图库↓
  网站联系: qq:121756557 email:121756557@qq.com  IT数码