ES6知识点总结

朱雀 2023-08-17 16:58 74阅读 0赞

**声明变量**

let

不能重复声明

块级作用域

可修改let变量的值

，

const

不能重复声明

块级作用域

不能修改const 变量的值

## 2. 箭头函数  ##

而箭头函数的this指向函数定义时所在的对象

## 3. 解构赋值 ##

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

let \[a, b, c\] = \[1, 2, 3\] // a=1, b=2, c=3  
let \[d, \[e\], f\] = \[1, \[2\], 3\] // 嵌套数组解构 d=1, e=2, f=3  
let \[g, ...h\] = \[1, 2, 3\] // 数组拆分 g=1, h=\[2, 3\]  
let \[i,,j\] = \[1, 2, 3\] // 不连续解构 i=1, j=3  
let \[k,l\] = \[1, 2, 3\] // 不完全解构 k=1, l=2

对象解构

let \{a, b\} = \{a: 'aaaa', b: 'bbbb'\} // a='aaaa' b='bbbb'

let obj = \{d: 'aaaa', e: \{f: 'bbbb'\}\}

let \{d, e:\{f\}\} = obj // 嵌套解构 d='aaaa' f='bbbb'

let g;

(g = \{g: 'aaaa'\}) // 以声明变量解构 g='aaaa'

let \[h, i, j, k\] = 'nice' // 字符串解构 h='n' i='i' j='c' k='e'

### 变量赋值 ###

const \{userName11111, passwordqq\} = \{userName11111: 'aaaa', passwordqq: 123456\}

console.log(userName11111)

console.log(passwordqq)

const \[userName1, password1\] = \['aaaaxxx', 12345611\]

console.log(userName1)

console.log(password1)

## 5. 数组  ##

s6对数组扩展了4个方法：map、reduce、filter、forEach。

map：原来数组有多少个，map 处理之后还是那么多个。参数：item，index，array

let arr = \[12, 35, 56, 79, 56\];

let arr1 = arr.map(item => item % 2 === 0 ? '偶' : '奇');

let arr2 = arr.map((item, index) => index + ':' + item);

console.log(arr); // \[ 12, 35, 56, 79, 56 \]

console.log(arr1); // \[ '偶', '奇', '偶', '奇', '偶' \]

console.log(arr2); // \[ '0:12', '1:35', '2:56', '3:79', '4:56' \]

filter: 过滤掉不符合条件的。参数：item，index，array

let arr = \[12, 75, 56, 79, 56\];

let arr1 = arr.filter(item => item >= 60);

console.log(arr); // \[ 12, 75, 56, 79, 56 \]

console.log(arr1); // \[ 75, 79 \]

forEach: 遍历。仅仅只是循环用，无返回值，也不会改变原数组。 参数：item，index，array

reduce: 汇总。下面代码中的 tmp 可以理解为前一个值

let arr = \[12, 35, 56, 79, 56\];

let avg = arr.reduce((tmp, item, index) => \{

tmp += item;

if (index === arr.length - 1) tmp /= (index + 1);

return tmp;

\})

console.log(avg); // 47.6 也就是这五个数的平均值

（...），它可以将一个数组拆分为参数序列，也可以收集剩下的所有的参数或者数组元素

扩展运算符(…)用于取出参数对象中的所有可遍历属性，拷贝到当前对象之中

// 将一个数组拆分为参数序列

let arr = \[1, 2\]

function add(a, b) \{

return a + b

add(...arr)

console.log(add(...arr)) //3

// 收集剩下的所有的参数

function f(a, ...arr) \{

console.log(...arr) // 2 3

f(1,2,3)

### 对象的扩展运算符 ... ###

对象的扩展运算符（...）可以把对象可枚举的属性拆分为键值对序列

用于对象拷贝

let obj1 = \{ a: 1, b: 2 \}

let obj2 = \{ ...obj1 \}

console.log(obj2) // \{a:1,b:2\}

用于合并对象

let obj1 = \{ a: 1, b: 2 \}

let obj2 = \{ c: 3, d: 4 \}

let obj3 = \{ a: 100, ...obj1, ...obj2, e: 5, f: 6 \} // \{a: 1, b: 2, c: 3, d: 4, e: 5, f: 6\}

let obj4 = \{ ...obj1, ...obj2, e: 5, f: 6, a: 100 \} // \{a: 100, b: 2, c: 3, d: 4, e: 5, f: 6\}

### (2) Object.assign ###

Object.assign方法用于对象的合并，将源对象（source）的所有可枚举属性，拷贝(浅拷贝)到目标对象。

如果目标对象与源对象有同名属性，或多个源对象有同名属性，则后面的属性会覆盖前面的属性。

const target = \{ a: 1 \};

const source1 = \{a: 100, b: 2 \};

const source2 = \{ c: 3 \};

Object.assign(target, source1, source2);

target // \{a:100, b:2, c:3\}

#### 面向对象 ####

ES6出来之后，官方提供了面向对象的写法。看代码吧

class Person \{

constructor(name, age, address) \{

this.name = name;

this.age = age;

this.address = address;

introduce() \{

console.log(\`大家好，我叫$\{this.name\}，今年$\{this.age\}岁，家在$\{this.address\}\`);

class Student extends Person \{

constructor(name, age, address, major) \{

super(name, age, address);

this.major = major;

introduce() \{

console.log(\`大家好，我叫$\{this.name\}，今年$\{this.age\}岁，家在$\{this.address\}， 专业是$\{this.major\}\`);

let person = new Person('ethan', 24, '包邮区');

person.introduce(); // 大家好，我叫ethan，今年24岁，家在包邮区

let student = new Student('zyc', 18, '南京', '车辆工程');

student.introduce(); // 大家好，我叫zyc，今年18岁，家在南京， 专业是车辆工程

上面定义了一个 Person 类，又定义了一个继承 Person 类的 Student 类，很明显方便了很多。

#### Promise 主要是用来解决异步操作。 ####

*  同步：串行 简单，方便
 *  异步：并行 性能高，体验好

这是 promise 的基本用法

let p = new Promise((resolve, reject) => \{

$.ajax(\{

url: '1.txt',

dataType: 'json',

success(json) \{

resolve(json);

\},

error(err) \{

reject(err);

\})

\});

p.then(json => \{

console.log('成功', json);

\}, err => \{

console.log('获取失败');

\})

转载于:https://www.cnblogs.com/City-wall/p/11497971.html

ES6知识点总结

发表评论取消回复

还没有评论，来说两句吧...

相关阅读

相关 ES入门知识点总结

相关 ES6知识点总结

相关 ES6知识点总结

相关 ES6-ES2020前端JS知识点总结

相关 ES6知识点（一）

相关 ES6之Generator(3)知识点总结（十）

相关 ES6之Generator(2)知识点总结（九）

相关 ES6之Generator(1)知识点总结（八）

相关 ES6之Promise对象知识点总结（七）

相关 es6知识总结