JavaScript入门

JavaScript 属于脚本语言，通常在浏览器上解释执行。 通常用于可视化和交互软件。

JavaScript是一种“动态类型语言”，这意味着不同于其他一些语言(如C、JAVA)， 您不需要指定变量将包含什么数据类型.

变量（Variable）

变量 是存储数据的容器。要声明一个变量，先输入关键字 let 或 var，然后输入合适的名称

let myVariable;
var avar;

var的作用域被规定为一个函数作用域，而let则被规定为块作用域，块作用域要比函数作用域小一些， 但是如果两者既没在函数中，也没在块作用域中定义，那么两者都属于全局作用域。

变量存储值的类型有字符串、数字、布尔值、数组及对象。

  • String 字符串（一串文本）：字符串的值必须用引号（单双均可，必须成对）扩起来。例如

    let myVariable = 'hello';

  • Number 数字：无需引号。

    let myVariable = 10;

  • Boolean 布尔值（真/假）： true/false 是 JavaScript 里的特殊关键字，无需引号。 例如

    let myVariable = true;

  • undefined 未定义的，例如变量声明了但未赋值。

    let myVariable;

  • null 特指对象的值未设置。在布尔运算中被认为是false。

  • Array 数组：用于在单一引用中存储多个值的结构。

    let myVar = [1, 'hello', 'world', 10];

数组元素引用方法： myVariable[0], myVariable[1]

  • Object 对象：JavaScript 里一切皆对象，一切皆可储存在变量里。

    let myVariable = document.querySelector(‘h1’);

现在推荐都使用let来声明变量, 因为它限制较为严格，对于重复定义变量，会立即出错。

查看变量类型 typeof myVariable

变量也可以隐式声明，例如直接赋值

a = 10

常量

通过 const 定义的变量与 let 变量类似，但不能重新赋值, 可以称为常量。

基本代码规范

  • 赋值符号两边留一个空格

  • 每行结束添加一个分号

    let aa = 1;

运算符

  • 等于， ===, 测试两个值是否相等，并返回一个 true/false （布尔）值。

  • 不等于 “!==”, 和等于运算符相反，测试两个值是否不相等，并返回一个 true/false （布尔）值。

在代码中使用==和!=来判断相等和不相等，也是JavaScript中的有效运算符，但它们与===/!==不同， 前者测试值是否相同， 但是数据类型可能不同，而后者的严格版本测试值和数据类型是否相同。

例如 ::
var a=”123”

var b=123 c = (a==b) d = (a===b)

  • instanceof 是否是对象的实例。

逻辑运算符

逻辑运算符共有三个， 分别为”&&”、”||”和 “!”。

  • “&&”, 逻辑与, 如果第一个为真，则表达式值为第二个参数， 否则为第一个参数值。

  • “||”, 逻辑或, 如果第一个为假，则表达式值为第一个参数，否则为第二个参数值。

  • “!”, 逻辑非， 取反。

示例代码

let a = 3 && 4
let b = 0 || 3
let c = !b

类型转换

  • Number函数， 类型转换为数字。

字符串

可以选择单引号或双引号来包裹字符串。

Number函数用来将字符串转换为数字类型

let myString = '12345';
let mm = Number(myString);
typeof mm;

另一方面，每个数字都有一个名为 toString() 的方法，它将把它转换成等价的字符串

let myNum = 12345;
let ss = myNum.toString();
typeof ss;

获得字符串的长度, 使用 length 属性. 输入以下的两行代码

let s1 = 'hello world';
s1.length;

取子字符串，使用slice方法，并传递上下索引

let s1 = 'hello world';
s1.slice(3);     //从3到结尾
    s1.slice(3,5);   //从3到5
    s1.slice(-3,-1); //从-3到-1

  • charAt() 访问字符串的指定位置

    let str = “Hello OpenWrt” str.charAt(6)

  • indexOf方法查询子字符串首次出现的位置， 返回-1, 表示没有此字符串。 可以指定查找的起始位置

    let str = “Hello Beijing” str.indexOf(“Bei”) str.indexOf(“Bei”, 7)

  • 替换子字符串， replace方法，并返回替换后的字符串。

  • split() 字符串分割，返回数组。传递一个分割字符sep。

  • search() 查找字符串的返回索引，找不见返回-1

数组

数组是一个包含了多个值的对象, 数组元素可以为任意类型，有一个length属性获取数组长度。

var arr = [1, 3, 5]; var arr2 = []; var arr3 = new Array(); var arr4 = new Array(1,2,3,4); var arr5 = new Array(10); //长度为10的空数组。 var arr6 = [1,2,3,,,10]; //数组长度6

arr[10] = “hello”; //长度为11， 前面填undefiled

数组相关方法：

  • push() 在末尾增加元素，增加一个或多个，并返回数组元素个数。

  • pop() 弹出最后一个元素并返回。

  • shift() 弹出第一个元素并返回。

  • unshift() 在数组最前面添加元素，并返回元素个数。

  • reverse() 原地逆转数组元素的顺序。

  • slice() 通过删除或替换现有元素或者原地添加新的元素来修改数组, 并以数组形式返回被修改的内容。此方法会改变原数组。

通常用于在中间添加元素

原型如下

 array.splice(start[, deleteCount[, item1[, item2[, ...]]]])

