分类导航

程序笔记发布时间：2022-07-13 发布网站：大佬教程 code.js-code.com

大佬教程收集整理的这篇文章主要介绍了Javascript学习笔记，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。

Javascript学习笔记

ES6
- 一、ES6简介
- 二、ES6的新增语法
- - ①、let关键字
  - ②、let的经典面试题
  - ③、const关键字
  - ④、let、const、var的区别
  - ⑤、解构赋值
  - ⑥、箭头函数
  - ⑦箭头函数面试题
  - ⑧、剩余参数
- 三、ES6的内置对象扩展
- - ①、Array的扩展方法
  - ②、Array.from方法
  - ③、实例方法find()
  - ④、实例方法:findIndex()
  - ⑤、实例方法:includes()
  - ⑥、模板字符串
  - ⑦、String的扩展方法
  - - Ⅰ、StartsWith()和endsWiths()
    - Ⅱ、repeat()
  - ⑧、Set数据结构

ES6

一、ES6简介@H_801_79@

二、ES6的新增语法@H_801_79@

①、let关键字

Javascript学习笔记

	<@H_772_100@script type=@H_772_100@"text/javascript"@H_772_100@>@H_772_100@
		/*
			let关键字就是用来声明变量的

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

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

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

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

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

		*/@H_772_100@
		
		/* --------let关键字就是用来声明变量的-------- */@H_772_100@
		// let a = 10;@H_772_100@
		// console.log(a);@H_772_100@
		
		/* --------使用let关键字声明的变量具有块级作用域-------- */@H_772_100@
		// if (true) {@H_772_100@
		// 	let b = 20;@H_772_100@
		// 	console.log(b)@H_772_100@
		// 	if (true) {@H_772_100@
		// 		let c = 30;@H_772_100@
		// 	}@H_772_100@
		// 	console.log(c);@H_772_100@
		// }@H_772_100@
		// console.log(b)@H_772_100@
		
		/* -------在一个大括号中 使用let关键字声明的变量才具有块级作用域 var关键字是不具备这个特点的--------- */@H_772_100@

		// if (true) {@H_772_100@
		// 	let num = 100;@H_772_100@
		// 	var abc = 200;@H_772_100@
		// }@H_772_100@
		// console.log(abc);@H_772_100@
		// console.log(num)@H_772_100@


		/* -------防止循环变量变成全局变量--------- */@H_772_100@
		// for (let i = 0; i < 2; i++) {}@H_772_100@
		// console.log(i);@H_772_100@
		

		/*-----使用let关键字声明的变量没有变量提升------*/@H_772_100@
		// console.log(a);@H_772_100@
		// let a = 100;@H_772_100@
		

		/* -------使用let关键字声明的变量具有暂时性死区特性------- */@H_772_100@
		var@H_772_100@ num =@H_772_100@ 10@H_772_100@
		if@H_772_100@ (@H_772_100@true@H_772_100@)@H_772_100@ {@H_772_100@
			console.@H_772_100@log@H_772_100@(@H_772_100@num)@H_772_100@;@H_772_100@
			let@H_772_100@ num =@H_772_100@ 20@H_772_100@;@H_772_100@
		}@H_772_100@



	<@H_772_100@/@H_772_100@script>@H_772_100@

②、let的经典面试题

Javascript学习笔记

③、const关键字

Javascript学习笔记

    <@H_772_100@script>@H_772_100@
        // 使用COnst关键字声明的常量具有块级作用域@H_772_100@
        // if (true) {@H_772_100@
        // 	const a = 10;@H_772_100@
        // 	if (true) {@H_772_100@
        // 		const a = 20;@H_772_100@
        // 		console.log(a);@H_772_100@
        // 	}@H_772_100@
        // 	console.log(a);@H_772_100@
        // }@H_772_100@
        // console.log(a);@H_772_100@

        // 使用COnst关键字声明的常量必须赋初始值@H_772_100@
        // const PI = 3.14;@H_772_100@

        // 常量声明后值不可更改 @H_772_100@
        const@H_772_100@ PI@H_772_100@ =@H_772_100@ 3.14@H_772_100@;@H_772_100@
        // PI = 100;@H_772_100@
        const@H_772_100@ ary =@H_772_100@ [@H_772_100@100@H_772_100@,@H_772_100@ 200@H_772_100@]@H_772_100@;@H_772_100@
        ary[@H_772_100@0@H_772_100@]@H_772_100@ =@H_772_100@ 123@H_772_100@;@H_772_100@
        ary =@H_772_100@ [@H_772_100@1@H_772_100@,@H_772_100@ 2@H_772_100@]@H_772_100@
        console.@H_772_100@log@H_772_100@(@H_772_100@ary)@H_772_100@;@H_772_100@
    <@H_772_100@/@H_772_100@script>@H_772_100@

