Js高级语法

1. ES5数组新方法

1.1 数组方法forEach遍历数组

  // forEach 迭代(遍历) 数组 并求出数组累加和
        var arr = [1, 2, 3, 4, 5];
        var sum = 0;
        arr.forEach(function (value, index, array) {
            console.log('当前数组元素' + value);
            console.log('当前数组元素的索引号' + index);
            console.log('数组本身' + array);
            sum += value;
        })
        console.log(sum);
  //相当于数组遍历的 for循环 没有返回值

1.2 数组方法filter过滤数组

  var arr = [12, 66, 4, 88, 3, 7];
  var newArr = arr.filter(function(value, index,array) {
  	 //参数一是:数组元素
     //参数二是:数组元素的索引
     //参数三是:当前的数组
     return value >= 20;
  });
  console.log(newArr);
//[66,88] //返回值是一个新数组

1.3 数组方法some

some 查找数组中是否有满足条件的元素 
 var arr = [10, 30, 4];
 var flag = arr.some(function(value,index,array) {
     //参数一是:数组元素
     //参数二是:数组元素的索引
     //参数三是:当前的数组
     return value < 3;
  });
console.log(flag);//false返回值是布尔值,只要查找到满足条件的一个元素就立马终止循环

  //   some的作用，帮我们查询满足条件的元素 //some 查找数组中是否有满足条件的元素 
  //   如有有返回ture ,没有返回false
  //   1.当我们使用some这个方法的时候，如果有满足条件的元素，返回true，没有返回false
  //   2.如果我们直接返回true，表示我们已经找到了满足条件的元素，some就不会继续执行

1.4 some和forEach和filter的区别

• 如果查询数组中唯一的元素, 用some方法更合适,在some 里面 遇到 return true 就是终止遍历 迭代效率更高

• 在forEach 里面 return 不会终止迭代

• filter 也是查找满足条件的元素 返回的是一个数组 而且是把所有满足条件的元素返回回来

1.5 实例方法：find()

用于找出第一个符合条件的数组成员，如果没有找到返回undefined

let ary = [{
     id: 1,
     name: '张三'
 }, { 
     id: 2,
     name: '李四'
 }]; 
 let target = ary.find((item, index) => item.id == 2);
//找数组里面符合条件的值，当数组中元素id等于2的查找出来，注意，只会匹配第一个

1.6 实例方法：findIndex()

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

let ary = [1, 5, 10, 15];
let index = ary.findIndex((value, index) => value > 9); 
console.log(index); // 2

1.7 trim方法去除字符串两端的空格

