## 前言
作为js中常用的数据类型,你必须清楚常见的方法的名称作用以及返回值。
### 对象属性
常用属性:length 数组长度,数组长度党羽等于元素个数,因为存在稀疏数组。
### 对象方法
![对象方法](https://box.kancloud.cn/e2739f69c1cfc8f9b25fa3f1eed43e36_842x451.png)
### 方法详解
### es6方法拓展
* 数组的结构赋值
es6允许按照一定的模式,从数组和对象之中提取值,对变量进行赋值,这称为解构(Destructuring).
在以前的编码中,我们只能指定变量直接量。
~~~
// before
var a=1;
var b=2;
var c=3;
// now
var [a,b,c]=[1,2,3]
~~~
以上的代码表示会按照对应关系对变量进行赋值,本质上这种写法属于模式匹配,只要等号两边的模式相同,左边的变量就会被赋值对应数值。
~~~
var [foo,[bar],baz]=[1,[2],3];//结构对应,分别被赋值,请注意这里不是数组赋值,而是数组解构
var [,,baz]=[1,[2],3];// baz 3
var [a,b,...tail]=[1,2,3,4];//tail [3,4]
var [foo]=[],1,'hello',false ,NaN //都不能正确赋值 为undefined,直接定义undefined 是会报错的。
~~~
* .from() 用于将两类对象转换为真正的数组:类数组的对象,可便利的对象(es6 新增的set、map)结构。
类数组的结构 ,比如选择到的dom元素
let ps =document.getElementsByClass("a");
Array.from(ps).forEach() 只有数组才可以用forEach方法
注意:.from可以接受第二个参数,用来对每个元素进行处理
* . of() 用于将一组数值转换为数组,定义这个方法的主要原因是原来的构造器会造成参数不同,解析不同,一个数字参数的结果是生成这个数字的空数组,而多个的时候是数组赋值。
`Array.of(1,1,3) //生成三个元素的数组 [1,1,3] `
* find(), findIndex() 他得参数是回调函数,直到找出返回true的元素,前者返回该元素,后者返回指针(只返回第一个匹配到的结果)
[1,4].find(function(value,index,arr){ return value>2;})//4
* fill填充函数,用于指定值填充函数,还可以接受第二个,第三个参数
~~~
Array.fill(num,stindex,endindex);
["a",'b','c'].fill(7,1,2); //["a",7,'c']
~~~
* 数组实例的entires() keys() values(),用于遍历数组,以前是for 循环。
~~~
var arr=[1,6];
for(let key of arr.keys()){
key//
}
for(let value of arr.values()){
value//浏览器暂不支持
}
for(let [index,ele] of arr.entires()){
console.log(index,ele) ;//浏览器暂不支持
}
~~~
* 数组推导,允许直接通过现有数组推导到新数组(实现暂时有问题)
~~~
var a1=[1,1,2,6];
var a2=[for (i of a1 ) i*2];
~~~
* observe() unobserve() 对数组的监听,当有add,update,delete,splice发生时触发,指定回调函数。
- 前端入门
- 前端入职须知
- 前端自我定位
- pc与手机页面差别
- 前端书单
- 前端种子计划
- 前端技术栈
- ps
- ps入门阶段
- html
- html入门
- html代码规范
- meta
- table
- iframe
- a标签详解
- image
- html代码审查工具
- h5专题
- h5入门
- h5新增属性
- canvas画布教程
- audio/video
- Geolocation
- Websockets
- Web storage
- Communication
- Web Workers
- requestAnimationFrame
- css
- css入门必学
- css代码规范
- 项目字体规范
- css基本位置布局
- css常见样式命名规则
- css代码优化建议
- css常用样式名
- css选择器攻略
- css盒子模型的理解
- css属性继承与默认值
- css代码审查工具
- css中常见的知识盲区
- css3新特性浅谈
- css新特性了解
- border-radius
- background
- transform
- animation
- white-space
- css常用技术
- 文本两端对齐
- css之浮动解决方案
- css优化建议
- 文本超出省略
- img-sprites
- rem布局教程
- 水平居中&垂直居中
- 固宽&变宽布局
- 宽高固定比例的盒模型
- 样式预处理语言
- less教程
- sass教程
- postcss教程
- js
- javascript入门
- js代码规范
- js基础拓展
- js代码审查工具
- js性能优化
- js基本语句
- 基本运算
- 基本语句语法
- js对象
- es6入门
- obj
- Array
- Date
- String
- Boolean
- Number
- Json
- RegExp
- Math
- function
- jquery入门
- jq核心思想
- jq基本语法
- jq插件库汇总
- js常用技术
- break&continue区别
- js对日期转换
- js控制运动-move.js
- 原生js-cookie语法
- ajax请求后回调
- 表单数据序列化
- zepto
- zepto入门
- 百度touchjs
- js编程
- 插件库
- 功能性插件
- pdfjs
- wdatepicker
- qrcoder
- barcode插件
- photoviewer
- hammer.js
- echarts
- 交互组件
- layerjs
- java
- java入门
- java基本语句
- springMVC
- javaweb
- vm模板引擎
- freemarker
- maven教程
- mySql教程
- flex教程
- flex入门
- git教程
- git入门
- git分支
- git-tag管理
- git注意事项
- git-torise入门
- ide-git插件使用
- web
- web兼容
- web兼容思想
- pc端兼容适配文档
- pc端兼容bug汇总
- ie兼容bug汇总
- 手机兼容bug汇总
- web安全
- jeecms
- web存储
- app/h5组件
- 安卓教程
- ios教程
- 前端教程
- rubikx的教程
- 其他
- artTemplate
- tmod使用
- 跨域问题
- markdown教程
- 常用工具
- postman-api调试
- web常识
- 浏览器ua统计
- ui框架
- easyui
- bootstrap
- 入门推荐
- weui
- sui-pc
- sui-mobile
- layerUi