Web前端JavaScript笔记（7）ECMA6新增数组方法

新增数组方法：

1. Array.from(): 将伪数组转化为真数组

<script>window.onload = function () {let tag_li = document.getElementsByTagName("li");alert(tag_li.length);// 此时得到的是一个伪数组，如果tag_li.push("hello")会报错tag_li = Array.from(tag_li);tag_li.push("hello");    // 此时转换后可以调用数组的方法alert(tag_li);}
</script>

2. Array.find()：在数组中查找符合条件的第一个元素，返回值是找到的元素

<script>window.onload = function () {let arr = [1,2,3,4,5];let res = arr.find(function (item, index, arr) {return item>3;});alert(res);}
</script>

3. findIndex()：返回元素的下标

<script>window.onload = function () {let arr = [1,2,3,4,5];let res = arr.findIndex(function (item, index, arr) {return item>3;});alert(res);}
</script>

4. 合并对象

Object.assign()：用户合并对象，将第二个到最后一个合并到第一个对象中，

<script>window.onload = function () {let obj1 = {a: 12};let obj2 = {user: "hui",text: "hello thr"};let obj3 = {l: "ff"};Object.assign(obj1, obj2, obj3);  // 将2，3合并到1console.log(obj1);}
</script>

集合：

1. 不重复

2. 无序

集合set: 键值是一样的

<script>window.onload = function () {let set = new Set();set.add("hui");set.add(123);// 集合的遍历for (let item of set.keys()){console.log(item);}// 利用这一特性数组去重let set1 = new Set([1,2,3,4,3,2,1]);let arr = [...set1];   // 集合转化为数组console.log(arr);}
</script>

集合map: 键值是不一样的，映射

<script>window.onload = function () {let map = new Map();map.set("username", "tommy");map.set("age", "11");console.log(map.get("age"));// map遍历for (let [key, value] of map){console.log(key + "," + value);}}
</script>

遍历：
1. 数组遍历；(前面已经学习过)

for 循环

for ... in

for ... each

2. 对象的遍历：

for ... in // 遍历的是属性

3. set遍历：for .. of

4. map遍历：for ... of

回顾面向对象：

1. 面向过程语言

2. 面向对象语言

工厂模式: 假设需要批量创建对象，可以按照下面的方法进行创建：

过程可以分为三部分: 原料，加工，出厂

<script>window.onload = function () {// 定义一个创建对象的函数function createP(name, age, sex) {let person = Object();person.name = name;person.age = age;person.sex = sex;person.showName = function () {console.log("Hello I am " + this.name);};return person;}let p1 = createP("tom", 12, "female");let p2 = createP("janny", 33, "male");p1.showName();p2.showName();}
</script>

而如果通过new运算符去调用这一函数，需要做以下的修改：

如果通过new调用函数，则这个函数会

1. 当前函数中的this指向新创建的对象

2. 自动完成原料，出厂操作

<script>window.onload = function () {// 定义一个创建对象的函数function Person(name, age, sex) {this.name = name;this.age = age;this.sex = sex;this.showName = function () {console.log("Hello I am " + this.name);};}let p1 = new Person("tom", 12, "female");let p2 = new Person("janny", 33, "male");p1.showName();p2.showName();}
</script>

函数原型ProtoType,为对象添加方法，使得所有创建的对象能够共享此方法:

<script>window.onload = function () {// 定义一个创建对象的函数let a = [1,2,3,4];let b = [5,6,7,8];a.sum = function () {let value = 0;for (let i=0; i<this.length; i++){value += this[i];}return value;};   // a添加方法console.log(a.sum());console.log(b.sum());}
</script>

为了使所有的数组能够共享sum()函数：

<script>window.onload = function () {// 定义一个创建对象的函数let a = [1,2,3,4];let b = [5,6,7,8];Array.prototype.sum = function () {let value = 0;for (let i=0; i<this.length; i++){value += this[i];}return value;};   // a添加方法console.log(a.sum());console.log(b.sum());}
</script>

面向对象-继承，封装，多态：

1. 继承

2. 封装（封装构造函数）

3. 多态

ECMA6中定义类class：

<script>window.onload = function () {function Person(name, age, sex) {this.name = name;this.age = age;this.sex = sex;}Person.prototype.showSelf = function () {console.log("I am " + this.name);};let p1 = new Person("zha", 22, "female");p1.showSelf();class Person_1{// 定义构造函数constructor(name, age, sex){this.name = name;this.age = age;this.sex = sex;}// 当以方法：showSelf(){console.log("I am " + this.name);}}let p2 = new Person("li", 33, "male");p2.showSelf();}
</script>

class中的继承：

<script>window.onload = function () {function Person(name, age, sex) {this.name = name;this.age = age;this.sex = sex;}Person.prototype.showSelf = function () {console.log("I am " + this.name);};let p1 = new Person("zha", 22, "female");p1.showSelf();class Person_1{// 定义构造函数constructor(name, age, sex){this.name = name;this.age = age;this.sex = sex;}// 当以方法：showSelf(){console.log("I am " + this.name);}}let p2 = new Person("li", 33, "male");p2.showSelf();class Teacher extends Person_1{constructor(name, age, sex, school)   // 构造函数{// 继承父类的属性super(name, age, sex);this.school = school;}showJob(){console.log("I am a teacher in " + this.school);}}let p3 = new Teacher("zhang", 22, "female", "High school");console.log(p3.showSelf());   // 继承的方法console.log(p3.showJob());}
</script>

Web前端JavaScript笔记（7）ECMA6新增数组方法相关推荐

Web前端 Javascript笔记（1）数组
结构 :html构建样式:css控制行为:JavaScript实现什么是JavaScript? JavaScript是一种跨平台的脚本语言,平台,即运行环境,一般指操作系统. --------- ...
Web前端JavaScript笔记（4）节点
如何获取元素节点的属性: 在Web前端JavaScript笔记(3)对象中,介绍了访问行间属性的方法,除此之外,系统还提供了三个方法访问元素的属性: 1. setAttribute: 2. getAt ...
web前端JavaScript嵌入百度地图API的方法最详细
web前端JavaScript嵌入百度地图API最详细的方法一.申请成为百度开发者,获得使用地图API接口的权限,获取(AK)码. 二.实现首图效果(可以参考开发者指南) 1. 根据Hello Wo ...
Web前端Javascript笔记（6）正则表达式
在web前端中,假设用户需要提交表单,在表单提交到服务器进一步处理之前,Javascript程序会检查表单,以确认用户输入的信息是符合规范要求的.这些工作可以使用正则表达式完成,正则表达式是一个描述字 ...
Web前端JavaScript笔记（3）对象
在JavaScript中没有类这个概念,只有对象,在新ECMA6新版中增加了类的概念,和数组,字符串类似,对象的声明方法也有三种: 1. 通过new运算符进行传件对象 2. 省略new运算符创建对象 ...
Web前端Javascript笔记（8）Ajax前后端交互
认识Ajax 全名Asynchronous Javascript and XML(异步JavaScript和XML),节省用户操作时间,提高用户体验,减少数据请求,传输获取数据.Ajax相当于前后台数 ...
Web前端JavaScript笔记（5）事件-拖拽
阻止默认行为和超链接在浏览器上运行网页后,右击会弹出菜单,这属于浏览器的默认行为.如何禁止这一默认行为: <script>window.onload = function () {doc ...
Web前端Javascript笔记（5）事件
1. 什么是事件:事件是指发生并得到处理的操作 JavaScript中的事件是由访问web页面的用户引起的一系列操作,例如,用户的点击操作,JavaScript中有两种事件模型:内联模型,脚本模型. ...
Web前端JavaScript笔记（2）字符串
字符串: 字符串的声明方式: 1. 通过new运算符声明字符串 // 声明的是对象 2. 省略new运算符 3. 字符串常量赋值 <script>var str1 = n ...

Web前端JavaScript笔记（7）ECMA6新增数组方法

Web前端JavaScript笔记（7）ECMA6新增数组方法相关推荐

最新文章

热门文章