js常见知识点--第二篇

JavaScript011

js常见知识点--第二篇,第1张

https://www.cnblogs.com/sqh17/p/8529401.html

1、splice(start,deletecount,item) 会改变原数组的方法。

arr.splice(i,n) 删除从i(索引值)开始之后的那个元素。返回值是删除的元素

参数: i 索引值 n 个数

splice(start,deletecount,item)方法:

2、split()是使用指定的分隔符字符串将字符串分割成子字符串,返回一个子字符串数组。

3、slice()方法可以对数组或字符串截取。

arr.slice(start,end) 切去索引值start到索引值end的数组,不包含end索引的值,返回值是切出来的数组。

** 2. 提取某个字符串的一部分,并返回一个新的字符串,不会改变原字符串。**

# ES6 symbol类型详解

https://juejin.cn/post/6925619440843227143

1、 定义:

symbol类型是新的原始数据类型,表示独一无二的值,其他的原始数据类型还有Number,String,Boolean,Null,Undefined;Object属于复杂数据类型。

2、symbols 作为对象的属性

3、利用Symbol的特性可定义内部私有属性或方法

forEach:没有返回值, 但不能使用break、continue和return语句

for…in:遍历数组索引、对象的属性。使用for…in遍历时,原型链上的所有属性都将被访问。

map: 有返回值。并且可以返回一个结果数组。但是map 遍历对象的话也会报错,所以map只能循环数组或者对象数组。

for...of :创建一个循环来迭代可迭代的对象。在 ES6 中引入的 for...of 循环,以替代 for...in 和 forEach() ,并支持新的迭代协议。for...of 允许你遍历 Arrays(数组), Strings(字符串), Maps(映射), Sets(集合)等可迭代的数据结构等。

循环返回的是value。

Maps(映射)

Map 对象就是保存 key-value(键值) 对。对象和原始值可以用作 key(键)或 value(值)。Map 对象根据其插入方式迭代元素。换句话说, for...of 循环将为每次迭代返回一个 key-value(键值) 数组。

Set(集合)

Set(集合) 对象允许你存储任何类型的唯一值,这些值可以是原始值或对象。 Set(集合) 对象只是值的集合。 Set(集合) 元素的迭代基于其插入顺序。 Set(集合) 中的值只能发生一次。如果您创建一个具有多个相同元素的 Set(集合) ,那么它仍然被认为是单个元素。

三、JavaScript Map 和 Object 的区别( https://www.cnblogs.com/ysx215/p/11387938.html )

在 Object 中, key 必须是简单数据类型(整数,字符串或者是 symbol),而在 Map 中则可以是 JavaScript 支持的所有数据类型,也就是说可以用一个 Object 来当做一个Map元素的 key。

Map 元素的顺序遵循插入的顺序,而 Object 的则没有这一特性。

Map 继承自 Object 对象。

在前端开发中,我们经常遇到上传文件的需求,以前都是用到时再找资料,但总是感觉对这块不熟,最近翻资料学习了一下,记录一下。

本文中涉及的知识点有:FileList对象,Blob对象,File对象,URL对象、FormData对象等。

本文参考 网道 ,总结而来。另外,强烈推荐网道,可以去 网道的官方 看看,是阮一峰大神发起的项目,提供互联网开发文档,文档非常全面易懂。

FileList对象,是一个像数组的对象,拥有length属性和item()方法,同时,它的每一项都是File对象。

input 标签,将type设为file,之后得到的files属性就是一个FileList对象。

blob 对象表示1个二进制文件的数据内容。blob对象和arraybuffer区别是,blob对象用于操作二进制文件,arraybuffer用于操作内存。

blob 对象拥有2个属性和1个方法,分别是size(单位是字节)、type属性和slice()方法。

File 对象是一种特殊的Blob 对象。它在继承了size、type属性外,还同时有name、lastModified、lastModifiedDate等几个属性。

FileList 对象中的每一项都是File 对象。

拿到File 对象之后就要进行操作,下面是操作。

URL.createObjectURL(file) 允许为File 对象创建一个临时链接,

FileReader 对象的属性和方法比较多,属性中比较重要的是result,方法中比较重要的是

FileReader 对象的所有属性和方法可以参考 这里 ,这里就不再列出来了。

在早期的互联网时候,提交数据都是用表单。表单提交数据有些缺陷,例如无法校验表单数据,会刷新整个页面等。随着Ajax的兴起,页面表单提交数据慢慢退出历史舞台,但有时上传文件时我们偶尔会用到表单提交数据。

在调用构造函数new FormData(form)构造formdata对象时需要传入form节点,如果不传入,则默认构建空表单。如果传入,则按照key=value的时候构建表单。

可以看看效果图

FormData 对象主要的方法有:

cavas压缩图片其实很简单,无非就是几个步骤:

1、选择图片,判断图片是否大于2M(用File对象的size进行判断,size的单位是字节);

2、用FileReader对象读取文件成base64,

3、然后创建Image对象,赋值src属性,在Image对象加载完成的回调里创建cavas并绘制图片(根据图片是否大于2M动态调整画布大小);

4、将cavas转成blob,拼在formdata中用ajax上传。

这篇文章到这里也就结束了,这篇文章包含了一些浏览器中提供的对象,可以看到都是很简单的内容。