JS高级二

一、ES5新增方法概述

ES5中给我们新增了一-些方法，可以很方便的操作数组或者字符串，这些方法主要包括：

1. 数组方法
迭代(遍历)方法： forEach()、map()、 filter()、 some()、 every0()

（1）forEach()

array. forEach( function (currentvalue, index, arr) )

currentValue ：数组当前项的值
index ：数组当前项的索引
arr ：数组对象本身

<script> 
// forEach 迭代(遍历)数组
var arr = [1, 2, 3];
var sum = 0;

arr .forEach( function(value, index, array) {
  console.log('每个数组元素' + value);
  console. log( '每个数组元素的索引号’+ index);
  console.1og('数组本身' + array);
  sum += value;
})

console . log(sum);

</script>

（2）filter()

array. filter (function (currentvalue, index, arr))

filter() 方法创建一个新的数组,新数组中的元素是通过检查指定数组中符合条件的所有元素,主要用于筛选数组
注意它直接返回一个新数组

currentValue：数组当前项的值
index：数组当前项的索引
arr：数组对象本身

<script>
// filter 筛选数组
var arr = [12, 66，4, 88, 3, 7];

var newArr = arr. filter( functipn(value, index) {
   return value >= 20;
 });
 
console. log(newArr);

</script>

（3）some()

array. some (funct ion (currentvalue, index, arr))

some() 方法用于检测数组中的元素是否满足指定条件.通俗点就是查找数组中是否有满足条件的元素
注意它返回值是布尔值如果查找到这个元素,就返回true,如果查找不到就返回false.

如果找到第一个满足条件的元素则终止循环不在继续查找.

currentValue:数组当前项的值
index :数组当前项的索引
arr :数组对象本身

<script>
// some 查找数组中是否有满足条件的元素
var arr = [10, 30，4];

var flag = arr . some(function(value) {
  return value < 3;
});

console. log(flag); //false

var arr1 = ['red' ，'pink', 'blue'];
var flag1 = arr1. some(function(value) {
  return value == 'pink'  //true
});

console. log(f1ag1);

</script>

2. 字符串方法

trim() 方法会从一个字符串的两端删除空白字符。

str. trim()

trim() 方法并不影响原字符串本身,它返回的是一个新的字符串。

3. 对象方法

（1）object.keys()

object.keys() 用于获取对象自身所有的属性

object . keys (obj)

效果类似 for..in
返回一个由属性名组成的数组

<script>
//用于获取对象自身所有的属性
var obj={
  id: 1,
  pname: '小米'，
  price: 1999,
  num: 2000
};

var arr = object.keys (obj);
console.log(arr);

arr .forEach( function(value) {
  console .1og(value);
})

</script>

（2）object.defineProperty()

object.defineProperty()  定义对象中新属性或修改原有的属性。

object . defineProperty( obj, prop, descriptor)

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

第三个参数descriptor说明：以对象形式{}书写
value: 设置属性的值默认为undefined
writable: 值是否可以重写。true | false默认为false
enumerable: 目标属性是否可以被枚举。true I false默认为false
configurable: 目标属性是否可以被删除或是否可以再次修改特性true false， 默认为false

// 1.以前的对象添加和修改属性的方式
// obj. num = 1000;
// obj.price = 99;
// console. log(obj);

// 2. object . defineProperty()定义新属性或修改原有的属性
object . defineProperty(obj, 'num', { value: 1000 } );
console.1og(obj);

object. defineProperty(obj, 'price', { value: 9.9 } );
console . log(obj);

</script>

object . defineProperty(obj, ' address', {

  value:‘中国山东蓝翔技校xx单元',
  
  //如果只为false不允许修改这个属性值，默认值也是false
  writable: false,
  
  // enumerable 如果值为false则不允许遍历，默认的值是false
  enumerable: false ，
  
  // configurable 如果为false则不允许删除这个属性，不允许修改第三个参数里面的特性，默认false
  configurable: false
  
});

二、函数的定义和调用

1. 定义的三种方式

//函数的定义方式

// 1.自定义函数(命名函数)
function fn() {};

// 2.函数表达式(匿名函数)
var fun = function() {};

// 3.利用new Function( '参数1',，参数2'，' 函数体');
var f = new Function('a', 'b', 'console.1og(a + b)');
f(1, 2);

// 所有函数都是Function的实例(对象)
console.dir(f);

// 函数也属于对象
console. log(f instanceof Object);

2. 函数调用

//函数的调用方式

// 1.普通函数
function fn() {
  console.1og(人生的巅峰”);
}

// fn();
fn. call()


// 2.对象的方法
var o = {
  sayHi: function() {
    console.1og('人生的巅峰' );
  }
}

o.sayHi();

// 3.构造函数
function Star() {};
new Star ();

// 4.绑定事件函数
// btn. onclick = function() {};
//点击了按钮就可以调用这个函数

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

// 6.立即执行函数, 立即执行函数是自动调用
(function() {
console.1og( 人生的巅峰”);
})();

三、this

1. 函数内this的指向
这些this的指向,是当我们调用函数的时候确定的。调用方式的不同决定了this 的指向不同一般指向我们的调用者。

普通函数调用
window

构造函数调用
实例对象原型对象里面的方法也指向实例对象

对象方法调用
该方法所属对象

事件绑定方法
绑定事件对象

定时器函数
window

立即执行函数
window

2. 改变函数内部this指向
（1）call()

（2）apply()

apply() 方法调用一个函数。简单理解为调用函数的方式,但是它可以改变函数的this指向。

fun. apply ( thisArg,  [argsArray] )

thisArg : 在fun函数运行时指定的this值
argsArray : 传递的值，必须包含在数组里面
返回值就是函数的返回值,因为它就是调用函数

(3) bind()

bind() 方法不会调用函数。但是能改变函数内部this 指向

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

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

（4）call apply bind 总结

相同点:
都可以改变函数内部的this指向.

区别点: .
1. call 和apply会调用函数,并且改变函数内部this指向.
2. call 和apply传递的参数不一样, call传递参数aru1, aru..形式apply必须数组形式[arg]
3. bind 不会调用函数可以改变函数内部this指向.

主要应用场景:
1. call经常做继承.
2. apply经常跟数组有关系 比如借助于数学对象实现数组最大值最小值
3. bind 不调用函数但是还想改变this指向.比如改变定时器内部的this指向.

四、高阶函数
高阶函数是对其他函数进行操作的函数, 它接收函数作为参数或将函数作为返回值输出。

<script>
function fn (callback) {
  callback && callback() ;
}

fn ( function() {alert('hi')} )
</script>

<script>
function fn() {
  return function() {}
}

fn() ;
</script>

<script>
//高阶函数-函数可以作为参数传递
function fn(a, b, callback) {
  console.1og(a + b);
  callback && callback();
}

fn(1, 2, function() {
  console.1og(我是最后调用的");
});

</ script>

五、闭包

1.闭包是什么?
闭包是一个函数( 一个作用域可以访问另外一个函数的局部变量 )

2.闭包的作用是什么?
延伸变量的作用范围

变量作用域
变量根据作用域的不同分为两种：全局变量和局部变量。

1. 函数内部可以使用全局变量。
2. 函数外部不可以使用局部变量。
3. 当函数执行完毕,本作用域内的局部变量会销毁。

<script> 
//闭包(closure) 指有权访问另一个函数作用域中变量的函数。
//闭包: 我们fun这个函数作用域访问了另外一个函数fn里面的局部变量num

function fn() {
  var num = 10;
  function fun() {
    console. log(num);
  }
  
  fun();
}

fn();

</script>

六、递归

什么是递归?

如果一个函数在内部可以调用其本身，那么这个函数就是递归函数。
简单理解：函数内部自己调用自己，这个函数就是递归函数
递归函数的作用和循环效果一样
由于递归很容易发生"栈溢出”错误( stack overflow) ，所以必须要加退出条件return。

< script>
//递归函数:函数内部自己调用自己，这个函数就是递归函数
var num = 1;

function fn() {
  console.1og( '我要打印6句话);
  if(num==6){
    return; //递归里面必须加退出条件
  }
  num++ ;
  fn();
}

fn();

</script>

七、深拷贝与浅拷贝

1. 浅拷贝只是拷贝一层，更深层次对象级别的只拷贝引用
2. 深拷贝拷贝多层，每一级别的数据都会拷贝，
3. Object.assign( target, …sources ) es6 新增方法可以浅拷贝

八、正则表达式