JavaScript知识点
一.概述
1.什么是JavaScript
- JavaScript是一门脚本语言
- Java,JavaScript的关系：无半毛钱关系
注意：后端人员要精通JavaScript
2.JavaScript的历史
https://www.cnblogs.com/ghost-xyx/p/4035615.html
3.标准(ECMAScript)
https://baike.baidu.com/item/ECMAScript/1889420?fr=aladdin
- 最新版本为es6版本，但是现在大部分浏览器还只支持es5代码！
二.入门
1.js的引入
//内部标签 <head> <meta charset="UTF-8"> <title>js</title> <!--script标签内写js代码 --> <script> alert('hello,javascript'); </script> </head>
外部引入 //注意：script标签必须成对出现 //script标签必须成对出现 <script src="js/js1.js"></script>//写在html中head内部 alert('hello,javascript');//写在js文件中
- 弹窗标签
alert('hello,javascript');
2.基本语法
<!--JavaScript严格区分大小写--> <script> //定义变量 var score=88; //alert(score); //2.条件控制 if(score>60 &&score<70){ alert("60-70"); }else if(score>70&& score<80){ alert("70-80"); }else{ alert("other"); } //console.log(score) 在浏览器的控制台打印变量！ </script>
3.数据类型
数值，文本，图形，音频，视频…
number
js不区分整数和小数
123 //整数 123.4 //浮点数 1.23e4 //科学计数法 -99 //负数 NaN //not a number Infinity //无限大
字符串
‘a’ “abc”
布尔值
true , false
逻辑运算符
&& || !
比较运算符(重要)
= == 等于（类型不一样，值一样，也会判断为true） === 绝对等于(类型一样，值一样，结果true)
- JS坚持不要使用==比较
须知：
- NaN===NaN,NaN与所有的数值都不相等，包括自己
- 只能通过isNaN(NaN)来判断这个数是否是NaN
浮点数问题：
console.log((1/3)===(1-2/3))
尽量避免使用浮点数进行运算，存在精度问题
console.log(Math.abs(1/3-(1-2/3))<0.000000001)
null和undefined
- null 空
- undefined 未定义
数组
js中的数值不一定要是相同类型的对象
var arr=[1,2,3,'hello',null,true]; new Array(1,2,3,'hellojs',null,true);
取数组下标：如果越界了,就会undefined
对象
- 对象是大括号，数组是中括号
- 每个属性之间使用逗号隔开，最后一个不需要
var Person={ name:"chen", age:18, tags:['js','java',2,5] }
取对象值
person.name >"chen" person.age >18
4.严格检查模式
<!-- 前提：IDEA需要设置支持ES6语法 'use strict';严格检查模式,预防JavaScript的随意性导致产生一些问题 必须写在JavaScript的第一行！ 局部变量建议都使用let去定义 --> <script> 'use strict'; //全局变量 let i=1; //ES6 let </script>
三.数据类型
1.字符串
- 正常字符串使用单引号或者双引号包裹
- 注意转义字符\
\' \n \t \u#### Unicode字符 \x41 Ascll字符
- 多行字符串编写
//tab键上的` var msg=` hello,javascript,你好呀 `
- 模板字符串
let name = "chen_study"; let age = 18; let msg = `你好呀，${name}`
- 字符串长度
console.log(str.length)
- 字符串不可变性
- 大小写转换
//注意：这里是方法 student.toUpperCase() student.toLowerCase()
- 返回某个字符位置
student.indexOf('u')
- 截取字符串
[) student.substring(1)//从第一个字符串截取到最后一个字符串 student.substring(1,3)//[1,3)
2.数组
- 长度
arr.length
注意：给arr.length赋值,数组大小会发生变化，如果赋值过小，元素就会丢失
- indexOf，通过元素获得下标索引
arr.indexOf(2)
字符串的"1"和数字1是不同的
- slice() 截取Array的一部分,返回一个新数组，类似于String中substring
- push(),pop() 尾部
push: 压入到尾部 pop: 弹出尾部的一个元素
- unshift(),shift() 头部
unshift: 压入到头部 shift: 弹出头部的一个元素
- 排序sort()
arr.sort()
- 元素反转reverse()
arr.reverse()
- 拼接concat()
arr.concat([1,2,3])
注意：concat()并没有修改数组,只是会返回一个新的数组
- 连接符join
打印拼接数组，使用特定的字符串连接
arr.join('-')
- 多维数组
arr = [[1,2],[3,4],["5","6"]]; arr[1][1] //4
3.对象
若干个键值对
var 对象名 = { 属性名:属性值, 属性名:属性值, 属性名:属性值 } //定义了一个person对象，他有四个属性 var person = { name:"chen", age:18, email:1234567@qq.com, score:100 }
Js中对象，{…}表示一个对象,键值对描述属性，多个属性之间使用逗号隔开，最后一个属性不加逗号！
- 对象赋值
Person.name = "hu" "hu" person.name "hu"
- 使用一个不存在的对象属性，不会报错！undefined
person.a undefined
- 动态的删减属性,通过delete删除属性
delete person.name true
- 动态添加属性，直接给新属性添加值即可
person.a="a" "a"
- 判断属性值是否在这个对象中，xxx in xxx(js中所有的键都是字符串,值是任一对象！)
'age' in person true //继承 'toString' in person true
- 判断一个属性是否是这个对象自身拥有的hasOwnProperty()
person.hasOwnProperty('toString') false person.hasOwnProperty('age') true
4.流程控制
- if判断
- 循环
while
do while
for
forEach
var age = [1,2,3,4,5,6,86,345] age.forEach(function(value){ console.log(value) })
for…in
5.Map和Set
ES6的新特性
- Map
//ES6 Map var map = new Map([['xiaoming',100],['zhangsan',60]]); var name = map.get('xiaoming');//get console.log(name);//100 map.set('admin',90)//set新增 map.delete('xiaoming')//删除
- Set（无序不重复的集合）
var set = new Set([1,1,2,2,3,3]);//1,2,3 set会去重 set.add(4) //1,2,3,4 add增加 set.delete(4) //1,2,3 delete删除 console.log(set.has(3)); //是否含某个元素
6.iterator
- 遍历数组
ES6新特性
//通过for of/ for in下标 var arr=[1,2,3] for(var x of arr){ console.log(s) }
- 遍历Map
var map = new Map([['xiaoming',100],['zhangsan',60]]); for(let x of map){ console.log(x) }
- 遍历Set
var set = new Set([3,4,5]); for(let x of set){ console.log(x) }
![[JS]知识点](https://ucc.alicdn.com/3mfxe2r26qbaq/developer-article1635707/20241110/daf0d8f748364c2db4d13bd280b11e7b.png?x-oss-process=image/resize,h_160,m_lfit)
