javascript

Javascript

数组

数组添加

arr=[];
arr.push(value);

some()和foreach()区别

arr.some(function(value){

	return  true;	

});//当return为true时停止循环，返回的是一个布尔类型（true or flasue）

	//这里返回值为true

arr.foreach(function(value){

	return true;	

});	// 返回的是一个数组类型,当return为true时将当前数组值添加到新的数组中

	//这里返回的所有数组值

字符串

trim方法

从一个字符串的两端删除空白字符，不影响原字符串，返回一个新的字符串

str.trim()	

DOM事件

onclick与addEventListener

onclick与addEventListener的区别：

1.onclick事件在同一时间只能指向唯一对象

2.addEventListener给一个事件注册多个listener

3.addEventListener对任何DOM都是有效的，而onclick仅限于HTML

4.addEventListener可以控制listener的触发阶段，（捕获/冒泡）。对于多个相同的事件处理器，不会重复触发，不需要手动使用removeEventListener清除

element.onclick=function(){ };

element.addEventListener('click',function(){

	//为element添加监听事件

});

对象

Object.defineProperty()

Object.defineProperty(obj,prop,descriptor)

• obj:必须，目标对象
• prop:必须，需定义或修改的属性的名字
• descriptor:必需，目标属性所拥有的特性

var num={id:1,name：小米，价格：1999}

Object.defineProperty(num,'num',{
	value:1000，
	writable:true，		//值是否可以被重写。true or false 默认为true
	enumerable:flase	//值是否可遍历。默认为flase，则不可以被遍历
    configurable:true 	//值是否允许被删除，并且不能够再次修改这个特性，默认true,可以被删除
})

函数

构造方法

1. 函数命名方式function 关键字（命名函数）
2. 函数表达式（匿名函数） str=function(){}
3. new Function()

var fn= new Function('参数1'，‘参数2’，...，‘函数体’)

• 所有的函数都是Function的实例对象
• 函数也是对象

调用方式

1. 普通函数

   function fn(){
   
   		console.log('good!')
   
   }
   
   fn();
   

   this指向的是window

2. 对象的方法

   var o={
   
   	sayHi:functon(){
   
   		console.log('good!')
   
   	}
   
   }
   
   o.sayHi();
   

   this指向对象o

3. 构造函数

   function  Star(){};
   
   var ldh=new Star();
   

   this指向ldh这个实例对象

4. 绑定事件函数

   btn.onclick=functiion(){ }		//点击了按钮就可以调用这个按钮
   

   this指向btn（函数的调用者）

5. 定时器函数

   setInterval(function() { },1000);  	//这个函数是定时器自动1秒调用一次
   

   this指向window

6. 立即执行函数

   （function(){
   
   	console.log('good');)（）;			//立即执行函数是自动调用
   

   this指向window

改变this指向

1.call()

fun.call(thisArg,arg1,arg2,,,,)

//调用函数 和 改变函数内的this指向

//实现继承

function Father(uname){

	this.uname=uname;

}

function Son(uname){

	Father.call(this,uname)

}

2.apply()

fun.apply(thisArg,[Array])

它的参数必须是数（伪数组）

apply中的应用：

用apply借助于数学内置对象的最大值（Array没有求最大值的方法）

var arr=[1,2,55,9,4,1]

var max=Math.max.apply(null,arr)

3.bind()

fun.bind(thisArg,arg1,arg2,...)

不调用原来的函数，可以改变原来的this指向

• thisArg:fun运行时指定的this值
• arg1,arg2:传递的其他参数
• 返回由指定的this值和初始化参数改造的原函数拷贝

btn.onclick=function(){

setTimeout(function( ){ }.bind(this),1000)

}

对于函数里同时有this和that的情况，我们可以不改变函数的指向，将that以参数的形式传递过去

this.remove[i].onclick=this.removeTab.bind(this.remove[i],this)

function removeTab(that){

​	}				//这样可以少声明一个变量that

严格模式

开启严格模式

‘use strict’;	//在所有script代码之前



function fn(){

​	'use strict';

}						//在函数体内执行严格模式

严格模式中的变化

1.语法变化：

• 所有变量必须先声明再使用
• 不能随意删除已经声明好的变量

2.this指向问题

• 在严格模式下全局变量作用域中的函数this是undefined
• 严格模式下，如果构造函数不加new调用，this会报错
• 定时器setTimeout中的this还是指向window
• 事件、对象还是指向调用者。

3.函数的变化：

• 函数中不能出现重名参数
• 函数必须声明在顶层，不能在非函数代码块（if ( ){ } or for ( ) { }）

高阶函数

接受值或者返回值为函数，函数可以作为参数传递

回调函数：

function fn (a,b,callback){

​	console.log(a+b)

​	callback && callback();

}

fn(1,2,function( ){

​	console.log('我是最后才调用的');

})

闭包

闭包（closure）指有权访问另一个函数作用域中的变量的函数。 访问其他函数作用域上变量的函数称为闭包函数

function fn(){
	var num=10;
	return function(){
			console.log(num)
	};
}
var f=fn();
f();	//延伸了变量的作用范围

应用

定时器，回调函数都是异步任务，而for循环则是同步进行的，会导致i调用时出错：

var lis=document.querySelector('.nav')

for	(var i=0;i < lis.length;i ++)

​	setTimeout(function(){

​			console.log(lis[i].innerHTML);

},3000)		//这里运行会报错，out the range of lis(执行函数时i=4)

可以用闭包解决：

var lis=document.querySelector('.nav')