- start 起始位置, 可以取负值，表示length+start位置，例如-1表示倒数最后一个位置。
- deleteCount 删除的个数。
- item1 ... 添加的部分。

  • sort() 数组进行排序，默认正序。默认排序顺序是在将元素转换为字符串，然后比较它们的UTF-16代码 单元值序列时构建的 可以有一个参数是比较函数。

    arr = [1, 10, 20, 5, 9, 0] function compareFn(a, b){

    if(a>b) return 1;

    if(a==b) return 0; return -1;

    } arr.sort(compareFn);

  • toString() 方法, 不需要参数，转化为字符串。

  • concat() 连接两个数组，并返回。不改变原有数组。

  • slice() 截取指定范围数组并返回，不改变原数组。 begin,表示开始位置，end表示结束位置。

    arr.slice([begin[, end]])

  • join() 数组转化为字符串，需要一个参数

    let myNewString = myArray.join(',');

数组去重

利用哈希

循环

  • while循环

  • do while循环

  • for循环

  • for in循环，通常用于遍历数组中的所有数组元素，或者遍历对象的所有属性。

for 变量  in 对象 {
   执行语句块
}

遍历为数组的下标。

函数

函数定义以function开头，函数参数类型不需要定义，没有返回值定义。示例如下

function multiply(num1, num2) {
  let result = num1 * num2;
  return result;
}

匿名函数，通常赋值给一个变量

var f = function (参数列表){
    }
::

var f = new Function (参数列表)( 函数执行体 )

函数调用

  • 直接调用，函数默认都为windows对象下。采用window.fn(…)形式或fn(…)调用。

  • 以call方式调用，形如： fn.call(window,…)调用，形参从第二个开始，

  • 以apply方法调用，形如: fn.apply(window,[…])调用, 参数为一个数组。

如果方法想连续调用，那方法返回this。

return this;

call

apply

立即执行函数

预编译

js会进行预编译， 系统会把函数声明提升到逻辑的最前面。即函数定义可以放在函数调用的代码块下面。

    hello()
function hello(){
       console.log("hello world")
    }

事件

事件能为网页添加真实的交互能力。它可以捕捉浏览器操作并运行一些代码做为响应。 最简单的事件是 点击事件，鼠标的点击操作会触发该事件。 可尝试将下面的代码输入到控制台， 然后点击页面的任意位置

document.querySelector('html').onclick = function() {
        alert('别戳我，我怕疼。');
}

将事件与元素绑定有许多方法。在这里选用了 <html> 元素，把一个匿名函数（就是没有命名的函数， 这里的匿名函数包含单击鼠标时要运行的代码）赋值给了 html 的 onclick 属性。

包装类

var a = new Number(123); var str = new String(“hello”);

var num = 10; num.len = 20; console.log(num.len);

var str = “abcd” str.length = 2 console.log(str)

Date对象

获取时间

d = new Data()

getDate() //返回一个月的某一天，（1-31）
    getMonth() //返回月份 (0-11), 实际情况要加一。
    getFullYear() // 返回4位的年份
    getDay()      // 返回星期几， 0表示星期日，1表示星期一，依次类推。

构造一个日期:

setDate()      //设置天
setFullYear()  //设置年
setMonth()    //设置月

Math对象

  • abs(x) 返回绝对值

  • floor(x) 对数进行下舍入

  • round(x) 四舍五入到最近的整数。

  • round() 返回随机数 （0-1)

DOM表单

表单，form标签

  • action 返回该表单的提交地址

  • reset() 重置表单

  • submit() 提交表单。

JSON

var obj = JSON.parse(str); //由JSON字符串转换为JSON对象

var str1 = JSON.stringify(obj); //由obj转换为字符串。

客户端存储

新流派：Web Storage 和 IndexedDB

现代浏览器有比使用 cookies 更简单、更有效的存储客户端数据的 API。

Web Storage API 提供了一种非常简单的语法，用于存储和检索较小的、由名称和相应值组成的数据项。 当您只需要存储一些简单的数据时，比如用户的名字，用户是否登录，屏幕背景使用了什么颜色等等， 这是非常有用的。

IndexedDB API 为浏览器提供了一个完整的数据库系统来存储复杂的数据。这可以用于存储从完整的 用户记录到甚至是复杂的数据类型，如音频或视频文件。

Storage.setItem() 方法允许您在存储中保存一个数据项——它接受两个参数：数据项的名字及其值。试着把它输入到你的JavaScript控制台（如果你愿意的话，可以把它的值改为你自己的名字！）

localStorage.setItem(‘name’,’Chris’); Storage.getItem() 方法接受一个参数——你想要检索的数据项的名称——并返回数据项的值。 现在将这些代码输入到你的JavaScript控制台：

var myName = localStorage.getItem(‘name’); myName 在输入第二行时，您应该会看到 myName变量现在包含name数据项的值。

Storage.removeItem() 方法接受一个参数——你想要删除的数据项的名称——并从 web storage 中 删除该数据项。在您的JavaScript控制台中输入以下几行：

localStorage.removeItem(‘name’); var myName = localStorage.getItem(‘name’);

为每个域名分离储存 每个域都有一个单独的数据存储区(每个单独的网址都在浏览器中加载). 你会看到， 如果你加载两个网站（例如google.com和amazon.com）并尝试将某个项目存储在一个网站上， 该数据项将无法从另一个网站获取。

存储复杂数据 — IndexedDB

get

post

echart

百度前端框架。

JS面试题

1, var和let的区别 2, 匿名函数？ 3, 变量类型有几种， 变量的作用域？ 4, 闭包

常见问题

1，出现from origin ‘null’ has been blocked by CORS policy: No ‘Access-Control-Allow-Origin’ header is present on the requested resource

答: 这是响应头解决跨域请求问题，通常浏览器不允许跨域请求。

解决方法: 如果是go语言，在服务端将HTTP相应头上加上以下信息

resp.Header().Set("Access-Control-Allow-Origin", "*")