目录
JavaScript 简介
为网站提供动态交互特性,eg: 轮播图、
- 前端三层:HTML(结构层)、样式层(CSS)、行为层(JavaScript)
- alert("")
- 控制台
- 多行注释:/* */;单行注释://
- 0123(0O、0o代表八进制123-> 十进制83);0x 十六进制
- 数字(在控制台字体显示蓝色)、字符串(在控制台字体显示黑色)、转义字符
变量
- var a; # 声明变量;a = 10 # 赋值
- 变量需要先声明才能使用
- 变量声明提升
- 变量的类型:基本数据类型:number、string、undefined、boolean、null 引用类型:object、function
- typeof 关键字 # 查看变量类型
JavaScript 语句与声明之 let : let 语句声明一个块作用域的词法环境的本地变量,并且可选的将其初始化为一个值; 在程序和方法的最顶端,let不像 var 一样,let不会在全局对象里新建一个属性
let test = "test"
console.log(this.test) // excepted output: undefined
var声明的变量只能是全局或者整个函数块, var声明的变量的作用域是整个封闭函数
与通过 var 声明的有初始化值 undefined 的变量( 变量声明提升 )不同,通过 let 声明的变量直到它们的定义被执行时才初始化。在变量初始化前访问该变量会导致 ReferenceError。该变量处在一个自块顶部到初始化处理的“暂存死区”中
function do_something() {
console.log(bar); // undefined
console.log(foo); // ReferenceError
var bar = 1;
let foo = 2;
}
var a = 1;
var b = 2;
if (a === 1) {
var a = 11; // the scope is global
let b = 22; // the scope is inside the if-block
console.log(a); // 11
console.log(b); // 22
}
console.log(a); // 11
console.log(b); // 2
变量的类型
1)number 、string、boolean
number 类型
- 当 number 类型的数字很大时,显示无穷大(Infinity); [-Infinity, Infinity]
- var a = 1/0 — Infinity 无穷大
- var b = 0/0 — NaN:not a number
prompt(“message”, 默认值) # 输入弹框
parseInt: 把字符串转换成整数(纯数字字符串、数字开头的字符串,截取整数部分)转换失败返回NaN; parseFloat
var a = ‘19’
var b = a - 0 # a 会被隐式转换成 19
Boolean 类型
console.log(Boolean(document))
// expect output : true- new Boolean() 默认返回 false,eg: 当 传入 null、’’、0、false、undefined、NaN 时返回false, 其他返回 true
String 类型
字符串
常用属性
常用方法
replace()
替换字符串:
str.replace(regexp|substr, newSubStr|function)
/**
替换 : String.prototype.replace()方法返回一个由替换值(replacement)替换部分或所有的模式(pattern)匹配项后的新字符串。模式可以是一个字符串或者一个正则表达式,替换值可以是一个字符串或者一个每次匹配都要调用的回调函数。如果pattern是字符串,则仅替换第一个匹配项; 原字符串不会改变
*/
const oldStr = "yk-ddm"
console.log(oldStr.replace("yk", "zzq"))
const regex = /yk/
console.log(oldStr.replace(regex, "zzq"))
查看测试结果
Array 类型
- 数组
常用属性
length
常用方法
forEach((item, index) => {…})
var arr = [1, 2, 3]
console.log(arr)
Array.prototype.forEach.call(arr, (item, index) => {
console.log(index + " --- " + item)
})
效果展示:
forEach 里 使用 return 是无效的,但不报错;for … in 中使用 return 会报语法错误
filter()
todo
-
查看测试结果
-
map()
var arr = [1, 2, 3]
/**
* Array.map(callback) 遍历数组元素
* 返回值:返回一个新数组
* 该方法可以用来对当前数组进行增删改查, 并不改变原有数组,返回一个新数组
*/
var arrOne = arr.map((value) =>
{
console.log(value)
return value
})
console.log(arrOne)
// output:
1
2
3
[1, 2, 3]
// 使用 JavaScript 实现 Array.map() 函数的功能
Array.prototype.map = function (undefined)
{
var index,
newArr = []
for (index in this)
{
newArr[index] = undefined(this[index])
}
return newArr
}
arrOne = arr.map((value) => { return value * 3 })
console.log(arrOne, arr)
-
查看测试结果
-
join()
/**
arr.join(separator) : 将数组中的元素以分隔符依次输出得到字符串
返回值:该字符串
separator 分隔符
*/
var arr = [a, b, c, d, e, f, g],
result = arr.join('')
console.log(result) // expect output: 'abcdefg'
查看测试结果
ArrayBuffer放0和1组成的二进制数据
Object 类型
- 对象
常用属性
常用方法
hasOwnProperty()
/**
obj.hasOwnProperty() : 判断传入的值是否是obj自己的属性
返回值:Boolean 类型 true/false
默认 返回 false
*/
var obj = {
name: 'zs',
age: 18
}
obj.__proto__.address = '湖北省'
console.log(obj.hasOwnProperty('name'), obj.hasOwnProperty('test'), obj.hasOwnProperty('address')) // expect output: true false false
查看测试结果
isPrototypeOf
/**
isPrototypeOf:
*/
查看测试结果
DOM
- 获取元素:document.getElementById(id);
- 修改属性:直接修改;通过设置类名实现;通过setAttribute实现
- 通过直接获取的是对象,而getAttribute() 获取的是一个字符串
js 操作运算符
逻辑运算符
- 与&&、或|| 、非 !
&&
var flag = true && false
console.log( flag ) // expect output: false
// 模拟 && 的原生js 实现其功能
function imitateLogicalAnd(obj) {
// obj 可能是 0、""、null、undefined
// 0 转换成 Boolean类型 是 false
if ( obj ) {
// 设置默认值
obj = 'imitateLogicalAnd test'
}
return obj
}
var obj = ''
var target = obj && "imitateLogicalAnd test"
console.log( imitateLogicalAnd( obj )) // expect output:''
console.log( target ) // expect output: ''
查看测试结果
||
/*
当 || 运算符左边的表达式为false , 结果返回 || 运算符右边的表达式的结果,否则返回|| 运算符的左边参数
*/
var flag = 'test' || "hello"
console.log( flag ) // test
// 模拟 || 的原生js 实现其功能
function imitateLogicalOr(obj) {
// obj 可能是 0、""、null、undefined
// 0 转换成 Boolean类型 是 false
if ( obj ) {
return obj
} else {
// 设置默认值
obj = 'imitateLogicalOr test'
}
return obj
}
// ======================= 运行测试
// var obj = 'test'
var obj = ''
var target = obj || "imitateLogicalOr test"
console.log( imitateLogicalOr( obj ))
console.log( target )
!
var flag = !'test'
console.log( flag ) // false
// 模拟 ! 的原生js 实现其功能
function imitateLogicalNon(obj) {
// obj 可能是 0、""、null、undefined
// 0 转换成 Boolean类型 是 false
if ( obj ) {
return false
} else {
return true
}
}
// ======================= 运行测试
// var obj = 'test'
var obj = ''
var target = !obj
console.log( imitateLogicalNon( obj ))
console.log( target )
函数的使用
function test() {
return []
}
// 等价于:
() => [] // 箭头函数的使用
Uncaught SyntaxError: Illegal return statement
的实现
逻辑代码如下:
// Uncaught SyntaxError: Illegal return statement
function throwSyntaxError (msg) {
throw new SyntaxError(msg)
}
throwSyntaxError('Illegal return statement')
效果图展示: