047 ES6

最新推荐文章于 2024-03-29 08:29:37 发布

Manta__

最新推荐文章于 2024-03-29 08:29:37 发布

阅读量149

点赞数

分类专栏： JavaScript

本文链接：https://blog.csdn.net/Manta__/article/details/105365159

版权

JavaScript 专栏收录该内容

50 篇文章 0 订阅

订阅专栏

let

作用:与var类似, 用于声明一个变量
特点:
-在块作用域内有效
-不能重复声明
-不会预处理, 不存在提升
应用:
-循环遍历加监听
-使用let取代var是趋势

const
作用:定义一个常量
特点:不能修改，其它特点同let
应用:保存不用改变的数据

 const sex = '男';
    console.log(sex);//男
    //sex = '女';//不能修改
    console.log(sex);//男

变量的解构赋值

理解: 从对象或数组中提取数据, 并赋值给变量(多个)
对象的解构赋值： let {n, a} = {n:‘tom’, a:12}
数组的解构赋值： let [a,b] = [1, ‘atguigu’];
用途：给多个形参赋值

//普通
    let obj = {name : 'kobe', age : 39};
   // let name = obj.name;
   // let age = obj.age;
   // console.log(name, age);//kobe 39

 //对象的解构赋值
    let {age} = obj;
    console.log(age);//39
   // let {name, age} = {name : 'kobe', age : 39};
   // console.log(name, age);//kobe 39

//3. 数组的解构赋值  不经常用
    let arr = ['abc', 23, true];
    let [a, b, c, d] = arr;
    console.log(a, b, c, d);//abc 23  true  undefined
    // console.log(e);  报错

function person(p) {//不用解构赋值
        console.log(p.name, p.age);
}
person(obj);//kobe 39
function person1({name, age}) {
     console.log(name, age);
}
person1(obj);//kobe 39

模板字符串 : 简化字符串的拼接

模板字符串必须用 `` 包含
变化的部分使用${xxx}定义

简化的对象写法
省略同名的属性值
省略方法的function

箭头函数
1.作用: 定义匿名函数
2.基本语法:
- 没有参数: () => console.log(‘xxxx’)
- 一个参数: i => i+2
- 大于一个参数: (i,j) => i+j
- 函数体不用大括号: 默认返回结果,自动返回语句执行的结果或者是表达式的结果
- 函数体如果有多个语句, 需要用{}包围，若有需要返回的内容，需要手动返回，否则underfined

3 使用场景: 多用来定义回调函数
4.箭头函数的特点：
①简洁
②箭头函数没有自己的this，箭头函数的this不是调用的时候决定的，而是在定义的时候处在的对象就是它的this
③扩展理解：箭头函数的this看外层的是否有函数，
如果有，外层函数的this就是内部箭头函数的this，
外层也是箭头函数靠不住，接着往上找，没有则为window
如果没有，则this是window。
在这里插入图片描述

…运算符
用途

rest(可变)参数：用来取代arguments 但比arguments灵活,只能是最后部分形参参数

 function fun(...values) {
        console.log(arguments);// [1, 2, 3, callee: (...), Symbol(Symbol.iterator): ƒ]
       // arguments.forEach(function (item, index) {  报错，伪数组没有foreach方法
       //     console.log(item, index);
       // });
        console.log(values);//[1, 2, 3]
        values.forEach(function (item, index) {
            console.log(item, index);//1 0  ，2  1，  3  2
        })
    }
    fun(1,2,3);

扩展运算符

let arr = [2,3,4,5,6];
let arr1 = ['abc',...arr, 'fg'];
console.log(arr1);// ["abc", 2, 3, 4, 5, 6, "fg"]

形参默认值----当不传入参数的时候默认使用形参里的默认值

//定义一个点的坐标
    function Point(x=12, y=12) {
        this.x = x;
        this.y = y;
    }
    let point = new Point(25, 36);
    console.log(point);//Point {x: 25, y: 36}
    let p = new Point();
    console.log(p);//Point {x: 12, y: 12}
    let point1 = new Point(12, 35);
    console.log(point1);//Point {x: 12, y: 35}

