7个超强的javascript方法(Method)所有前端必学

Some方法

循环数组所有item 当一个item 通过函数提供的条件,就会返回true , 这个函数必须要传回true 或者 false

当name 通过 name.includes(“h”) 这个条件, 这个函数就返回true

用法: 用作条件判断时候特别有用, 这个返回单个的item信息

const containsLetterH = names.some(name => {
		return name.includes("z"); 
	});
	

	console.log(containsLetterH);

Match方法

循环数组所有item如果符合添加的返回true 其他状况返回false,

const items = document.querySelectorAll(".container .item"); 

	items.forEach(el => {
		const result = el.matches(".active#apple");

		console.log(result);

	});

FILTER 方法

循环数组所有item 返回符合添加的item内容, 也就是过滤这个数组直至找到符合要求的内容。

//find all the people earning over $88K 
	
	const people = [
		{name:"Dom",salary:80000},
		{name:'maria',salary:250000},
		{name:'johny',salary:42000},

	];

	//filter alows you to pass the condition so then you can include in the result 
	//跟some 方法有点像,  但是这个返回的是数组的具体内容, some 返回的是对错 
	
	const highIncome = people.filter(person => {
		return person.salary >= 80000;

	}); 

	console.log(highIncome);

cloneNode方法

cloneNode方法可以复制选择的dom然后通过append或者appendChild添加到所选的里面去。 注意cloneNode要传递true才会复制完整的list

const fruits = document.querySelector('.fruits'); 
	const fruitsCopy = fruits.cloneNode(true)

	document.body.appendChild(fruitsCopy);

MAP方法是最强的数组操作方法

Map方法改变数组规则然后创建新数组

const numbers = [4,9,10,12];
	//double every single number 
	const numbersDoubled = numbers.map(n => {
		return n * 2;
	});

	console.log(numbersDoubled);

Append方法

append方法可以添加多个child, appendChild() 方法只能添加一个child.

const tomato = document.createElement("li");  
	const apricot = document.createElement("li");  

	////////////////////
	//<li>Tomato</li> //
	////////////////////
	
	tomato.textContent = 'tomato';
	apricot.textContent = 'apricot';

	//append method 可以添加多个  fruits.appendChild(tomato) ; 这样只能添加一个 
	//这样就实现了 新增两个li 然后添加到 ul.fruits 里面去  
	 
	fruits.append(tomato,apricot); 

SHIFT 方法

shift方法改变数组长度并且改变内容

const allNumber = [4,8,12,16,20,24]; 

	//remove the first item from the array 
	

	const four = allNumber.shift(); 

	console.log(four); 
	console.log(allNumber);

Check Also

获取input的keyup或者input状态只获取一次值避免无限重复值

$(document).rea …

发表回复

您的电子邮箱地址不会被公开。 必填项已用 * 标注