④、let、const、var的区别

Javascript学习笔记

⑤、解构赋值

Javascript学习笔记

	<@H_772_100@script type=@H_772_100@"text/javascript"@H_772_100@>@H_772_100@
		// 数组解构允许我们按照一一对应的关系从数组中提取值 然后将值赋值给变量@H_772_100@
		let@H_772_100@ ary =@H_772_100@ [@H_772_100@1@H_772_100@,@H_772_100@2@H_772_100@,@H_772_100@3@H_772_100@]@H_772_100@;@H_772_100@
		let@H_772_100@ [@H_772_100@a,@H_772_100@ b,@H_772_100@ c,@H_772_100@ d,@H_772_100@ e]@H_772_100@ =@H_772_100@ ary;@H_772_100@
		console.@H_772_100@log@H_772_100@(@H_772_100@a)@H_772_100@
		console.@H_772_100@log@H_772_100@(@H_772_100@b)@H_772_100@
		console.@H_772_100@log@H_772_100@(@H_772_100@c)@H_772_100@
		console.@H_772_100@log@H_772_100@(@H_772_100@d)@H_772_100@
		console.@H_772_100@log@H_772_100@(@H_772_100@e)@H_772_100@
	<@H_772_100@/@H_772_100@script>@H_772_100@

Javascript学习笔记

<@H_772_100@script type=@H_772_100@"text/javascript"@H_772_100@>@H_772_100@
		// 对象解构允许我们使用变量的名字匹配对象的属性 匹配成功 将对象属性的值赋值给变量@H_772_100@
		
		let@H_772_100@ person =@H_772_100@ {@H_772_100@name:@H_772_100@ 'lisi'@H_772_100@,@H_772_100@ age:@H_772_100@ 30@H_772_100@,@H_772_100@ sex:@H_772_100@ '男'@H_772_100@}@H_772_100@;@H_772_100@
		// let { name, age, sex } = person;@H_772_100@
		// console.log(Name)@H_772_100@
		// console.log(agE)@H_772_100@
		// console.log(seX)@H_772_100@
		
		let@H_772_100@ {@H_772_100@name:@H_772_100@ myName}@H_772_100@ =@H_772_100@ person;@H_772_100@
		console.@H_772_100@log@H_772_100@(@H_772_100@myName)@H_772_100@

	<@H_772_100@/@H_772_100@script>@H_772_100@

⑥、箭头函数

Javascript学习笔记

 <@H_772_100@script>@H_772_100@
        // 箭头函数是用来简化函数定义语法的@H_772_100@
        // const fn = () => {@H_772_100@
        // 	console.log(123)@H_772_100@
        // }@H_772_100@
        // fn();@H_772_100@

        // 在箭头函数中 如果函数体中只有一句代码 并且代码的执行结果就是函数的返回值 函数体大括号可以省略@H_772_100@
        // const sum = (n1, n2) => n1 + n2;	 @H_772_100@
        // const result = sum(10, 20);@H_772_100@
        // console.log(result)@H_772_100@

        // 在箭头函数中 如果形参只有一个 形参外侧的小括号也是可以省略的@H_772_100@
        // const fn = v => {@H_772_100@
        // 	alert(v);@H_772_100@
        // }@H_772_100@
        // fn(20)@H_772_100@

        // 箭头函数不绑定this 箭头函数没有自己的this关键字 如果在箭头函数中使用this this关键字将指向箭头函数定义位置中的this@H_772_100@

        function@H_772_100@ fn@H_772_100@(@H_772_100@)@H_772_100@ {@H_772_100@
            console.@H_772_100@log@H_772_100@(@H_772_100@this@H_772_100@)@H_772_100@;@H_772_100@
            return@H_772_100@ (@H_772_100@)@H_772_100@ =>@H_772_100@ {@H_772_100@
                console.@H_772_100@log@H_772_100@(@H_772_100@this@H_772_100@)@H_772_100@
            }@H_772_100@
        }@H_772_100@

        const@H_772_100@ obj =@H_772_100@ {@H_772_100@
            name:@H_772_100@ 'zhangsan'@H_772_100@
        }@H_772_100@;@H_772_100@

        const@H_772_100@ resFn =@H_772_100@ fn@H_772_100@.@H_772_100@call@H_772_100@(@H_772_100@obj)@H_772_100@;@H_772_100@

        resFn@H_772_100@(@H_772_100@)@H_772_100@;@H_772_100@
    <@H_772_100@/@H_772_100@script>@H_772_100@