Promise对象

理解:

Promise对象: 代表了未来某个将要发生的事件(通常是一个异步操作)
有了promise对象, 可以将异步操作以同步的流程表达出来, 避免了层层嵌套的回调函数(俗称’回调地狱’)
ES6的Promise是一个构造函数, 用来生成promise实例

使用promise基本步骤(2步):

创建promise对象
let promise = new Promise((resolve, reject) => {
//初始化promise状态为 pending
//执行异步操作
if(异步操作成功) {
resolve(value);//修改promise的状态为fullfilled
} else {
reject(errMsg);//修改promise的状态为rejected
}
})
调用promise的then()
promise.then(function(
result => console.log(result),
errorMsg => alert(errorMsg)
))

//创建一个promise实例对象
let promise = new Promise((resolve, reject) => {
        //初始化promise的状态为pending---->初始化状态
        console.log('1111');//同步执行
        //启动异步任务
        setTimeout(function () {
            console.log('3333');//处在回调函数
   	    //根据异步的返回结果修改状态
            //resolve('atguigu.com');//自动修改promise的状态pending---->fullfilled（成功状态），参数为给下边回调函数传递
            reject('xxxx');//修改promise的状态pending----->rejected(失败状态)
        },1000)
});
    promise.then((data) => {//成功的回调
        console.log('成功了。。。' + data);
    }, (error) => {//失败的回调
        console.log('失败了' + error);
    });
    console.log('2222');

在这里插入图片描述

3. promise对象的3个状态

pending: 初始化状态
fullfilled: 成功状态
rejected: 失败状态

Symbol
ES5中对象的属性名都是字符串，容易造成重名，污染环境。所以ES6中的添加了一种原始数据类型symbol(已有的原始数据类型：String, Number, boolean, null, undefined, 对象)
特点
　　①Symbol属性对应的值是唯一的，解决命名冲突问题
　　②Symbol值不能与其他数据进行计算，包括同字符串拼串
　　③for in, for of遍历时不会遍历symbol属性。
使用：
　　①调用Symbol函数得到symbol值
let symbol = Symbol();
let obj = {};
obj[symbol] = 'hello';
　　②传参标识

     let symbol = Symbol('one');
     let symbol2 = Symbol('two');
     console.log(symbol2==symbol);//false
     console.log(symbol);// Symbol('one')
     console.log(symbol2);// Symbol('two')
     //可以定义常量,作为常量标识
     const Person_key = Symbol('Person_key11')
     console.log(Person_key )//Symbol(Person_key11)

     // 用作对象的属性(唯一)
      let obj = {username: 'kobe', age: 39};
      obj[symbol] = 'hello';
      obj[symbol] = 'symbol';
      console.log(obj);//
      for(let i in obj){
        console.log(i);//username  age
      }
      
	//使用Symbol来作为对象属性名
	const PROP_NAME = Symbol()
	const PROP_AGE = Symbol()

	let obj = {
 	 [PROP_NAME]: "一斤代码"
	}
	obj[PROP_AGE] = 18

	obj[PROP_NAME] // '一斤代码'
	obj[PROP_AGE] // 18

③内置Symbol值
除了定义自己使用的Symbol值以外，ES6还提供了11个内置的Symbol值，指向语言内部使用的方法。
　　 - Symbol.iterator
　　　　对象的Symbol.iterator属性，指向该对象的默认遍历器方法
iterator遍历器
概念： iterator是一种接口机制，为各种不同的数据结构提供统一的访问机制
作用：
1、为各种数据结构，提供一个统一的、简便的访问接口；
2、使得数据结构的成员能够按某种次序排列
3、ES6创造了一种新的遍历命令for…of循环，Iterator接口主要供for…of消费。数组，字符串，arguments，set容器，map容器有接口。对象没有部署接口
工作原理：
- 创建一个指针对象，指向数据结构的起始位置。
- 第一次调用next方法，指针自动指向数据结构的第一个成员
- 接下来不断调用next方法，指针会一直往后移动，直到指向最后一个成员
- 每调用next方法返回的是一个包含value和done的对象，{value: 当前成员的值,done: 布尔值}true时遍历完
* value表示当前成员的值，done对应的布尔值表示当前的数据的结构是否遍历结束。
* 当遍历结束的时候返回的value值是undefined，done值为false
原生具备iterator接口的数据(可用for of遍历)
1、Array
2、arguments
3、set容器
4、map容器
5、String

