Js高级语法

最新推荐文章于 2024-04-03 00:50:20 发布

Gao_xu_sheng

最新推荐文章于 2024-04-03 00:50:20 发布

阅读量1.2k

点赞数 31

文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/Gao_xu_sheng/article/details/135571542

版权

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  去除两端空格
<body>
    <input type="text"> <button>点击</button>
    <div></div>
    <script>
        var input = document.querySelector('input');
        var btn = document.querySelector('button');
        var div = document.querySelector('div');
        btn.onclick = function () {
            var str = input.value.trim();
            if (str === '') {
                alert('请输入内容');
            } else {
                console.log(str);
                console.log(str.length);
                div.innerHTML = str;
            }
        }
    </script>
</body>

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次，返回一个新字符串

	<script type="text/javascript">
		var string = "I love you\n"
		var str = string.repeat(521)
		console.log(str);
	</script>

实例方法：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 = ` <div>
     <span>${result.name}</span>
     <span>${result.age}</span>
     <span>${result.sex}</span>
 </div> `;

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

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方法，用于对每个成员执行某种操作，没有返回值。

<script type="text/javascript">
		// const s1 = new Set();
		// console.log(s1)
		// console.log(s1.size)

		// const s2 = new Set(["a", "b"]);
		// console.log(s2.size)
		

		// const s3 = new Set(["a","a","b","b"]);
		// console.log(s3.size)
		// const ary = [...s3];
		// console.log(ary)
		
		// const s4 = new Set();
		// 向set结构中添加值 使用add方法
		// s4.add('a').add('b');
		// console.log(s4.size)

	    // 从set结构中删除值 用到的方法是delete
		// const r1 = s4.delete('c');
		// console.log(s4.size)
		// console.log(r1);

		// 判断某一个值是否是set数据结构中的成员 使用has
		// const r2 = s4.has('d');
		// console.log(r2)

		// 清空set数据结构中的值 使用clear方法
		// s4.clear();
		// console.log(s4.size);
		
		// 遍历set数据结构 从中取值
		// const s5 = new Set(['a', 'b', 'c']);
		// s5.forEach(value => {
		// 	console.log(value)
		// })

	</script>