for	(var i=0;i < lis.length;i ++)

​	(function(i){
    		setTimeout(function(){
			console.log(lis[i].innerHTML);
			},3000)
      })(i)		//定时器用到了立即执行函数中的变量 

浅拷贝和深拷贝

浅拷贝实例：

var obj={
	id:1
	msg:{
		age:18
	}
}
for (var k in obj){

​	o[k]=obj[k];	//k是属性名 obj[k]是属性值	
					//对于深层的age数据只拷贝过去了地址（修改o.msg	也会改变obj中的msg值）

}

es6新增语法糖，实现浅拷贝

Object.assign(target,...sourcces)

深拷贝：深层的数据也会被拷贝,封装deepcopy函数

function deepcopy(newobj,oldobj){

  for(var k in oldobj){

      var item=oldobj[k];

      if(item instanceof Array){

        newobj[k]=[];

        deepcopy(newobj[k],item);

      }else if (item instanceof Object){

        newobj[k]={};
        deepcopy(newobj[k],item);

      }
      else{
        	newobj[k]=item;

      		};

    }

}

ES6新增语法

let

• 只作用于块级作用域{大括号内}

• 具有局部锁死性，不受外部定义变量影响

  应用：

   for(let i = 0;i<2;i++){
  
    arr[i]=function{
  
    	console.log(i)	
  
    	}
  
    }
  
  arr[0]()	//如果用var声明i，则此时输出的是i=2，arr[0]会先搜索全局变量，再搜索局部变量
  			//let导致arr[0]只能获取局部变量，从而输出i=0
  

const

• 声明常量（值不改变的量）
• 具有块级作用域

if(true){

​		const a=4;

}

console.log(a);//a is not defined

• 声明常量时必须赋值

• 常量赋值后不能更改

const ary=[100,200];

ary[0]='a';

ary[1]='b';

console.log(ary);	//['a','b']; 对于复杂数据类型都是这样

ary=['a','b'];		//Assignment to constant variable
					//实质是看ary的内存地址有没有改变

解构赋值

ES6允许从数组中提取值，按照对应位置，对变量赋值，对象也可以实现解构。

数组解构

let [a,b,c]=[1,2,3];		//一一对应关系
							//如果解构不成功，变量的值为undefined
console.log(a);

console.log(b);

console.log(c);

对象解构

let person = {name:'zhangsan', age:20 };

let (name,age} = person;

console.log(name);		//zhangsan

console.log(age);		//20

let {name: myName, age :myAge }=person；	// myName myAge 属于别名

console。log（myName）	//'zhangsan'

console.log(myAge)				// 20

箭头函数

新增的定义函数方式

const fn = () => {

​	console.log(1)

}

• 函数体只有一句代码，且代码返回的执行结果就是返回值，可以省略大括号

function sum(num1,num2){

​		sum=num1+num2;

};
var sum=(num1,num2) => num1+num2;
sum(1,2);

• 函数体只有一个形参，可以省略小括号

const fn = n => n+1  

• 箭头函数不绑定this关键字，箭头函数中的this，指的是函数定义位置的上下文this

可以看箭头函数外层是否有包裹的函数，没有就是window

剩余参数

剩余参数语法允许我们将一个不定数量的参数表示为一个数组。

function sum (first , ... args) {

​	console.log(first);	//10

​	console.log(args);	//[20,30]

}

sum(10,20,30)

剩余参数可以和解构一起使用

let students = ['wangwu','zhangsan'.'lisi'];

let [s1,...s2]=studens;

console.log(s1);		//'wangwu'

console.log(s2);		//['zhnagsan','lisi']

Array的扩展方法

扩展运算符

扩展运算符（展开语法） 以逗号分隔的参数

let ary = [1,2,3];

...ary ;							//	1,2,3

console.log(...ary);	//1 2 3
console.log(1,2,3);

• 可以用于合并数组

//方法一
let ary1 = [1,2,3];

let ary2  = [3,4,5];

let ary3 = [...ary1,ary2];
//方法二
arr1,push(...ary2);

可以转换为真正的数组

let html = document.querySlecet(‘div’);

ary=[…html];

Array.from()

可以将伪数组转化为真正的数组

let arrayLike = {

​	‘0’ ：‘a’,

​	'1'  : 'b',

​	length:3

};

let arr2 = Array.from(arrayLike);
let arr1 = Array.from(arrayLike,item => item*2);	//内容*2后加入arr1中

find（）

let target = ary.find((item,index) => item.id == 2); //接受函数为参数 item为值 index为索引

findindex（）

找到第一个符合条件的数组成员的位置，如果没有找到返回-1

let index = ary.find((item,index) => item.id >1 ); //接受函数为参数 item为值 index为索引

includes()

返回布尔值

[1,2,3,4].includes(2)  //true

string的扩展方法

startsWith()和endWith()

判断字符串中是否在字符串的头部 或者 尾部

str.startWith(1)	//true or flase

repeat()

将字符串重复n次

'x',repeat(3);	//'xxx'

Set数据结构

就是集合类型 [ ]

创建

const s = new Set();

可以接受一个数组作为参数，用来初始化。可以用来做数组去重

const set = new Set([1,2,3,4,4]);

常用方法

• add(value):添加某个值，返回Set结构本身
• delete(value):删除某个值，返回一个布尔值，表示删除是否成功
• has(value):返回一个布尔值在，表示该值是否为Set的成员
• clear():清除所有成员，没有返回值

遍历

s.forEach(value => console.log(value))