《JavaScript 知识整理笔记》

---

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')

效果图展示：