近期目标
2017-03-30 10:39:51 0 举报
AI智能生成
近期目标:在接下来的一个月内,我计划专注于提升我的专业技能和知识。我将通过参加在线课程和阅读相关书籍来实现这一目标。此外,我还计划每周至少花一个小时进行自我反思,以便更好地理解我在学习过程中的优点和需要改进的地方。我也将设定一些具体的、可衡量的目标,以便我可以跟踪我的进度。最后,我计划寻找一个导师或者加入一个专业网络,以便我可以从他人的经验中学习并获得反馈。我相信,通过这些努力,我将能够在我的专业领域中取得显著的进步。
作者其他创作
大纲/内容
npm
网址
docs.npmjs.com
是什么
npm是一个node包管理和分发工具,已经成为了非官方的发布node模块(包)的标准。有了npm,可以很快的找到特定服务要使用的包,进行下载、安装以及管理已经安装的包。
常用指令
清除
$ clear
查看当前目录下已安装的node包
$ npm list
查看帮助
$ npm help
访问npm的json文件
$ npm help json
自动打开一个package.json网页
查看npm使用的所有文件夹
$ npm help folders
发布一个npm包的时候,需要检验某个包名是否已存在
$ npm search packageName
会引导你创建一个package.json文件,包括名称、版本、作者这些信息等
$ npm init
查看当前包的安装路径
$ npm root
查看全局的包的安装路径
$ npm root -g
查看npm安装的版本
$npm -v
将安装包信息加入到生产阶段的依赖
npm install gulp --save-dev 或 npm install gulp -D
查看安装包的安装路径
$ npm root [-g]
npm config 管理npm的配置路径
npm config set <key> <value> [-g|--global]
npm config get <key>
npm config delete <key>
npm config list
npm config edit
npm get <key>
npm set <key> <value> [-g|--global]
npm config get <key>
npm config delete <key>
npm config list
npm config edit
npm get <key>
npm set <key> <value> [-g|--global]
整理
安装node包
$ npm install
将包安装到全局环境中:
$ npm install -g
安装的同时,将信息写入package.json中:
$ npm install –save
移除全局环境中的包:
$ npm uninstall -g
移除指定目录的套件:
$ cd /path/to/the/project
$ npm uninstall
搜寻包:
$ npm search
列出全局的包:
$ npm ls -g
列出全局的包的详细信息:
$ npm ls -gl
更新node模块:
$ npm update -g
清理缓存:
$ npm cache clean
会引导你创建一个package.json文件,包括名称、版本、作者这些信息等:
$ npm init
查看当前目录下已安装的node包:
$ npm list
查看帮助命令:
$ npm help
查看当前包的安装路径:
$ npm root
查看全局的包的安装路径:
$ npm root -g
查看npm安装的版本:
$ npm -v
$ npm install
将包安装到全局环境中:
$ npm install -g
安装的同时,将信息写入package.json中:
$ npm install –save
移除全局环境中的包:
$ npm uninstall -g
移除指定目录的套件:
$ cd /path/to/the/project
$ npm uninstall
搜寻包:
$ npm search
列出全局的包:
$ npm ls -g
列出全局的包的详细信息:
$ npm ls -gl
更新node模块:
$ npm update -g
清理缓存:
$ npm cache clean
会引导你创建一个package.json文件,包括名称、版本、作者这些信息等:
$ npm init
查看当前目录下已安装的node包:
$ npm list
查看帮助命令:
$ npm help
查看当前包的安装路径:
$ npm root
查看全局的包的安装路径:
$ npm root -g
查看npm安装的版本:
$ npm -v
安装node和下载npm
在Git Bush here 输入命令行
运行node
$ node -v
运行npm
$ npm
npm安装
$ sudo npm install npm -g
有问题
修复npm权限
在Git Bush here 输入命令行
xxx
$ ls -l
xxx
$ whoami
xxx
$ sudo chown your_user file.txt
$ ls -l
XXX
$ npm config get prefix
清除
$ clear
在本地安装npm包
输入命令行
XXX
$ npm install grunt-cli -g
XXXX
$ npm install lodash
XXX
$ ls
XXX
$ ls node_modules/
子主题
$ vi app.js
子主题
$ node app.js
子主题
$ vi package.json
less
less是一门css预处理语言,它扩充了css语言,增加了诸如变量、混合、函数等功能
less网站:less.bootcss.com
JS引入less.min.js
在link标签中rel属性的值为:stylesheet/less href属性的值为:xxx.less
less语法学习
less支持所有的css语法
less支持多行和单行注释,单行注释不会编译到css文件
css只支持多行注释
less有变量概念
声明变量
@变量名:值;
声明一个变量可以在复用
使用变量
选择器{样式:@变量名;}
less支持边变量的混入
选择器1{样式;}
选择器2{选择器1;样式;}
会被译为
选择器1{样式1}
选择器1 选择器2{样式2}
less可执行变量的操作
加/减/乘/除/取余
Less为样式提供了几十个可用的函数
ceil( )
floor( )
percentage( 5/10 ) // 50%
round( )
lighten(@c, 20%) 颜色变淡指定的百分比
darken(@c, 30%) 颜色变暗指定的百分比
....
floor( )
percentage( 5/10 ) // 50%
round( )
lighten(@c, 20%) 颜色变淡指定的百分比
darken(@c, 30%) 颜色变暗指定的百分比
....
Less支持文件包含指令
Less也提供了@import指令,可用于包含其它的Less文件,推荐使用!—— Less的文件包含是在服务器端执行的文件拼合,客户端的一次请求就可以获得所有样式
通过修改Bootstrap的Less源文件实现定制
定制目标:
(1)Bootstrap瘦身,删除不必要的样式
注释掉bootstrap.less中不需要的@import即可
(2)修改Boostrap默认的样式值,实现粗粒度定制
修改variables.less中变量的值即可
(3)修改Boostrap组件的细节样式,实现细粒度定制
修改特定的组件对应的.less文件,如dropdown.less
输入命令行
安装
$ npm install -g less
调用less编译器
$ lessc styles.less
输出重定向到一个文件
$ lessc styles.less > styles.css
git知识点1
学习网站:www.liaoxuefeng.com
分布式版本控制系统
git安装后名,输入命令行
$ git config --global user.name "your name"
$ git config --global user.email "xxx@xxx.com"
创建仓库(repository)
安装git
$ git
创建仓库的时候,需选择一个合适的地方,创建一个空目录
$ mkdir learngit
$ cd learngit
$pwd
会显示所在的路径
通过git init命令把这个目录变成git可以管理的仓库(初始化一个git仓库)
$ git init
瞬间将空的一个仓库建好,这是git跟踪管理仓库的,不要乱改
如果你没有看到仓库,那么仓库的隐藏的,可以用指令看见
$ ls -ah
把文件添加到仓库
在learngit目录下新建一个readme.txt文件
添加自定义内容
注意:windows自带的记事本运行不出来
添加文佳到git仓库,分两步
$ git add filel.txt
使用这个命令,告诉git,把文件添加到仓库
$ git commit -m "xxx"
-m输入的是本次提交的说明
使用这个命令告诉git,把文件提交到仓库
修改文件
随时掌握仓库的状态
$ git status
查看修改内容
$ git diff
版本回退
HEAD指向的版本就是当前版本,git 允许在版本的历史中穿梭
$ git reset --hard commit_id
穿梭前,用 $ git log 查看提交历史,以便确认回退到哪个版本
要返回未来,用git reflog查看命令历史
图片解释
工作区:learngit文件夹
版本库:Respository
工作区有一个隐藏目录.git,就是版本库
版本库最重要的就是stage暂存区
git自动创建第一个分支master
以及指向master的一个指针HEAD
git add命令实际上就是把要提交的所有修改放到暂存区(stage)
执行 git commit就可以一次性把暂存区的所有修改提交到分支master
一旦提交后,工作区就是干净的
丢掉工作区的修改
$ git checkout --files.txt
两种情况
1.修改后还没有被放入暂存区
2.已经加入到暂存区,又做了修改
用$ git reset HEAD file 也可以将暂存区的修改撤销掉,重新放回工作区
适用场景:当你不但改乱了工作区某个文件的内容,还添加了暂存区时,用这个命令
查看工作区文档内容
$ cat files.txt
删除文件
$ git rm files.txt
工作区和版本库就不一致了,再用git commit就可以了
误删时一键还原
$ git checkout -- files.txt
git知识点2
远程仓库
注册github,就可以免费获得git远程仓库
由于本地的git仓库和 github仓库之间的传输是通过SSH加密的,所以需要设置
第1步
创建SSH Key
在用户主目录下,看看有没有.ssh目录,如果有,再看看这个目录下有没有id_rsa和id_rsa.pub这两个文件,如果已经有了,可直接跳到下一步
如果没有,打开Shell(Windows下打开Git Bash),创建SSH Key:
$ ssh-keygen -t rsa -C "youremail@example.com"
如果一切顺利的话,可以在用户主目录里找到.ssh目录,里面有id_rsa和id_rsa.pub两个文件,这两个就是SSH Key的秘钥对,id_rsa是私钥,不能泄露出去,id_rsa.pub是公钥,可以放心地告诉任何人。
第2步
登陆GitHub,打开“Account settings”,“SSH Keys”页面:
然后,点“Add SSH Key”,填上任意Title,在Key文本框里粘贴id_rsa.pub文件的内容:
点“Add Key”,你就应该看到已经添加的Key:
为什么GitHub需要SSH Key呢?因为GitHub需要识别出你推送的提交确实是你推送的,而不是别人冒充的,而Git支持SSH协议,所以,GitHub只要知道了你的公钥,就可以确认只有你自己才能推送。
添加远程库
现在的情景是,你已经在本地创建了一个Git仓库后,又想在GitHub创建一个Git仓库,并且让这两个仓库进行远程同步,这样,GitHub上的仓库既可以作为备份,又可以让其他人通过该仓库来协作,真是一举多得。
首先,登陆GitHub,然后,在右上角找到“Create a new repo”按钮,创建一个新的仓库:
在Repository name填入learngit,其他保持默认设置,点击“Create repository”按钮,就成功地创建了一个新的Git仓库:
目前,在GitHub上的这个learngit仓库还是空的,GitHub告诉我们,可以从这个仓库克隆出新的仓库,也可以把一个已有的本地仓库与之关联,然后,把本地仓库的内容推送到GitHub仓库。
现在,我们根据GitHub的提示,在本地的learngit仓库下运行命令:
现在,我们根据GitHub的提示,在本地的learngit仓库下运行命令:
$ git remote add origin git@github.com:michaelliao/learngit.git
请千万注意,把上面的michaelliao替换成你自己的GitHub账户名,否则,你在本地关联的就是我的远程库
把本地的所有内容推送到远程库上
$ git push -u origin master
把本地库的内容推送到远程,用git push命令,实际上是把当前分支master推送到远程。
由于远程库是空的,我们第一次推送master分支时,加上了-u参数,Git不但会把本地的master分支内容推送的远程新的master分支,还会把本地的master分支和远程的master分支关联起来,在以后的推送或者拉取时就可以简化命令。
推送成功后,可以立刻在GitHub页面中看到远程库的内容已经和本地一模一样:
由于远程库是空的,我们第一次推送master分支时,加上了-u参数,Git不但会把本地的master分支内容推送的远程新的master分支,还会把本地的master分支和远程的master分支关联起来,在以后的推送或者拉取时就可以简化命令。
推送成功后,可以立刻在GitHub页面中看到远程库的内容已经和本地一模一样:
以后再提交不用加-u
从远程克隆
要克隆一个仓库,首先必须知道仓库的地址,然后使用git clone命令克隆。
Git支持多种协议,包括https,但通过ssh支持的原生git协议速度最快。
Git支持多种协议,包括https,但通过ssh支持的原生git协议速度最快。
git最终整理
我们先看对git操作的简单分类,如下——
远程仓库类:git clone/remote/pull/push/rebase/fetch
分支类(包括tag):git branch/tag/checkout/stash
信息查阅:git status/log/diff
本地常规操作:git add/commit/rm/merge/reset
远程仓库类:git clone/remote/pull/push/rebase/fetch
分支类(包括tag):git branch/tag/checkout/stash
信息查阅:git status/log/diff
本地常规操作:git add/commit/rm/merge/reset
按照如下四个步骤上传到名为:flexSupplement的仓库中 git init (初始化本地仓库)
git add . (将本地所有文件加到仓库里)
git commit -m "message" (设置提交信息)
git remote add origin git@github.com:sunningcarryhaha/flexSupplement.git(本地仓库链接远程仓库)
git push -u origin master (push文件到仓库中)
上传成功后是这个效果
作者:carryhug
链接:https://www.zhihu.com/question/24156818/answer/111450498
来源:知乎
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。
git add . (将本地所有文件加到仓库里)
git commit -m "message" (设置提交信息)
git remote add origin git@github.com:sunningcarryhaha/flexSupplement.git(本地仓库链接远程仓库)
git push -u origin master (push文件到仓库中)
上传成功后是这个效果
作者:carryhug
链接:https://www.zhihu.com/question/24156818/answer/111450498
来源:知乎
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。
vueJS框架的学习
是一套构建用户界面的渐进式框架
自底向上增加开发的设计
核心库只关注视图层
安装:$ npm install vue
安装全局 vue-cli
$ npm install --global vue-cli
创建一个基于webpack模板的新项目
$ vue init webpack my-project
安装依赖
$cd my-project
$npm install
$npm run dev
语法
两种绑定方式
{{ }}
<div id="app">
{{ message }}
</div>
{{ message }}
</div>
var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
}
})
el: '#app',
data: {
message: 'Hello Vue!'
}
})
v-
<div id="app-2">
<span v-bind:title="message">
鼠标悬停几秒钟查看此处动态绑定的提示信息!
</span>
</div>
<span v-bind:title="message">
鼠标悬停几秒钟查看此处动态绑定的提示信息!
</span>
</div>
var app2 = new Vue({
el: '#app-2',
data: {
message: '页面加载于 ' + new Date()
}
})
el: '#app-2',
data: {
message: '页面加载于 ' + new Date()
}
})
vuejs的核心:是一个允许采用简洁的模板语法声明式的将数据渲染进DOM
条件与循环
条件
<div id="app-3">
<p v-if="seen">现在你看到我了</p>
</div>
<p v-if="seen">现在你看到我了</p>
</div>
循环
var app3 = new Vue({
el: '#app-3',
data: {
seen: true
}
})
el: '#app-3',
data: {
seen: true
}
})
seen:false
效果就看不到了
常用学习网站
less中文网
http://lesscss.cn/
iView
https://www.iviewui.com/components/upload
效果源代码网站
http://www.swiper.com.cn
axios文档
https://github.com/mzabriskie/axios
ECMAScript6
http://es6.ruanyifeng.com/
vue文件介绍
http://www.tuicool.com/articles/mYVvmyA
ECMAScript6语法
const的作用域与
let命令相同:只在声明所在的块级作用域内有效。 const声明的常量,也与
let一样不可重复声明。 声明变量
ES5 只有两种声明变量的方法:
var命令和function命令 ES6除了添加let和const命令,后面章节还会提到,另外两种声明变量的方法:import命令和class命令。
var命令和
function命令声明的全局变量,依旧是顶层对象的属性; var a=1;
window.a //1
window.a //1
注意:如果在Node的REPL环境,可以写成global.a
或者采用通用方法,写成this.a
或者采用通用方法,写成this.a
let命令、
const命令、class命令声明的全局变量,不属于顶层对象的属性 let b=1;
window.b //underfined
window.b //underfined
在所有环境下,
global都是存在的,都可以从它拿到顶层对象的方法。 // CommonJS的写法
require('system.global/shim')();
// ES6模块的写法
import shim from 'system.global/shim'; shim(); // CommonJS的写法
var global = require('system.global')();
// ES6模块的写法
import getGlobal from 'system.global';
const global = getGlobal(); 解构(为变量赋值)
let [x, y, z] = new Set(['a', 'b', 'c']);
x // "a" let { foo, bar } = { foo: "aaa", bar: "bbb" };
foo // "aaa"
bar // "bbb" var { foo: baz } = { foo: 'aaa', bar: 'bbb' };
baz // "aaa"
let obj = { first: 'hello', last: 'world' };
let { first: f, last: l } = obj;
f // 'hello'
l // 'world' let { foo: baz } = { foo: "aaa", bar: "bbb" };
baz // "aaa"
foo // error: foo is not defined foo是匹配的模式,
baz才是变量。真正被赋值的是变量baz,而不是模式foo。 let foo;
({foo} = {foo: 1}); // 成功
let baz;
({bar: baz} = {bar: 1}); // 成功 let命令下面一行的圆括号是必须的,否则会报错。因为解析器会将起首的大括号,理解成一个代码块,而不是赋值语句。
let obj = {};
let arr = [];
({ foo: obj.prop, bar: arr[0] } = { foo: 123, bar: true });
obj // {prop:123}
arr // [true] 解构(为变量赋值)
1.数组的解构赋值
let [foo, [[bar], baz]] = [1, [[2], 3]];
foo // 1
bar // 2
baz // 3
let [ , , third] = ["foo", "bar", "baz"];
third // "baz"
let [x, , y] = [1, 2, 3];
x // 1
y // 3
let [head, ...tail] = [1, 2, 3, 4];
head // 1
tail // [2, 3, 4]
let [x, y, ...z] = ['a'];
x // "a"
y // undefined
z // [] 2.对象的解构赋值
let obj = {};
let arr = [];
({ foo: obj.prop, bar: arr[0] } = { foo: 123, bar: true });
obj // {prop:123}
arr // [true] 3.字符串的解构赋值
const [a, b, c, d, e] = 'hello';
a // "h"
b // "e"
c // "l"
d // "l"
e // "o" let {length : len} = 'hello';
len // 5 4.数值和布尔值的解构赋值
let {toString: s} = 123;
s === Number.prototype.toString // true
let {toString: s} = true;
s === Boolean.prototype.toString // true 解构赋值时,如果等号右边是数值和布尔值,则会先转为对象
解构赋值的规则是,只要等号右边的值不是对象或数组,就先将其转为对象
5.函数参数的解构赋值
function add([x, y]){
return x + y;
}
add([1, 2]); // 3 [[1, 2], [3, 4]].map(([a, b]) => a + b);
// [ 3, 7 ] 注意:可以使用圆括号的情况
[(b)] = [3]; // 正确
({ p: (d) } = {}); // 正确
[(parseInt.prop)] = [3]; // 正确 上面三行语句都可以正确执行,因为首先它们都是赋值语句,而不是声明语句;其次它们的圆括号都不属于模式的一部分。第一行语句中,模式是取数组的第一个成员,跟圆括号无关;第二行语句中,模式是p,而不是d;第三行语句与第一行语句的性质一致。
对unicode码的处理
"\u{20BB7}"
// "𠮷"
"\u{41}\u{42}\u{43}"
// "ABC"
let hello = 123;
hell\u{6F} // 123
'\u{1F680}' === '\uD83D\uDE80'
// true 只要将码点放入大括号,就能正确解读该字符。
codePointAt方法返回的是码点的十进制值,如果想要十六进制的值,可以使用
toString方法转换一下 var s = '𠮷a';
s.codePointAt(0).toString(16) // "20bb7"
s.codePointAt(2).toString(16) // "61" 对正则表达式的处理
const reg = /^[0-9A-Za-z]{6,20}$/;
数值的扩展
1.二进制和八进制的表示法
ES6 提供了二进制和八进制数值的新的写法,分别用前缀
0b(或0B)和0o(或0O)表示。 0b111110111 === 503 // true
0o767 === 503 // true 2.Number.isFinite(),Number.isNaN()
Number.isFinite()用来检查一个数值是否为有限的(finite)。
Number.isFinite(15); // true
Number.isFinite(0.8); // true
Number.isFinite(NaN); // false
Number.isFinite(Infinity); // false
Number.isFinite(-Infinity); // false
Number.isFinite('foo'); // false
Number.isFinite('15'); // false
Number.isFinite(true); // false Number.isNaN()用来检查一个值是否为
NaN Number.isNaN(NaN) // true
Number.isNaN(15) // false
Number.isNaN('15') // false
Number.isNaN(true) // false
Number.isNaN(9/NaN) // true
Number.isNaN('true'/0) // true
Number.isNaN('true'/'true') // true 3.Number.parseInt(),Number.parseFloat()
ES6将全局方法
parseInt()和parseFloat(),移植到Number对象上面,行为完全保持不变。 Number.parseInt('12.34') // 12
Number.parseFloat('123.45#') // 123.45 4.Number.isInteger()
Number.isInteger()用来判断一个值是否为整数。需要注意的是,在JavaScript内部,整数和浮点数是同样的储存方法,所以3和3.0被视为同一个值。
Number.isInteger(25) // true
Number.isInteger(25.0) // true
Number.isInteger(25.1) // false
Number.isInteger("15") // false
Number.isInteger(true) // false 5.Number.EPSILON
引入一个这么小的量的目的,在于为浮点数计算,设置一个误差范围。我们知道浮点数计算是不精确的。
但是如果这个误差能够小于
Number.EPSILON,我们就可以认为得到了正确结果。 Number.EPSILON
// 2.220446049250313e-16
Number.EPSILON.toFixed(20)
// '0.00000000000000022204' 6.安全整数和Number.isSafeInteger()
ES6引入了
Number.MAX_SAFE_INTEGER和Number.MIN_SAFE_INTEGER这两个常量,用来表示这个范围的上下限 Number.MAX_SAFE_INTEGER === Math.pow(2, 53) - 1
// true
Number.MAX_SAFE_INTEGER === 9007199254740991
// true
Number.MIN_SAFE_INTEGER === -Number.MAX_SAFE_INTEGER
// true
Number.MIN_SAFE_INTEGER === -9007199254740991
// true 7.Math对象的扩展
ES6在Math对象上新增了17个与数学相关的方法。所有这些方法都是静态方法,只能在Math对象上调用。
Math.trunc方法用于去除一个数的小数部分,返回整数部分。
Math.trunc(4.1) // 4
Math.trunc(4.9) // 4
Math.trunc(-4.1) // -4
Math.trunc(-4.9) // -4
Math.trunc(-0.1234) // -0 Math.sign方法用来判断一个数到底是正数、负数、还是零。
它会返回五种值。
- 参数为正数,返回+1;
- 参数为负数,返回-1;
- 参数为0,返回0;
- 参数为-0,返回-0;
- 其他值,返回NaN。
Math.sign(-5) // -1
Math.sign(5) // +1
Math.sign(0) // +0
Math.sign(-0) // -0
Math.sign(NaN) // NaN
Math.sign('foo'); // NaN
Math.sign(); // NaN Math.cbrt方法用于计算一个数的立方根。
Math.cbrt(-1) // -1
Math.cbrt(0) // 0
Math.cbrt(1) // 1
Math.cbrt(2) // 1.2599210498948734 Math.clz32方法返回一个数的32位无符号整数形式有多少个前导0。
Math.clz32(0) // 32
Math.clz32(1) // 31
Math.clz32(1000) // 22
Math.clz32(0b01000000000000000000000000000000) // 1
Math.clz32(0b00100000000000000000000000000000) // 2 数组的扩展
1.Array.from()
将类数组对象和可遍历的对象转为真正的数组
let arrayLike = {
'0': 'a',
'1': 'b',
'2': 'c',
length: 3
};
// ES5的写法
var arr1 = [].slice.call(arrayLike); // ['a', 'b', 'c']
// ES6的写法
let arr2 = Array.from(arrayLike); // ['a', 'b', 'c'] // NodeList对象
let ps = document.querySelectorAll('p');
Array.from(ps).forEach(function (p) {
console.log(p);
});
// arguments对象
function foo() {
var args = Array.from(arguments);
// ...
} 对于还没有部署该方法的浏览器,可以用
Array.prototype.slice方法替代。 const toArray = (() =>
Array.from ? Array.from : obj => [].slice.call(obj)
)(); 2.Array.of()
Array.of方法用于将一组值,转换为数组
Array.of(3, 11, 8) // [3,11,8]
Array.of(3) // [3]
Array.of(3).length // 1 3.数组实例copyWithin()
数组实例的
copyWithin方法,在当前数组内部,将指定位置的成员复制到其他位置(会覆盖原有成员),然后返回当前数组。也就是说,使用这个方法,会修改当前数组。 Array.prototype.copyWithin(target, start = 0, end = this.length) 它接受三个参数。
- target(必需):从该位置开始替换数据。
- start(可选):从该位置开始读取数据,默认为0。如果为负值,表示倒数。
- end(可选):到该位置前停止读取数据,默认等于数组长度。如果为负值,表示倒数。
这三个参数都应该是数值,如果不是,会自动转为数值。
4.数组实例的find()和findindex()
数组实例的
find方法,用于找出第一个符合条件的数组成员。它的参数是一个回调函数,所有数组成员依次执行该回调函数,直到找出第一个返回值为true的成员,然后返回该成员。如果没有符合条件的成员,则返回undefined。 [1, 4, -5, 10].find((n) => n < 0)
// -5 数组实例的
findIndex方法的用法与find方法非常类似,返回第一个符合条件的数组成员的位置,如果所有成员都不符合条件,则返回-1。 [1, 5, 10, 15].findIndex(function(value, index, arr) {
return value > 9;
}) // 2 这两个方法都可以接受第二个参数,用来绑定回调函数的
this对象。 5.数组实例的fill()
fill方法使用给定值,填充一个数组。
['a', 'b', 'c'].fill(7)
// [7, 7, 7]
new Array(3).fill(7)
// [7, 7, 7] fill方法还可以接受第二个和第三个参数,用于指定填充的起始位置和结束位置。
['a', 'b', 'c'].fill(7, 1, 2)
// ['a', 7, 'c'] 上面代码表示,
fill方法从1号位开始,向原数组填充7,到2号位之前结束。 6.数组实例的entries(),keys()和values()
ES6提供三个新的方法——
entries(),keys()和values()——用于遍历数组.唯一的区别是keys()是对键名的遍历、values()是对键值的遍历,entries()是对键值对的遍历。 for (let index of ['a', 'b'].keys()) {
console.log(index);
}
// 0
// 1
for (let elem of ['a', 'b'].values()) {
console.log(elem);
}
// 'a'
// 'b'
for (let [index, elem] of ['a', 'b'].entries()) {
console.log(index, elem);
}
// 0 "a"
// 1 "b" 如果不使用
for...of循环,可以手动调用遍历器对象的next方法,进行遍历。 let letter = ['a', 'b', 'c'];
let entries = letter.entries();
console.log(entries.next().value); // [0, 'a']
console.log(entries.next().value); // [1, 'b']
console.log(entries.next().value); // [2, 'c'] 7.数组实例的includes()
Array.prototype.includes方法返回一个布尔值,表示某个数组是否包含给定的值,与字符串的
includes方法类似 [1, 2, 3].includes(2); // true
[1, 2, 3].includes(4); // false
[1, 2, NaN].includes(NaN); // true 没有该方法之前,我们通常使用数组的
indexOf方法,检查是否包含某个值。 if (arr.indexOf(el) !== -1) {
// ...
} 8.数组的空位
数组的空位指,数组的某一个位置没有任何值。比如,
Array构造函数返回的数组都是空位。 Array.from方法会将数组的空位,转为undefined,也就是说,这个方法不会忽略空位。
Array.from(['a',,'b'])
// [ "a", undefined, "b" ]
扩展运算符(...)也会将空位转为undefined。
[...['a',,'b']]
// [ "a", undefined, "b" ]
copyWithin()会连空位一起拷贝。
[,'a','b',,].copyWithin(2,0) // [,"a",,"a"]
fill()会将空位视为正常的数组位置。
new Array(3).fill('a') // ["a","a","a"]
for...of循环也会遍历空位。
let arr = [, ,];
for (let i of arr) {
console.log(1);
}
// 1
// 1
上面代码中,数组arr有两个空位,for...of并没有忽略它们。如果改成map方法遍历,空位是会跳过的。
entries()、keys()、values()、find()和findIndex()会将空位处理成undefined。
// entries()
[...[,'a'].entries()] // [[0,undefined], [1,"a"]]
// keys()
[...[,'a'].keys()] // [0,1]
// values()
[...[,'a'].values()] // [undefined,"a"]
// find()
[,'a'].find(x => true) // undefined
// findIndex()
[,'a'].findIndex(x => true) // 0 函数的扩展
1.ES6 允许为函数的参数设置默认值,即直接写在参数定义的后面
function log(x, y = 'World') {
console.log(x, y);
}
log('Hello') // Hello World
log('Hello', 'China') // Hello China
log('Hello', '') // Hello 2.rest参数
ES6 引入 rest 参数(形式为“...变量名”),用于获取函数的多余参数,这样就不需要使用
arguments对象了。rest 参数搭配的变量是一个数组,该变量将多余的参数放入数组中。 // arguments变量的写法
function sortNumbers() {
return Array.prototype.slice.call(arguments).sort();
}
// rest参数的写法
const sortNumbers = (...numbers) => numbers.sort(); 3.扩展运算符
扩展运算符(spread)是三个点(
...)。它好比 rest 参数的逆运算,将一个数组转为用逗号分隔的参数序列。 console.log(...[1, 2, 3])
// 1 2 3
console.log(1, ...[2, 3, 4], 5)
// 1 2 3 4 5
[...document.querySelectorAll('div')]
// [<div>, <div>, <div>] 替代数组的apply方法
// ES5的写法
function f(x, y, z) {
// ...
}
var args = [0, 1, 2];
f.apply(null, args);
// ES6的写法
function f(x, y, z) {
// ...
}
var args = [0, 1, 2];
f(...args); 另一个例子是通过
push函数,将一个数组添加到另一个数组的尾部。 // ES5的写法
var arr1 = [0, 1, 2];
var arr2 = [3, 4, 5];
Array.prototype.push.apply(arr1, arr2);
// ES6的写法
var arr1 = [0, 1, 2];
var arr2 = [3, 4, 5];
arr1.push(...arr2); // ES5
new (Date.bind.apply(Date, [null, 2015, 1, 1]))
// ES6
new Date(...[2015, 1, 1]); 扩展字符串的应用
1.合并数组
// ES5
[1, 2].concat(more)
// ES6
[1, 2, ...more]
var arr1 = ['a', 'b'];
var arr2 = ['c'];
var arr3 = ['d', 'e'];
// ES5的合并数组
arr1.concat(arr2, arr3);
// [ 'a', 'b', 'c', 'd', 'e' ]
// ES6的合并数组
[...arr1, ...arr2, ...arr3]
// [ 'a', 'b', 'c', 'd', 'e' ]、 2.与解构赋值结合
const [first, ...rest] = [1, 2, 3, 4, 5];
first // 1
rest // [2, 3, 4, 5]
const [first, ...rest] = [];
first // undefined
rest // []:
const [first, ...rest] = ["foo"];
first // "foo"
rest // [] 3.函数的返回值
var dateFields = readDateFields(database);
var d = new Date(...dateFields); 4.字符串
let str = 'x\uD83D\uDE80y';
str.split('').reverse().join('')
// 'y\uDE80\uD83Dx'
[...str].reverse().join('')
// 'y\uD83D\uDE80x' 5.实现了Iterator接口的对象
let arrayLike = {
'0': 'a',
'1': 'b',
'2': 'c',
length: 3
};
// TypeError: Cannot spread non-iterable object.
let arr = [...arrayLike]; 6.Map和Set结构,Generator函数
var go = function*(){
yield 1;
yield 2;
yield 3;
};
[...go()] // [1, 2, 3] 4.严格模式
两种方法可以规避这种限制。第一种是设定全局性的严格模式,这是合法的。
'use strict';
function doSomething(a, b = a) {
// code
} const doSomething = (function () {
'use strict';
return function(value = 42) {
return value;
};
}()); 5.name属性
函数的
name属性,返回该函数的函数名。 var f = function () {};
// ES5
f.name // ""
// ES6
f.name // "f" var f = function () {};
// ES5
f.name // ""
// ES6
f.name // "f" const bar = function baz() {};
// ES5
bar.name // "baz"
// ES6
bar.name // "baz" 6.箭头函数
var f = () => 5;
// 等同于
var f = function () { return 5 };
var sum = (num1, num2) => num1 + num2;
// 等同于
var sum = function(num1, num2) {
return num1 + num2;
}; 注意
箭头函数有几个使用注意点。
(1)函数体内的this对象,就是定义时所在的对象,而不是使用时所在的对象。
(2)不可以当作构造函数,也就是说,不可以使用new命令,否则会抛出一个错误。
(3)不可以使用arguments对象,该对象在函数体内不存在。如果要用,可以用Rest参数代替。
(4)不可以使用yield命令,因此箭头函数不能用作Generator函数。
上面四点中,第一点尤其值得注意。this对象的指向是可变的,但是在箭头函数中,它是固定的。
0 条评论
下一页
为你推荐
查看更多