⑦箭头函数面试题

    <@H_772_100@script>@H_772_100@
        var@H_772_100@ age =@H_772_100@ 100@H_772_100@;@H_772_100@

        var@H_772_100@ obj =@H_772_100@ {@H_772_100@
            age:@H_772_100@ 20@H_772_100@,@H_772_100@
            say@H_772_100@:@H_772_100@ (@H_772_100@)@H_772_100@ =>@H_772_100@ {@H_772_100@
                alert@H_772_100@(@H_772_100@this@H_772_100@.@H_772_100@age)@H_772_100@
            }@H_772_100@
        }@H_772_100@

        obj.@H_772_100@say@H_772_100@(@H_772_100@)@H_772_100@;@H_772_100@
    <@H_772_100@/@H_772_100@script>@H_772_100@

⑧、剩余参数

Javascript学习笔记

   <@H_772_100@script>@H_772_100@
        // const sum = (...args) => {@H_772_100@
        // 	let @R_894_10586@l = 0;@H_772_100@
        // 	args.forEach(item => @R_894_10586@l += item);@H_772_100@
        // 	return @R_894_10586@l;@H_772_100@
        // };@H_772_100@

        // console.log(sum(10, 20));@H_772_100@
        // console.log(sum(10, 20, 30));@H_772_100@


        let@H_772_100@ ary1 =@H_772_100@ [@H_772_100@'张三'@H_772_100@,@H_772_100@ '李四'@H_772_100@,@H_772_100@ '王五'@H_772_100@]@H_772_100@;@H_772_100@
        let@H_772_100@ [@H_772_100@s1,@H_772_100@ ...@H_772_100@s2]@H_772_100@ =@H_772_100@ ary1;@H_772_100@
        console.@H_772_100@log@H_772_100@(@H_772_100@s1)@H_772_100@
        console.@H_772_100@log@H_772_100@(@H_772_100@s2)@H_772_100@
    <@H_772_100@/@H_772_100@script>@H_772_100@

Javascript学习笔记

    <@H_772_100@div>@H_772_100@1@H_772_100@<@H_772_100@/@H_772_100@div>@H_772_100@
    <@H_772_100@div>@H_772_100@4@H_772_100@<@H_772_100@/@H_772_100@div>@H_772_100@
    <@H_772_100@div>@H_772_100@3@H_772_100@<@H_772_100@/@H_772_100@div>@H_772_100@
    <@H_772_100@div>@H_772_100@6@H_772_100@<@H_772_100@/@H_772_100@div>@H_772_100@
    <@H_772_100@div>@H_772_100@2@H_772_100@<@H_772_100@/@H_772_100@div>@H_772_100@
    <@H_772_100@div>@H_772_100@5@H_772_100@<@H_772_100@/@H_772_100@div>@H_772_100@
    <@H_772_100@script>@H_772_100@
        // 扩展运算符可以将数组拆分成以逗号分隔的参数序列@H_772_100@
        // let ary = ["a", "b", "c"];@H_772_100@
        // ...ary // "a", "b", "c"@H_772_100@
        // console.log(...ary)@H_772_100@
        // console.log("a", "b", "c")@H_772_100@

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

        // 合并数组的第二种方法@H_772_100@
        // let ary1 = [1, 2, 3];@H_772_100@
        // let ary2 = [4, 5, 6];@H_772_100@

        // ary1.push(...ary2);@H_772_100@
        // console.log(ary1)@H_772_100@

        // 利用扩展运算符将伪数组转换为真正的数组@H_772_100@
        var@H_772_100@ oDivs =@H_772_100@ document.@H_772_100@getElementsByTagName@H_772_100@(@H_772_100@'div'@H_772_100@)@H_772_100@;@H_772_100@
        console.@H_772_100@log@H_772_100@(@H_772_100@oDivs)@H_772_100@
        var@H_772_100@ ary =@H_772_100@ [@H_772_100@...@H_772_100@oDivs]@H_772_100@;@H_772_100@
        ary.@H_772_100@push@H_772_100@(@H_772_100@'a'@H_772_100@)@H_772_100@;@H_772_100@
        console.@H_772_100@log@H_772_100@(@H_772_100@ary)@H_772_100@;@H_772_100@
    <@H_772_100@/@H_772_100@script>@H_772_100@

三、ES6的内置对象扩展@H_801_79@

①、Array的扩展方法

Javascript学习笔记

②、Array.from方法

