ES6笔记————Array的扩展方法、模板字符串定义Array对象常用方法

每日一图

 

目录

第一节：array的扩展方法、

1 展开语法

...扩展运算符可以将数组或者对象转为用逗号分隔的参数序列。

2 Array.from()方法

将伪数组或可遍历对象转换为真正的数组。

3 array.find() 方法

find() 方法返回通过测试（函数内判断）的数组的第一个元素的值。

4 array.findindex()方法

定义：用于找出第一个符合条件的数组成员的位置，如果没有找到返回-1。

5 array.includes()方法

定义：判断某个数组是否包含给定的值，返回布尔值。

模板字符串定义

 1，模板字符串

2，startsWith()、endsWith()

- startsWith()：表示参数字符串是否在原字符串的头部，返回布尔值

- endsWith()：表示参数字符串是否在原字符串的尾部，返回布尔值

3，repeat()

repeat方法表示将原字符串重复n次，返回一个新字符串。

Array对象常用方法

2.5.1 Array map()

map() 方法返回一个新数组，数组中的元素为原始数组元素调用函数处理后的值。

总结：

2.5.2 Array filter()

filter() 方法创建一个新的数组，新数组中的元素是通过检查指定数组中符合条件的所有元素。

总结：

2.5.3 reduce() 方法

reduce() 方法接收一个函数作为累加器，数组中的每个值（从左到右）开始缩减，最终计算为一个值。

2.5.4 Array.of()

负责把一堆文本或者变量转换成数组。

2.5.4 fill()

2.5.5 数组遍历

For..of遍历

For..in遍历

forEach()

---

第一节：array的扩展方法、

1 展开语法

...扩展运算符可以将数组或者对象转为用逗号分隔的参数序列。

将 类数组转为数组

let eledivs = document.getElementsByTagName('div');

eledivs = [...eledivs];//Array.prototype.slice.call(eledivs);

2 Array.from()方法

将伪数组或可遍历对象转换为真正的数组。

举例1：

Array.from('12345') // [1,2,3,4,5]

举例2：

let  arr1 = {

            1:'a',

            2:'b',

            'length':3

}

console.log(Array.from(arr1));//undefined ,a,b.

3 array.find() 方法

find() 方法返回通过测试（函数内判断）的数组的第一个元素的值。

举例1：

  let arr1 = [1,2,3,2];

let target = arr1.find( item => item==2);

console.log(target);//2,如果未找到，返回undefined

举例2：

let person = [

                        {name:"张三",age:16},

                        {name:"李四",age:17},

                        {name:"王五",age:18},

                ]

               

let target = person.find((item,index)=>{return item.name=='张三'});

console.log(target.name);

4 array.findindex()方法

定义：用于找出第一个符合条件的数组成员的位置，如果没有找到返回-1。

let ary = [1, 5, 10, 15];

let index = ary.findIndex((item, index) => item > 9);

console.log(index); // 2

5 array.includes()方法

定义：判断某个数组是否包含给定的值，返回布尔值。

       

let ary = [1, 5, 10, 15];

console.log(ary.includes(5));//true

Array.from
			
			1:字符串形式
			let str = "abcde";
		    console.log(Array.from(str));
		       
			   2:将对象形式数组 转为数组
			   const Num = {
				   0:"0",
				   1:"a",
				   2:"b",
				   length:3,
			   }
			   console.log(Array.from(Num));
			   
			   3:将类数组转为数组
			   const liNode = document.querySelectorAll("li");
			   console.log(Array.from(liNode) instanceof Array);
			   
			   
			   二 array.find 查找符合条件的第一个值
			   const persons = [5,11,19,20];
			   const item =  persons.find(item=>item>10)
			   console.log(item);
			   
			   const persons = [
				    {realname:"张三",age:15},
				    {realname:"李四",age:19},
					{realname:"王五",age:20},
					{realname:"赵六",age:14},
			   ]
			   const Item = persons.find(item=>item.age>18);
			   console.log(Item);//查找符合条件的值（当前的值,"李四对象"）
			  
			  三：array.findindex
			  const persons = [5,11,19,20];
			  const index =  persons.findIndex(item=>item>10)
			  console.log(index);//1
			  
			   const persons = [
			  				    {realname:"张三",age:15},
			  				    {realname:"李四",age:19},
			  					{realname:"王五",age:20},
			  					{realname:"赵六",age:14},
			   ]
			   const index = persons.findIndex(item=>item.age>18);
			   console.log(index);//1
			   
			   四：判断某个数组是否包含某个值
			   const arr = [1,2,3,4];
			   console.log(arr.includes(4));//true

模板字符串定义

 1，模板字符串

console.log(`姓名:${Person.realname}，年龄：${Person.age},${say()}`);

2，startsWith()、endsWith()

- startsWith()：表示参数字符串是否在原字符串的头部，返回布尔值

- endsWith()：表示参数字符串是否在原字符串的尾部，返回布尔值

举例：

let str = "hello,zs!";
			console.log(str.startsWith("h"));//true
			console.log(str.endsWith("!"));//true
			console.log(str.endsWith("..."))//false
			console.log(str.repeat(2));

3，repeat()

repeat方法表示将原字符串重复n次，返回一个新字符串。

console.log('hello'.repeat(2));//hellohello

Array对象常用方法

2.5.1 Array map()

map() 方法返回一个新数组，数组中的元素为原始数组元素调用函数处理后的值。

举例1：

let arr = [2,3,4,5,6];

let newarr =  arr.map(v=>v+2)

console.log(arr );//2,3,4,5,6

console.log(newarr);//4,5,6,7,8

举例2：

let arr = [2,3,4,5,6];

function ckarr(v){

                            return v+2;

}

console.log(arr.map(ckarr));

总结：

--  map() 不会对空数组进行检测。

--  map() 不会改变原始数组。

2.5.2 Array filter()

filter() 方法创建一个新的数组，新数组中的元素是通过检查指定数组中符合条件的所有元素。

let arr = [2,3,4,5,6];

function ckarr(v){

            return v>3; //返回符合条件的值

}

console.log(arr.filter(ckarr));

总结：

--  filter() 不会对空数组进行检测。

--  filter() 不会改变原始数组。

2.5.3 reduce() 方法

reduce() 方法接收一个函数作为累加器，数组中的每个值（从左到右）开始缩减，最终计算为一个值。

-- 对于空数组是不会执行回调函数的。

var  arr = [1, 2, 3, 4];

var sum = arr.reduce(function(total, currentValue, index, arr) {

                                         return total + currentValue;

                                               

},10);

console.log(sum);

2.5.4 Array.of()

负责把一堆文本或者变量转换成数组。

// let arr = Array.of(3,4,5,6);

// console.log(arr);

let arr =Array.of('张三','小帅','小红');

console.log(arr);

let a=1,b=2,c=3;

let arr =Array.of(a,b,c);

console.log(arr);

2.5.4 fill()

语法：array.fill(value, start, end)

Value：必需。填充的值。

Start：可选。开始填充位置。

End：可选。停止填充位置 (默认为 array.length)。

举例：

let arr=[0,1,2,3,4,5,6,7,8,9];

arr.fill('x',2,5);

console.log(arr);  //[0, 1, "x", "x", "x", 5, 6, 7, 8, 9]

2.5.5 数组遍历

For..of遍历

for(let item of person){

                 console.log(item);

 }

说明：item是当前遍历的值

For..in遍历

for(let index in person){

                 console.log(index);

 }

说明：index 是当前遍历的索引

forEach()

方法用于调用数组的每个元素，并将元素传递给回调函数。

person.forEach(function(value,index){

                                   console.log(value,index);

 })

1:map遍历方法
			const arr = [1,2,3,4];
			//map会遍历数组 并对数组进行加工 返回新的数组（不会对空数组进行遍历）
			const newarr = arr.map(item => item*10);//放大10倍
			console.log(newarr);
		
			
			
			2:filter 满足符合条件的所有元素
			const arr    = [10,23,28,29];
			const newarr = arr.filter(item=>item>20);
			console.log(newarr);
			
			3:reduce缩减("累加器")
			
			const arr = [1,2,3,4,5];
			//total 即是初始值又是返回值,current为当前值
			// 第二个参数指定初始值
			let sum   = arr.reduce(
				(total,current)=>{
					console.log(`初始值：${total},当前值：${current}`);
					return total+current;
				}
			,10)
			
			console.log(sum);
			
			
			4:fill 填充数组
			const arr = [0,1,2,3,4,5,6];
			console.log(arr.fill("x",1,3));
			
			5:of把一堆文本转为数组
			let a = 1;
			let b = 2;
			console.log(Array.of(a,b));