网络用户提要求找人帮忙做的网站,产品推广计划方案模板,装潢设计师要学多久,百度seo优化技术JavaScript 是什么
一门语言一门脚本语言一门运行在浏览器中由浏览器解释执行的语言
JavaScript 语法特性 基于对象和事件驱动的解释型松散型语言 基于对象#xff1a;我们在js当中要操作的一切的目标#xff08;字符串、数组、浏览器、div…#xff09;都是以对象的方式存…JavaScript 是什么
一门语言一门脚本语言一门运行在浏览器中由浏览器解释执行的语言
JavaScript 语法特性 基于对象和事件驱动的解释型松散型语言 基于对象我们在js当中要操作的一切的目标字符串、数组、浏览器、div…都是以对象的方式存在的事件驱动js的执行是靠内部的事件循环来驱动的解释型由浏览器解释执行的松散型弱类型:对于数据类型的区分是弱化的TypeScript–js的强类型实现 JavaScript 历史
1995年由网景Netscape公司的布兰登·艾奇 【liveScript sun java JavaScript Windows Jscript Cenvil】1997年 JavaScript1.1提交ECMA欧洲计算机制造的协会 类似ISO是一个标准制定的组织 ECMAScript定义了js基本的语法规范 JavaScript是基于ECMAScript的浏览器实现 类似的还有FLASH的 actionScript基于ECMAScript的实现 nodejs基于ECMAScript服务器端的实现1999年 ECMAScript 3.02007年 ECMAScript 4.0 分歧 没有发布 ECMAScript 3.12009年 3.1-52015年 ECMAScript 2015 …2018 ES6
JavaScript
ECMAScript 语法核心变量 数据类型 运算符 流程控制 函数 数组 对象BOMBrowser Object Model【浏览器对象模型】 定义了如何通过js来操作浏览器浏览器本身 地址栏 历史记录 窗口…DOMDocument Object Model【文档对象模型】 定义了如何通过js来操作界面中的元素body div a…
JavaScript 执行方式
1. 在进行重定向的位置执行js代码
2. 通过script标签嵌入执行
3. 通过script的src属性引入执行
4. 在标签中通过添加事件执行嵌入和引入不能在同一个标签中使用 虽然执行方式不同但是他们最终还是在一个环境中解释执行的 JavaScript 输出方式
1. alert(); 警告框 阻止代码的执行点击确定按钮会继续执行
2. prompt(); 带输入控件的弹出框 阻止代码的执行可以进行输入
3. console.log(); 在浏览器控制台输出和代码的执行是相互独立的
4. document.write(); 在文档中写入内容JavaScript 注释
1. // 表示注释掉当前行的内容
2. /\* 注释某一个代码块 \*/JavaScript 变量
变量 存储数据的容器声明 赋值var 关键字关键字被js赋予特定的含义某些单词 保留字可能会被js赋予特定含义的某些单词
声明赋值的四种方式
1. 先声明后赋值
2. 声明赋值同时进行
3. 同时声明多个变量后赋值
4. 同时声明多个变量并赋值声明变量要注意的一些问题
如果变量声明后没有赋值会被自动赋值为undefined如果没有声明变量直接使用会报引用错误var变量的声明会提升到当前的代码块的开始位置去执行var重新声明或重新赋值都可以将变量的旧值覆盖
关于变量名命名的规范
必须以字母、下划线或者 开始后续可以跟字母、数字、下划线、 开始后续可以跟字母、数字、下划线、 开始后续可以跟字母、数字、下划线、严格区分大小写不能使用关键字和保留字作为变量名 【关键字if for else switch case break class function】 【保留字int float 】JS本身的命名习惯、风格 * 类 首字母大写 Object Math Array * 组合单词 驼峰命名法 getElementsByClassName forEach getComputedStyle array_filter变量名一定要有意义
引用方式 变量存储数据的容器 let的基本用法 声明变量所声明的变量只在let命令所在的代码块内有效不存在变量提升在相同作用域内不允许重复声明变量暂时性死区 const 声明常量块级作用域不可以重复声明 const对象 const person {}const对象冻结 const person Object.freeze({name:“zhangSan”,age:19})
let 和 const
用let声明变量不会有变量提升用let是不能重复声明变量的用let声明的变量是识别块级作用域的用let声明的变量不会识别window的属性const是用来声明常量的只有一种声明方式就是声明的时候直接赋值常量一般全部大写的
变量的解构赋值
数组的解构赋值 var [a,b,c] [1,2,3]console.log(a) // 1console.log(b) // 2console.log(c) // 3不完全解构 var [a,b] [1,2,3]console.log(a) // 1console.log(b) // 2制定默认值 var [astring] []console.log(a) // stringvar [b,caaa] [bbb]console.log(b) // bbbconsole.log(c) // aaavar [daaa,e] [bbb]console.log(d) // bbbconsole.log(e) // undefinedvar [maaa,nccc] [bbb,undefined]console.log(d) // bbbconsole.log(e) // ccclet const命令 iterator(迭代器)接口 let [a,b,c] new Set([a,b,c])console.log(a) // aconsole.log(b) // bconsole.log(c) // c对象的解构赋值 可以不用按照顺序 let {name,age,id} {id:007,name:zhangsan,age:18}console.log(name) // zhangsanconsole.log(age) // 18console.log(id) // 007变量名和属性名不一致 let {person_name,person_age,person_id} {id:007,name:zhangsan,age:18}console.log(person_name) // undefinedconsole.log(person_age) // undefinedconsole.log(person_id) // undefined解决方法 let {name:person_name,age:person_age,id:person_id} {id:007,name:zhangsan,age:18}console.log(person_name) // zhangsanconsole.log(person_age) // 18console.log(person_id) // 007指定默认值 字符串的解构赋值函数参数的解构赋值
JavaScript 数据类型
初始类型
数值 number 1 -1 1.5 2e3科学计数法0x11(0x十六进制) 0o11(八进制) 0b11(二进制)字符串 string “asd” ‘asd’ asd[母版字符串 document.write(li${i}/li); //反引号用法]注意嵌套问题undefined布尔值 boolean 真true 假falsenull 空 一个占位符 一般释放对象的引用Symbol ES6里新增的类型用来表示一个唯一值
引用类型
对象 Object 数组、函数
为什么要分成这两种类型
* 内存当中保存方式的不同 初始类型保存在栈区引用类型保存在堆区在栈区只保存一个地址
* 初始类型传值引用类型传地址undefined null 区别
undefined 一个特殊值 在js中 所有我们期望能得到一个值但是得不到的情况下js就会把这个值赋值为undefinednull 表示空值是一个占位符 一般用它来清空对象解除对象的引用关系nullundefined true获取变量的数据类型 typeof number string boolean undefined object function symbol
JavaScript 运算符
算术运算符 - * / %(取余) – **(幂运算) val 先赋值后自加 val 先自加后赋值 除了以外的其它运算符在使用的时候会隐式将运算符两端的运算元转化为数值类型如果转化不了就得到一个NaNNot a Number如果在 两端有一端是字符串那么结果就是两端拼接起来的字符串
关系运算符比较 ! ! 运算结果一定是一个布尔值一个字符串和一个数值进行比较 隐式的将字符串转化为数值进行比较如果转换不了结果就是false 在比较大小的时候是不会进行类型转换的两个字符串进行比较 会从左往右依次按照当前对位字符的Unicode编码进行比较如果能够比较出大小就停止
赋值运算符 - * / % numnum10; num10;
逻辑运算符 (与并且) ||(或或者) !(非除了) 布尔值或者能够得到布尔值的表达式 同真则为真 [运算时两个都为真取第二个值]|| 有真则为真 [运算时两个都为真取第一个值] 取反 [运算结果仍旧为布尔值] 其他驱动类型在进行运算的时候会先转换为布尔值然后再做运算 false: 0 NaN “” undefined null false六个假值 与运算 全都为真值运算结果为最后一个值只要有假值运算结果为第一个假值 或运算 || 全都为假值运算结果为最后一个假值只要有真值运算结果为第一个真值 非运算 假值取反得到true真值取反得到false 一元运算符 运算元|运算元素|操作数 一元运算符 – 正 -负 typeof new delete 数据类型typeof结果数值number字符串string布尔值booleanundefinedundefinednullobjectsymbolsymbol对象object
三元运算符 三元运算表达式 表达式1表达式2:表达式3 所有可以被求值或者本身就是一个值的代码结构 1 11 105 10||5 根据表达式1的真假决定最终整体表达式的值如果是真最终为表达式2的值如果为假就是表达式3的值 特殊运算符
() 算数优先级调用函数 分割符 ,
扩展运算符 …(运算符) 对于数组进行运算。将数组内容变成序列化的语句结构 [1,2,3] 1,2,3 fn(1,2,3) [2,1,1] 流程控制
break / continuewhile(){} / do()while()
解构赋值 ES6
对于数组内容进行解构
let [a,b,c] [1,2,3];let [a,b,c,d] [1,2,3]; d undefined;let [a,b,c] [1,2,3,4]; 4会被忽略掉let [a,b,…c] [1,2,3,4]; a1;b2;c[3,4]; 这里的…叫做剩余运算符用法 值交换 [a,b] [b,a];函数参数 解构传参 function fn([a,b]){} fn([1,2]);函数返回值 解构接收返回值 function fn(){ return [1,2,3]} let [r1,r2,r3] fn();
解构对象
let {a,b,c} {a:1,b:2,c:3};let {a} {a:1,b:2,c:3};let {a,b,c,d} {a:1,b:2,c:3};let {a:b} {a:1}; b 1; a没被定义
对象
可以用一个变量直接替换属性名和属性值方法 fn:function(){} fn(){}
函数
创建一个函数
function fn(){}匿名函数 var fn function(){}setInterval(function(){},1000)div.οnclickfunction(){}{name:“zhangsan”,fn:function(){}}[function(){},function(){}] new Function();
函数的调用
fn() obj.fn(); 函数()通过事件触发自调用 (function(){})()
函数的参数
形参和实参参数默认值处理 3种方式arguments 用来保存所有实参信息的对象 arguments.length arguments[0]模拟函数重载 是可以依靠于arguments对象实现 【根据函数个数类型的不同写不同的函数体】return 之后是什么 就表示当前函数的运算结果是什么return 之后的其它代码都不再执行
数据类型 Symbol 初始类型中的一种表示的唯一值 必须Symbol() 才能得到Symbol值typeof 的结果 Symbol 字符串 number string undefined boolean object function symbol Symbol()函数可以有参数 参数的作用只在于在控制台便于区分Symbol可以作为对象的属性使用必须放到方括号中可以实现属性的私有化Symbol可以用于函数的参数解耦耦合
作用域
全局作用域局部作用域块级作用域作用域链预解析顺序
对象
js本身就是基于对象 数组 函数 日期 正则…内置功能都是通过对象实现的bom和dom的使用方式也都是考对象实现的。 定义 属性的无序集合体细分属性和方法面向对象- 是编写程序的思路或者方式 - 以创建一个对象的方式实现程序的编写。类 具有相同或者相似属性的对象的抽象描述class Human{} Human 就是一个类 new Human() 就可以得到一个对象在ES6之前是没有class这种定义方式的 只能通过构造函数function Human(){}实现类的效果 对象操作 创建一个对象 字面量方式实例化一个类Object.create() 对象属性的定义和添加 无论是定义这个对象或者是类的时候还是得到这个对象之后都可以添加属性。 属性的访问 obj.name let arr “name” obj[arr] 删除对象的属性 delete obj.name 遍历一个对象 for(let i in obj); objnull; 原型、继承 继承 ES6之前 基于prototype实现call/apply实现 ES6之后 class Student extends Human{} 原型链 arr.push(); this如果在构造函数中表示的就是当前构造函数要实例化的对象 this如果通过call或者apply来调用当前函数当前函数的this就是通过call/apply传入的参数 Set 特殊的数组 保存不重复的值 // 去重let arr [1,1,2,2,3,3,4,4,5,6,7,8,9];let newArr [...new Set(arr)];console.log(newArr);new Set(); add(); 添加 返回值还是set对象delete(); 删除 返回值就是是否删除对象 布尔值has(); 判断 返回值是否包含某个值 布尔值forEach() 遍历 回调函数中的参数是set结构中的每一个值 有值无键clear(); 清除
Map 特殊的对象 可以将任意的数据类型设置为属性名键 new Map(); set(); 添加 返回值还是map对象delete(); 删除 返回值是否删除成功has(); 判断 返回值是否包含某个值forEach(); 遍历 回调函数中的参数是set结构中的每一个值 有值有键clear(); 清除
Iterator 和 for of 结构 遍历器接口 js统一提供进行数据遍历的方式 数组 字符串 类数组argument Map SRT NodeList都被默认部署了Iterator接口Symbol.iterator 是一个函数 会返回一个遍历器对象 遍历器对象当中有一个方法next();next方法调用之后会返回一个对象对象当中包含两个值 ,当前遍历的值,当前遍历的状态只要对象有iterator的接口就可以使用for…of进行遍历
