Js高级语法

发布时间:2024年01月17日

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>

文章来源:https://blog.csdn.net/Gao_xu_sheng/article/details/135571542
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。