Javascript学习笔记

   <@H_772_100@script>@H_772_100@
        // var arrayLike = {@H_772_100@
        // 	"0": "张三",@H_772_100@
        // 	"1": "李四",@H_772_100@
        // 	"2": "王五",@H_772_100@
        // 	"length": 3@H_772_100@
        // }@H_772_100@

        // var ary = Array.from(arrayLikE);@H_772_100@
        // console.log(ary)@H_772_100@

        var@H_772_100@ arrayLike =@H_772_100@ {@H_772_100@
            "0"@H_772_100@:@H_772_100@ "1"@H_772_100@,@H_772_100@
            "1"@H_772_100@:@H_772_100@ "2"@H_772_100@,@H_772_100@
            "length"@H_772_100@:@H_772_100@ 2@H_772_100@
        }@H_772_100@

        var@H_772_100@ ary =@H_772_100@ Array.@H_772_100@from@H_772_100@(@H_772_100@arrayLike,@H_772_100@ item@H_772_100@ =>@H_772_100@ item *@H_772_100@ 2@H_772_100@)@H_772_100@
        console.@H_772_100@log@H_772_100@(@H_772_100@ary)@H_772_100@
    <@H_772_100@/@H_772_100@script>@H_772_100@

③、实例方法find()

Javascript学习笔记

   <@H_772_100@script>@H_772_100@
        var@H_772_100@ ary =@H_772_100@ [@H_772_100@{@H_772_100@
            id:@H_772_100@ 1@H_772_100@,@H_772_100@
            name:@H_772_100@ '张三'@H_772_100@
        }@H_772_100@,@H_772_100@ {@H_772_100@
            id:@H_772_100@ 2@H_772_100@,@H_772_100@
            name:@H_772_100@ '李四'@H_772_100@
        }@H_772_100@]@H_772_100@;@H_772_100@
        let@H_772_100@ target =@H_772_100@ ary.@H_772_100@find@H_772_100@(@H_772_100@item@H_772_100@ =>@H_772_100@ item.@H_772_100@id ==@H_772_100@ 3@H_772_100@)@H_772_100@;@H_772_100@
        console.@H_772_100@log@H_772_100@(@H_772_100@target)@H_772_100@
    <@H_772_100@/@H_772_100@script>@H_772_100@

④、实例方法:findIndex()

    <@H_772_100@script>@H_772_100@
        let@H_772_100@ ary =@H_772_100@ [@H_772_100@10@H_772_100@,@H_772_100@ 20@H_772_100@,@H_772_100@ 50@H_772_100@]@H_772_100@;@H_772_100@
        let@H_772_100@ index =@H_772_100@ ary.@H_772_100@findIndex@H_772_100@(@H_772_100@item@H_772_100@ =>@H_772_100@ item >@H_772_100@ 15@H_772_100@)@H_772_100@;@H_772_100@
        console.@H_772_100@log@H_772_100@(@H_772_100@index)@H_772_100@
    <@H_772_100@/@H_772_100@script>@H_772_100@

⑤、实例方法:includes()

    <@H_772_100@script>@H_772_100@
        let@H_772_100@ ary =@H_772_100@ [@H_772_100@"a"@H_772_100@,@H_772_100@ "b"@H_772_100@,@H_772_100@ "c"@H_772_100@]@H_772_100@;@H_772_100@

        let@H_772_100@ result =@H_772_100@ ary.@H_772_100@includes@H_772_100@(@H_772_100@'a'@H_772_100@)@H_772_100@
        console.@H_772_100@log@H_772_100@(@H_772_100@result)@H_772_100@
        result =@H_772_100@ ary.@H_772_100@includes@H_772_100@(@H_772_100@'e'@H_772_100@)@H_772_100@
        console.@H_772_100@log@H_772_100@(@H_772_100@result)@H_772_100@
    <@H_772_100@/@H_772_100@script>@H_772_100@

⑥、模板字符串

Javascript学习笔记

    <@H_772_100@script>@H_772_100@
        // let name = `张三`;@H_772_100@
        // let sayHello = `Hello, 我的名字叫${name}`;@H_772_100@
        // console.log(sayHello);@H_772_100@

        // let result = {@H_772_100@
        // 	name: "zhangsan",@H_772_100@
        // 	age: 20@H_772_100@
        // };@H_772_100@
        // let html = `@H_772_100@
        // 	<div>@H_772_100@
        // 		<span>${result.namE}</span>@H_772_100@
        // 		<span>${result.agE}</span>@H_772_100@
        // 	</div>@H_772_100@
        // `;@H_772_100@
        // console.log(html);@H_772_100@

        const@H_772_100@ fn@H_772_100@ =@H_772_100@ (@H_772_100@)@H_772_100@ =>@H_772_100@ {@H_772_100@
            return@H_772_100@ '我是fn函数'@H_772_100@
        }@H_772_100@

        let@H_772_100@ html =@H_772_100@ @H_646_1450@`@H_772_100@我是模板字符串 @H_772_100@${@H_772_100@fn@H_772_100@(@H_772_100@)@H_772_100@}@H_772_100@@H_772_100@`@H_772_100@@H_772_100@;@H_772_100@
        console.@H_772_100@log@H_772_100@(@H_772_100@html)@H_772_100@
    <@H_772_100@/@H_772_100@script>@H_772_100@