var str = '   hello   '
console.log(str.trim()）  //hello 去除两端空格
var str1 = '   he l l o   '
console.log(str.trim()）  //he l l o  去除两端空格

     点击
    

    

1.8 获取对象的属性名

Object.keys(对象) 获取到当前对象中的属性名 ，返回值是一个数组

// 用于获取对象自身所有的属性
      var obj = {
        id: 1,
        pname: '小米',
        price: 1999,
        num: 2000
      };
      var arr = Object.keys(obj); //遍历出来的属性会存到一个数组中去
      console.log(arr);
      arr.forEach(function (value) {
        console.log(value);
      });

1.9 Object.defineProperty

Object.defineProperty设置或修改对象中的属性

Object.defineProperty(对象，修改或新增的属性名，{
		value:修改或新增的属性的值,
		writable:true/false,//如果值为false 不允许修改这个属性值
		enumerable: false,//enumerable 如果值为false 则不允许遍历
    configurable: false  //configurable 如果为false 则不允许删除这个属性 属性是否可以被删除或是否可以再次修改特性
})	

2.0 ES6语法

2.1 ES6相关概念（★★）

ES 的全称是 ECMAScript , 它是由 ECMA 国际标准化组织,制定的一项脚本语言的标准化规范。

2.2为什么使用 ES6 ?

每一次标准的诞生都意味着语言的完善，功能的加强。JavaScript语言本身也有一些令人不满意的地方。

• 变量提升特性增加了程序运行时的不可预测性

• 语法过于松散，实现相同的功能，不同的人可能会写出不同的代码

2.3 新增语法

let（★★★）

ES6中新增了用于声明变量的关键字

let声明的变量只在所处于的块级有效

if (true) { 
     let a = 10;
 }
console.log(a) // a is not defined

注意：使用let关键字声明的变量才具有块级作用域，使用var声明的变量不具备块级作用域特性。

不存在变量提升

console.log(a); // a is not defined 
let a = 20;

暂时性死区 （不允许重新声明）

利用let声明的变量会绑定在这个块级作用域，不会受外界的影响
 

var tmp = 123;
 if (true) { 
     tmp = 'abc';
     let tmp; 
 } 

小结

• let关键字就是用来声明变量的

• 使用let关键字声明的变量具有块级作用域

• 在一个大括号中 使用let关键字声明的变量才具有块级作用域 var关键字是不具备这个特点的

• 防止循环变量变成全局变量

• 使用let关键字声明的变量没有变量提升

• 使用let关键字声明的变量具有暂时性死区特

• 不可以重新使用let声明相同的变量

const（★★★）

声明常量，常量就是值（内存地址）不能变化的量

具有块级作用域

 if (true) { 
     const a = 10;
 }
console.log(a) // a is not defined

常量赋值后，值不能修改

const PI = 3.14;
PI = 100; // Assignment to constant variable.

声明常量时必须赋值

const PI; // Missing initializer in const declaration

小结

• const声明的变量是一个常量

• 既然是常量不能重新进行赋值，如果是基本数据类型，不能更改值，如果是复杂数据类型，不能更改地址值

• 声明 const时候必须要给定值

2.4 let、const、var 的区别

• 使用 var 声明的变量，其作用域为该语句所在的函数内，且存在变量提升现象

• 使用 let 声明的变量，其作用域为该语句所在的代码块内，不存在变量提升

• 使用 const 声明的是常量，在后面出现的代码中不能再修改该常量的值

2.5 解构赋值（★★★）

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

数组解构

// 1. 数组解构允许我们按照一一对应的关系从数组中提取值 然后将值赋值给变量
		// let array = [1, 2, 3];
		// let [a, b, c, d, e] = array;
		// console.log(a)
		// console.log(b)
		// console.log(c)
		// console.log(d)
		// console.log(e)
		// 2.数组的解构赋值, 他是与书写顺序是有关系的
		// let [a, b, c] = [, , 3]
		// console.log(a, b, c);
		// 3.数组的解构赋值默认值的添加方式
		// let [a = 1, b = 2, c] = [, , 9]
		// console.log(a, b, c);

对象解构

 // 对象解构允许我们使用变量的名字匹配对象的属性 匹配成功 将对象属性的值赋值给变量

		// let { uname, age } = { uname: "zhangsan", age: 15 }

		// 1.对象的解构赋值, 与顺序无关

		// let { uname, age } = { age: 15, uname: "zhangsan" }
		// console.log(uname);
		// console.log(age);

		// 2.对象有了别名以后，原来的名字就失效了
		// let { uname: username, age } = { name: "zs", age: 18 }
		// console.log(username, age);
		// console.log(uname);
		// const { res :data } = {res: ["red","blue","green"]}

		// 3.给对象添加默认值
		// let { uname = "zs", age } = { age: 18 }
		// console.log(uname, age);

小结

• 解构赋值就是把数据结构分解，然后给变量进行赋值

• 如果结构不成功，变量跟数值个数不匹配的时候，变量的值为undefined

• 数组解构用中括号包裹，多个变量用逗号隔开，对象解构用花括号包裹，多个变量用逗号隔开

• 利用解构赋值能够让我们方便的去取对象中的属性跟方法

字符串的解构赋值

 // // 字符串的解构赋值
        // let [a, b, c, d, e] = "hello"
        // console.log(a, b, c, d, e);

        // console.log("hello".length);
        // let [a, b, c, d, length] = "hello"
        // console.log(a, b, c, d);
        // console.log(length);

        let { a, b, c, d, length } = "hello"
        console.log(length);

2.6 函数扩展

1.参数默认值

2.参数解构赋值

3.rest参数

4 ...扩展运算符

函数参数默认值

//1 参数默认值.
        // function fn(param) {
        //     param = param || "blue"
        //     console.log(param);
        // }
        // fn("yellow")
        // function fn(param = "blue") {
        //     console.log(param);
        // }
        // fn("yellow")   

参数解构赋值

 // function fn({ uname = "lisi", age = 18 } = {}) {
        //     console.log(uname);
        //     console.log(age);
        // }
        // fn({ uname: "wangwu", age: "20" })

剩余参数

这种方式很方便的去声明不知道参数情况下的一个函数

function fn(a, b, ...param) {
            console.log(a);
            console.log(b);
            console.log(param);
        }
        fn(1, 2, 3, 4, 5)

扩展运算符

 function fn(a, b, c, d, e) {
             console.log(a + b + c + d + e);
         }
         fn(1, 2, 3, 4, 5)
         let array = [1, 2, 3, 4, 5]
         fn(...array)
         fn.apply(null, array)

剩余参数和解构配合使用

let students = ['wangwu', 'zhangsan', 'lisi'];
let [s1, ...s2] = students; 
console.log(s1);  
console.log(s2);  

2.7 Array 的扩展方法（★★）

扩展运算符（展开语法）

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

	// 1. 扩展运算符可以将数组拆分成以逗号分隔的参数序列
		// let ary = ["a", "b", "c"];
		// console.log(...ary);

扩展运算符可以应用于合并数组

// 2.  扩展运算符应用于数组合并
		// let ary1 = [1, 2, 3];
		// let ary2 = [4, 5, 6];
		// // ...ary1 // 1, 2, 3
		// // ...ary1 // 4, 5, 6
		// let ary3 = [...ary1, ...ary2];
		// console.log(ary3)

		//  3. 合并数组的第二种方法
		// let ary1 = [1, 2, 3];
		// let ary2 = [4, 5, 6];
		// ary1.push(...ary2);
		// console.log(ary1)

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

 // 4 .利用扩展运算符将伪数组转换为真正的数组
		// var oDivs = document.getElementsByTagName('div');
		// console.log(oDivs)
		// var ary = [...oDivs];
		// ary.push('a');
		// console.log(ary);
 
    // 5. 数据拷贝
		const obj1 = {
			id:1,
			age:12
		}
		const obj2 = {
			gender:"男",
			job:"student"
		}
		const obj = {...obj1,...obj2}
		console.log(obj);

2.8 箭头函数（★★★）

ES6中新增的定义函数的方式。

// () => {} //()：代表是函数； =>：必须要的符号，指向哪一个代码块；{}：函数体
  // const fn = () => {}//代表把一个函数赋值给fn

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

 //  1. 函数体中只有一句代码，且代码的执行结果就是返回值，可以省略大括号
        // function fn() {
        //     console.log("hello");
        // }
        // fn()
				//es6写法
        // let foo = () => console.log("hello");

        // foo()

2.如果形参只有一个，可以省略小括号

   2.如果形参只有一个，可以省略小括号  
 function fn1(v) {
            return v;
        }
        console.log(fn1(10));
        //es6写法
        const fn2 = v => v;
        console.log(fn2(20));

3.箭头函数遍历数组的方式

 3.使用箭头函数遍历数组的方式
        // var array = [1, 2, 3]
        // array.forEach((element, index) => {
        //     console.log(element + "--------------" + index);
        // });

4.使用箭头函数注意事项：

// 1.箭头函数中的this,取决于函数的定义，而不是函数的调用
        //  箭头函数中不绑定this，箭头函数中的this指向是它所定义的位置，可以简单理解成，定义箭头函数中的作用域的this指向谁，它就指向谁
        function foo() {
            console.log(this);
            setTimeout(() => {
                console.log(this);
            }, 1000)
        }
        foo()
 //2.箭头函数不可以new
        // var Fn = () => {
        //     console.log(this)
        // }
        // var fn = new Fn()
//3.箭头函数不可以使用arguments，但是可以使用...rest剩余参数
        // let foo = function () {
        //     console.log(arguments);
        // }
        // foo(1, 2, 3)
        // let foo = () => {
        //     console.log(arguments);
        // }
        // foo(1, 2, 3)
        // let foo = (...param) => {
        //     console.log(param);
        // }
        // foo(1, 2, 3)

小结

• 箭头函数中不绑定this，箭头函数中的this指向是它所定义的位置，可以简单理解成，定义箭头函数中的作用域的this指向谁，它就指向谁

• 箭头函数的优点在于解决了this执行环境所造成的一些问题。比如：解决了匿名函数this指向的问题（匿名函数的执行环境具有全局性），包括setTimeout和setInterval中使用this所造成的问题

2. 9 String 的扩展方法

实例方法：startsWith() 和 endsWith()

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

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

• //startsWith  用....开始 返回值是true/false
  		//endsWidth 以....结束 返回值是true/false
  		let str = 'Hello ECMAScript 2015';
  		let r1 = str.startsWith('Hello');
  		console.log(r1);
  		let r2 = str.endsWith('2016');
  		console.log(r2)

  实例方法：.repeat()

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

• 实例方法：includes()该方法数组和字符串都可以使用

• 	// includes  字符串中是否包含某个子串，返回值是true或者false
  		// 第一个参数放的是子串，
  		// 第二个参数放的是查找的位置
  
  		//  1.include
  		// let string = 'hello world'
  		// console.log(string.includes('world', 7));
  
  		let ary = ["a", "b", "c"]
  		let result = ary.includes('a', 0)
  		console.log(result)
  		result = ary.includes('e')
  		console.log(result)

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

  模板字符串（★★★）

  ES6新增的创建字符串的方式，使用反引号定义

• let name = `zhangsan`;

  模板字符串中可以解析变量

• let name = '张三'; 
  let sayHello = `hello,my name is ${name}`; // hello, my name is zhangsan

  模板字符串中可以换行

• let result = { 
       name: 'zhangsan', 
       age: 20,
       sex: '男' 
   } 
   let html = ` 
  
       ${result.name}
       ${result.age}
       ${result.sex}
   
   `;
  

  在模板字符串中可以调用函数

• const sayHello = function () { 
      return '哈哈哈哈 追不到我吧 我就是这么强大';
   }; 
   let greet = `${sayHello()} 哈哈哈哈`;
   console.log(greet); // 哈哈哈哈 追不到我吧 我就是这么强大 哈哈哈哈
  

2.10 Set 数据结构（★★）

ES6 提供了新的数据结构 Set。它类似于数组，但是成员的值都是唯一的，没有重复的值。

Set本身是一个构造函数，用来生成 Set 数据结构

const s = new Set();

Set函数可以接受一个数组作为参数，用来初始化。

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

实例方法

• add(value)：添加某个值，返回 Set 结构本身

• delete(value)：删除某个值，返回一个布尔值，表示删除是否成功

• has(value)：返回一个布尔值，表示该值是否为 Set 的成员

• clear()：清除所有成员，没有返回值

• const s = new Set();
   s.add(1).add(2).add(3); // 向 set 结构中添加值 
   s.delete(2)             // 删除 set 结构中的2值   
   s.has(1)                // 表示 set 结构中是否有1这个值 返回布尔值 
   s.clear()               // 清除 set 结构中的所有值
   //注意：删除的是元素的值，不是代表的索引

遍历

Set 结构的实例与数组一样，也拥有forEach方法，用于对每个成员执行某种操作，没有返回值。