学习笔记：ES6

最新推荐文章于 2025-08-05 15:28:01 发布

yipfang

最新推荐文章于 2025-08-05 15:28:01 发布

阅读量1.1k

点赞数

CC 4.0 BY-SA版权

分类专栏： js 文章标签： javascript 前端开发语言

本文链接：https://blog.youkuaiyun.com/yipfang/article/details/122743679

js 专栏收录该内容

1 篇文章

订阅专栏

一、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，⽽不是模式

类似数组的对象都有⼀个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"

Array.from()

<!DOCTYPE html>

<head>

<title>Array.from()使⽤实例</title>

</head>

<body>

<ul>

<li>zhangsan</li>

<li>wangwu</li>

</ul>

//获取上⾯的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：替换结束位置（数组的下标），如果省略不写就默认为数组结束