⑦、String的扩展方法

Ⅰ、StartsWith()和endsWiths()

Javascript学习笔记

    <@H_772_100@script>@H_772_100@
        let@H_772_100@ str =@H_772_100@ 'Hello ECMAScript 2015'@H_772_100@;@H_772_100@
        let@H_772_100@ r1 =@H_772_100@ str.@H_772_100@startsWith@H_772_100@(@H_772_100@'hello'@H_772_100@)@H_772_100@;@H_772_100@
        console.@H_772_100@log@H_772_100@(@H_772_100@r1)@H_772_100@;@H_772_100@
        let@H_772_100@ r2 =@H_772_100@ str.@H_772_100@endsWith@H_772_100@(@H_772_100@'2016'@H_772_100@)@H_772_100@;@H_772_100@
        console.@H_772_100@log@H_772_100@(@H_772_100@r2)@H_772_100@
    <@H_772_100@/@H_772_100@script>@H_772_100@

Ⅱ、repeat()

Javascript学习笔记

   <@H_772_100@script>@H_772_100@
        console.@H_772_100@log@H_772_100@(@H_772_100@"y"@H_772_100@.@H_772_100@repeat@H_772_100@(@H_772_100@5@H_772_100@)@H_772_100@)@H_772_100@
    <@H_772_100@/@H_772_100@script>@H_772_100@

⑧、Set数据结构

Javascript学习笔记

@H_906_1618@

Javascript学习笔记

    <@H_772_100@script>@H_772_100@
        // const s1 = new Set();@H_772_100@
        // console.log(s1.sizE)@H_772_100@

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

        // const s3 = new Set(["a","a","b","b"]);@H_772_100@
        // console.log(s3.sizE)@H_772_100@
        // const ary = [...s3];@H_772_100@
        // console.log(ary)@H_772_100@

        // const s4 = new Set();@H_772_100@
        // 向set结构中添加值 使用add方法@H_772_100@
        // s4.add('a').add('b');@H_772_100@
        // console.log(s4.sizE)@H_772_100@

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

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

        // 清空set数据结构中的值 使用clear方法@H_772_100@
        // s4.clear();@H_772_100@
        // console.log(s4.sizE);@H_772_100@

        // 遍历set数据结构 从中取值@H_772_100@
        const@H_772_100@ s5 =@H_772_100@ new@H_772_100@ Set@H_772_100@(@H_772_100@[@H_772_100@'a'@H_772_100@,@H_772_100@ 'b'@H_772_100@,@H_772_100@ 'c'@H_772_100@]@H_772_100@)@H_772_100@;@H_772_100@
        s5.@H_772_100@forEach@H_772_100@(@H_772_100@value@H_772_100@ =>@H_772_100@ {@H_772_100@
            console.@H_772_100@log@H_772_100@(@H_772_100@value)@H_772_100@
        }@H_772_100@)@H_772_100@
    <@H_772_100@/@H_772_100@script>@H_772_100@

大佬总结

以上是大佬教程为你收集整理的Javascript学习笔记全部内容，希望文章能够帮你解决Javascript学习笔记所遇到的程序开发问题。

如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。

标签：cap javascript php 参数程序员遍历面试

上一篇: JavaScript - WebAPI - 案例 - 盒... 下一篇:保姆级教学！彻底学会时间复杂度...

猜你在找的程序笔记相关文章

You can't specify target table 'xxx' for update in FROM clause的解决 2022-07-21
【UNIAPP】上传视频，进度条的前台与后端 2022-07-21
十款代码表白特效，一个比一个浪漫！ 2022-07-04
作业3 2022-07-06
linux系统下部署项目访问报404错误的解决方法 2022-05-30
C++带有指针成员的类处理方式详解 2022-06-07
Linux——（1）基本命令 2022-07-21
JavaScript之正则表达式学习笔记 2019-11-07
Redux源码学习笔记 2019-11-07
Webpack学习笔记 2019-11-07