字符串扩展

includes(str) : 判断是否包含指定的字符串
startsWith(str) : 判断是否以指定字符串开头
endsWith(str) : 判断是否以指定字符串结尾
repeat(count) : 重复指定次数

Class

通过class定义类/实现类的继承
在类中通过constructor定义构造方法
通过new来创建类的实例
通过extends来实现类的继承
通过super调用父类的构造方法
重写从父类中继承的一般方法

数值扩展

二进制与八进制数值表示法: 二进制用0b, 八进制用0o
Number.isFinite(i) : 判断是否是有限大的数
Number.isNaN(i) : 判断是否是NaN
Number.isInteger(i) : 判断是否是整数
Number.parseInt(str) : 将字符串转换为对应的数值
Math.trunc(i) : 直接去除小数部分

对象扩展

Object.is(v1, v2)

判断2个数据是否完全相等

Object.assign(target, source1, source2…)

将源对象的属性复制到目标对象上

直接操作 proto 属性
let obj2 = {};
obj2.proto = obj1;

深度克隆与潜度克隆
1、数据类型：
- 数据分为基本的数据类型(String, Number, boolean, Null, Undefined)和对象数据类型
- 基本数据类型：
  特点：存储的是该对象的实际数据
- 对象数据类型：
  特点：存储的是该对象在栈中引用，真实的数据存放在堆内存里
  2、复制数据
- 基本数据类型存放的就是实际的数据，可直接复制
  let number2 = 2;
  let number1 = number2;
- 克隆数据：对象/数组
  1、区别：浅拷贝/深度拷贝
  判断：拷贝是否产生了新的数据还是拷贝的是数据的引用
  知识点：对象数据存放的是对象在栈内存的引用，直接复制的是对象的引用
  let obj = {username: ‘kobe’}
  let obj1 = obj; // obj1 复制了obj在栈内存的引用
  2、常用的拷贝技术
  1). arr.concat(): 数组浅拷贝
  2). arr.slice(): 数组浅拷贝
  3). JSON.parse(JSON.stringify(arr/obj)): 数组或对象深拷贝, 但不能处理函数数据
  4). 浅拷贝包含函数数据的对象/数组
  5). 深拷贝包含函数数据的对象/数组
  浅度克隆主要是将数据的地址赋给对应的变量但并没有将具体的值赋值给对应的变量，变量会随着数据的改变而改变
  深度克隆是将数据赋值给相对应的变量，所以产生了一个新的数据也就有了新的地址，原数据的改变不会影响新数据
  
  Set与Map
Set容器 : 无序不可重复的多个value的集合体

Set()
Set(array)
add(value)
delete(value)
has(value)
clear()
size

Map容器 : 无序的 key不重复的多个key-value的集合体

Map()
Map(array)
set(key, value)//添加
get(key)
delete(key)
has(key)
clear()
size

for of

for(let value of target){}循环遍历
1. 遍历数组
2. 遍历Set
3. 遍历Map
4. 遍历字符串
5. 遍历伪数组

Manta__

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
047 ES6

let作用:与var类似, 用于声明一个变量特点:-在块作用域内有效-不能重复声明-不会预处理, 不存在提升应用:-循环遍历加监听-使用let取代var是趋势const作用:定义一个常量特点:不能修改，其它特点同let应用:保存不用改变的数据 const sex = '男'; console.log(sex);//男 //sex = '女';//不能...
复制链接

扫一扫

专栏目录